Posts Tagged ‘css’

CSS Hack para Chrome y Safari

Friday, September 5th, 2008

[Vía Pinceladas Web]

Era inevitable y posiblemente será necesaria la aparición de un filtro o hack css que nos permita aplicar una determinada regla CSS que solamente entienda el nuevo navegador de Google, Chrome. El que presentamos a continuación también funciona en Safari, dado que ambos usan el motor de Webkit.

El hack se basa en el selector CSS "E:nth-of-type(n) " que selecciona el elemento (E) situado en la posición (n) de nuestro documento. Por ejemplo, div:nth-of-type(3) aplicaría la regla que definamos al tercer div que aparezca en nuestro documento. Con esta explicación espero que entendáis porqué funciona el siguiente filtro:

CSS:
  1. body:nth-of-type(1) div.caja {
  2.        background: blue;
  3. }

En este caso los div con un class "caja" del primer elemento "body" de nuestro documento se verán con fondo azul únicamente en Chrome y Safari.

Si queréis el codigo completo para probar...

HTML:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  4. <title>Chrome CSS Hack Demo</title>
  5. <style type="text/css">
  6. div.caja {
  7.        border: 1px solid red;
  8.         width: 200px;
  9.         height: 200px;
  10. }
  11. body:nth-of-type(1) div.caja {
  12.     background: blue;
  13. }
  14. </style>
  15. </head>
  16.     <div class="caja">
  17.    
  18.     </div>
  19. </body>
  20. </html>

Posicionamiento de elementos en CSS

Tuesday, May 6th, 2008

Solo recomendar la lectura de este artículo (en inglés) en el que se resumen muy bien cómo funciona el posicionamiento de elementos en CSS.

El artículo aborda de forma sencilla y clara atributos como:

  • Display
  • Position
  • z-index

Y parece ser el primero de una serie...

Sobre Internet Explorer 8 y CSS

Wednesday, March 12th, 2008

Como desarrollador web y maquetador una de las cosas que me interesa cuando sale un nuevo navegador es su implementación de las CSS. Investigando un poquito sobre qué hará IE8 me he llevado unas cuantas sorpresas bastante gratas:

  • Soporta contenido generado (generated content): esto es algo fundamental. Casi todos los maquetadores lo solemos poner como lo primero en nuestras listas de deseos.
  • Texto vertical!
  • Tablas "inline"
  • Selectores avanzados: parece que empieza a medio funcionar el E[attr=val]. Este es la ostia... llevo esperándolo media vida, por fin podremos poner un estilo diferente a un elemento en función del valor de un atributo. El ejemplo más claro, diferenciar un enlace con "_self" de uno con "_blank"

Algunas referencias

Internet Explorer 8 pasa el Acid2 test

Thursday, December 20th, 2007

[Vía Pinceladas Web]

Internet ExplorerSi! ya se empieza a hablar de Internet Explorer 8; y una de las primeras noticias sobre la próxima versión de este navegador es que, tras años y años de saltarse a la torera los estándares web, concretamente el HTML y las CSS, los chicos de Microsoft han conseguido que su navegador pase el Acid2 Test..

Es una buena noticia y una indicación más de que, al menos a nivel de márketing, el equipo de desarrollo de Internet Explorer sigue con la orientación pro-estándares que inició con la versión 7 del popular navegador.

El Acid2 es una prueba que consiste en conseguir que el navegador renderice una imagen mediante HTML y CSS 2 y para hacerlo se utilizan reglas bastante complejas. Pasar esta prueba implica que el navegador cumple soporta los estándares de desarrollo web antes mecionados a un altísimo nivel.

Acid2 Test

Fuentes descargables desde CSS… ahora en WebKit

Tuesday, October 9th, 2007

El que uno pueda utilizar en su web fuentes que no sean del sistema es un viejo sueño de cualquier diseñador web que, de viejo, algunos habíamos olvidado, aunque curiosamente en su ponencia de Fundamentos 07 Bert Boss pasaba por encima del tema comentando que era una de las prioridades pero que había problemas con derechos de autor y otros no específicados.

En realidad es parte de la especificación CSS2, siiiii, aquella del año 1998... pero la guerra que aquella época mantuvieron Netscape e Internet Explorer (sobre todo éste, que pasaba del ttf) impidió que se utilizase esta posibilidad:

CODE:
  1. @font-face {
  2.    font-family:"comic sans";
  3.    src:url(comic.ttf) format("truetype");
  4.    }

Tampoco es que ahora se pueda utilizar ya que Microsoft sigue apostando por el "popular" formato .eot y el resto creo que por ahora pasan del tema. A lo que vamos, el que parece lo va a implementar y de forma estándar, va a ser WebKit, el navegador de open source que es la base de Safari (el navegador de Mac).

¿Esto quiere decir que la cosa va a cambiar? ¿Vamos a poder utilizar tipografías distintas en nuestras web? bueno, pues mi opinión es que por ahora nada de nada... Safari es un navegador minoritario con una influencia relativamente escasa. Pero por fin alguien retoma el asunto depués de mucho tiempo y a lo mejor se despiertan las conciencias de Firefox y Ópera y Chris Willson que es el responsable de Internet Explorer y un tio mu apañao... decide que ya es hora de implementar las fuentes descargables. Seguiremos soñando.

Más información:

PD: Putada... esto nos impediría decirle al cliente que no puede usar la Comic Sans en su web

FW – Ponencia 1: 10 años de CSS y contando

Wednesday, October 3rd, 2007

Bien, vale, muy W3C. Tipo... somos conscientes de los problemas, esto va muy rápido, me mareo... pero que lo vamos a cambiar todo en cuanto podamos.

Una breve historia de las CSS, de la primera especificación a la segunda.

Lo más sustancioso la explicación de cómo están priorizando los módulos que quieren implementar en CSS3.

  1. La característica a implementar tiene que ser técnicamente posible, obviamente. ¿Se puede programar? ¿Los ordenadores serán capaces de procesarlo?
  2. Hay suficientes expertos en el grupo de trabajo W3C para desarrollarlo?
  3. Interesa a la comunidad

Y tras esto hace un breve repaso a los módulos actualmente más priorizados:

  • La rejilla, el Grid. la están abordando desde dos perspectivas: Advanced Layout y Posicionamiento en la rejilla. Son dos módulos distintos pero que van dirigidos al mismo objetivo y que incluso, podrán combinarse
  • Dispositivos móviles: lo consideran esencial. La especificiación actual tiene ya algo de interoperabilidad con dispositivos móviles, pero quieren ir más allá. Dos premisas a este respecto
    • Los moviles tienen capacidad a nivel de procesamiento como para procesar la actual CSS2
    • se va a hacer una especificación más especializada en conjunto con los fabricantes de móviles
  • Más facilidades para bordes: redondeos, sombras o imágenes para generarlos
  • Rotación de textos

Se acaba el tiempo y como todo buen miembro de la W3C, pide ayuda a la comunidad. Pero solo da tiempo a dos preguntas... de todas formas se a ofrecido a que lo asaltemos por los pasillos.

un 6