soy Kseso y esto EsCSS

Secretos y quebrantos de los Pseudoelementos Css clásicos y la propiedad "ALT" 6.11.14

Particularidades de los pseudoelementos Css clásicos e incongruencias de los navegadores y la propiedad css ALT según el último documento del W3c "CSS Pseudo-Elements Module Level 4"

Secretos y quebrantos de los Pseudoelementos Css clásicos y la propiedad "ALT"

Un repaso a todo lo relativo a los pseudoelementos. Lo tradicional definido en los ditintos documentos Css donde han ido apareciendo y lo más nuevo aportado por el último documento del consorcio relativo a ellos como la propiedad alt: CSS Pseudo-Elements Module Level 4, recién publicado y aún con olor a "tinta". Está fechado el 4 de Noviembre de 2014 y marcado como W3c Editor’s Draft.

Pero quizás antes de entrar en detalles, lo mejor sea aclarar qué se entiende en el ámbito de Css por selector de pseudoelemento y las diferencias con las pseudoclases

Pseudoelementos Css módulo nivel 4 — Image from page 40 of "Delle allvsioni, imprese, et emblemi...

El selector de pseudoelemento es una herramienta para poder apuntar desde la hoja de estilos a una parte del documento que no tiene entidad propia (categoría de elemento u objeto en el DOM) y que por lo tanto, de no existir éste, no sería posible aplicarle estilos de forma independiente a esa parte.

Pese a que en el documento citado no hay referencia ninguna a las pseudoclases, quizás venga bien hacer un inciso para ver en qué se diferencian unos de otras.

El selector de pseudoclase es una herramienta para poder apuntar desde la hoja de estilos a un elemento del DOM en base a alguna información o detalle ajeno al propio elemento y DOM.

Como ves la diferencia es sustancian entre lo que son los selectores de pseudoelementos y pseudocalases:
.- los primeros apuntan a partes del documento que no son o no están marcados como elementos independientes, los segundos sí.
.- los selectores por pseudoclases apuntan a elementos por particularidades ajenas a la estructura del Dom, como pueden ser que ocupen un lugar determinado (el primero, el último, hermanos pares o impares), que hayan sido objeto de alguna acción por el usuario (:hover, :active, que haya sido seleccionada), el idioma en el que esté su contenido... mientras que el pseudoelemento crea un elemento virtual.

CSS Pseudo-Elements Module Level 4

Curiosamente este documento sólo se refiere a tres tipos de pseudoelementos, dejando fuera otros que aparecen repartidos y definidos en distintos documentos del consorcio. Eso sí, todos listados en la tabla de los selectores.

Para una mayor información sobre todos los selectores de pseudoelementos consulta el artículo "Selectores Css de pseudoclases y pseudoelementos. Qué son. Todos los existentes".

Tipos de pseudoelementos recogidos

Tipográficos:
- ::first-line
- ::first-letter
Porción seleccionada
- ::selection
Contenido generado por Css
- ::before
- ::after
- - La propiedad alt
    o texto alternativo para el contenido generado por Css

::first-line pseudoelemento

El pseudoelemento ::first-line describe el contenido de la primera línea formateada por el elemento al que se aplica.

Identificando la primera línea

El pseudoelemento ::first-line sólo tiene efecto al declararse a cajas de bloque. La primera línea conformada puede ser la de un descendiente del elemento (también de naturaleza de bloque) que se mantenga dentro del flujo (esto es, que no haya sido sacado del flujo natural por estar flotado o posicionado).


/*css*/
div::first-line {...}
<!--html-->
<div>
  <p>Esta línea...</p>
</div>

En el código anterior, la primera línea del div será la del párrafo siempre que el p y div sigan siendo elementos de bloque.

See the Pen wnlGB by Kseso (@Kseso) on CodePen.

Pero si el primer elemento hijo no cumple los requisitos para generar el pseudoelemento ::first-line declarado en el padre no aplica la declaración:


<div>
  <p style="display: inline-block">Hola<br/>
       Adíos</p>
   más contenido textual
</div>

En el código anterior la primera línea conformada del div no es Hola ni tampoco Adíos:

See the Pen BKLpi by Kseso (@Kseso) on CodePen.

Puede ocurrir que la primera línea conformada de un elemento (o de su descendiente que cumpla los requisitos) exista pero sea vacía, por lo que no habría nada sobre lo que aplicar la regla. Como en el siguiente código:
<p><br/>Hola</p>
La primera línea conformada es lo anterior al salto de línea, esto es, una cadena de texto vacía.

