CSS 3: las nuevas propiedades

Publicado el 20 de Diciembre, 2007 Las posibilidades que permitir la nueva versin de CSS tiene el potencial de cautivar a ms de un desarrollador. En el siguiente artculo veremos una lista de estas nuevas propiedades, ejemplos de su funcionamiento y algunas ideas prcticas de como utilizarlas en nuestros proyectos, cuando vea la luz. En el artculo sobre CSS 3: ms social que nunca, habl sobre las novedades a grandes rasgos del nuevo CSS 3, ahora tratar de detallarlas un poco ms con ejemplos de cdigo. Las nuevas propiedades han sido agrupadas en varios mdulos segn sus prestaciones. La siguiente lista de nuevas propiedades ha sido extrada 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 caractersticas destacan que se podr agregar mltiples background a un objeto, los borders podrn 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 mltiples background son agregadas mediante coma ( , ). El nivel de precedencia es de menos a ms, es decir, el que est de ltimo es el background de encima.

Multi-column Layout
Ahora ser ms sencillo crear diseos con mltiples columnas sin etiquetas adicionales. Esta caracterstica me ha parecido extraordinaria y muy til. En el primer ejemplo, vemos la implementacin de esta opcin en la versin 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 definicin es ms sencilla y requiere menos procesamiento

<div class="entry-content" content"> </div> .entry-content { column-count: 2; column-gap: 30px; }

Advanced Layout:

Esta nueva caracterstica 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 cuadrculas invisibles para maquetar pginas con un aspecto como libro o revista y jugar con el tamao 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 diseo con cuatro columnas, una foto en medio de la columna 2 y 3 y un titulo de pgina, todo al ms puro estilo de una revista. As que ya no hay excusas que poner cuando el diseador 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 hipervnculos). Este tipo de selector podran ser utilizados en otros elementos y de hecho as puede ser, a excepcin del navegador Internet Explorer que no los soporta. Los nuevos selector seran:

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 ensimo 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 ensimo 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 versin de CSS 3 este lista para poder empezar a utilizarla en nuevos desarrollos. Fuente: http://www.maestrosdelweb.com/editorial/css-3-las-nuevas-propiedades/