CSS Sözdizimi: Bildirim, Kural, At-rule ve Yorum Yazımı

Bildirim: özellik ve değer

CSS'in amacı, tarayıcının sayfadaki öğeleri belirli özelliklerle (renk, konum, kenarlık gibi) çizmesini sağlamaktır. Bunun için iki parça kullanılır. Özellik, hangi niteliğin ayarlanacağını söyleyen, insanların okuyabileceği bir addır. Değer ise o niteliğin nasıl uygulanacağını belirtir. Özellik ile değer arasına iki nokta (:) konur; bu çiftin adı bildirimdir (declaration).

color: navy;
font-size: 1.25rem;
border: 1px solid gray;

MDN, bildirimlerle ilgili birkaç temel kuralı vurgular:

• Büyük küçük harf: Özellik adları ve değerler varsayılan olarak büyük küçük harfe duyarlı değildir. COLOR: RED ile color: red aynı anlama gelir; yine de okunabilirlik için küçük harf yaygın bir alışkanlıktır.
• Boşluklar: Özelliğin ve değerin önündeki, arasındaki ve sonundaki boşluklar yok sayılır. Değerin kendi içindeki boşluklar ise anlam taşıyabilir; örneğin 1px solid gray üç ayrı parçadır.
• Geçerlilik: Her özelliğin kabul ettiği değerler biçimsel bir dilbilgisiyle tanımlıdır. Bir değer o özellik için geçerli değilse bildirim tamamen yok sayılır.

Son madde pratikte çok önemlidir. width: kırmızı gibi anlamsız bir değer yazdığınızda tarayıcı uyarı vermez, yalnızca bu bildirimi atlar. Aynı bloktaki diğer geçerli bildirimler ise uygulanmaya devam eder.

Bildirim bloğu ve noktalı virgül

Bildirimler, açılış süslü parantezi { ile kapanış süslü parantezi } arasında bir bildirim bloğunda toplanır. Bloktaki bildirimler noktalı virgülle (;) birbirinden ayrılır. Bir blok boş da olabilir. Bloklar bazı durumlarda iç içe geçebildiği için açılan her parantezin kapatılması gerekir.

Bloğun son bildiriminden sonra noktalı virgül koymak zorunlu değildir. MDN yine de bunu iyi bir alışkanlık olarak önerir: bloğa sonradan yeni bir satır eklediğinizde önceki satırın sonuna noktalı virgül koymayı unutma riskini ortadan kaldırır. Bu riskin ne kadar sinsi olduğunu aşağıdaki hata örneğinde göreceksiniz.

p {
  color: navy;
  line-height: 1.6;   /* son bildirimde de noktalı virgül: önerilen */
}

Kural: seçici listesi ve blok

Tek başına bir blok, hangi öğeye uygulanacağını bilmediği için işe yaramaz. CSS, bloğun önüne bir veya daha fazla seçici yazarak bu sorunu çözer. Seçiciler sayfadaki öğeleri seçen koşullardır; birden fazla seçici virgülle ayrılarak bir seçici listesi oluşturur. Seçici listesi ile bildirim bloğunun birleşimine kural kümesi (ruleset) ya da kısaca kural denir.

/* seçici listesi    bildirim bloğu */
h1, h2, h3 {
  font-family: Georgia, serif;
  margin-top: 0;
}

Bir öğe birden fazla kuralın seçicisiyle eşleşebilir ve bu kurallar aynı özelliğe farklı değerler verebilir. Hangisinin kazanacağına cascade algoritması karar verir; bu konu cascade ve kalıtım ile özgüllük yazılarında ayrıntılı olarak işleniyor.

İfadeler: kurallar ve at-rule'lar

Bir stil dosyası genellikle uzun bir kural listesinden oluşur, ama yazarın iletmek istediği başka bilgiler de vardır: karakter kümesi, içe aktarılacak başka stil dosyaları, yazı tipi tanımları gibi. MDN, stil dosyasındaki her yapı taşına ifade (statement) der. Bir ifade boşluk olmayan bir karakterle başlar ve dize içinde olmayan, kaçışlanmamış ve başka bir parantez çiftinin içinde yer almayan ilk kapanış süslü parantezinde ya da noktalı virgülde biter.

İki tür ifade vardır: yukarıda gördüğümüz kurallar ve @ işaretiyle başlayan at-rule'lar. Bu ikisinden biri olmayan her ifade geçersizdir ve yok sayılır.

