CSS 3: las nuevas propiedades

Estás en Inicio / Editorial / Desarrollo Web

20.12.2007

CSS 3: las nuevas propiedades

Por Juan Manuel Lemus | 7,005 Lecturas
Archivado en: CSS, Desarrollo Web

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.

Lecturas recomendadas:

Califica esta nota:

(9 votos, promedio: 4.56 de 5)

Loading ...

Sobre el autor

Juan Manuel Lemus
Editor del blog DotPress. Creador de la metodología de desarrollo L5 y jefe del proyecto Apperture Web Framework.

Comentarios

12 comentarios en total.

Miguel 20.12.2007 - 08:24 - #

Una pregunta tonta pero que me confunde, ¿Que determina que css 3 salga a luz publica?. que un navegador la adopte y listo?. y si los demas no lo hacen?… me confunde, estamos claros que los navegadores hacen lo que le da la gana con los estandares, pero como se regula el lanzamiento de este nuevo estandar.
Stuardo -StR- Rodríguez 20.12.2007 - 09:33 - #

Lo mismo pregunto…. que navegadores ya están reconociéndolo? que falta para que se concrete?
groove rider 20.12.2007 - 09:47 - #

EXELELNTE !!!

Genial que comiencen a pensar un poco mas en la parte grafica, ya que si con CSS 2 todavía había que emplear unos cuantos trucos para generar un contenido estético agradable. Pero con CSS 3 ya no hay excusa … TODOS A USARLO YA!!!
Gerardo 20.12.2007 - 16:31 - #

Por una parte me da alegria que las CSS 3 esten a punto de ver la luz. Por el otro lado un poco de desesperacion por que no creo que todos los navegadores las implementen a la brevedad y de manera consistente.
kerberoS 21.12.2007 - 08:26 - #

De verdad muy bueno, es hora de poner en practiva las nuevas propiedades
Juan Manuel Lemus 21.12.2007 - 12:37 - #

En respuesta a las preguntas, les comento que falta muy poco para el lanzamiento de CSS 3. Recordemos que la parte de estándares de la Web, es manejada por la W3C. Hay rumores que para la segunda mitad de 2008 lo veamos a luz. El trabajo actual está orientado a pulir detalles. Los navegadores determinarán cuando sacan el soporte pero es muy seguro que lo saquen cuanto antes, en especial por la gran batalla que se está consertando en estos momentos. Ya hay versiones de las nuevas propiedades en navegadores como Opera y Safari/WebKit. Firefox y Internet Explorer (al menos yo), no he visto mayores adelantos.
JP 26.12.2007 - 21:07 - #

Exelente los ejemplos, hay muchas cosas que actualmente tengo que hacer con varias capas y con la llegada de CSS3 el numero de capas a usar disminuye bastante… La mas interesante es la opcion de poder agregar multiples fondos.
Carlos Zamora 29.12.2007 - 10:30 - #

Excelentes noticias y muy buenos ejemplos.
Espero que pronto pueda ver la luz y habria que buscar la manera de que el proceso de estandarización en los buscadores sea mucho más rápida.
Toni Valle 31.12.2007 - 08:45 - #

En mi opinión, todas esas características ya deverían haber existido en versiones anteriores de css y estar ya implementadas en las versiones actuales de firefox y explorer. Adaptarlas ahora solo puede conllevar problemas.
Jhp 01.02.2008 - 09:58 - #

Soy principiante y me gustaria saber, si el nuevo css3 tiene mas compatibilidad en los navegadores tanto explorer como firefox. quiero decir si es mas estandard para los dos navegadores.
Andres Camilo Sanchez R 20.05.2008 - 07:52 - #

Seria espectacular que implementaran CSS3 los navegadores y no continuar con la politica IE de no adoptar a toda costa los avances de la tecnologia.

Bueno espero que sean mas los pros que los contras.
Ricky 17.06.2008 - 06:13 - #

Muchas características ya existían pero no eran compatibles.