Uzun zaman önce content özelliğini for any HTML element izin CSS3 Oluşturulan İçerik spec bir taslak vardı (sadece :: önce/:: sonrasında sözde elemanları) boş veya değiştirilen elemanları herhangi bir resmi kısıtlama olmaksızın,. Bir zamanlar Opera Presto (1, 2) ve en azından bir ölçüde WebKit (3) tarafından desteklenmiştir. 2011'in sonunda, WebKitiçin uygulamasının span değiştirilen öğeden değiştirilemeyen bir öğeye etkili bir şekilde dönüştürülmüş gibi görünüyordu (içerik menüsü bile değiştirildi, 'Resmi farklı kaydet ...'). Ayrıca, img::before gibi sahte öğeleri uygulamak mümkün kıldı.CSS `content` özelliği WebKit'teki` img` öğesi için nasıl çalıştı?
Geçerli Göz Kırpma (Chrome vb.) Uygulamasında, özelliğinin img öğesinin seçilerek görünür bir etkisi yoktur. Ama img eleman açıkça düzgün yüklenmiş veya kırık olup olmadığına bağlı olarak farklı bir yapıya sahiptir: yüklerse, bu basit boş unsur olarak DOM Denetleyicisi tarafından gösterilir ancak eğer kırılırsa, bu gibi iç Gölge DOM yapısını ortaya çıkarır:
<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>
Muhtemelen kırık img çünkü gölge div s yardımıyla görüntülenir, bu durumda sadece (4) kendisine sözde elemanları uygulamak mümkündür.
Güncel WebKit img için sözde elemanları desteklemez. Ancak, ilginç bir şekilde, en azından iOS 9.2.1 Safari, bu (5) için content özelliğini ayarladıktan sonra bunları desteklemeye başlar.
Bu özellik neden böyle bir değişiklik yapıyor? Boş bir öğenin herhangi bir içerik alması durumunda (hatta üretilir), tarayıcının bu içeriği gösterecek bir şey sağlaması, boş öğeyi bir çeşit kapsayıcı (Blink'in gölgesi div id="alttext-container" gibi) ile değiştirmesi ve bu kapsayıcının pseudos. Yanlış mıyım? Ve bu davranış en son WebKit sürümlerinden kaldırılmadı mı?
ilginç bir şekilde .. safari de sonradan öğelerini gösterir ve kırılmasa bile görüntüyü göstermez .. –
Evet, Safari'de bu 'img' elemanın render model değiştirir' content' özelliği yüklenmemiş/kırık devlet, sahip gibi görünüyor. yani Blink davranışları farklıdır. bu arada , sen OS test etmedi X Safari? –
Şaşırtıcı, bu yüzden hiçbir yerde belgelenmiş bulunamıyorum .. –