Todas las novedades CSS4. Hacia dónde va el diseño web.

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 Triste, 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-link pseudo-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-column pseudo-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

Escribí esto el 4/11/2011

Usamos cookies para obtener datos estadísticos de su navegación y poder ofrecer publicidad contextual de terceros

ACEPTAR
Aviso de cookies