@layer Bildirimi ve Sıralaması
Adlandırılmış basamak katmanları bildirin ve öncelik sıralarını @layer ifadeleriyle denetleyin.
@layer Bildirimi ve Sıralaması, CoddyKit'te ücretsiz bir CSS Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, CSS Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. CSS Academy kursu toplamda 4 dersten oluşur.
@layer Nedir
CSS basamaklandırma katmanları (@layer), CSS kurallarının basamaklandırmadaki önceliğini özgüllükten bağımsız olarak açıkça denetlemek için bir mekanizma sağlar. Daha düşük öncelikli katmanlar, seçicileri daha yüksek özgüllüğe sahip olsa bile kaybeder.
@layer Neden Önemlidir
Katmanlar olmadan her CSS kuralı özgüllük ve kaynak sırasını kullanarak yarışır. Sıfırlama, bileşen ve yardımcı stiller öncelik için birbiriyle mücadele ettiğinde bu durum özgüllük savaşlarına yol açar. Katmanlar, her gruba sabit ve öngörülebilir bir öncelik verir.
Katmanları Bildirme
Katmanları önceden tek bir bildirimde tanımlayın. Bildirim sırası önceliği belirler; daha sonra bildirilen katmanlar daha önce bildirilenlere üstün gelir.
<p>This scene only declares layer order — see the CSS panel:</p>
<p style="color:#888;font-size:0.9em;">@layer reset, base, components, utilities;</p>Katman Bildiriminin Konumu
@layer bildirimi stil dosyanızın (veya ana içe aktarma dosyanızın) en üstünde olmalıdır. Bildirimden sonra katmanlara stilleri herhangi bir sırayla ekleyebilirsiniz; öncelik, stillerin eklendiği yere değil bildirim sırasına göre belirlenir.
Katmanlar için Kaynak Sırası Neden Önemli Değildir
Katman önceliği bildirim sırasında belirlendiğinden, stilleri bir katmana herhangi bir yerde ekleyebilirsiniz; hatta ileriye dönük başvuruyla, katman bildirilmeden önce bile ekleyebilirsiniz. Önemli olan bildirilen sıradır.
Katman Önceliği Kuralı
Daha sonra bildirilen bir katmandaki bildirim, özgüllükten bağımsız olarak her zaman daha önce bildirilen katmandaki bildirime üstün gelir:
<p>Reset layer !important paragraph (red)</p>
<div id="header">Components layer header (blue)</div>Katmansız Stiller
Herhangi bir katmanın dışında bulunan stillere katmansız stiller denir. Bunlar, son bildirilen katmandan bile daha yüksek önceliğe sahiptir. Her zaman üstün gelmesi gereken acil geçersiz kılmalar için bunları kullanın.
Öncelik Sıralaması
Eksiksiz öncelik sırası (yazar stilleri için yüksekten düşüğe):
- Katmansız stiller (herhangi bir @layer dışında)
- Son bildirilen katman (ör. yardımcı stiller)
- Sondan bir önceki katman (ör. bileşenler)
- Daha önceki katmanlar (temel, sıfırlama)
Katmanlarda !important Tersine Çevirme
Katmanlardaki !important kullanımı karmaşıktır: Bu bildirim için katman sırasını tersine çevirir. En erken katmandaki !important, daha sonraki katmanlardaki !important ifadelerine üstün gelir. Bu, kullanıcı ve yazar stilleri arasındaki özgün basamaklandırma davranışıyla uyumludur.
İç İçe Katmanlar
Katmanlar nokta gösterimi kullanılarak iç içe yerleştirilebilir:
<p>This scene declares nested layers with dot notation — see the CSS panel.</p>Uygulamalı Kurulum Örneği
Gerçekçi bir proje katmanı kurulumu:
<p>A realistic project layer order — see the CSS panel.</p>Hızlı Kontrol
Katmanlar şu şekilde bildiriliyor: @layer base, components, utilities. Çakışma durumunda hangi katmanın stilleri üstün gelir?
Özet
@layer, açıkça sıralanmış basamaklandırma katmanları oluşturur. Katman adlarını öncelik sırasına göre (en düşükten başlayarak) bildirin. Daha sonra bildirilen katmanlar, özgüllükten bağımsız olarak her zaman daha önce bildirilenlere üstün gelir. Katmansız stiller en yüksek önceliğe sahiptir. !important, ilgili bildirim için katman önceliği sırasını tersine çevirir.
Sıkça Sorulan Sorular
“@layer Bildirimi ve Sıralaması” dersi ücretsiz mi?
Evet — “@layer Bildirimi ve Sıralaması” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve CSS Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. CSS Academy kursu toplamda 4 dersten oluşur.
“@layer Bildirimi ve Sıralaması” dersinde ne öğreneceğim?
Adlandırılmış basamak katmanları bildirin ve öncelik sıralarını @layer ifadeleriyle denetleyin. CSS Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
CSS Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te CSS Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.
“@layer Bildirimi ve Sıralaması” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu CSS Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her CSS Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- @layer Bildirimi ve Sıralaması
- Katmanlara Stil Ekleme
- Katman Önceliği ve !important Etkileşimi
- Üçüncü Taraf Kodlarında Katmanlar