Aunque no hay motivos para no utilizar ya HTML5 y CSS3 la web sigue en movimiento.
Las actualizaciones cada vez más rápidas de los navegadores,excepto IE 
, permiten que las nuevas especificaciones vayan tomando presencia en la web.
Ya tenemos el primer borrador de CSS4 de www.w3.org, aunque no lo soporten aún ningún navegador es interesante ver hacia dónde va la web.
Recordemos que no es una versión nueva de CSS. En CSS se trabaja por módulos y CSS4 es el estado de trabajo donde se proponen modificaciones o nuevos módulos. Hablamos del nivel 4 de los módulos de CSS.
Vía desarrolloweb
Novedades CSS4
Aunque podemos utilizar SASS o LESS para ampliar las posibilidades de CSS veamos algunas propuestas de este borrador de CSS4.
- Nuevo pseudo selector
:matches(). Con CSS4 esta regla
:matches(section, article, aside, nav) h1{ font-size: 3em; }
Equivaldría a:
section h1, article h1, aside h1, nav h1{ font-size: 3em; }
- Especificar el elemento de la cadena al que queremos aplicar el estilo. Si necesitamos aplicar un estilo a las listas desordenadas (ul) pero sólo cuando un usuario ha hecho click en un elemento de esa lista lo podremos hacer indicando el elemento con un $ (aunque podría cambiar)
$ul li.clicked
{ background: white; } :local-linkpseudo-class. Con esto podríamos dar un estilo distinto a aquellos enlaces internos de nuestro propio dominio.any-link()pseudo-class Daría estilo a cualquier enlace haya sido visitado o no.column(),:nth-column(), y:nth-last-columnpseudo-classes Podremos apuntar por ejemplo a las columnas impares con :nth-column(odd)
El resto de novedades os la dejo en esta tabla del borrador, sólo las del nivel 4
| Pattern | Meaning | Section | Level |
|---|---|---|---|
E:not(s1, s2) | an E element that does not match either compound selector s1 or compound selector s2 | Negation pseudo-class | 3/4 |
E:matches(s1, s2) | an E element that matches compound selector s1 and/or compound selector s2 | Matches-any pseudo-class | 4 |
E[foo="bar" i] | an E element whose foo attribute value is exactly equal to any (ASCII-range) case-permutation of bar | Attribute selectors: Case-sensitivity | 4 |
E:lang(fr, en) | an element of type E in either language «fr» or language «en» (the document language specifies how language is determined) | The :lang() pseudo-class | 2/4 |
E:local-link | an E element being the source anchor of a hyperlink of which the target is the current document | The local link pseudo-class | 4 |
E:local-link(0) | an E element being the source anchor of a hyperlink of which the target is within the current domain | The local link pseudo-class | 4 |
E:current | an E element that is currently presented in a time-dimensional canvas | Time-dimensional Pseudo-classes | 4 |
E:current(s) | an E element that is the deepest :current element that matches selector s | Time-dimensional Pseudo-classes | 4 |
E:past | an E element that is in the past in a time-dimensional canvas | Time-dimensional Pseudo-classes | 4 |
E:future | an E element that is in the future in a time-dimensional canvas | Time-dimensional Pseudo-classes | 4 |
E:indeterminate | a user interface element E that is in an indeterminate state (neither checked nor unchecked) | The indeterminate-value pseudo-class | 4 |
E:default | a user interface element E that | The default option pseudo-class :default | 3-UI/4 |
E:in-rangeE:out-of-range | a user interface element E that | The validity pseudo-classes | 3-UI/4 |
E:requiredE:optional | a user interface element E that | The optionality pseudo-classes | 3-UI/4 |
E:read-onlyE:read-write | a user interface element E that | The mutability pseudo-classes | 3-UI/4 |
E:nth-match(n of selector) | an E element, the n-th sibling matching selector | Structural pseudo-classes | 4 |
E:nth-last-match(n of selector) | an E element, the n-th sibling matching selector, counting from the last one | Structural pseudo-classes | 4 |
E:column(selector) | an E element that represents a cell in a grid/table belonging to a column represented by an element that matches selector | Grid-Structural pseudo-classes | 4 |
E:nth-column(n) | an E element that represents a cell belonging to the nth column in a grid/table | Grid-Structural pseudo-classes | 4 |
E:nth-last-column(n) | an E element that represents a cell belonging to the nth column in a grid/table, counting from the last one | Grid-Structural pseudo-classes | 4 |
E /foo/ F | an F element ID-referenced by an E element’s foo attribute | Reference combinator | 4 |
?E > F | an E element parent of an F element | Determining the subject of a selector + Child combinator | 4 |
Os recomiendo también este enlace sobre las novedades de CSS4 What’s slated for CSS4 Selectors? – destroy/dstorey [en]
Cursos de CSS y diseño web
Te recordamos que desde video2brain tenemos un extenso catálogo de cursos de diseño web y de CSS.
Los recientes:
De Dreamweaver:
Y estos dos para quienes quieren dar sus primeros pasos en el diseño web
Recuerda que estos cursos puedes realizarlos gratis y con tutorías si estás trabajando por cuenta ajena en España con las ayudas de la Formación Tripartita.
Y si los quieres todos hazte con una suscripción
Deja una respuesta