Comment la propriété CSS `content` fonctionne-t-elle pour l'élément `img` dans WebKit ?

Question

Il y a longtemps, une ébauche de la spécification CSS3 Generated Content a été rédigée, qui permettait à l'utilisateur d'avoir accès à l'ensemble du contenu. content propriété pour tout élément HTML (pas seulement les pseudo-éléments ::before/::after), sans aucune restriction formelle pour les éléments vides ou remplacés. Elle était autrefois supportée par Opera Presto ( 1 , 2 ) et, au moins dans une certaine mesure, par WebKit ( 3 ). À la fin de 2011, l'implémentation de WebKit de content para img semble effectivement le convertir d'un élément remplacé vide en un élément non remplacé, comme l'élément span (même son menu contextuel a changé, supprimant des options comme "Enregistrer l'image sous..."). Il a également permis d'appliquer des pseudo-éléments tels que img::before .

Dans l'implémentation actuelle de Blink (Chrome etc.), seeting content à la propriété img n'a aucun effet visible. Mais l'élément img a clairement une structure différente selon qu'il est chargé correctement ou qu'il est cassé : s'il est chargé, il est affiché par l'inspecteur de DOM comme un simple élément vide, mais s'il est cassé, il expose la structure interne de Shadow DOM comme ceci :

<div id="alttext-container" style="overflow: hidden; border: 1px solid silver; display: inline-block; box-sizing: border-box; padding: 1px;">
  <img id="alttext-image" width="16" height="16" align="left" style="margin: 0px; float: left; display: inline;">
  <div id="alttext" style="overflow: hidden; display: block;">Alt text</div>
</div>

Probablement parce que la cassure img est affiché à l'aide de l'ombre div il est possible d'y appliquer des pseudo-éléments dans ce cas uniquement ( 4 ).

WebKit actuel ne prend pas en charge les pseudo-éléments de img . Mais il est intéressant de noter qu'au moins dans la version iOS 9.2.1, Safari commence à les prendre en charge après avoir défini l'attribut content pour cette img ( 5 ).

Pourquoi cette propriété fait-elle un tel changement ? Je suppose que si un élément vide reçoit du contenu (même généré), le navigateur doit fournir quelque chose pour afficher ce contenu, en remplaçant effectivement l'élément vide par une sorte de conteneur (comme l'ombre de Blink). div id="alttext-container" ), et ce conteneur peut avoir des pseudos. Ai-je tort ? Et ce comportement n'a-t-il pas été supprimé dans les dernières versions de WebKit ?

Answer 1

La propriété de contenu telle que définie dans CSS 2.1 s'applique uniquement aux pseudo-éléments :before et :after. Selon les règles CSS, vous pouvez spécifier n'importe quelle propriété pour n'importe quel élément, mais les spécifications ont des limites quant aux propriétés qui "s'appliquent" (c'est-à-dire qui ont un effet sur) aux différents éléments.

El Module de contenu généré et remplacé par CSS3 Le projet de document de travail de la Commission européenne décrit la propriété du contenu comme s'appliquant à tous les éléments. Il contient un exemple de remplacement du contenu d'un élément h1 par une image, et il est certain que l'on pourrait faire de même avec un élément img.

Mais ce n'est qu'un projet de travail. Les ressources habituelles sur l'état de la mise en œuvre de CSS, QuirksMode.org CSS info et Caniuse.com, n'indiquent pas la situation ; elles décrivent seulement la prise en charge du contenu pour :before et :after (ce qui est plutôt universel, sauf pour IE 7 et les versions antérieures.