Contenido

Técnicas CSS3 que estoy deseando que lleguen a mis manos

22 ago

+ 22

Si miramos al horizonte empieza a deslumbrar el futuro del CSS, con la salida de CSS3 la vida de los diseñadores web va a mejorar considerablemente y no es para menos, por que con las mejoras que se están acercando ¿quien no se aprovechará de ellas?

Echemosle un vistazo a las que parecen serán las más interesantes.

Multi-columnas

Sin duda, el tabular en columnas el texto de nuestras páginas es algo que hasta ahora era realmente complicado (por no decir imposible). Con la nueva especificación del CSS está tarea será coser y cantar debido a que una serie de atributos nos permitirán modificar nuestro contenido de una forma realmente interesante. 

En navegadores como Firefox 1.5 y superiores, estás mejoras ya están disponibles de forma exclusiva.

DIV {
  width: 400px;
  column-count: 4;
  column-width: 100px;
  column-gap: 10px
  column-rule: none;
}

Multi-background

Otra de las características con las que me quiero enfrascar es la del multi-background. La posibilidad de usar varios background para un elemento es algo hasta ahora impensable y motivo para destrozar la semántica del sitio con divs que simulen formar parte unos de los otros.

background: url('http://www.joostdevalk.nl/images/body-top.gif')
	top left no-repeat,
url('http://www.joostdevalk.nl/images/banner_fresco.jpg')
	top 11px no-repeat,
url('http://www.joostdevalk.nl/images/body-bottom.gif')
	bottom left no-repeat,
url('http://www.joostdevalk.nl/images/body-middle.gif')
	left repeat-y;

Esquinas redondeadas

Otra cruz de los diseñadores web son las tan usadas en la web 2.0 esquinas redondeadas, hasta ahora los sistemas más comunes nos obligaban a crear un entramados de elementos que nos recordaban los engendros aquellos originados en tablas… Ahora con una sola línea podremos hacer que nuestros elementos posean esas elegantes esquinas redondeadas.

<div style=" background-color: #ccc;
             border-radius: 5px;
             border: 1px solid #000;
             padding: 10px;" >...</div>

Tablas zebra

Una forma de mejorar el visionados de datos tabulados a los usuarios es usar tablas zebra, para diferencia entre líneas. De esta forma facilitamos, incluso a simple vista, la interpretación de los datos. Hasta ahora esto era necesario hacerlo desde un lenguaje de servidor o haciendo que el cliente de algúnas formas poco recomendada, pero completamente funcional, se encargara de montarlas…. CSS3 mejora considerablemente este punto gracias a la pseudo clase nth-child.

tr:nth-child(2n+1) /* represents every odd row of a HTML table */
tr:nth-child(odd)  /* same */
tr:nth-child(2n)   /* represents every even row of a HTML table */
tr:nth-child(even) /* same */

/* Alternate paragraph colours in CSS */
p:nth-child(4n+1) { color: navy; }
p:nth-child(4n+2) { color: green; }
p:nth-child(4n+3) { color: maroon; }
p:nth-child(4n+4) { color: purple; } 

Opacidad 

El tema de la opacidad de elementos es algo que hasta ahora mediante hacks, javascript y muchos elementos no estandarizados, podíamos emular y conseguir salir de paso. Ahora está tarea quedará delegada al navegador que ya estará preparado para tratarla como esté estipulado.

<div style=" background: rgb(255, 0, 0) ; opacity: 0.2;"></div>
<div style=" background: rgb(255, 0, 0) ; opacity: 0.4;"></div>
<div style=" background: rgb(255, 0, 0) ; opacity: 0.6;"></div>
<div style=" background: rgb(255, 0, 0) ; opacity: 0.8;"></div>
<div style=" background: rgb(255, 0, 0) ; opacity: 1;"></div>

Resize

Hasta ahora si queríamos hacer que nuestros elementos fuera personalizables por el usuario en cuanto a tamaño, teníamos que recurrir a scripts javascript que alteraban los atributos de nuestro elemento. Con CSS3, dejaremos que el navegador gestione todo este proceso simplemente indicandolo con la propiedad resize.

iframe,object[type^="text/"],
object[type$="+xml"],object[type="application/xml"]
{
  overflow:auto;
  resize:both;
}

Media paramétrizados

Otra gran idea de los pensadores a la hora de decidir que poner y que no poner en la nueva especificación. CSS3 incorporará un sistema de parametrización de media con el que podremos hacer virguerías como estas:

@media all and (min-width: 640px) {
	div.example#min-width {
		background-color: #0f0;
	}
}	
@media screen and (max-width: 1100px) {
	div.example#max-width {
		background-color: #0f0;
	}
}

Ymuuchas cosillas más… 

Extra

Como extra y pendiente de leerlo detenidamente el nuevo sistema de posicionamiento de elementos, se acabaron problemas de elementos flotantes y elementos relativos. 

