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.
13 comentarios, 9 referencias
+
#