Kullanmadığınız 15 CSS özelliği

Seomoz’dan Matthew, CSS standardında tanımlanmış olan, ama çoğu kişinin kullanmadığı 15 tane 2. seviye CSS özelliğini anlatmış. Bunların bazıları tüm tarayıcılarda çalışmıyor, o yüzden yayımlamadan önce sitelerinizi test etmenizde fayda var.

1. Kırpma: clip
clip: rect(5px, 40px, 45px, 5px)

Bir resmin hangi kenerından ne kadar kırparak göstereceğini söyleyebiliyorsunuz tarayıcılara. Tüm resim yükleniyor, ancak sadece göster denilen kısım gösteriliyor.

“Rect” dikdörtgen şeklinde kırpılacağını belirtiyor (zaten başka tanımlı seçenek yok). Parantez içinde de sırasıyla üst, sağ, alt ve sol taraflardan ne kadar kırpılacağı belirtiliyor. İsteyenler için şurada birkaç örnek var.

2. Görünürlük: visibility
visibility: (inherit | visible | hidden)

Bir sayfa bileşeninin gösterilip gösterilmeyeceğini belirtir. “İnherit” önceden nasılsa öyle kalsın, “visible” gösterilsin, “hidden” saklansın demek.

Bu özelliğin bir benzeri olan display (gösterim) özelliği de var, ama biraz farklı. Macromedia’nın sitesinde anlatıldığı gibi, visibility kullanılınca, sayfa bileşeni gösterilmese de, sakni üstü kapatılmış gibi, yeri boş bırakılıyor. Halbuki, display ile etiketlenirse sanki sayfada o bileşen hiç yokmuş gibi duruyor.

3. Yazı gölgesi: text-shadow
text-shadow: #000000 10px -5px 1px
yazı gölgesi: renk kodu, x-ekseni, y-ekseni, bulandırma açısı

Yazının biraz eğilmiş, veya biraz bulandırılmış halini gölge olarak kullanabiliyorsunuz.

4. İçerik: content
content: "Your browser supports content"
içerik: "Tarayıcınız içerik özelliğini destekliyorsa, burada yazanı gösterecektir."

Bir CSS seçiminin çevresine (“:before” önüne, veya “:after” ardına) yazı eklemek için kullanılır. Örneğin, “yorum” şeklinde bir CSS tanıtılırsa, bu CSS ile işaretlenen yazının başına “Yorum” yazdırılabilir.

Aslında bu uygulama, CSS’in mantığıyla çelişir; çünkü CSS, içerik ve tasarımı birbirinden ayırmak için yaratılmıştır, yani CSS ile içerik yaratmak istenen bir sonuç değildir. Ne var ki, bazı yerlerde işe yarayabilir. Zaten bu işi çoğu yerde JavaScript hallediyor.

5. Alıntılar: quotes
q { quotes: '"' '"' }

Satır içindeki alıntıları işaretlemek için kullanılır. İşaretlemek için <q> etiketi kullanılır. W3C standardı olmasına rağmen, Internet Explorer bu etiketi desteklemez. Bu sorunu çözmek için, A List Apart’taki "Revival of the <q> tag" ("<q> etiketinin geri dönüşü") makalesindeki kodu inceleyebilirsiniz.

6. Sayaçlar: counter-reset ve counter-increment
Mozilla geliştiriciler merkezi bilgilerine göre CSS sayaçları, W3C tarafından CSS 2.1. sürümünde mümkün kılınmıştır. İki türü vardır: counter-reset ve counter-increment . Sayfada content (içerik) alanında counter() veya counters() fonksiyonları ile çalıştırılır.

7. Kesme çizgisi: marks
@page: { <değer>;}

Bazı sitelerde, sayfanın ekranda görünen hali ve basılınca görünecek hali farklı olarak tanımlanır. Basılacak sayfanın sınırlarını göstermek içinde marks özelliği kullanılır. “Crop” (kesme çizgisi) veya “cross” (bölümleri ayırma çizgisi) değerlerini alabilir. Bu çizgilerin nereye konacağı, web tarayıcının ayarları ile ilgilidir.