Deyim tipi at-rule'lar

Bazı at-rule'lar tek satırlık bir ifadedir ve noktalı virgülle biter. MDN bunları "statement at-rules" olarak gruplar: @charset, @import, @layer (sıralama bildirimi olarak) ve @namespace.

@charset "utf-8";
@import "temel.css";
@layer reset, bilesenler;

Blok tipi at-rule'lar

Diğerleri bir {} bloğuyla biter; bu bloğun içinde iç içe kurallar, başka at-rule'lar ya da özellik veya tanımlayıcı (descriptor) bildirimleri bulunabilir. MDN'in listesinde @media, @supports, @container, @font-face, @keyframes, @layer (blok olarak), @page, @property, @scope, @starting-style, @counter-style, @position-try ve @view-transition yer alır.

@media print {
  nav {
    display: none;
  }
}
/* sonuç: sayfa yazdırılırken nav öğesi gizlenir */

@media, @supports ve @container gibi koşullu grup kuralları, içlerinde iç içe ifadeler barındırır; bu ifadeler yalnızca koşul doğruysa uygulanır. MDN, CSS1 ve CSS2.1 döneminde bu grupların içine yalnızca kural yazılabildiğini, CSS Conditionals Level 3 ile bu kısıtın kaldırıldığını ve artık bazı at-rule'ların da içeride kullanılabildiğini belirtir. Medya sorgularının ayrıntısı @media yazısında, katmanlar @layer yazısında anlatılıyor.

Yorumlar

CSS'te yorum yazmanın tek yolu /* ile açıp */ ile kapatmaktır. Bu biçim hem tek satırlık hem çok satırlık yorumlar için kullanılır ve stil dosyasında boşluk karakterine izin verilen her yere yazılabilir. Yorumların sayfanın düzeni üzerinde hiçbir etkisi yoktur; bu yüzden açıklama notları eklemek ya da bir kuralı geçici olarak devre dışı bırakmak için kullanılırlar.

/* Tek satırlık yorum */

/*
  Çok satırlık yorum:
  aşağıdaki kural geçici olarak kapatıldı
*/
/*
.duyuru {
  color: crimson;
}
*/

JavaScript'teki // biçiminde tek satır yorum CSS'te yoktur. MDN, <style> öğesi içinde eski tarayıcılardan CSS'i gizlemek için <!-- --> kullanılabildiğini, ama bunun önerilmediğini de not eder.

Stil dosyasını sayfaya bağlamak

MDN'in cascade belgesine göre bir sitenin yazarı stilleri üç yoldan ekleyebilir: bağlanan veya içe aktarılan harici stil dosyaları, belge içindeki <style> blokları ve öğelerin style niteliğiyle yazılan satır içi stiller. Harici dosya, aynı stilin birden fazla sayfada yeniden kullanılmasını sağladığı için en yaygın yöntemdir.

<!-- 1. Harici stil dosyası -->
<link rel="stylesheet" href="style.css" />

<!-- 2. Belge içi style bloğu -->
<style>
  p { color: navy; }
</style>

<!-- 3. Satır içi stil: yalnızca bildirimler, parantez yok -->
<p style="color: navy; font-weight: bold;">Merhaba</p>

Bir stil dosyası başka bir dosyayı @import ile içe aktarabilir. Burada dikkat edilmesi gereken kural şudur: @import stil dosyasının en üstünde, @charset ve katman oluşturan @layer bildirimleri dışındaki tüm kurallardan önce yer almalıdır. Aksi halde geçersiz sayılır ve yok sayılır. Ayrıca @import iç içe ifade değildir; @media gibi bir koşullu grup kuralının içine yazılamaz. Bunun yerine koşulu doğrudan @import satırına ekleyebilirsiniz.

/* doğru: en üstte */
@import "temel.css";
@import "baski.css" print;
@import "yatay.css" screen and (orientation: landscape);

body {
  margin: 0;
}

/* yanlış: kuraldan sonra geldiği için yok sayılır */
@import "gec-kalan.css";

Satır içi stillerin cascade'de neden çoğu kuralı ezdiği ve neden dikkatli kullanılması gerektiği özgüllük yazısında açıklanıyor.

Sözdizimi hataları: tarayıcı neyi atlar?

