Mevcut CSS’e cascade katmanları eklemek için önce eski kuralların nereye ait olduğuna karar verin. Katmansız normal kurallar, adlandırılmış tüm katmanlara üstün gelir; bu nedenle yeni katmanlı geçersiz kılmalar ancak çakışan eski kurallar daha düşük öncelikli bir katmana taşındıktan sonra işe yarar.

Bu kılavuz, Mac’te yazılmış bir web sayfasını düzenleyen ve masaüstü tarayıcıda kontrol eden kişiler içindir. Somut görev, anlaşılır bir geçiş yolu sunarken mevcut bir stil sayfasını yeni bileşen stillerinin altına yerleştirmektir. Örneklerde yerel dosyalar, sentetik etiketler ve basit bir CSS yapısı kullanılır.

Yeni katmanlı stiller mevcut kurallar karşısında neden kaybeder?

Yazar stil sayfalarındaki çakışan normal bildirimlerde katmansız CSS, açıkça tanımlanmış herhangi bir katmandaki CSS’e üstün gelir. Daha özgül bir seçici veya katman içindeki daha sonraki bir konum bu sınırı aşamaz. CSS belirtimi, katmansız bir kuralın daha özgül bir katmanlı kuralı geçersiz kılmasıyla bu davranışı gösterir. CSS Cascading and Inheritance Level 5.

tile sınıfına sahip bir öğeyi hedefleyen şu CSS parçasını ele alalım:

.tile {
  background-color: #b8bdc5;
}

@layer components {
  .tile {
    background-color: #246a73;
  }
}

Arka plan gri kalır. Katmana overrides adını vermek, bloğunu dosyanın daha altına taşımak veya seçicisinin özgüllüğünü artırmak, katmansız normal kuralın önceliğini değiştirmez. Katman adlarının yerleşik bir anlamı yoktur; aralarındaki ilişkiyi bildirim sıraları belirler. MDN: Cascade layers.

Aşağıdaki karar tablosu, aynı yazar kaynağı ve bağlamındaki, satır içi stillerin, animasyonların veya geçişlerin özelliği etkilemediği çakışan stil sayfası bildirimlerini varsayar. Her satırı düşük öncelikten yüksek önceliğe doğru okuyun.

Bildirim türü Düşük → yüksek öncelik
Normal İlk bildirilen katman → daha sonra bildirilen katmanlar → katmansız kurallar
!important Katmansız kurallar → daha sonra bildirilen katmanlar → ilk bildirilen katman

Katman önceliği, seçici özgüllüğünden önce belirlenir. Kazanan katmanın içinde özgüllük önemini korur; aksi hâlde eşit olan bildirimlerde kaynak sırası belirleyici olabilir. Önemli bildirimlerdeki ters sıra, geçiş sırasında normal ve önemli kuralların ayrı ayrı değerlendirilmesi gerektiği anlamına gelir. MDN: Cascade layers.

Hangi geçiş sınırını seçmelisiniz?

Yeni CSS’in denetlemesi gereken tek bir öğeyle ve tek bir özellikle başlayın. Mevcut kazananı inceleyin, bulunduğu stil sayfasını belirleyin ve o dosyayı değiştirip değiştiremeyeceğinize ya da sayfanın onu yükleme biçimini değiştirip değiştiremeyeceğinize karar verin. Böylece işe yarar en küçük geçiş sınırını belirlersiniz.

Durumunuz Uygulanabilir sonraki adım Sonuç
Mevcut CSS’in önceliğini koruması gerekiyor Katmansız bırakın ve daha düşük öncelikli katmanlı varsayılanlar ekleyin Yeni katmanlar, daha güçlü kuralların çakışmadığı yerlerde değer sağlar
Mevcut CSS’i düzenleyebilirsiniz Uygun eski kuralları @layer legacy içine alın Daha sonraki katmanlar, eski normal bildirimleri geçersiz kılabilir
Stil sayfası giriş noktasını değiştirebilirsiniz Mevcut dosyayı layer(legacy) ile içe aktarın İçe aktarılan stil sayfası, seçicileri yeniden yazılmadan bu katmana katılır
Çakışan eski CSS’i veya yüklenme biçimini değiştiremezsiniz Gerekli geçersiz kılmayı geçici olarak katmansız tutun Özgüllük ve diğer cascade etkenlerini yine de çözmeniz gerekir

Bu seçenekler, CSS’in belgelediği üç katman mekanizmasına dayanır: bir bildirim katman adlarını tanımlar, bir blok kuralları katmana atar, katmanlı bir içe aktarma ise içe aktarılan stil sayfasını katmana atar. Tek başına bir bildirim mevcut kuralları taşımaz. CSS Cascading and Inheritance Level 5: Declaring Cascade Layers.

Küçük bir stil sayfası için sıradan kurallarını bir bloğa almak pratik olabilir. Mevcut bir harici dosya için katmanlı içe aktarma net bir sınır oluşturur. Mevcut @import kurallarını bir @layer bloğunun içine koymayın: içe aktarmalar, yerleşim kısıtları olan en üst düzey kurallardır. MDN: @import.

