Hoşgeldiniz
Okuma Moduna Geç
05 Nisan 2018 - 08:47
HTML Özel Nitelik (data) ve CSS attr() ile Gelen Verileri Kullanmak

Günümüzde bolca kullanılan HTML'de özel nitelikler, CSS ile kontrol edilebildiğinde oldukça faydalı bir hal alıyor. Öyle ki birçok işimizi buradan hallederek projelerimizde CSS ile daha da verimli kodlar üretebiliyoruz. Hal böyle olunca, bu konu hakkında elimizin altında bir kaynak olması açısından böyle bir konu hazırlamak istedim. CSS yardımıyla HTML Attribute'ları ile ne gibi etkileşimlere girebileceğimizi inceleyeceğiz.

Özel Nitelik Nedir?

Özel nitelik, standart olarak belirlenmiş HTML niteliklerinden (src, title, href ..) farklı olarak istediğimiz adlarda nitelik oluşturmamızdır. Bir nevi kendi niteliklerimizi oluşturup daha sonra bu niteliklerden faydalanıyoruz denilebilir.

Genel kural itibari ile verilecek isimden hemen önde data ibaresi kullanılmalıdır.

<div class="merttopuz" data-site="https://www.merttopuz.com">Mert Topuz</div>

Ayrıca bir html etiketine dilediğiniz kadar custom attribute (özel nitelik) ekleyebilirsiniz.

<div class="merttopuz" data-site="https://www.merttopuz.com" data-siteColor="#425be0">Mert Topuz</div>

CSS ile Özel Niteliklere Ulaşmak

CSS ile oluşturduğunuz özel niteliklerden faydalanmak için öncelikle HTML kısmımızın şöyle olduğunu varsayalım:

<div class="mesafe" data-city1="İstanbul" data-city2="Ankara" data-km="450"></div>
<div class="mesafe" data-city1="İstanbul" data-city2="Bursa" data-km="154"></div>
<div class="mesafe" data-city1="İstanbul" data-city2="Çanakkale" data-km="316"></div>
<div class="mesafe" data-city1="İzmir" data-city2="Muğla" data-km="226"></div>
<div class="mesafe" data-city1="Antalya" data-city2="Antalya" data-km="460"></div>

Bu yapımıza göre data-city1 niteliğimize ait değeri İstanbul olanları seçmek istediğimizde:

.mesafe[data-city1="İstanbul"]{}

şeklinde bir yapı oluşturmalıyız.


Aşağıdaki örneklerimizde bu HTML yapımızdan faydalanacağız.

<div class="mesafe" data-city1="İstanbul" data-city2="Ankara" data-km="450"></div>
<div class="mesafe" data-city1="İstanbul" data-city2="Bursa" data-km="154"></div>
<div class="mesafe" data-city1="İstanbul" data-city2="Çanakkale" data-km="316"></div>
<div class="mesafe" data-city1="İzmir" data-city2="Muğla" data-km="226"></div>
<div class="mesafe" data-city1="Antalya" data-city2="Antalya" data-km="460"></div>

Özel Niteliği CSS ile Ekrana Yazdırmak

CSS ile yapılabilecek bu seçeneğimiz sayesinde birçok işimizi kolaylaştırabiliriz. Aşağıda bu konuda işimize yarayabilecek 2 farklı örneği inceleyelim.

Ekrana hangi iki şehir arasında kaç km olduğunu şöyle bir yapı yardımı ile yazdırabiliriz:

.mesafe {
	width: 300px;
	color: #fff;
	padding: 10px 20px;
	margin-bottom: 10px;
	border-radius: 10px;
	font: normal 16px/36px Arial;
	text-align: center;
}
.mesafe:before {
	content: attr(data-city1) ' - ' attr(data-city2) ' arası ' attr(data-km) ' km\'dir.';
}
.mesafe[data-city1="İstanbul"] {
	background: #eb3b5a;
}
.mesafe[data-city1="İzmir"] {
	background: #0fb9b1;
}

ve bize çıktı olarak şöyle bir sonuç üretilecektir:

Örnek

Bu örneğimizde bir alıntı metninin görüntülendiği alanı çok daha kolay ve başarılı şekilde düzenleyebiliriz:

HTML Yapımız

<blockquote data-yazar="Yazar Adı" data-kaynak="Kaynak Site Adı">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, ducimus sunt! Voluptatem amet dolore at molestias quae doloribus possimus eos! Necessitatibus doloremque, doloribus voluptatum mollitia eum inventore numquam consequatur modi?</blockquote>

CSS Yapımız 

blockquote {
	margin: 0;
	padding: 10px 15px 10px 60px;
	border-left: 5px solid #ccc;
	position: relative;
	font: normal 14px/28px 'Arial';
	transition: all 0.25s;
}
blockquote:before {
	content: '"';
	font: bold 80px/80px "Times New Roman";
	color: #ccc;
	position: absolute;
	top: 0;
	left: 8px;
	transition: all 0.25s;
}
blockquote[data-yazar]:after {
	content: 'Yazar: ' attr(data-yazar) ' (' attr(data-kaynak) ')';
	display: block;
	border-top: 1px solid #ccc;
	margin-top: 5px;
	padding-top: 5px;
	color: #ccc;
	transition: all 0.25s;
}

blockquote:hover {
	border-left: 5px solid #0fb9b1;
}
blockquote:hover:before {
	color: #0fb9b1;
}
blockquote[data-yazar]:hover:after {
	color: #0fb9b1;
	border-top: 1px solid #0fb9b1;
}

ve çıktımız şöyle olacaktır:

Sponsorlu Bağlantı
Yorumlar
Kazim
06 Nisan 201804:51
Eline sağlık çok güzel anlatim.
130
Cevapla
1
Yorumu Beğen
0
Yorumu Beğenme
Mert Topuz
06 Nisan 201821:25
Teşekkürler hocam :)
0
Yorumu Beğen
0
Yorumu Beğenme
Bir Yorum da Sen Bırak
Adınız ve Soyadınız
Mail Adresiniz
Mail adresinizi yalnızca yönetici görüntüleyebilir.
Web Siteniz
Yorumunuz
Yorumu Gönder