Enlaces relacionados

  1. CSS3.info
  2. CSS3 W3C
  3. CSS Advanced Layout 
  • Gua! que bestia! todabia no salio y ya te lo sabes a la perfeccion… jejeje
    MAESTRO!!!

    Saludos,

    Lucas.

  • Pues me parece un gran paso, porque realmente conseguir algunas de esas cosas es un ..ñazo tal como está ahora. Saludos

  • esta excelente pero la pregunta es lo van a utilizar todos los navegadores por igual o IE sacara el css3 SP1?

  • Tengo la misma inquietud que frogx3. De hecho, apostaría a que IE no lo admitirá hasta que salga IE8… que como tarde lo mismo que el IE7… Pero bueno, es lo que siempre pasa con estas cosas tan nuevas, una pena que no vivamos en un mundo ideal donde todos los navegadores cumplen los estándares…

  • y la compatibilidad hacia atrás?, ahora ya tenemos que maquetar para IE6, IE7 y FF (como mínimo, en algunos casos también para ópera, etc.) ahora vamos también que hacer una distinción entre los que acepten css3 y los que no? tener que hacer todo el trabajo doble? al estilo actual y al nuevo estilo?

  • frogX3, Xema:
    La idea es que el usuario empieze a dejar de usar versiones antiguas de navegadores. El problema es que Microsoft no puede ahora mismo coger y obligar a todos los usuarios a migrar a IE7 (con actualización crítica) y así acercarse más a los estandares (IE7 los respeta bastante más que IE6)… habrá que esperar a que poco a poco la gente vaya desechando los actuales navegadores (el cuento de nueva acabar).

    Mientras tanto los desarrolladores a claudicar, no podemos detener el futuro por que la gente no quiera migrar. Habría que hacer ver a los usuarios que el navegador moderno ofrece más posibilidades, pero esto se hace deficil cuando un 60% (a ojo) no tiene ni idea de que es un navegador…. ¿si le añadieramos el MSN? :D

    Saludos

  • Lo de la compatibilidad hacia atrás es un arma de doble filo pero podemos dar gracias a que en Web, excepto algunos radicales, se ha implementado en general bien.

    Esto es: en general cuando sale un estándar nuevo se hace lo posible para mantener el equilibrio entre usar lo nuevo y soportar lo anterior durante algún tiempo. Después de algunos años sólo algunos talibanes siguen obsesionados con la retrocompatibilidad. El resto ha pasado a lo que sigue (y bien que hacen).

    Hasta ahora no he conocido a ninguno que defienda la retrocompatibilidad que esté dispuesto a dejar de usar tablas, frames/iframes, object/embed o de incluir JavaScript y CSS. Según su teoría deberían hacerlo porque no siempre han existido en web esas tecnologías.

    En todo la tecnología cambia y mejora y las anteriores van haciendose obsoletas. Ciertos tipos de coche no pueden circular sin adaptaciones, otros no pueden circular sobre cualquier carretera.

    Que navegas por lynx? Pues ya sabes lo que toca, es tu decisión.

    A final de cuentas lo importante es soportar estándares, y un estándar nuevo se supone que sobreescribe al anterior (idealmente). Si el estándar fue hecho de forma de no ser retrocompatible pues se vivirá con eso, como vivimos con las páginas que no funcionaban más que con IE 5 o Netscape 2.

    La parte importante es que no TENEMOS que hacer nada. Si yo hoy decido hacer una pagina en el HTML de NCSA Mosaic puedo hacerlo, sabiendo que se va a ver un poco cutre. Si quiero incluir cosas hechas en CSS3 hoy mismo puedo hacerlo, y nadie podrá verlo.

    Nunca TENEMOS que hacer nada, es decisión de cada uno qué implementa y qué no. Y responsabilidad de cada uno entender las consecuencias de esas decisiones.

  • Desde luego es un gran pasao hacía el futuro pero para cuando la gente deje de usar Ie6 y pase al Ie7 como mínimo yo creo que ya habra casi un css4 que nos hara la boca agua.

  • Uaaaah, la de multi-background es un puntazo! muy necesario…

  • Microsoft ha tardado cerca de 10 años en meter algunas cosas de CSS 2.0 (data del 1998) en su navegador. En IE7 metió :hover para todos los elementos, child selectors, alpha para el PNG, posicionamiento fijo…

    http://blogs.msdn.com/ie/archive/2005/07/29/445242.aspx

    Pero aún así sigue sin tragar ni :after ni :before, idem con min/max-width y min/max-height. Y esto son parámetros del CSS 2.0, del 2.1 como aún no es final mejor se lo perdonamos.

    Yo con que todos los navegadores tragasen el 2.1 al 100% me conformaba. A ver si Microsoft espabila y entonces hacer páginas webs será más comodo para todos nosotros.

    Páginas para ver que traga cada navegador:

    http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(CSS)
    http://webdevout.net (ahora mismo no rula pero tienen estadísticas de cuanto % soportan cada uno de los navegadores más conocidos).

  • Es genial el CSS3 !, no creo que tarde mucho más en salir el Firefox 3, lástima que el IE 8 saldría recien para el próximo S.O (por el 2009/2010).

    Asi que calculo que habrá un largo rato a seguir con el css 2…

  • Increible pero cierto, vaya las mejoras son notables, pero de nada servira si la gente no actualizan sus navegadores ); una lastima…

  • esta buenissimo, yo ya lo esoty probando con safari y Firefox, la verdad que eso de los bordes dredondeados me facilito mucho las cosas.

    lo que si escuche que IE no va a dar soporte a CSS3 hasta la version 9. será el momento que todos los usuarios tiren el IE.

    todos tendriamos que diseñar para los demas navegadores.

    saludos, me encanta la pagina

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.