CSS 3: las nuevas propiedades

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:

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

[...] Si quieres una explicación detallada de cada una, recomiendo leer la fuente: Maestros del Web [...]

Miguel
20/12/2007

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.

Lo mismo pregunto…. que navegadores ya están reconociéndolo? que falta para que se concrete?

groove rider
20/12/2007

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!!!

[...] CSS 3: las nuevas propiedadeswww.maestrosdelweb.com/editorial/css-3-las-nuevas-propiedades/ por krycek242 hace pocos segundos [...]

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.

De verdad muy bueno, es hora de poner en practiva las nuevas propiedades :)

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.

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.

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.

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
1/02/2008

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.

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.

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

[...] CSS3 ya tendrá integrada una propiedad para generar bordes redondeados. Aún le falta mejorar muchas cosas, como por ejemplo, las imágenes de fondo salen de los bordes, esperomos que en futuras versiones puedan corregir eso. Les comparto la liga de donde saco la noticia: [...]

las propiedades sin duda estan muy bien, sobre todo las de Bordes y Backgrounds, aunque en mi opinion, no creo que tengan mucho exito, la razon es que pueden llegar a tener problemas con los navegadores, otra cosa es con css vercion 2.1 ya se podian hacer muchas cosas de este tipo, tan solo hacia falta ingenio.

Oscar C.
23/10/2008

En respuesta a Jhp (aunque ya comentó hace meses) es que no es cuestión de que sea compatible entre navegadores, sino que es cuestión de los desarrolladores de los mismos implementar el estándar o no.

A fecha de hoy, Webkit y Opera incorporan el 100% de los puntos finalizados de CSS3, incluidos todos los selectores nuevos. Firefox 3 incorpora todo menos cierta parte de los selectores. Y bueno, Internet Explorer… os comento lo que han dicho los desarrolladores en la MDN (Microsoft Developer Network). No piensan en ningún momento añadir soporte para CSS3 en IE8, sólamente soportarán CSS 2.1 (que lleva usándose ya desde hace “siglos”) y no tienen pensado rectificar. Ante esto muchos diseñadores han dejado directamente de utilizar IE por no querer cumplir los estándares, e incluso algunos han propuesto boicots contra el mismo.

Un saludo

Miguel
30/10/2008

Muerte a Internet explorer, si no quieren adoptar el estandar, no hay que usarlo más y punto, yo he optado por poner baches para ie 6 en la mayoría de mis sitios, y un vínculo para descargar cualquier otro navegador compatible (vease savethewebdevelopers.com)

Saludos

[...] ya me imagino todo lo que lograrán con CSS 3, ¿les gustaría compartir algún otro ejemplo que hayan [...]

[...] ya me imagino todo lo que lograrán con CSS 3, ¿les gustaría compartir algún otro ejemplo que hayan [...]

Hola a todos los desarrolladores alguien sabe de algún librito css2 que utilize estilos tipo blogg porfa si lo tienes compartelo, y una pregunta con css3 ya IE y Firefox + Opera serán compatibles para que ya no hagan lo que se les pega la gana con los divs??
bueno un abrazo y gracias por el dato.

seba64
1/09/2009

Han visto alguna vez que internet explorer o alguna de las páginas de microsoft cumpla con algún estándar

seba64, ie jamaz, lamentablemente no entiendo porque todos los browsers no deberian compartarse de la misma manera.
con respecto a la nota:

Firefox, Konqueror, Opera or Safari/Webkit.

esos browsers soportan css3, saludos =)

Hola,
esto es la guerra, el problema sobre todo esta en ie 6 ahoram mismo estará en 20% de maquinas y bajando aun asi sigue estando el problema en explorer y por ahora simpre sera un lastre porque el resto de navegadores estan bien hechos en todos los aspectos, incluso la etiqueta video de html 5 de firefox, todo es inclreible la css3 todo pero nunca tendremos posibilidad de usarlo hasta ue la gente deje de usar explorer da igual la version todas son pesimas, pero ademas no se salvan ninguna explorer 8 parecia que funcionaba bien pero nisiquiera entiende la css3 entera.

Yo creo que quedan algunos años por lomenos de explorer 6 que por ahora es el mayor lastre en cualquier caso despues saldra en 2010 explorer 9 un año despues y sera otro explorer para el que estrujarte la cabeza siempre tendre 3 y esperate que el 6 todavia LE queda. Basicamente hay un monton de gente que solo usa ese o bien porque no sabe o bien por que no le dejan.

Y hay muchas empresas que tienen comprado un explorer 6 corporativo y no lo pueden cambiar para toda la empresa por lo tanto lo tienen años y años.

Alomojor si empezamos ya a utilizar la css 3 la gente se da cuenta de que tiene que actualizar, YOUTUBE ya lo hace, muerte a ie6, yo en paginas de clientes estoy empezando a no maquetar para explorer 6 pero por si me lo piden especificamente les cobro un plus bastante caro puesto que quieren que se vea las paginas en un navegador obsoleto y muy antiguo de mas de 8 años.

Os lo digo a todos imaginaros la cantidad de posibilidades que tendriamos utilizando la css 3: de todo !!!! con un poco de jquery y css3 = paginas en 3d, galerias de imagenes increibles, de todo, seria flash pero con 100.0000 veces menos recusos.

Por ejemplo si teneis safary creo que vale para win y para mac, se mueve con el cursor y la barra espaciadora. ES ESTA PAGINA ES UNA GALERIA EN 3D

http://www.satine.org/research/webkit/snowleopard/snowstack.html

Pensar que con la css3 se prodria pensar en otro tipo de navegacion y de interaccion con el usuario y ES EL FUTURO A DIA DE HOY PERO GRACIAS A MICROSOFT NO PODEMOS USARLO.

[...] CSS3: las nuevas propiedades:  Introducción a las principales propiedades de la nueva versión de las Hojas de Estilo en Cascada. [...]

[...] trabaje un sitio web incluyendo estilos de CSS3, un estándar aún en desarrollo y no implementado al 100% por navegadores, y debo decir que [...]

3635