Sıfırdan CSS öğrenin

CSS neyi denetler ve sayfaya nasıl ulaşır?

Tek bir iş yapar: HTML'in kurduğu şeyin nasıl görüneceğine karar verir. CSS, cascading style sheets ifadesinin kısaltmasıdır ve en küçük birimi bir kuraldır:

p {
  color: #333;
  line-height: 1.9;
}

Onu sayfaya bağlamanın üç yolu var; pratikte birini kullanırız. Etiketin üzerine style özniteliği yazabilir, kuralları head içindeki bir style etiketine koyabilir ya da hepsini ayrı bir dosyada tutup tek satırla çağırabilirsiniz:

<link rel="stylesheet" href="style.css">

Üçüncüyü seçin, diğer ikisini istisnalara saklayın. Sebep zevk değil: ayrı dosya bir kez iner ve tarayıcı sonraki sayfada onu kendi önbelleğinden alır; düğme rengi değişeceği gün elli yeri değil bir yeri değiştirirsiniz.

Bir şey de her yeni başlayanı şaşırtır. Siz tek satır CSS yazmadan önce sayfanın stilleri zaten vardır: başlık büyük ve kalındır, bağlantılar mavi ve altı çizilidir, listelerin madde imleri vardır. Bunları tarayıcı kendi yerleşik stil sayfasıyla koyar; sizin yazdığınız şey onların yeniden yazımıdır.

Seçiciler: tarayıcıya hangi öğe olduğunu söylemek

Bir etiket adı yazarsınız ve o etiketlerin hepsini alırsınız. Bir nokta ve sınıf adı yazarsanız yalnızca o sınıfı taşıyan öğeleri, bir diyez ve kimlik yazarsanız tek bir benzersiz öğeyi alırsınız.