Aşağıda önerilen geçişte eski dosya adlandırılmış bir katmana aktarılır. Bu, diğer stil sayfalarına göre önceliğini değiştirir; bu nedenle aynı değişikliği örnek sayfanın ötesine uygulamadan önce yüklenen diğer CSS’leri kontrol edin.

Mac’te eksiksiz bir yerel örneği nasıl oluşturabilirsiniz?

Aşağıdaki üç düz metin dosyasını içeren bir klasör oluşturun. Bir kod düzenleyici kullanın ve .html ile .css uzantılarını koruyun. Dosyalar paket, komut dosyası, yazı tipi veya indirilmiş kaynak gerektirmez. Adları yerel örnek kaynaklarıdır.

Bu eksiksiz belgeyi sample.html adıyla kaydedin:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Layer sample</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <main id="sample">
    <h1>Shape sample</h1>
    <p>Tile A</p>
    <div class="tile" aria-label="Sample shape"></div>
  </main>
</body>
</html>

Belge yalnızca styles.css dosyasına bağlantı verir. HTML, harici stil sayfasını sayfayla ilişkilendirmek için rel="stylesheet" ve href kullanır. Geçerli HTML Standardı, link öğesi için layer özniteliğini tanımlamaz; kaynağı bir katmana CSS üzerinden atayın. HTML Standard: The link element.

Mevcut kuralları ve değişmeden kalan seçicilerini temsil eden bu eksiksiz stil sayfasını legacy.css adıyla kaydedin:

body {
  margin: 2rem;
  font-family: system-ui, sans-serif;
  color: #26313a;
  background-color: #f4f5f7;
}

#sample .tile {
  width: 6rem;
  height: 6rem;
  background-color: #b8bdc5;
  border-radius: 0;
}

Bu eksiksiz giriş stil sayfasını styles.css adıyla kaydedin:

@layer legacy, components;
@import url("legacy.css") layer(legacy);

@layer components {
  .tile {
    background-color: #246a73;
    border-radius: 50%;
  }
}

Güncel bir masaüstü Safari veya Firefox’ta sample.html dosyasını açın. Beklenen sonuç, Tile A etiketinin altında turkuaz bir dairedir. Eski katman boyutları sağlar; daha sonra tanımlanan bileşenler katmanı ise arka planı ve yuvarlak biçimi sağlar. Bildirimler katmanlar arasında çakıştığı için tek sınıflı seçicisi eski ID seçicisine üstün gelir. MDN: @layer.

Giriş dosyası önce katman sırasını belirler, içe aktarmayı bloktan önce tutar ve ardından bileşen kurallarını ekler. Bu, belgelenen içe aktarma söz dizimi ve yerleşim kurallarına uygundur. Katman bildirimi içe aktarmalardan önce gelebilir; katman bloğu gelemez. MDN: @import.

Mevcut bir sayfada neyi değiştirmelisiniz?

Bu düzeni benimserken sayfanın doğrudan stil sayfası başvurusunu yeni giriş stil sayfasıyla değiştirin. Sayfa legacy.css dosyasını katmana aktarmanın yanı sıra doğrudan da yüklemeye devam ederse, geçişi geçersiz kılabilecek katmansız bildirimler sağlar.

Başarısızlığı öngörmek için örneği kullanın: legacy.css dosyasına ayrı bir doğrudan stil sayfası bağlantısı ekleyin; normal bildirimleri gri kareyi geri getirebilir. Bu doğrudan yüklemeyi kaldırmak, eski kuralları amaçlanan katmanda bırakır. Bu öngörü, belirtimde normal öncelik sırasında katmansız kuralların açık katmanlardan sonra gelmesine dayanır. CSS Cascading and Inheritance Module Level 5: Layer Ordering.

Bu örnekte üç dosyanın tümünü aynı klasörde tutun. Yaklaşımı uyarlarken ortam kısıtlamaları gibi mevcut kaynak koşullarını koruyun ve cascade çakışmasını teşhis etmeden önce başvurulan her stil sayfasının yüklendiğini kontrol edin.

MacOS’ta Firefox ile geçişi nasıl doğrulayabilirsiniz?

Command–Option–I ile Firefox geliştirici araç kutusunu açın ve Inspector sekmesini seçin. Belge ağacında örnek şekli seçin, ardından Rules görünümünü inceleyin. Mozilla, Mac araç kutusu kısayolunu ve Inspector’ın CSS inceleme denetimlerini belgeliyor. All keyboard shortcuts, Examine and edit CSS.

Örneği her seferinde tek bir özellik için kontrol edin:

  1. background-color özelliğini bulun. Bileşen bildirimi, eski gri değere üstün gelmelidir.
  2. border-radius özelliğini bulun. Bileşen değeri daireyi oluşturmalıdır.
  3. width ve height özelliklerini kontrol edin. Değerleri hâlâ eski dosyadan gelmelidir.
  4. Bileşenin arka plan bildirimini geçici olarak devre dışı bırakın. Şekil yuvarlak kalırken eski gri renk görünür olmalıdır.

