Come funziona la proprietà CSS `content` per l'elemento` img` in WebKit?

Question

Molto tempo fa c'era una bozza di specifiche del contenuto generato CSS3 che consentiva la proprietà contentfor any HTML element (non solo :: before/:: after pseudo-elementi), senza alcuna restrizione formale per elementi vuoti o sostituiti. Un tempo era supportato da Opera Presto (1, 2) e, almeno in una certa misura, da WebKit (3). Entro la fine del 2011, l'implementazione di content per di WebKit sembrava convertirla efficacemente da un elemento sostituito sostituito a elemento non sostituito come span (anche il suo menu di scelta rapida è stato modificato, rimuovendo opzioni come "Salva immagine con nome ..."). Inoltre ha reso possibile l'applicazione di pseudo elementi come img::before.

Nell'implementazione corrente di Blink (Chrome ecc.), La proprietà della proprietà non ha alcun effetto visibile. Ma l'elemento img ha una struttura diversa a seconda che sia caricato correttamente o sia danneggiato: se caricato, viene mostrato da DOM Inspector come un semplice elemento vuoto, ma se rotto, espone la struttura Shadow DOM interna come questa:

<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> 

Probabilmente perché il rotto img viene visualizzato con l'aiuto delle ombre div s, è possibile applicare elementi pseudo ad essa in questo caso solo (4).

WebKit corrente non supporta pseudo elementi per img. Ma, interessante, almeno iOS 9.2.1 Safari inizia a supportarli dopo aver impostato la proprietà content per quello img (5).

Perché questa proprietà effettua tale modifica? Immagino che se un elemento vuoto ottiene qualsiasi contenuto (anche generato), il browser deve fornire qualcosa per visualizzare questo contenuto, sostituendo efficacemente l'elemento vuoto con una sorta di contenitore (come l'ombra di Blink div id="alttext-container") e questo contenitore può avere pseudos. Ho sbagliato? E questo comportamento non è stato rimosso dalle ultime versioni di WebKit?

Answer 1

The content property as defined in CSS 2.1 si applica a: prima e: dopo solo pseudo-elementi. In base alle regole CSS, è possibile specificare qualsiasi proprietà per qualsiasi elemento, ma le specifiche hanno limitazioni su quali proprietà "si applicano a" (cioè, hanno effetto su) vari elementi.

Il CSS3 Generated and Replaced Content Module, una bozza di lavoro, descrive la proprietà del contenuto come applicabile a tutti gli elementi. Ha un esempio di sostituzione del contenuto di un elemento h1 con un'immagine, e sicuramente lo stesso potrebbe essere fatto per un elemento img.

Ma è solo una bozza di lavoro. Le solite risorse sullo stato di implementazione dei CSS, le informazioni sui CSS di QuirksMode.org e Caniuse.com, non indicano la situazione; descrivono solo il supporto ai contenuti per: before e: after (che è piuttosto universale tranne IE 7 e precedenti ..