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

PatternMeaningSectionLevel
E:not(s1, s2)an E element that does not match either compound selector s1 or compound selector s2Negation pseudo-class3/4
E:matches(s1, s2)an E element that matches compound selector s1 and/or compound selector s2Matches-any pseudo-class4
E[foo="bar" i]an E element whose foo attribute value is exactly equal to any (ASCII-range) case-permutation of barAttribute selectors: Case-sensitivity4
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-class2/4
E:local-linkan E element being the source anchor of a hyperlink of which the target is the current documentThe local link pseudo-class4
E:local-link(0)an E element being the source anchor of a hyperlink of which the target is within the current domainThe local link pseudo-class4
E:currentan E element that is currently presented in a time-dimensional canvasTime-dimensional Pseudo-classes4
E:current(s)an E element that is the deepest :current element that matches selector sTime-dimensional Pseudo-classes4
E:pastan E element that is in the past in a time-dimensional canvasTime-dimensional Pseudo-classes4
E:futurean E element that is in the future in a time-dimensional canvasTime-dimensional Pseudo-classes4
E:indeterminatea user interface element E that is in an indeterminate state (neither checked nor unchecked)The indeterminate-value pseudo-class4
E:defaulta user interface element E thatThe default option pseudo-class :default3-UI/4
E:in-rangeE:out-of-rangea user interface element E thatThe validity pseudo-classes3-UI/4
E:requiredE:optionala user interface element E thatThe optionality pseudo-classes3-UI/4
E:read-onlyE:read-writea user interface element E thatThe mutability pseudo-classes3-UI/4
E:nth-match(n of selector)an E element, the n-th sibling matching selectorStructural pseudo-classes4
E:nth-last-match(n of selector)an E element, the n-th sibling matching selector, counting from the last oneStructural pseudo-classes4
E:column(selector)an E element that represents a cell in a grid/table belonging to a column represented by an element that matches selectorGrid-Structural pseudo-classes4
E:nth-column(n)an E element that represents a cell belonging to the nth column in a grid/tableGrid-Structural pseudo-classes4
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 oneGrid-Structural pseudo-classes4
E /foo/ Fan F element ID-referenced by an E element’s foo attributeReference combinator4
?E > Fan E element parent of an F elementDetermining the subject of a selector + Child combinator4

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