Firefox, geçersiz kılınan bildirimlerin üstünü çizer ve bunları geçici olarak devre dışı bırakmak için onay kutuları sunar. Ayrıca kuralları kaynak dosyalarına bağlar. Beklenmedik her sonucu bir seçici sorunu saymak yerine, çakışan bildirimi bulmak için bu denetimleri kullanın. Mozilla: Examine and edit CSS.

Gerçek bir sayfada bu kontrolü değiştirdiğiniz durumlar için tekrarlayın: daha dar pencereler, ilgili ortam koşulları ve bileşen varyantları. Kalıcı düzenlemeleri kaynak dosyalara kaydedip sayfayı yenileyin; geçici inceleme değişiklikleri tanılama için kullanışlıdır.

Geçiş sırasında neler beklenmedik biçimde değişebilir?

Önemli bildirimler amaçlanan sırayı tersine çevirir

@layer legacy, components kullanıldığında, legacy içindeki önemli bir bildirim, components içindeki çakışan önemli bir bildirime üstün gelir. Bu nedenle önemli eski kuralları erken bir katmana taşımak, bunların geçersiz kılınmasını zorlaştırabilir. Katmanlı stil sayfalarındaki tüm önemli bildirimler, aynı yazar kaynağı ve bağlamındaki çakışan katmansız stil sayfası bildirimlerine de üstün gelir. MDN: @layer.

Bir dosyayı taşımadan önce !important için arama yapın ve ilgili her çakışmayı inceleyin. Her iki bildirimi de denetleyebildiğiniz yerlerde, katmanları ekledikten sonra önem belirticisine hâlâ gerek olup olmadığını belirleyin. Her yeni bileşen kuralına önem belirticisi eklemeyin: bu, kullandığınız öncelik sistemini değiştirir.

Satır içi stillerin ayrı ele alınması gerekir. Normal satır içi stiller normal yazar stil sayfası kurallarına, önemli satır içi stiller ise diğer önemli yazar bildirimlerine üstün gelir. Bir stil sayfasını katmana taşımak, öğenin style özniteliğini taşımaz. MDN: Introduction to the CSS cascade.

Daha sonraki bir bildirim mevcut katmanları yeniden sıralayamaz

Katmanların sırasını ilk bildirimleri belirler. Adlandırılmış bir katmanı yeniden açmak kurallar ekler, ancak sırasını değiştirmez. İçe aktarılan stil sayfalarının oluşturduğu katmanlar da dahil olmak üzere, sayfa bu katmanları ilk kez oluşturmadan önce amaçlanan sırayı belirleyin. CSS Cascading and Inheritance Module Level 5.

Kademeli geçiş için başlangıç sırasını kısa ve açık tutun. Birbiriyle uyumlu bir kural grubunu taşıyın, kazananları inceleyin ve ardından devam edin. Çakışan katmansız bir kopyayı bırakıp tek bir kuralı taşımak, genellikle kaldırmayı amaçladığınız öncelik sınırını olduğu gibi korur.

Mac’te hangi tarayıcı desteği sınırlarını göz önünde bulundurmalısınız?

MDN, @layer özelliğinin Mart 2022’den bu yana tarayıcılar arasında yaygın olarak kullanılabildiğini belirtiyor. WebKit, cascade katmanları desteğinin Safari 15.4’te geldiğini belgeliyor. Bu tarihler özelliğin kullanılabilirliğini açıklar; her Mac’te bu özelliği destekleyen bir tarayıcının yüklü olduğunu göstermez. Sayfanızın gerçekten desteklemesi gereken sürümleri kontrol edin. MDN: @layer, WebKit: New WebKit Features in Safari 15.4.

Bir katman bloğunu anlamayan tarayıcı, içindeki stilleri sıradan katmansız kurallar olarak uygulamaz. CSS ayrıştırma kurallarına göre desteklenmeyen söz dizimi atılır. Bu nedenle, temel CSS’in tamamını katmanlara almak eski tarayıcılar için bir geri dönüş yolu değildir. MDN: CSS error handling.

Bu tarayıcıları desteklemek hâlâ gerekiyorsa, desteklenen yol için bilinçli olarak katmansız bir stil sayfası bulundurun ve çakışmalarını seçiciler ile kaynak sırasını kullanarak çözün. Destekleyen tarayıcılarda katmanlı sürümün yanında katmansız bir kopya yüklemekten kaçının: bu, az önce tasarladığınız cascade’i değiştirir.

Yeni bileşene amaçlanan özellikler üzerinde denetim sağlayan en küçük geçişle başlayın. Katman sırasını belirleyin, çakışan eski kuralları bir katmana atayın, yinelenen katmansız yüklemeyi kaldırın ve ortaya çıkan kazananları inceleyin. Bu sıra, daha fazla CSS’i taşımadan önce her öncelik değişikliğini görünür kılar.

Kaynaklar