Kategoriler
Kodlama

CSS Content ve attr()

CSS’de content ve attr konularına değindim.

CSS’e çok şey borçluyuz, günümüzde var olan tüm web uygulamaları hatta neredeyse tüm mobil uygulamaların görünümleri CSS ile verilmektedir.

CSS’in “content” fonksiyonu basitçe şöyle çalışır:

.benimeleman:after {
  content: "Merhaba Dünya!";
}

Burada :after(sonrasında) veya :before(öncesinde) kullanılabilir.

Peki attr?

ATTR Attribute(Nitelik) kısaltmasıdır. CSS’de attr bir elemanın içerisindeki belirteç tagindeki(title, data-src, href vs.) değeri alıp kullanmaya yarar, şimdilik bunu yalnızca content içerisinde kullanabiliyoruz, JS ile elbette her yerde kullanılabilir.

Kullanımı şöyle:

HTML

<div class="benimeleman" data-line="Merhaba Dünya!"></div>

CSS

.benimeleman:after { 
	content: attr(data-line);
}
//veya
[data-line]:after { 
	content: attr(data-line);
}
//çıktısı: Merhaba Dünya!

//ek olarak
[data-line]:after { 
	content: "[Mesajım: " attr(data-line) "]"; 
}
//çıktısı: [Mesajım: Merhaba Dünya!]

Örnek için bakın: https://codepen.io/wolkanca/pen/xxqOVJo

CSS content and attr

Kaynaklar:

developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

developer.mozilla.org/en-US/docs/Web/CSS/attr()

tsafaelmali.medium.com/css-attribute-selector-nedir…

Master CSS Selectors / CSS seçicilere bakış
CSS selectors/seçiciler ID’ler ve Class’larla sınırlı değildir aslında CSS’de birçok farklı seçiciler de kullanılabilir.
How to use the CSS attr() Function – CSS Tutorial
A Complete Guide to Data Attributes – CSS-Tricks

Kolay gelsin.

wolkanca.com’da CSS Content ve attr() veya diğer konular hakkında herhangi bir sorunuz varsa, sosyal medya butonları ile yorum ya da mesaj göndermekten çekinmeyin, CSS Content ve attr() için ya da değil DM kapısı her daim açık. Yazıyı beğendiyseniz paylaşın, daha fazla ilgili gönderi için hemen aşağıdaki menülere göz gezdirebilirsiniz, okuduğunuz için teşekkürler, saygılar sevgiler.

WOLKANCA

Volkan Yılmaz

Digital Marketing & WordPress & SEO - wolkanca mahallesi gmail sokak nokta com.