a         { color: #0b5; }         /* her bağlantı */
.btn      { border-radius: 12px; } /* class="btn" olan her şey */
#header   { position: sticky; }    /* id="header" olan öğe */
.card p   { margin-block: 0; }     /* .card içindeki her p */
a:hover   { text-decoration: underline; }

Pratikte neredeyse hep sınıf yazın. Kimlik sayfada benzersizdir ve bağlantılar ile JavaScript için değerlidir, ama stilde ağırlık getirir ve sonradan onu aşmak için daha fazla ağırlık getirmeye zorlar. Bu, important'ta biten yoldur.

Daha az öğretilen ve klavye kullanıcısı için hayati bir seçici var. hover yalnızca fare için bir anlam taşır; sayfada Tab ile gezen biri şu anda hangi öğenin üzerinde durduğunu görmek zorundadır:

.btn:focus-visible {
  outline: 2px solid #0b5;
  outline-offset: 2px;
}

Tarayıcının varsayılan halkasını outline: none ile kaldırıp yerine bir şey koymadıysanız, sayfayı klavye kullanıcısına karşı kör ettiniz. Bu, tek satır CSS'in erişilebilirliğe doğrudan zarar verdiği ender yerlerden biridir.

Yazdığım stil neden uygulanmıyor?

Kısa yanıt: kuralınız uygulandı, yalnızca başka bir kural onu geçti. Tarayıcı her öğenin her özelliği için sırayla üç şey sorar. Hangi kurallar bu öğeyi hedefliyor, hangisi daha belirgin ve belirginlik eşitse hangisi dosyada daha sonra geldi.

Sayfanın en üstündeki şekil bu katmanlardır; öğeye en yakından dışa doğru. Etiketin üzerindeki style en yakındır, bu yüzden sonradan değiştirilmesi en zor şeydir; tarayıcı varsayılanı ise en uzaktır. En çok yanlış anlaşılan yer en dıştaki katmandır: kalıtım.

Renk verirsiniz body öğesine ve bağlantıların da onu almasını beklersiniz. Almazlar. Tarayıcının a etiketi için doğrudan bir kuralı vardır ve herhangi bir doğrudan kural, tarayıcının kendi kuralı bile, ebeveynden miras kalan bir değeri geçer. Kalıtım en zayıf katmandır, en güçlüsü değil.

Şimdi çözüm; on saniye sürer. Tahmin etmek yerine öğeye sağ tıklayın, incele deyin ve Computed sekmesini açın. Her özelliğin son değeri orada yazar; birini açınca kazanan kuralı dosya adı ve satır numarasıyla, kaybeden kuralları da üstü çizili görürsünüz. Tahminin bunun yerini tutacak hâli yok.

Bir de bu sırayı kıran kelime var: important. Bir kez yazın, sonraki her kural kazanmak için onu yazmak zorunda kalır ve dosyanız o andan sonra mantıkla değil ağırlıkla ilerler. Kuralımız basit: important olmadan çalışmıyorsa seçici yanlıştır. Tek gerçek istisna, yazmadığınız ve erişemediğiniz bir kodu biçimlendirmektir.

Her öğe bir kutudur

Sayfadaki her şey bir dikdörtgendir, tek bir harf bile. Bu dikdörtgenin dört katmanı vardır: içeriğin kendisi, çerçeveye kadar olan iç boşluk padding, çevresindeki çizgi border ve diğer öğelere kadar olan dış boşluk margin. CSS'teki tüm boşluk işi bu dörttür.

Neredeyse herkesin değiştirdiği ve pek azının açıkladığı bir varsayılan karar da var. Varsayılan olarak width içine yazdığınız sayı yalnızca içeriğin boyutudur; bu yüzden yüzde yüz genişlikte olup padding de taşıyan bir öğe kendi yerinden taşar. Tek satır bunu kalıcı olarak çözer:

*, *::before, *::after { box-sizing: border-box; }

border-box ile genişlik sayısı iç boşluğu ve kenarlığı da kapsar; yani baştan beklediğiniz şeyi. Bu satırı her CSS dosyasının başına koyun ve bir daha düşünmeyin.

Bir davranış da herkesi bir kez şaşırtır. Art arda gelen iki öğe arasındaki dikey boşluk toplanmaz; büyük olan kazanır. Buna kenar boşluğu birleşmesi denir ve yalnızca dikey kenar boşluklarında olur; iç boşlukta olmaz, flex ve grid içinde de olmaz. Modern yerleşimlerin kenar boşluğu yerine gap kullanmasının bir sebebi budur.

Yerleşim: ne zaman flexbox, ne zaman grid?

Flexbox'ın bir ekseni, grid'in iki ekseni vardır ve bu fark kararların çoğunu belirler. Flex ile birkaç şeyi bir satıra ya da sütuna dizer, her birinin boyutunu kendi içeriğinden almasına izin verirsiniz. Grid ile önce yapıyı çizersiniz; sütunları ve satırları kendiniz tanımlarsınız, içerik de içlerine oturur.

.toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

İkinci kural ezbere bilmeye değer. Her sütunun en az 220 piksel olmasını ve artan alanı paylaşmasını söyler; tarayıcı da her genişlikte kaç sütunun sığdığını kendisi hesaplar. Tek bir media query olmadan duyarlı bir ızgara.

İkisi rakip değil ve birini seçmek diğerinden vazgeçmek anlamına gelmez. Pratikte sayfanın iskeleti grid ile kurulur ve her hücresinin içinde bir flex satırı oturur. Pratik kural: "şu birkaç şey yan yana" diyebiliyorsanız flex; "şu hücrelerden oluşan tablo" diyorsanız grid.

Farsça bir site neden margin-left değil margin-inline-start ister

Çünkü margin-left, Farsçada İngilizcedeki yerle aynı yer değildir. Fiziksel özellikler ekranın soluyla sağını düşünür; mantıksal özellikler satırın başını ve sonunu düşünür. margin-inline-start, satırın başladığı yerden itibaren boşluk demektir; tarayıcı bunu Farsça ve Arapçada sağ, İngilizcede sol olarak okur, siz hiçbir şey yapmazsınız.

Çevirisi de zor değil:

Sınamak on saniye sürer ve kimse öğretmez: tarayıcı geliştirici araçlarında html etiketi üzerinde dir değerini rtl'den ltr'ye çevirin ve aynı sayfaya bakın. Yerinden kıpırdamayan ya da yanlış kenara yapışan her şey, geride kalmış bir fiziksel özelliktir. Kendi sitemizde bu denetim her yeni şablonun gözden geçirilmesinin bir parçası.

Kuralın gerekmediği yer: tek bir soldan sağa dili olan ve başka dil almayacak bir site. Orada margin-left hiç ısırmaz ve mantıksal özelliklerde ısrar bir gereklilik değil iyi bir alışkanlıktır. Ama siteniz Farsçaysa ya da bir gün İngilizce de olacaksa, bu fark o günün size bir saate mi bir haftaya mı mal olacağını belirler.

CSS değişkenleri: bir kez tanımlayın, her yerde kullanın

CSS değişkeni, bir değeri tutan bir addır. Teknik adı özel özelliktir, iki tireyle başlar ve var ile okunur:

:root {
  --brand: #0b5;
  --gap: 16px;
}

.btn {
  background: var(--brand);
  padding: var(--gap);
}

Daha az söylenen şey, bu değişkenin diğer her değer gibi kalıtımla geçmesidir. Aynı adı tek bir öğe üzerinde yeniden tanımlayın; o öğenin içindeki her şey yeni değeri görür, sayfanın geri kalanı olduğu gibi kalır:

.card--warn { --brand: #d97706; }

Artık o kartın içindeki her düğme turuncu; .btn kuralının tek satırı değişmeden. Koyu tema da tam bu fikirle kurulur: ikinci bir CSS dosyası değil, birkaç adı yeniden tanımlayan tek bir blok.

Sınırı ise şu: bu, programlama anlamında bir değişken değildir. Onunla aritmetik yalnızca calc içinde olur ve bir media query koşulunda kullanamazsınız. Döngü, koşul ve fonksiyon arıyorsanız işi tam da bu olan Sass gibi araçlara gidiyorsunuz demektir; onların çıktısı da yine bu sade CSS'tir.