CSS Cascade Layers Nedir ve Nasıl Kullanılır?
Bu makale Ahmad Shadeed tarafından yazılan Hello, CSS Cascade Layers isimli makalenin Türkçe çevirisinden oluşmaktadır. Ayrıca, içerik CSS Cascade Layers ile ilişkili farklı kaynaklardan bilgilerle desteklenmiştir. İlgili makalenin orijinaline aşağıdaki linkten ulaşabilirsiniz.
Çeviri notları: Çeviri yaparken, CSS jargonunda var olan bazı kavramları makale içerisinde ilk defa kullanırken parantez içerisinde orijinal hali ile birlikte belirttim. CSS özelliklerini (properties) ve dilimize oturmuş bazı teknik kavramları projelerimizde orijinal dilinde kullandığımız için, çevirilerini yapmadan kullandım.
CSS’teki kafa karışıklıklarının en yaygın sebeplerinden biri, stiller yazarken baskınlık (specificity) ile karşı karşıya kalmaktır. Örneğin, bir elemanın display değeri değiştirilirken Cascade’deki baskınlık değeri daha yüksek olan başka bir eleman, display değeri değiştirilen elemanı geçersiz kılacağı için, hiçbir şekilde işe yaramayacaktır. Bir başka elemana !important değeri atandığında da aynı durum geçerli olacaktır. Genellikle codebase büyüdüğünde ve CSS’i buna benzer problemleri önleyecek (veya azaltacak) şekilde organize etmediğimizde bu durum gerçekleşmektedir.
Cascade, bir elemana uygulanan stiller arasındaki çakışmaları çözmek için uygulanan algoritmadır.¹
CSS’te baskınlık/özgüllük, tarayıcıların çakışan CSS stilleri arasından hangi stilin geçersiz kılınıp hangisinin kullanacağının belirlendiği sistemdir.²
Cascade ve baskınlık çakışmalarının üstesinden gelmek için, ilgili elemana özgü CSS bloğunu nereye yazacağımız konusunda dikkatli olmamız gerekir. Bu durum, küçük projelerde sorun olmayabilir ancak büyük projelerde zaman alan bir iştir. Bu bilgiler doğrultusunda, CSS’imizi daha iyi organize etmeye ve böylece Cascade sorunlarını azaltmaya yönelik farklı yöntemleri tanımaya başlamış olduk. Bu yöntemlerden aklıma gelen ilk üç tanesi, BEM (Block, Element, Modifier), Jonathan Snook tarafından geliştirilen Smacss ve Harry Roberts tarafından geliştirilen Inverted Triangle CSS yöntemleridir.
- BEM, block-element-modifier konseptine uygun, daha temiz ve okunabilir CSS sınıfları (class) yazmak adına ortaya çıkarılan bir CSS isimlendirme standardıdır.³
- SMACSS (Scable and Modular Architecture for CSS), projenin CSS kodlarının base, layout, module, state ve theme başlıkları altında 5 farklı kategorideki dosyalara yazılması gerektiğinin savunulduğu bir CSS metodolojisidir.⁴
- Inverted Triangle CSS (ITCSS), projedeki CSS kodlarının ters üçgenin görünümünde olduğu gibi, Settings, Tools, Generic, Elements, Objects, Components, Utilities şeklinde ilgili başlıklar altında en global düzeyden en spesifik düzeye kadar sınıflandırılarak yazılması gerektiğini savunan bir CSS metodolojisidir.⁵
Bu makalede, Cascade Layers’ın nasıl çalıştığını ve nasıl daha özgüvenli CSS yazmamıza yardımcı olacağını, kullanım durumları ve örneklerle birlikte keşfedeceğiz.
Hazır mısınız? Hadi başlayalım!
İçindekiler1. Problem
2. CSS Cascade Layers’a Giriş
3. Tarayıcı Desteği
4. Katmanlar, Cascade'in İçinde Nerede Bulunur?
- Kaynağı ve Önemi (Origin and Importance)
- Inline Stiller (Inline Styles)
- Katmanlar (Layers)
- Baskınlık (Specificity)
- Görünüm Sırası (Order of Appearance)
5. Cascade Layers’ın Kullanım Durumları
- UI Tema Değiştirme
- Üçüncü Parti CSS
- Baskınlık Sorunları İle İlgili Daha Az Endişe Duymak
- İç İçe Komponentler
- Yardımcı CSS (Utility CSS)
6. Cascade Layers İle İlgili Daha Fazla Ayrıntı
- Katmanı Olmayan Stillerin Baskınlığının Daha Fazla Olması
7. Sonuç
8. İleri Kaynaklar
Problem
Cascade Layers’ın asıl çözdüğü problem, baskınlık durumları ve CSS kodunun kullanım sırasına yönelik endişe duymadan CSS yazmanın garantisini sunmaktır. Bir örnek ile problemi tanımlayalım.
Varsayılan (.button) ve ghost (.button--ghost)olmak üzere iki stile sahip olan bir butonumuz olduğunu görüyoruz. HTML’de onları nasıl kullanacağımıza bakalım:
<footer class="form-actions">
<button class="button">Save edits</button>
<button class="button button--ghost">Cancel</button>
</footer>Yukarıdaki örnek harika bir şekilde çalışıyor. Peki, bu buton için üçüncü bir varyasyona ihtiyacımız varsa, ancak bunu .button tanımlamasından hemen sonra yazamıyorsak?
.button tanımlaması, .button--facebook tanımlamasından sonra gelmektedir. Bu sebeple ikinci tanımlama, ilk tanımlamayı geçersiz kılacaktır. Bu durumda, .button--facebook sınıfının baskınlığını artırarak bu sorunu çözebiliriz:
.some-parent .button--facebook {
background-color: var(--brand-fb);
color: #fff;
}Ya da şöyle yapabiliriz (bunu evde denemeyin!):
.button--facebook {
background-color: var(--brand-fb) !important;
color: #fff !important;
}Gördüğünüz üzere her iki çözüm de pek iyi sayılmaz. En iyi çözüm, .button tanımlamasından hemen sonra onları doğru yere yazmaktır. Bunu ise, CSS dosyalarını parçalara ve komponentlere bölmeye yardımcı olan bir CSS ön-işlemcisinden (pre-processor)(Sass gibi) yardım almadan yapmak kolay olmayacaktır.
CSS Cascade Layers’a Giriş
Cascade Layers, büyük projelerde CSS yazarken biz geliştiricilerin kontrolü daha fazla ele almamıza yardımcı olacak yeni bir CSS özelliğidir. Uzman yazar Miriam Suzanne’e göre:
“Cascade Layers, geliştiricilerin, baskınlık durumlarını deneme yanılma yoluyla öğrenmeden veya koddaki kullanım sırasına güvenmeden iç Cascade mantığını yönetmelerine olanak tanır.”Geliştiriciler, Cascade Layers ile varsayılan elemanları, üçüncü parti kütüphaneleri, temaları, komponentleri, geçersiz kılmaları ve diğer stil sorunlarını temsil eden katmanlar (layers) oluşturabilir ve katmanlar dizisini açık bir şekilde yeniden düzenleyebilirler.⁶
Hadi bir önceki örneğe Cascade Layers özelliğini uygulayalım.
Yapacağımız ilk şey bir katman tanımlamaktır. Bunun için, ilk olarak @layer yazıyoruz ve ardından katmanın adını yazıyoruz.
@layer components { }components adında bir katman tanımladık. Bu katmanın içine varsayılan buton stillerini eklememiz gerekiyor.
@layer components {
.button {
color: #fff;
background-color: #d73a7c;
}
}Süper. Şimdi, varyasyonlar için başka bir katman daha eklememiz gerekiyor.
@layer components {
.button {
color: #fff;
background-color: #d73a7c;
}
}
@layer variations {
.button--ghost {
background-color: transparent;
color: #474747;
border: 2px solid #e0e0e0;
}
}Şimdi katmanların nasıl göründüğünü inceleyelim. CSS’te en son tanımlanan katman, katmanlar listesinde ilk sırada olacağı için Photoshop katmanları ile benzerlik gösterirler.
Bizim örneğimizde, variations katmanı en son tanımlanan katmandır, bu sebeple, components katmanına göre daha fazla önceliğe sahip olacaktır.
Hangi katmanın bir başka katmanı geçersiz kıldığını organize etmenin bir diğer yolu da, katmanları tek seferde tanımlamaktır.
@layer components, variations;Örneğimize geri dönelim. Başlangıçtaki sorun, varsayılan butonun başka bir varyasyonunu oluşturmamız gerektiğiydi ancak varsayılan butonu, varyasyon olan butonun baskınlığının daha düşük olduğu bir yere eklemiştik. Cascade Layers ile, varsayılan butonun CSS özelliklerini variations katmanına ekleyebiliriz.
@layer components, variations;
@layer components {
.button {
color: #fff;
background-color: #d73a7c;
}
}
@layer variations {
.button--ghost {
background-color: transparent;
color: #474747;
border: 2px solid #e0e0e0;
}
.button--facebook {
background-color: var(--brand-fb);
}
}Bu şekilde, komponentin varyasyonunun her zaman temel stillerden daha öncelikli olmasını sağlayabiliriz. Yukarıdaki açıklamayı görsel olarak inceleyelim.
Katmanlar panelinde, her bir butonun katmanda nasıl yer aldığına dikkat edelim. Sıralamanın, üstteki @layer kısmındaki tanımlamaya göre olduğunu görüyoruz.
Katmanların sırası değiştirildiğinde components katmanı, variations katmanını geçersiz kılar. Böylece, varsayılan butonun stili üstün gelir.
Katmanlara Stil Kuralları Ekleme
Cascade Layers’ta, tarayıcı aynı @layer tanımlamalarına sahip olan stilleri birleştirir ve onları sıralarına göre tek seferde okur.
Aşağıdaki örneği inceleyelim:
@layer components, variations;
@layer components {
.button {..}
}
@layer variations {
.button--ghost {..}
}
/* 500 satır sonra */
@layer variations {
.button--facebook {..}
}Tarayıcı, variations katmanındaki button--ghost tanımlamasından hemen sonra, button--facebook tanımlamasını ekleyecektir. Daha fazla anlaşılması için aşağıdaki görseli inceleyelim:
Katmanları Gruplama
Bu bölüm, direkt olarak A Complete Guide to CSS Cascade Layers isimli makaleden alınmış ve çevrilmiştir.
Katmanlar, katman kurallarını iç içe (nested) alarak gruplanabilir.
@layer one {/* alt katmanların sıralanması */
@layer two, three;/* stiller ... */
@layer three {/* stiller ... */}
@layer two {/* stiller ... */}
}
Üst ve alt katman isimlerinin bir nokta ile birleştirilmesiyle, ilgili katmanı temsil edilebilecek gruplandırılmış katmanlar oluşturulur. Bu da, oluşturulan alt katmanlara grubun dışından da doğrudan erişilebileceği anlamına gelir:
@layer one {/* iç içe katmanları doğrudan sıralama */
@layer one.two, one.three;/* iç içe katmanlara doğrudan ekleme yapma */
@layer one.three { /* ... */ }
@layer one.two { /* ... */ }
}
Tarayıcı Desteği
Yeni bir CSS özelliği duyurulduğunda düşünülmesi gereken en önemli soru tarayıcı desteğinin olup olmadığıdır. Bu makaleyi yazarken CSS Cascade Layers, Can I Use’a göre Firefox, Chrome, Safari TP’de desteklenmektedir.
Peki, bu özelliği projelerimizde iyileştirme/geliştirme yapmak amacıyla kullanabilir miyiz? Hayır, bir JavaScript polyfill kullanmadıkça şu anda kullanamayız (henüz bir polyfill bulunmamakta).
Ancak, başlıca tarayıcıların tümü “evergreen” modelde ilerliyorlar. Bu da bu özelliklerin tarayıcı desteğinin hızlı bir şekilde artmasını bekleyebileceğimiz anlamına geliyor.⁷
Katmanlar, Cascade’in İçinde Nerede Bulunur?
Bu soruyu yanıtlamak için CSS Cascade’e bir göz atalım.
CSS Cascade, aşağıdaki gibi sıralanmaktadır (Daha yüksek sıradakilerin önceliği daha fazladır):
- Kaynağı ve Önemi (Origin and Importance)
- Inline Stiller (Inline Styles)
- Katmanlar (Layers)
- Baskınlık (Specificity)
- Görünüm Sırası (Order of Appearance)
Aşağıdaki görseli inceleyelim. Bu görselde, çizgi kalınlığı ne kadar fazlaysa, ilgili başlığın Cascade’deki stil önceliğinin de o kadar fazla olduğu anlaşılmaktadır.
Kaynağı ve Önemi (Origin and Importance)
Bir stil tanımlamasının kaynağı ve önemi birbirinden farklı (ancak ilişkili) iki şeydir, bu nedenle her birini aşağıda açıklayacağım.
Bir stil tanımlamasının kaynağı, azalan öncelik sırasına göre aşağıdakilerin herhangi birinden kaynaklanabilir:
- Geliştirici Stilleri (yazar stilleri olarak da bilinir)
- Kullanıcı Stilleri
- Tarayıcı Stilleri
Bu durum, geliştiricinin yazdığı CSS’in, kullanıcı ve tarayıcı stillerine göre her zaman üstün geleceği anlamına gelir.
Hadi bunu örneklendirelim.
html { font-size: 16px; }Eğer kullanıcı, tarayıcının varsayılan font-size değerini değiştirmeye çalışırsa, yukarıdaki CSS tanımlaması devreye girerek kullanıcının tercihini geçersiz kılacaktır (geliştirici stilleri kullanıcınınkinden üstün geldiği için).
Bu uygulama erişilebilirlik için kötü bir uygulamadır. Lütfen bunu gerçek hayattaki projelerinizde yapmayın. Bu örneği sadece stillerin kaynağını açıklamak amacıyla ekledim.
Tarayıcı stillerine gelince, bunlar user agent stylesheet’e göre değişkenlik gösterirler. Örneğin, varsayılan <button> stili bir tarayıcıdan diğerine farklılık gösterir. Ayrıca, tahmin edebileceğiniz üzere, geliştirici stilleri, tarayıcı stillerine göre daha üstün olduğu için, varsayılan stili geçersiz kılmamız mümkündür.
Eğer varsayılan butonu incelerseniz, butonun sahip olduğu tüm varsayılan stilleri gösteren user agent stylesheet’i görebilirsiniz.
Yukarıda bahsettiklerimizin hepsi normal kurallardı. Bu durum, onların !important kelimesine sahip olmadıkları anlamına gelmektedir. Sahip olmaları durumunda ise, sıralama şu şekilde olacaktır:
- !important Tarayıcı Stilleri
- !important Kullanıcı Stilleri
- !important Geliştirici Tanımlamaları
- Normal Geliştirici Stilleri
- Normal Kullanıcı Stilleri
- Normal Tarayıcı Stilleri
Inline Stiller (Inline Styles)
Bir elemanda inline stil kullanılmışsa, o eleman, aynı öneme sahip aynı seviyedeki elemanlar arasında en yüksek baskınlığa sahip olacaktır.
Aşağıdaki örnekte, inline stiller öncelikli olduğu için <button> elemanının rengi #fff olacaktır.
<button style="color: #fff;">Send</button>button {
color: #222;
}
Katmanlar (Layers)
Eveet, merhaba katmanlar! Katmanlar, Cascade’deki yeni misafirimiz. Cascade Layers, seçicinin baskınlığından daha fazla önceliğe sahiptir. Aşağıdaki örnekte, custom katmanındaki p elemanının font-size değerini tahmin edebilir misiniz?
@layer base, custom;
@layer base {
#page .prose p {
font-size: 1rem;
}
}
@layer custom {
p {
font-size: 2rem;
}
}font-size değeri 2rem’dir. Cascade Layers’ta, elemanın baskınlığı ne olursa olsun, o eleman bir sonraki katmanda geçersiz kılınıyorsa yok sayılacaktır.
Baskınlık (Specificity)
Katmanlardan sonra, tarayıcı CSS tanımlamalarına bakar ve seçicinin baskınlığına göre hangisinin diğerinden üstün geldiğine karar verir.
Burada basit bir örneğini inceleyebiliriz. .newsletter sınıfının içindeki .button, ilk .button’a göre daha yüksek baskınlığa sahiptir. Bu sebeple, ilk tanımlama geçersiz sayılacaktır.
.button {
padding: 1rem 1.5rem;
}
/* Burası üstün gelecektir */
.newsletter .button {
padding: 0.5rem 1rem;
}Görünüm Sırası (Order of Appearance)
Son olarak, görünüm sırası devreye girer. İki eleman aynı baskınlığa sahip olduğunda, elemanların CSS dosyasındaki sıraları, hangisinin diğerinden üstün geleceğini belirleyecektir.
Aşağıdaki örneği inceleyelim:
.newsletter .button {
padding: 1rem 1.5rem;
}
/* Burası üstün gelecektir */
.newsletter .button {
padding: 0.5rem 1rem;
}Yukarıdaki tanımlamaların her ikisi de aynı baskınlığa sahiptir. İkinci tanımlama, ilk tanımlamadan sonra geldiği için ilk tanımlamadan üstün gelecektir.
Artık, katmanların Cascade’de nerede yer aldığı hakkında fikir sahibi olduğunuza göre, bazı kullanım durumlarına geçelim.
Cascade Layers’ın Kullanım Durumları
Güncel projelere bakarak Cascade Layers’ın nerede öne çıkacağını araştırmaya çalıştım ve aşağıdaki kullanım durumlarını buldum.
UI Tema Değiştirme
Üzerinde çalıştığım bir projede, kullanıcı arayüzünün teması için Cascade Layers kullanmanın mükemmel bir çözüm olacağını fark ettim. Burada çözdüğü problem, bir geliştirici olarak CSS’i değiştirmeden veya bir şekilde yeniden sıralamadan temalar arasında geçiş yapmama izin vermesidir.
@layer base, elements, objects, components, pages, themes;Gördüğünüz üzere çeşitli katmanlarım var ve themes katmanı bunlar arasındaki sonuncu katman. Themes katmanı, içerisinde birden fazla katman bulundurabilir (Evet, Cascade Layers iç içe yapıyı da destekliyor).
@layer themes içerisindeki en üst kısma dikkat ederseniz, @layer custom, default şeklinde tanımlama yaptığımı göreceksiniz. Bu sayede default tema, custom olan temayı geçersiz kılacaktır.
@layer base, elements, objects, components, pages, themes;
@layer themes {
/* Burada default isimli tema aktiftir */
@layer custom, default;
@layer default {
:root {
--color-primary: #1877f2;
}
}
@layer custom {
:root {
--color-primary: #d73a7c;
}
}
}Eğer temalar arasında değişiklik yapmak isterseniz, ilk tanımlamadaki @layer themes içerisinde katmanları yeniden sıralayabilirsiniz.
@layer base, elements, objects, components, pages, themes;
@layer themes {
/* Burada custom isimli tema aktiftir */
@layer default, custom;
@layer default {
:root {
--color-primary: #1877f2;
}
}
@layer custom {
:root {
--color-primary: #d73a7c;
}
}
}Üçüncü Parti CSS
Flickity carousel kullanan bir örneği ele alalım. Burada kullanılan tüm !important değerlerini inceleyim.
.flickity-page-dots {
bottom: 20px !important;
}
.flickity-page-dots .dot {
background: #fff !important;
opacity: 0.35 !important;
}
.flickity-page-dots .dot.is-selected {
opacity: 1 !important;
}Cascade Layers ile birlikte, components katmanından önce üçüncü parti CSS dosyasını ekleyebiliriz. Harici bir CSS dosyasını içe aktarabilir ve bir katmana atayabiliriz.
@layer base, vendors, components;
@layer base {
/* Temel stiller */
}
/* .css dosyasını içe aktar veya bir katmana ata */
@import url(flickity.css) layer(vendors);
@layer components {
.flickity-page-dots {
bottom: 20px;
}
.dot {
background: #fff;
opacity: 0.35;
}
.dot.is-selected {
opacity: 1;
}
}Baskınlık Sorunları İle İlgili Daha Az Endişe Duymak
Bir listeleme komponentimizin olduğunu ve listenin daha düşük margin değerinin olduğu bir varyasyonuna ihtiyacımızın olduğunu düşünelim.
<ul class="list">
<li class="list__item list__item--compact">Item 1</li>
<!-- Diğer elemanlar -->
</ul>:not sözde sınıf seçicisi (pseudo selector), kullanıldığı elemana daha fazla baskınlık sağladığı için, :not tekrar kullanılmadan geçersiz kılınamaz. Aşağıdaki örneği inceleyelim:
/* Bu seçici geçerli olacaktır. */
.list__item:not(:last-child) {
margin-bottom: 2rem;
outline: solid 1px #222;
}
.list__item--compact {
margin-bottom: 1rem;
}Aşağıdaki örnekte görüldüğü üzere, ikinci tanımlamada :not kullanıldığı için, ikinci tanımlama daha fazla baskınlığa sahip olur ve bu sebeple .list__item--compact, .list__item’ı geçersiz kılmaz. Bunun nasıl çalıştığını şu şekilde görebiliriz:
.list__item:not(:last-child) {
margin-bottom: 2rem;
outline: solid 1px #222;
}
.list__item--compact:not(:last-child) {
margin-bottom: 1rem;
}Şimdi Cascade Layers ile çözülen problemi inceleyelim.
@layer list’in içinde yer alan base ve overrides katmanlarını içeren aşağıdaki örneği inceleyelim. overrides katmanında, varyasyon sınıfını yazıyorum ve overrides katmanı, tanımlanan son katman olduğu için beklendiği şekilde çalışıyor.
@layer list {
@layer base, overrides;
@layer base {
.list__item:not(:last-child) {
margin-bottom: 2rem;
}
}
@layer overrides {
.list__item--compact {
margin-bottom: 1rem;
}
}
}İç İçe Komponentler
Bu örnekte, sosyal içerik akışı (feed) elemanı için bir aksiyonlar listesi (beğeni, yorum) ve her bir yorum için başka bir liste yer almaktadır.
İçerik akışı elemanındaki ikonun boyutu 24px’dir. Bu ikonun yorum komponentindeki boyutu ise daha küçüktür.
@layer feed, comments;
@layer feed {
.feed-item .c-icon {
width: 24px;
height: 24px;
}
}
@layer comments {
.comment__icon {
width: 18px;
height: 18px;
}
}.feed-item .c-icon’un, .comment__icon'dan daha yüksek baskınlığa sahip olduğuna dikkat ettiğimizde, bunun Cascade Layers kullanımı sayesinde olduğunu görebiliriz!
Yardımcı CSS
İstenilen özelliğin, ilgili elemana her zaman uygulanacağından emin olmak için yardımcı CSS sınıflarına !important eklemeye alıştık. Cascade Layers ile birlikte, yardımcı CSS’lerde !important kullanımını geride bırakabiliriz.
Aşağıdaki örneği inceleyelim. p-0 yardımcı sınıfına sahip bir sayfa başlığımız var. Padding değerini 0’a sıfırlamak istiyoruz.
<div class="c-page-header p-0">
<!-- İçerik -->
</div>Şimdi, Cascade Layers uygulandığında nasıl göründüğünü inceleyelim.
@layer base, vendors, components, utils;
@layer components {
@layer page-header {
.c-page-header {
padding: 1rem 2rem;
}
}
}
@layer utils {
.px-0 {
padding-left: 0;
padding-right: 0;
}
}Cascade Layers ile İlgili Daha Fazla Ayrıntı
Katmanı Olmayan Stillerin Baskınlığının Daha Fazla Olması
Eğer bir katmana atanmamış CSS stilleri varsa, onları gizli bir son katmana eklemiş olacağız.
Aşağıdaki örneği inceleyelim.
.button {
border: 2px solid lightgrey;
}
@layer base, components;
@layer base {/* Temel stiller */}
@layer components {
.button {
border: 0;
}
}Bu örnekte .button tanımlaması, @layer olmadan tanımlanıyor ancak bu tanımlama, tarayıcıda gizli katmana yerleştirilecektir.
@layer base, components;
@layer base {/* Temel stiller */}
@layer components {
.button {
border: 0;
}
}
/* Gizli katman */
@layer {
.button {
border: 2px solid lightgrey;
}
}Sonuç
CSS Cascade’in stilleri nasıl uyguladığını kontrol etmeye yarayan Cascade Layers özelliği, baskınlıkla uğraşmak yerine işleri mantıklı bir şekilde organize etmede, geliştiriciye daha fazla esneklik sağlamış oluyor.⁸
Heyecan veren bir CSS özelliği olan Cascade Layers, örneklerde gördüğünüz üzere oldukça faydalı olabilir. Benim için tek sınırlılığı, Cascade Layers’ı henüz tek başına (polyfill olmadan) CSS geliştirmede kullanamayacak olmamızdır. Ayrıca bu durumun, web camiasında Cascade Layers’ın benimsenmesini biraz yavaşlatabileceğini düşünüyorum.
İleri Kaynaklar
- The Future of CSS: Cascade Layers by Bramus Van Damme
- Getting Started With CSS Cascade Layers by Stephanie Eckles
- Cascade layers are coming to your browser by Una Kravets
- A Complete Guide to CSS Cascade Layers by Miriam Suzanne
- CSS Cascading and Inheritance Level 5 by W3C
- @layer by MDN Web Docs
- Cascade layers: Control the CSS cascade with the @layer at-rule by David Omotayo
Okuduğunuz için teşekkürler! Umarım faydalı olmuştur. Çeviri hatası olduğunu düşündüğünüzde bana ulaşın lütfen.
Beni diğer kanallardan da takip etmeyi unutmayın :) Ayrıca, GitHub üzerinde paylaştığım projeleri incelemek isterseniz aşağıdan GitHub profilime ulaşabilirsiniz. Bir başka makalede görüşmek üzere!
