La interfaz básica de usuario en Css3 (1): pseudoclases de estado y la nueva propiedades de Outline 26.3.12

La interfaz básica de usuario en Css3 (1): pseudoclases de estado y la nueva propiedades de Outline

El 17 de Enero de 2.012 el C3w publicó el documento "CSS Basic User Interface Module Level 3 (CSS3 UI)" con el status de "working Draft" en el que recoge las especificaciones de los elementos que componen la interfaz básica de usuario en un documento.
Estas nuevas pseudoclases se proveen para estilizar los elementos en función del estado en que se encuentren.

Las nuevas pseudoclases de estado:

• :default
• :valid
• :invalid
• :in-range
• :out-of-range
• :required
• :optional
• :read-only
• :read-write

:default

Es estado por defecto en que se encuentra un elemento que está en un grupo de similares a él. Ejemplo típico son las opciones de un menú, items de un select...

:valid || :invalid

Un elemento es : valid o :invalid con respecto a la validez semántica de datos definidos por una especificación diferente (por ejemplo la relacionada con los form). Un elemento que carezca de validez semántica en los datos que contiene no será ni válido ni inválido. En los casos que no haya restricciones tal elemento siempre sería: válido.

:in-range || :out-of-range

Estas pseudoclases se aplican sólo a elementos que tienen limitado sus valores a un conjunto de ellos determinado. Por ejemplo: texto en un campo sólo numérico.

:required || :optional

Sólo para campos de formularios que es obligado u opcional ingresar algún valor antes de ser procesado. En otros elementos no son válidas estas dos pseudoclases.

:read-only || :read-write

Un elemento cuyo contenido no es modificable por el usuario es de sólo lectura (:read-only). Sin embargo, los elementos cuyos contenidos son modificables por el usuario (como campos de entrada de texto) se considera que está en un estado lectura-escritura (:read-write). En los documentos típicos, la mayoría de elementos son de sólo lectura. Sin embargo, puede ser posible (por ejemplo, en un editor) que cualquier elemento convertirse en :read-write.

Este mismo documento recoge otros pseudoelementos, pero con la advertencia de estar en riesgo, así que sólo para que te suenen:
::value || ::choices || ::repeat-item || ::repeat-index

Nueva propiedad para outline

A las ya recogidas en Css2.1 (color, estilo y anchura) añade outline-offset que define la distancia al borde del elemento donde dibujarlo. Las unidades del valor son las mismas que las permitidas para indicar tamaños: px, em, pt...
Hasta ahora, si quería separar el outline del borde del elemento recurría a "transform: scale().

Próximo:

Los nuevos cursores y otras utilidades

Kseso

the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso