CSS 3: las nuevas propiedades

Publicado el 20 de Diciembre, 2007

Las posibilidades que permitirá la nueva versión de CSS tiene el potencial de cautivar a más de un desarrollador. En el siguiente artículo veremos una lista de estas nuevas propiedades, ejemplos de su funcionamiento y algunas ideas prácticas de como utilizarlas en nuestros proyectos, cuando vea la luz.

En el artículo sobre CSS 3: más social que nunca, hablé sobre las novedades a grandes rasgos del nuevo CSS 3, ahora trataré de detallarlas un poco más con ejemplos de código. Las nuevas propiedades han sido agrupadas en varios módulos según sus prestaciones. La siguiente lista de nuevas propiedades ha sido extraída de CSS3.:

Nuevas propiedades

Bordes: border-color, border-image, border-radius, box-shadow.
Backgrounds: background-origin, background-clip, background-size, layering multiple background images.
Color: HSL colors, HSLA colors, RGBA colors opacity.
Texto: text-shadow, text-overflow.
Interface: box-sizing, resize.
Selectores: attribute selectors.
Formatos: media queries, multiple column layout, speech.

Backgrounds y Borders:

Entre las principales características destacan que se podrá agregar múltiples background a un objeto, los borders podrán ser redondos con posibilidad de indicar el radio de curvatura.

HTML:

<div class="vcard" vcard">
      <div class="addr-bl" bl">
            <div class="addr-tr" tr">
…
            </div>
      </div>
</div>

CSS:

.vcard {
      background-color: #000;
      background-image:
      url(a-grad.gif),
      url(a-bl.gif),
      url(a-tr.gif);
      background-repeat:
      repeat-x,
      no-repeat,
      no-repeat;
      background-position:
      0 0,
      100% 0,
      100%;
}

Pueden darse cuenta que en este caso, los múltiples background son agregadas mediante coma ( , ). El nivel de precedencia es de menos a más, es decir, el que está de último es el background de encima.

Multi-column Layout

Ahora será más sencillo crear diseños con múltiples columnas sin etiquetas adicionales. Esta característica me ha parecido extraordinaria y muy útil. En el primer ejemplo, vemos la implementación de esta opción en la versión actual de CSS. Para este caso, debemos crear dos clases CSS y dos objetos DIV para simular la multi-columna.

<div class="entry-content" content">
      <div class="col first">
…
     </div>
      <div class="col">
…
      </div>
</div> 

.entry-content .col {
      float: left;
      width: 467px;
      margin-left: 30px;
} 

.entry-content .first {
      margin-left: 0;
}

Y en CSS 3 la definición es más sencilla y requiere menos procesamiento

<div class="entry-content" content">
…
</div> 

.entry-content {
      column-count: 2;
      column-gap: 30px;
}

Advanced Layout:

Esta nueva característica permitirá organizar los elementos en pantalla de una mejor manera y combinarlos de diferentes maneras sin etiquetas adicionales.

Grid Positioning:

Dará la posibilidad que agregar reglas con cuadrículas invisibles para maquetar páginas con un aspecto como libro o revista y jugar con el tamaño y las propiedades de los objetos para hacer que los elementos “floten” entre las posiciones.

<div class="entry-content">

      <h2>What is Sushi?</h2>
…
            <img src="sushi.jpg" class="photo" alt="" />
… 

</div>
.entry-content {
      grid-columns:
            (30px * *)[4];
      grid-rows:
            9em 33.3% *;
      column-count: 4;
      column-gap: 30px;
} 

.entry-content h2 {
      float: page top left;
      width: 6gr;
      height: 1gr;
      margin-left: -30px;
} 

.entry-content img.photo {
      float: page bottom left;
      float-offset: 4gr 1gr;
}

La respuesta a la pregunta de que si el ejemplo anterior es bastante confuso de entender a simple vista es, sí. En palabras en un poco confuso explicarlo, pero el ejemplo anterior muestra un diseño con cuatro columnas, una foto en medio de la columna 2 y 3 y un titulo de página, todo al más puro estilo de una revista. Así que ya no hay excusas que poner cuando el diseñador nos proponga hacer algo así en HTML.

Selectors:

El concepto de selector es un poco complicado de explicar, y todo debido a que este tipo de propiedades son muy poco utilizadas. Algunos ejemplos de selector que si utilizamos son: :hover y :visited (los selector de hipervínculos). Este tipo de selector podrían ser utilizados en otros elementos y de hecho así puede ser, a excepción del navegador Internet Explorer que no los soporta. Los nuevos selector serían:

E:only-of-type: un elemento que es único en su tipo.
E:not(s): un elemento que no coincide con los selector simples.
E ~ F: un elemento F precedido de un elemento E.
E:nth-child: un objeto que es el enésimo hijo del nodo padre.
E:nth-last-child: un objeto que es el último hijo del nodo padre.
E:nth-of-type: un elemento que es el enésimo nodo hijo de otro elemento.
E.first-of-type: el primer elemento de un tipo.

Las posibilidades para el uso de selector son realmente muchas. Ahora faltará que la nueva versión de CSS 3 este lista para poder empezar a utilizarla en nuevos desarrollos.