- Konu sahibi
- #1
CSS
Örneğin bir bağlantının başına dekoratif bir işaret eklemek için:
Tarayıcıda bağlantı metninin başında yukarı-sağa bakan ok görünür. Ok görünmüyorsa seçicinin gerçekten ilgili elemana uygulanıp uygulanmadığını, CSS dosyasının yüklendiğini ve
Ayrıca HTML özniteliğinin değeri de okunabilir. Aşağıdaki örnekte CSS,
Burada
Aşağıdaki seçim,
Dekoratif bir ikon için Unicode karakteri kullanılabilir; fakat simgenin anlamı kritikse yalnızca
Aşağıdaki örnek, HTML içeriğini koruyup yalnızca görsel bir işaret ekler:
Beklenen sonuç, paragrafın başında onay işareti ve ardından “İşlem tamamlandı” metnidir. İşaret görünmüyorsa
Evet, sözde öğede
Evet. Örneğin
content özelliği, bir öğenin veya sözde öğenin içeriğine metin, görsel ya da başka bir değer eklemek için kullanılır. En yaygın kullanım alanı ::before ve ::after sözde öğeleridir. Normal öğeye metin dizesi vermek, onun HTML metnini güncelleme yöntemi değildir. Normal öğelerde content: url(...) ile görsel değiştirme gibi ayrı kullanımlar bulunsa da bu rehber metin ve dekoratif sözde öğe üretimine odaklanır.Örneğin bir bağlantının başına dekoratif bir işaret eklemek için:
Kod:
<a class="harici-link" href="https://example.com">Örnek site</a>
Kod:
.harici-link::before {
content: "↗";
margin-right: 0.35rem;
color: #555;
}Tarayıcıda bağlantı metninin başında yukarı-sağa bakan ok görünür. Ok görünmüyorsa seçicinin gerçekten ilgili elemana uygulanıp uygulanmadığını, CSS dosyasının yüklendiğini ve
content bildiriminin ::before veya ::after üzerinde bulunduğunu kontrol edin.content nasıl çalışır?
::before, seçilen öğenin içeriğinden önce; ::after ise sonra sanal bir içerik alanı oluşturur. Bu alanın görünür olması için çoğu durumda content tanımlanır. Boş içerik gerektiğinde content: ""; yazılabilir. Ardından display, position, renk, boyut veya arka plan gibi özelliklerle bu alan biçimlendirilir.content ile sabit metin eklenebilir:
Kod:
.uyari::before {
content: "Uyarı: ";
font-weight: 700;
}Ayrıca HTML özniteliğinin değeri de okunabilir. Aşağıdaki örnekte CSS,
data-label özniteliğini kullanır:
Kod:
<span class="etiket" data-label="Yeni">Ürün</span>
Kod:
.etiket::before {
content: attr(data-label);
margin-right: 0.4rem;
padding: 0.2rem 0.4rem;
background: #eee;
}Burada
data-label değeri değiştirildiğinde CSS kodunu değiştirmeden görünen etiket de değişir. Ancak content ile eklenen metin, uygulamanın temel içeriği olmamalıdır. Önemli başlık, açıklama, form talimatı veya erişilebilirlik açısından gerekli bilgi HTML içinde bulunmalıdır.Hangi değer ne için kullanılır?
Aşağıdaki seçim,
content kullanım amacını belirlemeyi kolaylaştırır.| Değer | Örnek | Kullanım |
|---|---|---|
| Metin | content: "Yeni"; | Sabit dekoratif veya kısa yardımcı ifade |
| Boş içerik | content: ""; | Biçimlendirilecek sanal kutu oluşturma |
| Öznitelik | content: attr(data-label); | HTML özniteliğinden değer alma |
| Sayaç | content: counter(item); | Numaralandırılmış içerik oluşturma |
Dekoratif bir ikon için Unicode karakteri kullanılabilir; fakat simgenin anlamı kritikse yalnızca
content ile verilmemesi daha güvenlidir. Kullanıcıların CSS kapalıyken de anlamı görebilmesi gerekiyorsa aynı bilgi HTML metninde yer almalıdır. Benzer şekilde, liste işareti veya tırnak gibi görsel ayrıntılar için content uygundur; bir makalenin asıl paragrafını bu özellikle üretmek uygun değildir.Uygulanabilir mini örnek
Aşağıdaki örnek, HTML içeriğini koruyup yalnızca görsel bir işaret ekler:
Kod:
<p class="tamamlandi">İşlem tamamlandı</p>
<style>
.tamamlandi::before {
content: "✓";
margin-right: 0.4rem;
color: green;
}
</style>Beklenen sonuç, paragrafın başında onay işareti ve ardından “İşlem tamamlandı” metnidir. İşaret görünmüyorsa
::before yazımını, sınıf adını ve stil bloğunun sayfaya gerçekten eklendiğini kontrol edin. Metni CSS ile ekleyip HTML'den kaldırmak yerine, CSS'yi yalnızca sunum katmanında tutun. İçeriğin konumu, metni veya anlamı değiştiğinde ilk tercih HTML'yi güncellemek olmalıdır.Sık yapılan hatalar
-
contentözelliğini normal birdivveyapöğesine verip metin eklenmesini beklemek. Bunun yerine::beforeya da::afterkullanın. - Metin içeren sözde öğeye
contentyazmayı unutmak.contentyoksa sözde öğe beklenen içeriği üretmez. - Ekran okuyucular için gerekli bilgiyi yalnızca CSS ile oluşturmak. Temel içerik HTML'de bulunmalıdır.
-
attr()ile okunacak özniteliği HTML'de tanımlamamak. Öznitelik yoksa beklenen değer gösterilmez. - Büyük miktarda metni
contentile üretmek. Bu yaklaşım düzenleme, arama, kopyalama ve erişilebilirlik açısından sorun çıkarabilir.
Kaynaklar
Sık sorulan sorular
content ile resim eklenebilir mi?
Evet, sözde öğede
content: url("ikon.svg"); kullanılabilir; ancak boyutlandırma ve yerleşim için çoğu durumda background-image veya HTML içindeki gerçek img öğesi daha kontrollüdür. Anlam taşıyan görseller için alternatif metin gereksinimini de ayrıca düşünün.content ile CSS değişkeni kullanılabilir mi?
Evet. Örneğin
content: var(--etiket); yazılabilir. Değişken tırnaklı bir CSS dizesi taşımalıdır: örneğin --etiket: "Yeni";. Eksik tanım için content: var(--etiket, ""); kullanılabilir. Tırnaksız gelişigüzel bir sözcük geçerli content değeri sayılmaz.