Sayaçlar ve content

CSS'te sayaçlar vasıtasıyla başlık numaralandırması yapılabilir. Bu doğrultuda kullanılan özellikler counter-reset ve counter-increment özellikleridir. Bu özelliklerle birlikte sıklıkla kullanılan bir başka özellik de content özelliğidir. Bu nedenle bu özelliğin de burada anlatılması uygun görülmüştür.

counter-reset

Bu özellik ile bir sayaç tanımlanır ve sayaca bir numara girilir. Numara girilmemesi durumunda sayaç sıfıra eşit olacaktır. Verilen seçiciye her erişildiğinde sayaç belirtilen değere eşitlenir. Bu özelliğin varsayılan değeri none değeridir ve hiçbir sayacın bir değere eşitlenmeyeceği manasına gelir. Bu özellikle yapılan biçimlendirmeler alt elemanlara aktarılmaz.


counter-increment

Bu özelliğin karşısına önceden tanımlanmış bir sayaç ismi ve artış miktarı girilir. Artış miktarı girilmezse varsayılan değer olan 1 kullanılır. Bu özelliğin kullanıldığı seçiciye her erişildiğinde sayaç artış gösterir. Bu özellikle yapılan biçimlendirmeler de alt elemanlara aktarılmaz.


content

Bu özellik ile elemanların başına ya da sonuna içerik eklenebilir. Bir elemanın başına ya da sonuna yazı ekleme işlemi Sahte Eleman Seçicileri kısmında gösterilmiştir. Burada özellikle değinilmesi gereken nokta bu özellikle sayaç numaralarının da elemanların önüne ya da arkasına eklenebileceğidir. Bunu yapmak için content özelliği şu şekilde kullanılır:

content: counter(sayaç_ismi);

Hem sayaçları hem de content özelliğini içeren aşağıdaki örneği incelemek yararlı olacaktır.

<!DOCTYPE html>
<html>
<head>
<title>CSS Sayaçlar ve content</title>
<meta charset="UTF-8">
<style>
body{
counter-reset: baslik;
}
h1{
counter-increment: baslik;
counter-reset: altbaslik;
}
h2{
counter-increment: altbaslik;
}
h1::before{
content:counter(baslik)". ";
}
h2::before{
content:counter(baslik)"."counter(altbaslik)". ";
}
</style>
</head>
<body>
    <h1>Örnek Başlık 1</h1><br>
        <h2>Örnek Alt Başlık 1</h2><br>
        <h2>Örnek Alt Başlık 2</h2><br>
        <h2>Örnek Alt Başlık 3</h2><br>
    <h1>Örnek Başlık 2</h1><br>
        <h2>Örnek Alt Başlık 4</h2><br>
        <h2>Örnek Alt Başlık 5</h2><br>
        <h2>Örnek Alt Başlık 6</h2><br>
</body>
</html>

Yukarıdaki örnekte <body> elemanı içerisinde "baslik" isimli bir sayaç tanımlanmıştır. <h1> elemanlarıyla her karşılaşıldığında bu sayacın bir artması sağlanmıştır. Ayrıca <h1> elemanında "altbaslik" isimli bir sayaç tanımlanmıştır her <h1> elemanı ile karşılaşıldığında bu sayaç sıfırlanacaktır. <h2> elemanlarında ise bu sayacın artması sağlanmıştır. Daha sonra content özelliği ile başlık ve alt başlıklar numaralandırılmıştır. İlk <h1> elemanında "baslik" isimli sayaç 1'dir. Bu nedenle bu başlık 1 diye numaralandırılır. Daha sonra alt başlıklar olan <h2> elemanları bulunmaktadır. Bunlar da "altbaslik" isimli sayaç her seferinde artacağı için 1.1, 1.2 ve 1.3 diye numaralandırılır. İkinci <h1> elemanına ulaşıldığında "baslik" isimli sayaç yine artarak 2 olur, "altbaslik" isimli sayaç da sıfırlanır. İkinci ana başlık 2 diye numaralandırılacaktır. <h2> elemanlarında "altbaslik" isimli sayaç yine artış göstereceği için buradaki başlıklar da 2.1, 2.2 ve 2.3 olarak numaralandırılır.

content özelliğine girilebilecek değerlerden ikisi de open-quote ve close-quote değerleridir. Bu iki değer bir elemanda birlikte kullanılmalıdır. Bu değerler içeriğin başına ve sonuna tırnak işareti konmasını sağlar. Benzer şekilde kullanılan diğer iki değer de no-open-quote ve no-close-quote değerleridir. Bu değerler de elemanın başına ve sonuna tırnak işareti konmamasını sağlar.

<!DOCTYPE html>
<html>
<head>
<title>CSS Sayaçlar ve content</title>
<meta charset="UTF-8">
<style>
p::before{
content:open-quote;
}
p::after{
content:close-quote;
}
p.noq::before{
content:no-open-quote;
}
p.noq::after{
content:no-close-quote;
}
</style>
</head>
<body>
    <p>Örnek Paragraf 1</p><br>
    <p>Örnek Paragraf 2</p><br>
    <p class="noq">Örnek Paragraf 3</p><br>
    <p>Örnek Paragraf 4</p><br>
</body>
</html>

Verilen örnekte paragrafların önüne ve sonuna tırnak işareti konur. Fakat "noq" diye sınıflandırılan paragraflarda tırnak olmayacaktır.

content özelliği ile bir elemanın başına ya da sonuna bir niteliğinin değeri de yerleştirilebilir. Bu durumda content özelliği şu şekilde kullanılmalıdır.

content: attr(nitelik);

<!DOCTYPE html>
<html>
<head>
<title>CSS Sayaçlar ve content</title>
<meta charset="UTF-8">
<style>
p::before{
content:attr(id);
}
</style>
</head>
<body>
    <p id="Örnek:">Örnek Paragraf</p>
</body>
</html>

content kullanılarak yapılabilecek bir başka ekleme de görsel gibi bir medyayı elemanın başına ya da sonuna eklemektir. Bu durumda content özelliği şu şekilde kullanılır:

content: url("medyanın_adresi")

<!DOCTYPE html>
<html>
<head>
<title>CSS Sayaçlar ve content</title>
<meta charset="UTF-8">
<style>
p::before{
content:url("https://dl.dropboxusercontent.com/u/53524685/list_icon.png");
}
</style>
</head>
<body>
    <p>Örnek Paragraf 1</p><br>
    <p>Örnek Paragraf 2</p><br>
    <p>Örnek Paragraf 2</p><br>
</body>
</html>

Bu özellikle yapılan biçimlendirmeler alt elemanlara aktarılmaz.