Molto tempo fa c'era una bozza di specifiche del contenuto generato CSS3 che consentiva la proprietà content
for 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
.Come funziona la proprietà CSS `content` per l'elemento` img` in WebKit?
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?
interessante .. safari mostra anche gli elementi seguenti e non mostra l'immagine anche se non è rotta .. –
Sì, sembra che in Safari sia la proprietà 'content', non caricato/non funzionante, che cambia il modello di rendering dell'elemento' img', che differisce dal comportamento di Blink A proposito, lo hai testato su OS X Safari? –
sorprendente, non posso trovarlo documentato ovunque però .. –