La web sigue creciendo rápidamente, desde la salida de HTML5 al mercado todos los desarrolladores y muchas compañías se han dado cuenta que esto no puede quedarse atrás y se ha iniciado una carrera entre los navegadores web por estar a la vanguardia en cuanto a estas tecnologías.
Un ejemplo visual lo proporciona la pagina: http://html5readiness.com/ en la cual veremos claramente como cada navegador está en su propia carrera para soportar componentes nuevos como HTML5, CSS3 y JS.
Todos los diseñadores de sitios web tienen claro que desde CSS que se debía separar el contenido del texto, ya que de esta manera HTML es nuestro sitio web limpio y todos los estilos, efectos e imágenes serán proporcionadas por nuestra hoja de estilos CSS, dándonos la libertad de cambiar estilos a todo nuestro website editando un solo documento maestro y sin tener que poner el sitio en mantenimiento en ningún momento, y lo más importante con la seguridad de estar cambiando solo el aspecto visual de la pagina.
CSS3 está disponible desde el 2011 y muchos programadores han experimentado cosas nuevas con este código, está lleno de funciones interesantes, desde transiciones y efectos dinámicos hasta dibujos! hay programadores que han dibujado con CSS3!
Dibujo hecho con CSS3
W3C
Y no se detiene ahí ya que hay muchas páginas que se han dedicado a publicar ejemplos del potencial de CSS3 de manera gratuita, hay mucho código con ejemplos que se comparten de manera gratuita en la internet, dejando a el programador la libertad de tomarlo y experimentar con él, pero para todas las bondades que ofrece CSS3 esto sigue creciendo ya que la W3C ha estado trabajando paralelamente en la versión CSS4.
Salida CS4
Las especificaciones técnicas de CSS4 ya están escritas, muchas de estas ideas de lo que el W3C está esperando en el CSS4 Especificación de Selectores.
Las 2 ediciones más sonadas son «not» y «matches» ya antes en CSS3 estaba el selector :not() pero el selector ;matches() es lo nuevo.
Not
En las especificaciones de CS4 dice que
:not()
puede ser usado para ambos selectores y pseudo clases. no trabajara con
:after o :before
pero todo lo demás funcionara bien. Supongamos que deseas aplicar un estilo a todo excepto los links sería algo así:
*|*:not(:link):not(:visited) {
/* Some CSS */
}
Muy útil en un proyecto largo ya que esto ciertamente cortara líneas de código los cual nos lleva a matches()
Agrego que *|* es un carácter regla general que significa «Aplicar a todo» y se aplicara a todos los elementos CSS.
Matches
matches() literalmente empareja cualquier pseudo clase, no puedes mezclar matches() y not(). Las especificaciones mencionan que esto:
:matches(:not( … ))
no es posible, lo cual tampoco tendría mucho sentido, aquí hay un ejemplo de cómo se aplica a todos los objetos que tengan estado :hover
*|*:matches(:hover) {
/* Some CSS */
}
Variedad de Selectores directos
Habrán algunos nuevos selectores, pero tendrán varios usos.
Reference Combinators
Este es complejo, digamos que tenemos estas líneas de código:
<label for="name">Your Name</label> <input id="name" type="text" />
El atributo for, por defincion deberia ser el mismo que la ID de ingreso, tiene que ver con elementos conectados. Esta pseudo class te permite apuntar elementos conectados. Si se desea apuntar el input cuando la etiqueta esta hover se podria escribir esto:
label:hover /for/ input {
/* CSS goes here */
}
Apuntar Padres
en CSS la ultima cosa que escribes es generalmente lo que estas apuntando:
div a {
}
Todos los que hemos trabajado con CSS sabemos que estamos seleccionando todas las anclas de divs. Con este selector podemos usar la misma sintaxis, pero apuntar al div, podra sonar inutil pero si tu quisieras hacer eso solo removerias el a y eso haria que busques el div de manera directa, en estas lineas podremos apuntar al padre de un hijo.
ul li:hover < ul { /* Trying to target parent. This doesn't work */
}
Ahora con CSS4 se podra hacer asi:
ul! li:hover {
}
Ahora el padre esta seleccionado cuando una li dentro está en estado hover. la oportunidad de agregar lo que CSS puede hacer es increíble y definitivamente uno de los mejores pensamientos para los elementos CSS. Notar que otras especificaciones mencionando apuntar a los padres como $E > F en vez de un signo de exclamación.
conclusiones personales y recomendaciones.
CSS4
Definitivamente los nuevos selectores ahorraran líneas de código a esos programadores web y les darán mas opciones al momento de crear nuevos sitios, pero esto no quiere decir que los esfuerzos de CSS3 hayan sido en vano, NO! tanto CSS3 como CSS4 son código CSS cuando la versión CSS4 salga al publico general este traerá nuevos SELECTORES que debemos aprender a usar, pero eso es todo! los nuevos selectores solo harán que escribir largas hojas de estilo sea un poco mas rápido y eficiente, los viejos selectores de CSS3 seguirán estando ahí y es por eso que los esfuerzos invertidos aprendiendo y haciendo que todos empiecen a guiarse por los estándar no serán desperdiciados.
En general las especificaciones a los nuevos selectores se ve muy interesante, ayuda en los proyectos largos, pero esto deberá pasar por un proceso de adaptación ya que todos los navegadores deben actualizarse hace CSS4.
Otras especificaciones de CSS4 están en estos documentos:
todas ellas aun en desarrollo así que tendremos que esperar a que la W3C nos dé un borrador más completo. La W3C siempre está abierto a ideas y sugerencias, esta es una tecnología que seguirá moldeando el futuro de internet y será usada por millones de desarrolladores web todos los días.
Bibliografía
Conferencia CSS4
Selectores
http://www.inserthtml.com/2012/01/css4-selectors/#css4
Futuro
http://coding.smashingmagazine.com/2013/01/21/sneak-peek-future-selectors-level-4/