8. Kenar boşluğu: page-break-before ve page-break-after
page-break-before: (always|auto|empty string|left|right);
page-break-after: (always|auto|empty string|left|right);

Basılacak dökümanlarda ne kadar kenar boşluğu bırakılacağını belirtir. MSDN'de bir örnek var isteyenler için.

9. Yetimler ve dullar: orphans and widows
p { orphans: 2; }
p { widows: 2; }

Bir sayfa basılırken, bazı paragrafların bölünmesini istemiyorsak, yetim ve dul satırların sınırını belirtmemiz yeterli. Orphans (yetimler), paragrafın kaç satırının önceki sayfada kaldığını, widows (dul) ise kaç satırın sonraki sayfaya sarktığını belirtir.

Varsayılan değer, her iki özellik için de 2’dir; yani en çok 2 satır sonraki sayfaya kalacaksa, paragraf sonraki sayfaya taşınır. Aynı şekilde, en çok 2 satır ilk sayfada kalacaksa, tüm paragraf sonraki sayfaya yazdırılır.

10. Yazı boyutu düzeltme: font-size-adjust
font-size-adjust: rakam

Bir yazı tipinin büyük “X” harfi ile küçük “x” harfi arasındaki yükseklik farkına “aspect value” (boy oranı) denir. Eğer bu oran büyükse, yazı boyutu küçültülerek çözülebilir. Verdana yazı tipinin boy oranı 0.58’dir. (yani “X” 100 px iken, “x” 58 px uzunluğundadır). Times New Roman için bu oran 0.462dır. Demek ki, Verdana küçük boyutlarda, Times New Roman ise büyük boyutlarda daha güzel duruyor.

Font-size-adjust özelliği kullanılarak, yazı tipinin çirkin görüneceği büyüklüğe çıkması engellenerek, kendisine bir yazı tipi boyutu ataması sağlanıyor. CSS ile, boy oranı limiti veriliyor, ve tarayıcı kendisi o yazıyı ne büyüklükte göstereceğini hesaplıyor.

11. Yazıyı uzatmak: font-stretch
font-stretch: (normal | wider | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | inherit)

W3C tarafından getirilen bu özellik, yazının verilen alana nasıl yayılacağını belirtiyor. Yazı tipinin uygun genişlikte olanı seçilerek verilen alan dolduruluyor.

12. Yazılış farkı: font-variant
font-variant: (normal | small-caps)

Yazıdaki (koddakı) küçük harflerin de büyük harf şeklinde, ama daha ufak boyutta gösterilmesini sağlıyor. “Normal” ve “small-caps” (ufak-büyük harf) seçenekleri mevcut.

13. Açıklamanın yeri: caption-side
caption-side: (top | bottom | left | right)
açıklama yeri: (üst | alt| sol| sağ)

Tablolar için “caption” (açıklama) parametresi belirtmek zorunlu değildir, ama eğer belirtilirse, tablonun hemen üstünde yazar bu değişkenin içeriği. Bir tablonun açıklamasının, nerede bulunacağı caption-side kodu ile belirtilebilir.

14. Tablo yerleştirme: table-layout
table-layout: (auto | fixed)

Tabloların daha hızlı oluşturulması için, yerleştirme şeklini belirtebilirsiniz. Eğer table-layout değişkenini “auto” yapmazsanız, ziyaretçiler bütün tablo yüklenmeden hiçbir kısmını göremezler, ve büyük tablolar içeren sitelerde bu sitenin yavaş yüklendiği izlenimini verir. Değişken belirtilirse, yüklenen hücreler anında görülebilir.

15. Boş hücreler: empty-cells
empty-cells: (show | hide)
boş hücreler: (göster | sakla)

Tablolardaki boş hücrelerin gösterilip gösterilmeyeceğini belirtebilirsiniz. Bu uygulamanın farklı etkileri olabilir. "Fun with Tables" ("Tablolarla eğlence") makalesinde farklı kodların sonuçlarını karşılaştırmalı olarak görebilirsiniz. Bu özelliği her tarayıcı desteklemez.