CSS'te bir hata olduğunda tarayıcı JavaScript'teki gibi bir hata fırlatmaz. MDN'e göre ayrıştırıcı hatalı kısmı atlar, mümkün olan en az kodu çöpe atar ve ardından normal şekilde okumaya devam eder. Bu sayede yeni bir özelliği tanımayan eski bir tarayıcıda sayfa bozulmaz. Atlanan miktar ise hatanın türüne bağlıdır:

Eksik noktalı virgülün etkisi

MDN'in örneğine dayanan şu bloğa bakın. İlk satırın sonunda noktalı virgül unutulmuştur ve bu satır bloğun son bildirimi değildir:

p {
  border-color: red          /* noktalı virgül eksik */
  background-color: green;
  border-width: 100vh;
}
/* sonuç: border-color ve background-color uygulanmaz,
   border-width: 100vh uygulanır */

Tarayıcı border-color değerini bir sonraki noktalı virgüle kadar okur; yani değer red background-color: green olur. Bu geçerli bir renk olmadığı için bildirim atılır ve background-color da onunla birlikte kaybolur. Üçüncü satır ise sözdizimi açısından geçerli olduğu için uygulanır; 100vh kalınlığında bir kenarlık büyük olasılıkla bir mantık hatasıdır ama sözdizimi hatası değildir. Tarayıcı mantık hatalarını yakalamaz.

Eski ve yeni sözdizimi yan yana

Hata davranışı bilinçli olarak kullanılabilir. MDN'in örneğinde display özelliği önce eski tek değerli biçimle, sonra yeni çoklu anahtar kelimeli biçimle yazılır. Yeni sözdizimini tanıyan tarayıcı ikinci bildirimi uygular; tanımayan tarayıcı onu geçersiz sayıp atar ve birinci bildirimle devam eder. Bu yöntemin işe yaraması için eski biçimin önce, yeni biçimin sonra yazılması gerekir.

div {
  display: inline-flex;   /* yedek */
  display: inline flex;   /* tanıyan tarayıcıda bu kazanır */
}

Sık yapılan sözdizimi hataları

• Değer ile birim arasına boşluk koymak: 10 px geçersizdir, 10px yazılmalıdır. Birimlerin kuralları CSS birimleri yazısında.
• İki nokta yerine eşittir kullanmak: color = red bir bildirim değildir.
• Süslü parantezi kapatmayı unutmak: Sonraki kurallar beklenmedik biçimde önceki bloğun içinde okunabilir.
• Yorum içinde yorum: İçteki */ dış yorumu erken kapatır.
• @import satırını dosyanın ortasına yazmak: Kuraldan sonra gelen @import yok sayılır.
• Seçici listesine deneysel bir seçici eklemek: Tanınmazsa listedeki diğer seçiciler de etkisiz kalır.

Sık Sorulan Sorular

Son bildirimden sonra noktalı virgül şart mı?

Şart değildir; sözdizimi buna izin verir. MDN yine de yazmanızı önerir, çünkü bloğa sonradan satır eklediğinizde eksik noktalı virgül iki bildirimin birden kaybolmasına yol açabilir.

CSS büyük küçük harfe duyarlı mı?

Özellik adları ve anahtar kelime değerleri varsayılan olarak duyarlı değildir. Ancak seçicilerde kullanılan class ve id değerleri gibi belgeden gelen adlar duyarlı olabilir; bu ayrıntı seçiciler yazısında ele alınıyor.

@import mu, link etiketi mi kullanmalıyım?

İkisi de stil dosyasını sayfaya dahil eder. @import bir stil dosyasının içinden başka bir dosyayı çağırır ve dosyanın başında yer almak zorundadır; ayrıca layer() ile içe aktarılan stilleri bir cascade katmanına yerleştirebilir. <link> ise dosyayı doğrudan HTML'den bağlar ve stil dosyasının içindeki sıralama kuralına tabi değildir.

Geçersiz bir bildirim diğer kuralları da bozar mı?

Genellikle hayır. Geçersiz bir özellik veya değer yalnızca kendi bildirimini etkiler. İstisna, eksik noktalı virgül ve geçersiz seçicidir: ilki sonraki bildirimi de götürür, ikincisi bütün kuralı.

Marka adları sahiplerine aittir. Bu yazı bağımsız bir teknik rehberdir; adı geçen kuruluşlarla bayilik veya ortaklık ilişkisi bulunduğu anlamına gelmez.

İlgili içerikler: CSS öğrenme rehberi · CSS seçiciler · Cascade ve kalıtım · Sık CSS hataları · HTML sayfa oluşturma