Por todo lo anterior la primera línea de un elemento table-cell o inline-block no pueden ser la primera línea conformada de su ancestro.

Sin embargo y pese a todo lo anterior, los navegadores pueden hacer sus propias interpretaciones en las situaciones anteriores y las restricciones que les afectan. Así, en el pen anterior, Chrome dibuja en rojo la cadena textual más contenido textual y Firefox lo hace con todo el texto:

See the Pen LDuiw by Kseso (@Kseso) on CodePen.

::first-letter pseudoelemento

El pseudoelemento ::first-letter representa la primera unidad tipográfica en la primera línea formateada (::first-line)del elemento que la conforma, si no está precedida por ningún otro elemento (como imágenes o tablas en línea) en esa primera línea conformada.

El ::first-letter debe ocurrir dentro del pseudo-elemento ::first-line. Por eso todas las restricciones y observaciones hechas antes para la primera línea deberían aplicar a la primera letra. Pero de nuevo la advertencia: cada navegador es un mundo.

Propiedades aplicables a ::first-line y ::first-letter

Estos pseudoelementos no aceptan cualquier propiedad. Sólo unas pocas, según la documentación:

Propiedades aplicables a ::first-line

El pseudoelemento ::first-line genera una caja similar a los elementos inline-block pero con algunas restricciones. La siguiente lista recoge las propiedades permitidas para él:

todas las propiedades del grupo font
Las propiedades color y opacity
todas las propiedades del grupo background
Cualquier propiedad tipográfica que aplican a elementos inline
Cualquier propiedad referente al layout que aplican a elementos inline
todas las propiedades referentes a text decoration
Cualquier otra propiedad permitida para aplicar en ::first-letter en su especificación.

Propiedades aplicables a ::first-letter

El pseudoelemento ::first-letter genera una caja inline-block siempre que el valor declarado o computado para su float sea none. En caso de encontrarse flotado es igual que cualquier otro elemento flotado.

Las propiedades que le son aplicables son:

todas las propiedades del grupo font
Las propiedades color y opacity
todas las propiedades del grupo background
Cualquier propiedad tipográfica que aplican a elementos inline
Cualquier propiedad referente al layout que aplican a elementos inline
todas las propiedades referentes a text decoration
Propiedades referentes a margin y padding
Propiedades del grupo border y box-shadow
Cualquier otra propiedad permitida para aplicar en ::first-line en su especificación.

No obstante, las dos relaciones anteriores hay que tomarlas como un mínimo, pues los documentos ya avisan que cada navegador puede activar y aplicar otras propiedades además de las mencionadas.

::selection pseudoelemento

Quizás recuerdes el ya viejo (y ahora deprecated) artículo de este blog ::selection "Strike out".

Bueno, pues todo lo recogido en la entradilla y relativo a que había desaparecido de la documentación queda obsoleto. El pseudoelemento ::selection vuelve a aparecer y estar dentro.

::before y ::after pseudoelementos para generar contenido

Recordar que estos pseudoelementos se referencian como antes o después del contenido del elemento al que se aplican. No como "antes o después del elemento". Este detalle que parece nimio tiene su importancia y consecuencias.

Estos 2 pseudoelementos generan (por defecto) hijos a nivel de inline-block dentro del elemento (siempre que el valor de su contenido computado no sea none).
En puridad los elementos clasificados como vacíos no deberían generar contenido mediante estos pseudoelementos. Tales como las imágenes, inputs... étc.
Cuando el contenido generado por estos pseudoelementos cumpla con los requisitos para first-line y first-letter las declaraciones para éstos dos últimos le podrán ser de aplicación.

See the Pen etyAB by Kseso (@Kseso) on CodePen.

De nuevo la aclaración sobre su grafía: los pseudoelementos (para distinguirlos de las pseudoclases) se preceden del doble dos puntos = :: pero por retrocompatibilidad los navegadores entienden la forma vieja de sólo 1 dos puntos = :.

La propiedad 'ALT': texto alternativo para el contenido generado

El contenido generado por los pseudoelementos ::before y ::after no siempre es accesible para algunas tecnologías asistenciales (como navegadores de voz y otras).

Para dichas situaciones se propone la propiedad alt. Sólo puede declararse a los elementos que admiten la propiedad content

El valor admitido para la propiedad alt son:

none
Una cadena textual que puede estar vacía (content: '';)