Jak działa własność "content" CSS dla elementu `img` w WebKit?

Question

Dawno temu istniała wersja specyfikacji CSS3 Generated Content, która zezwalała na właściwość for any HTML element (nie tylko :: przed/:: po pseudo elementach), bez żadnych formalnych ograniczeń dla pustych lub zamienionych elementów. To było kiedyś obsługiwane przez Operę Presto (1, 2) i, przynajmniej w pewnym stopniu, przez WebKit (3). Do końca 2011 roku implementacja przez WebKit elementu content dla elementu img zdała się skutecznie przekonwertować go z pustego zamienionego elementu na niezastępowany element, taki jak span (nawet menu kontekstowe zmieniono, usuwając opcje takie jak "Zapisz obraz jako ..."). Umożliwiło to również zastosowanie pseudo elementów, takich jak img::before.

W obecnej implementacji Blink (Chrome itp.), Seeting content właściwość elementu img nie ma widocznego efektu. Ale element img ma wyraźnie inną strukturę w zależności od tego, czy został załadowany poprawnie, czy jest uszkodzony: jeśli jest załadowany, jest pokazywany przez Inspektora DOM jako prosty pusty element, ale jeśli jest uszkodzony, eksponuje wewnętrzną strukturę DOM Cienia w ten sposób:

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

Prawdopodobnie dlatego złamaną img jest wyświetlany za pomocą cienia div s, możliwe jest zastosowanie elementów pseudo do niego w tym przypadku tylko (4).

Obecny pakiet WebKit nie obsługuje pseudo elementów dla img. Ale co ciekawe, przynajmniej iOS 9.2.1 Safari zaczyna je wspierać po ustawieniu właściwości content dla tego img (5).

Dlaczego ta właściwość wprowadza taką zmianę? Domyślam się, że jeśli pusty element dostaje jakąkolwiek treść (nawet wygenerowaną), przeglądarka musi dostarczyć coś, co wyświetli tę zawartość, skutecznie zastępując pusty element jakimś rodzajem kontenera (jak cień Blink div id="alttext-container"), a ten kontener może mieć pseudos. Czy się mylę? I czy to zachowanie nie zostało usunięte z najnowszych wersji WebKit?

Answer 1

The content property as defined in CSS 2.1 dotyczy: przed i: tylko po pseudo-elementach. Zgodnie z regułami CSS można określić dowolną właściwość dowolnego elementu, ale specyfikacje mają ograniczenia co do właściwości "stosuje się do" (tj. Mają wpływ na) różne elementy.

The CSS3 Generated and Replaced Content Module, robocza wersja robocza, opisuje właściwość content jako stosowaną do wszystkich elementów. Ma przykład zastąpienia zawartości elementu h1 obrazem iz pewnością można to zrobić dla elementu img.

Ale to tylko robocza wersja robocza. Typowe zasoby dotyczące statusu implementacji CSS, informacji CSS QuirksMode i Canejse.com, nie wskazują na sytuację; opisują jedynie wsparcie dla treści dla: before i: after (która jest raczej uniwersalna z wyjątkiem IE 7 i wcześniejszych)