Css: el contenido generado en elementos reemplazados 24.6.12

Css: el contenido generado en elementos reemplazados

Artículo original de @Catalin Rosu publicado en RedTeamDesign el 20 de Junio de 2.012
No pretendo hacer una traducción completa del mismo, aun no tengo permiso del autor. Sólo es un extracto, por lo que te recomiendo accedas al original.

Contenido generado

El uso de los pseudo-elementos :before y :after ayuda a especificar el contenido que se debe insertar antes (o después) del contenido de un elemento. Los elementos reemplazados, como la input o img no tienen ningún contenido, por lo tanto, no debería poderse utilizar contenido generado en ellos.

Pero, casi siempre hay un pero, parece que se puede utilizar el contenido generado en una serie de elementos reemplazados, que varían de un navegador a otro. Esto es algo que me ha intrigado últimamente y por eso me decidí a escribir este artículo.

¿Qué es un elemento reemplazado?

"Un elemento cuyo contenido está fuera del alcance del modelo de formato CSS, tales como una imagen, documento incrustado o subprograma."

Este es un extracto de las especificaciones, dicho de forma sencilla, sólo recuerda que un elemento reemplazado es cualquier elemento cuyo aspecto y dimensiones están predefinidos sin ningún tipo de uso de CSS.

Algunos elementos reemplazados:

• <img>
• <input>
• <select>
• <textarea>
• <object>
• <br>
• <hr>

Volviendo a nuestro tema

He visto un montón de demos interesantes como ésta, esta o esta otra que sólo funcionan en Chrome (en este momento), mientras que de acuerdo con las especificaciones, la interacción de :before y :after "con los elementos reemplazados" no está definido.

Más que eso, parece que todos estos ejemplos, Chrome tiene algo que ver con el uso de la sombra del DOM.

Sombra DOM

¿Qué diablos es la sombra DOM?. Esa fue exactamente la primera pregunta que surgió en mi cabeza cuando me enteré de esto. Todos los ejemplos anteriores que he mencionado se basan en esta capacidad solo de WebKit para controlar una sombra del subárbol del DOM de un elemento.

Estoy de acuerdo que pueda parecer un poco abrumador, y por eso te recomiendo que leas el artículo de Dimitri Glazkov.

Lo que hizo en este punto Catalin Rosu es algo que escasamente se ve en la comunidad de habla española. Se plantea una duda y pide la opinión de pesos pesados en estos temas.

Lo que dice la gente

La pregunta es: ¿Es esto técnicamente un "bug" en WebKit, o debemos esperar que esto sea implementado en otros navegadores también?

Para este artículo, tuve el placer de conocer la opinión de algunos de los mejores desarrolladores web que conozco:

Quiénes opinan

Te relaciono los desarrolladores que le mandan sus opiniones al respecto, pero me limito sólo a traer aquí la opinión de dos de ellos. El resto mejor las ves in situ.

• Lea Verou
  @leaverou
• Louis Lazaris
  @ImpressiveWebs
• Roger Johansson
  @rogerjohansson
• Chris Coyier
  @chriscoyier
• simurai
  @simurai
• Thierry Koblentz
  @thierrykoblentz
• Harry Roberts
  @csswizardry

  Bueno, la especificación dice que la aplicación no está definido todavía, así que no creo que sea un error tanto como un poco demasiado entusiasmo por parte de WebKit, tal vez ...?
  Sin duda, sería genial tener a) una definición sólida y b) que la definición permita el contenido en los elementos reemplazados.

• Jeff Starr
  @perishable

  Técnicamente, los elementos sustituidos no tienen ningún contenido, y por lo tanto: before y: after no debe aplicarse en este caso. Pero también creo que las nuevas posibilidades que ofrece el nuevo DOM sombra tienen un potencial enorme y debe estudiarse más a fondo.
  Por otra parte, bien podría abrir las puertas al caos y la anarquía si los navegadores empiezan a hacer lo que quieran, fuera de las especificaciones del W3C.

Un ejemplo de prueba

Ah! Por si has llegado leyendo hasta aquí y todavía no lo tienes claro, el mismo autor, Catalin Rosu, ha creado una página para que puedas cerlo por ti mismo:
Ejemplo de Prueba
Así como otra demo, obra de Divya Manian que puedes ver aquí.
Como se puede apreciar, los resultados en los navegadores modernos son incompatibles y esto no ayuda en absoluto.

Conclusión

Creo que todos estos malentendidos se deben a la forma en que las especificaciones se escribieron sobre este asunto. Todos deben estar de acuerdo en que las especificaciones podrían haber sido más explícitas.

Esperemos que esta situación se aclare pronto para que podamos seguir avanzando y hacer que esas demostraciones trabajen de acuerdo a normas claras.

Y hasta aquí el artículo original. Ahora la cuestión es: ¿te habías topado en algún momento con estas situaciones? ¿Tienes opinión al respecto? ¿Te atreves a dejarla en un comentario?
Pues adelante, que nos encantará saberla.

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