CSS'nin durumu 2022

Google IO 2022'de gösterilen bugünün ve geleceğin web stili özelliklerinin yanı sıra bazı ekstra özellikler.

Adam Argyle

Ortak çalışmaya dayalı 14 özelliği uygulama hedefiyle 2022, hem özellikler hem de işbirliğine dayalı tarayıcı özelliği sürümleri açısından CSS'nin en iyi yıllarından biri olacak.

Not: Google I/O 2022'deki CSS'nin Durumu konulu konuşmayı izleyin:

Genel Bakış

Bu yayın, Google IO 2022'de verilen konuşmanın makale biçimidir. Bu makale, her bir özellikle ilgili ayrıntılı bir kılavuz olmayıp ilginizi çekmek için bir giriş ve kısa bir genel bakış sunar. İlgilendiğiniz bir konu varsa daha fazla bilgi için ilgili bölümün sonundaki kaynak bağlantılarını inceleyin.

İçindekiler

İlgilendiğiniz konulara atlamak için aşağıdaki listeyi kullanın:

2022'de yeni	2022 ve sonrası
2022 Tarayıcı uyumluluğu	@scope
@layer	@nest
alt ızgara	@media (prefers-reduced-data)
@container	@custom-media
hwb()	Medya sorgu aralıkları
lch, oklch, lab, oklab, display-p3 vb	@property
color-mix()	kaydırma-başlangıcı
color-contrast()	:snap-target
Göreli renk söz dizimi	snapChanging() and snapChanged()
Gradyan renk alanları	toggle()
accent-color	anchor()
inert	<selectmenu>
Renk yazı tipleri v1
Görüntü alanı birimi varyantları
:has()

Tarayıcı uyumluluğu

Birçok CSS özelliğinin ortak olarak yayınlanması için belirlenen birincil neden, Interop 2022'nin çabalarıdır. Birlikte çalışabilirlik çalışmalarını incelemeden önce Compat 2021'in çalışmalarına göz atmanız önemlidir.

Compat 2021

Anketler aracılığıyla geliştiricilerden gelen geri bildirimler doğrultusunda 2021'deki hedeflerimiz mevcut özellikleri sabitlemek, test paketini iyileştirmek ve beş özellik için tarayıcıların geçme puanlarını artırmaktı:

1. sticky konumlandırma
2. aspect-ratio boyutlandırma
3. flex düzeni
4. grid düzeni
5. transform yerleşimi ve animasyonu

Genel olarak test puanları yükseltilerek kararlılık ve güvenilirlik artırıldı. Ekipleri tebrik ederiz.

Interop 2022

Bu yıl tarayıcılar, üzerinde çalışmak istedikleri özellikleri ve öncelikleri tartışmak için bir araya gelerek güçlerini birleştirdi. Geliştiriciler için aşağıdaki web özelliklerini sunmayı planladılar:

1. @layer
2. Renk alanları ve işlevleri
3. Kapsama
4. <dialog>
5. Form uyumluluğu
6. Kaydırma
7. Alt ızgara
8. Yazı biçimi
9. Görüntü alanı birimleri
10. Web uyumluluğu

Bu heyecan verici ve iddialı listeyi uygulamaya koymayı sabırsızlıkla bekliyoruz.

2022'nin yeni haberleri

CSS 2022'nin durumu, Interop 2022 çalışmaları tarafından önemli ölçüde etkileniyor.

Katmanları basamaklandırma

Tarayıcı Desteği

• 99
• 99
• 97
• 15.4

Kaynak

@layer sürümünden önce, yüklenen stil sayfalarının keşfedilen sırası çok önemliydi. Çünkü en son yüklenen stiller, daha önce yüklenen stillerin üzerine yazılabilir. Bu durum, geliştiricilerin önce daha az önemli stilleri, sonra daha önemli stilleri yüklemesi gereken, titizlikle yönetilen giriş stil sayfalarına yol açtı. Geliştiricilerin bu önemi yönetmesine yardımcı olmak için ITCSS gibi yöntemler mevcuttur.

@layer ile giriş dosyası, katmanları ve sıralarını önceden tanımlayabilir. Ardından, stiller yüklenirken veya tanımlanırken bir katmana yerleştirilebilir. Bu sayede, stil geçersiz kılma öneminin korunmasına olanak tanınırken titizlikle yönetilen yükleme koordinasyonu gerekmez.

Videoda, tanımlanmış basamak katmanlarının, basamağı gerektiği gibi korurken daha özgür ve serbest bir içerik oluşturma ve yükleme sürecine nasıl olanak tanıdığı gösterilmektedir.

Chrome Geliştirici Araçları, hangi stilin hangi katmandan geldiğini görselleştirmek için yararlıdır:

Kaynaklar

• CSS Cascade 5 spesifikasyonu
• Dizi katmanları hakkında açıklama
• MDN'de katmanları basamakla
• Una Kravets: Cascade Layers
• Ahmad Shadeed: Merhaba, CSS Cascading Layers

Alt ızgara

Tarayıcı Desteği

• 117
• 117
• 71
• 16

Kaynak

subgrid sürümünden önce, başka bir ızgaranın içindeki ızgaralar üst hücrelerine veya ızgara çizgilerine hizalanamazdı. Her ızgara düzeni benzersizdi. Birçok tasarımcı tüm tasarımın üzerine tek bir tablo yerleştirir ve içindeki öğeleri sürekli olarak hizalar. Bu, CSS'de yapılamaz.

subgrid'den sonra, bir ızgaranın alt öğesi, ebeveynlerinin sütunlarını veya satırlarını kendi sütunları ya da satırları olarak benimseyebilir ve kendisini ya da alt öğelerini bunlara hizalayabilir.

Aşağıdaki demoda body öğesi üç sütundan oluşan klasik bir ızgara oluşturur: Orta sütun main olarak adlandırılır ve sol ile sağ sütunlar satırlarını adlandırırfullbleed. Ardından, gövdedeki her öğe (<nav> ve <main>), grid-template-columns: subgrid'yi ayarlayarak gövdedeki adlandırılmış satırları benimser.

​​body {
  display: grid;
  grid-template-columns:
    [fullbleed-start]
    auto [main-start] min(90%, 60ch) [main-end] auto
    [fullbleed-end]
  ;
}

body > * {
  display: grid;
  grid-template-columns: subgrid;
}

Son olarak, <nav> veya <main> öğelerinin çocukları, fullbleed ve main sütunlarını ve satırlarını kullanarak kendilerini hizalayabilir veya boyutlandırabilir.

.main-content {
  grid-column: main;
}

.fullbleed {
  grid-column: fullbleed;
}

Geliştirici Araçları, hatları ve alt ızgaraları görmenize yardımcı olabilir (Yalnızca Firefox şu anda). Aşağıdaki resimde üst ızgara ve alt ızgaralar yer almaktadır. Şimdi tasarımcıların ekran düzeni hakkındaki düşüncelerine benziyor.

Geliştirici araçlarının Öğeler panelinde, hangi öğelerin ızgara ve alt ızgara olduğunu görebilirsiniz. Bu, düzende hata ayıklama veya doğrulama için çok faydalıdır.

Firefox Devtools'tan ekran görüntüsü

Kaynaklar

• Alt ızgara spesifikasyonu
• MDN'de alt tablo
• Bramus: Pratik CSS alt ızgara video eğiticileri

Container sorguları

Tarayıcı desteği

• 105
• 105
• 110
• 16

Kaynak

@container öncesinde, web sayfası öğeleri yalnızca görüntü alanının tamamının boyutuna yanıt verebiliyordu. Bu, makro düzenleri için idealdir ancak dış kapsayıcılarının tüm görüntü alanının tamamını içermediği mikro düzenlerde düzenin buna göre ayarlanması imkansızdır.

@container'den sonra öğeler, üst kapsayıcı boyutuna veya stiline yanıt verebilir. Tek uyarı, kapsayıcıların kendilerini olası sorgu hedefleri olarak tanımlaması gerektiğidir. Bu, büyük bir avantaj için küçük bir şarttır.

/* establish a container */
.day {
  container-type: inline-size;
  container-name: calendar-day;
}

Aşağıdaki videoda yer alan Paz, Sal, Çar, Per ve Cum sütunlarının etkinlik öğeleri tarafından sorgulanabilir olmasını sağlayan şey bu stillerdir.

Demo Una Kravets tarafından

calendar-day kapsayıcısını boyutuna göre sorgulamak, ardından düzeni ve yazı tipi boyutlarını ayarlamak için kullanılan CSS'yi burada görebilirsiniz:

@container calendar-day (max-width: 200px) {
  .date {
    display: block;
  }

  .date-num {
    font-size: 2.5rem;
    display: block;
  }
}

Aşağıda başka bir örnek verilmiştir: Bir kitap bileşeni, sürüklendiği sütundaki mevcut alana uyum sağlar:

Demo Max Böck tarafından

Una, durumu yeni duyarlı olarak değerlendirmekte haklı. @container'ü kullanırken vermeniz gereken birçok heyecan verici ve anlamlı tasarım kararı vardır.

Kaynaklar

• Kapsayıcı Sorguları spesifikasyonu
• Kapsayıcı Sorguları açıklayıcısı
• MDN'deki Kapsayıcı Sorguları
• web.dev'deki yeni duyarlı
• Una tarafından hazırlanan Takvim demosu
• Muhteşem container sorguları koleksiyonu
• Web.dev'de Designcember'ı nasıl geliştirdik?
• Ahmad Shadeed: CSS Kapsayıcı Sorgularına Merhaba Deyin

accent-color

Tarayıcı desteği

• 93
• 93
• 92
• 15,4

Kaynak

accent-color tarihinden önce, markalarla eşleşen renklere sahip bir form istediğinizde, zamanla yönetimi zorlaşan karmaşık kitaplıklar veya CSS çözümleri elde edebiliyordunuz. Size tüm seçenekleri sunmuş olsalar da ve erişilebilirliği de dahil etmişler olsa da yerleşik bileşenleri kullanma veya kendi bileşenlerinizi kullanma seçeneği arasında karar vermek zaman alıcı bir iş haline geliyor.

accent-color sonrasında, bir CSS satırı yerleşik bileşenlere marka rengi getiriyor. Tarayıcı, renk tonuna ek olarak bileşenin yardımcı parçaları için uygun kontrast renkleri akıllıca seçer ve sistem renk şemalarına (açık veya koyu) uyum sağlar.

/* tint everything */
:root {
  accent-color: hotpink;
}

/* tint one element */
progress {
  accent-color: indigo;
}

accent-color hakkında daha fazla bilgi edinmek için bu faydalı CSS özelliğinin daha birçok yönünü incelediğim web.dev makalemize göz atın.

Kaynaklar

• accent-color spesifikasyonu
• MDN'de aksan-renk
• web.dev'deki accent-color
• Bramus: CSS accent-color ile kullanıcı arayüzü kontrollerini renklendirme

Renk düzeyi 4 ve 5

Web'de son on yıllardır sRGB hakimdir ancak yüksek çözünürlüklü ekranlar ve OLED veya QLED ekranlarla önceden donatılmış mobil cihazların yer aldığı, genişleyen dijital dünyada sRGB yeterli değildir. Ayrıca, kullanıcı tercihlerine uyum sağlayan dinamik sayfalar beklenir ve renk yönetimi, tasarımcılar, tasarım sistemleri ve kod koruyucular için giderek daha önemli bir konu haline gelmiştir.

Ancak 2022'de değil. CSS'de bir dizi yeni renk işlevi ve alanı vardır: - Ekranların HD renk özelliklerine ulaşan renkler. - Bir amaca (algısal tekdüzelik gibi) uyan renk alanları. - İnterpolasyon sonuçlarını büyük ölçüde değiştiren gradyanlar için renk alanları. - Karıştırıp kontrast oluşturmanıza ve çalışmayı hangi alanda yapacağınızı seçmenize yardımcı olacak renk işlevleri.

Tüm bu renk özelliklerinden önce, tasarım sistemlerinin doğru kontrast renkleri önceden hesaplaması ve uygun şekilde canlı paletler sağlaması gerekiyordu. Bu sırada ön işlemciler veya JavaScript ağır işleri yapıyordu.

Tüm bu renk özelliklerinden sonra tarayıcı ve CSS tüm işi dinamik olarak ve tam zamanında yapabilir. CSS, tema oluşturma ve veri görselleştirme renklerini etkinleştirmek için kullanıcılara çok sayıda KB'lık CSS ve JavaScript göndermek yerine, koordinasyonu ve hesaplamaları yapabilir. CSS, kullanımdan önce desteği kontrol etmek veya yedekleri incelikle yönetmek için de daha donanımlıdır.

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

hwb()

Tarayıcı desteği

• 101
• 101
• 96
• 15

Kaynak

HWB; ton, beyazlık ve siyahlık anlamına gelir. Yalnızca bir ton ve rengi açmak veya koyulaştırmak için beyaz ya da siyah miktarı olduğu için rengi ifade etmenin kullanıcı dostu bir yolu olarak kendini gösterir. Renkleri beyaz veya siyahla karıştıran sanatçılar bu renk söz dizimi eklemesinden yararlanabilir.

Bu renk işlevi kullanıldığında, HSL ve RGB ile aynı olan sRGB renk alanından renkler elde edilir. 2022'deki yenilikler açısından bu, size yeni renkler sunmaz ancak söz dizimi ve zihinsel modelin hayranları için bazı görevleri kolaylaştırabilir.

Kaynaklar

• HWB spesifikasyonu
• MDN'de HWB
• Stefan Judis: hwb(): İnsanlar için bir renk gösterimi nedir?

Renk alanları

Renklerin gösterilme şekli, renk alanı ile yapılır. Her renk alanı, renklerle çalışırken çeşitli özellikler ve ödünler sunar. Bazıları tüm parlak renkleri bir araya getirebilir, bazıları ise önce açıklıklarına göre sıralayabilir.

2022 CSS, tasarımcıların ve geliştiricilerin renkleri görüntüleme, seçme ve karıştırma konusunda yardımcı olacak benzersiz özelliklere sahip 10 yeni renk alanı sunacak. Daha önce renklerle çalışmak için tek seçenek sRGB idi ancak artık CSS yeni potansiyellerin ve yeni bir varsayılan renk alanının (LCH) kilidini açıyor.

color-mix()

Tarayıcı desteği

• 111
• 111
• 113
• 16.2

Kaynak

color-mix() öncesinde geliştiriciler ve tasarımcılar, tarayıcı bunları görmeden renkleri karıştırmak için Sass gibi ön işlemcilere ihtiyaç duyuyordu. Renk karıştırma işlevlerinin çoğu, karıştırmanın hangi renk uzayında yapılacağını belirtme seçeneği de sunmadığından bazen kafa karıştırıcı sonuçlara yol açıyordu.

color-mix()'ten sonra geliştiriciler ve tasarımcılar, derleme işlemleri çalıştırmadan veya JavaScript eklemeden diğer tüm stilleri ile birlikte renkleri tarayıcıda karıştırabilir. Ayrıca, karıştırmanın hangi renk alanında yapılacağını belirtebilir veya LCH'nin varsayılan karıştırma renk alanını kullanabilirler.

Genellikle, bir marka rengi temel olarak kullanılır ve bundan varyantlar (ör. fareyle üzerine gelme stilleri için daha açık veya daha koyu renkler) oluşturulur. Bu işlem color-mix() için aşağıdaki gibi görünür:

.color-mix-example {
  --brand: #0af;

  --darker: color-mix(var(--brand) 25%, black);
  --lighter: color-mix(var(--brand) 25%, white);
}

Bu renkleri karıştırmak için s indir gibi farklı bir renk alanı kullanmak istiyorsanız bunu değiştirin:

.color-mix-example {
  --brand: #0af;

  --darker: color-mix(in srgb, var(--brand) 25%, black);
  --lighter: color-mix(in srgb, var(--brand) 25%, white);
}

Aşağıda, color-mix() özelliğinin kullanıldığı bir tema demosu verilmiştir. Marka rengini değiştirmeyi deneyin ve temanın güncellenmesini izleyin:

2022'de stil sayfalarınızda çeşitli renk alanlarındaki renkleri karıştırın.

Kaynaklar

• color-mix() spesifikasyonu
• MDN'de color-mix()
• Tema demosu
• Başka bir tema demo
• Fabio Giolito: Yakında kullanıma sunulacak CSS özellikleriyle renk teması oluşturma

color-contrast()

Tarayıcı desteği

• x
• x
• x
• 

Kaynak

color-contrast() tarihinden önce, stil sayfası yazarlarının erişilebilir renkleri önceden bilmesi gerekiyordu. Renk paletlerinde genellikle renk örneğinde siyah veya beyaz metin gösterilir. Bu, renk sistemini kullanan kullanıcıya söz konusu örnekle iyi bir kontrast oluşturmak için hangi metin renginin gerekli olduğunu gösterir.

2014 Materyal Tasarım renk paletlerinden örnek

color-contrast()'ten sonra stil sayfası yazarları görevi tamamen tarayıcıya aktarabilir. Tarayıcıyı yalnızca siyah veya beyaz bir renk seçmesi için kullanamazsınız. Tasarım sistemine uygun renklerin listesini vererek istediğiniz kontrast oranını karşılayan ilk rengi seçmesini de sağlayabilirsiniz.

Metin renklerinin, renk örneğine göre tarayıcı tarafından otomatik olarak seçildiği bir HWB renk paleti grubu demo'sunun ekran görüntüsü aşağıda verilmiştir:

Demoyu deneyin

Söz dizimine ilişkin temel bilgiler aşağıdaki gibidir. Burada gri işleve iletilir ve tarayıcının en fazla kontrasta sahip olan rengi (siyah veya beyaz) belirlemesi istenir:

color: color-contrast(gray);

İşlev, bir renk listesiyle de özelleştirilebilir. Bu durumda, seçimdeki en yüksek kontrasta sahip rengi seçer:

color: color-contrast(gray vs indigo, rebeccapurple, hotpink);

Son olarak, listedeki en yüksek kontrasta sahip rengi seçmek tercih edilmezse bir hedef kontrast oranı sağlanabilir ve bu oranı karşılayan ilk renk seçilir:

color: color-contrast(
  var(--bg-blue-1)
  vs
  var(--text-lightest), var(--text-light), var(--text-subdued)
  to AA /* 4.5 could also be passed */
);

Bu işlev metin renginden daha fazlası için kullanılabilir, ancak ana kullanım alanının da bu olacağını tahmin ediyorum. Uygun kontrast renkleri seçme özelliği CSS diline dahil edildiğinde erişilebilir ve okunaklı arayüzlerin ne kadar kolay sunulacağını düşünün.

Kaynaklar

• color-contrast() spesifikası
• MDN'deki color-contrast()
• Demo

Göreli renk söz dizimi

Tarayıcı desteği

• 111
• 111
• 113
• 15

Kaynak

Göreli renk söz dizimine geçmeden önce, renk üzerinde hesaplama yapmak ve ayarlamalar yapmak için renk kanallarının özel özelliklere tek tek yerleştirilmesi gerekiyordu. Bu sınırlama, ton, doygunluk veya açıklık calc() ile kolayca ayarlanabileceğinden HSL'yi renklerle işleme için birincil renk işlevi haline getirdi.

Göreli renk söz diziminde, herhangi bir alandaki herhangi bir renk, tek bir CSS satırında ayrıştırılabilir, değiştirilebilir ve renk olarak döndürülebilir. HSL'de artık sınırlama yok. İstediğiniz renk alanında işlem yapılabilir ve bu işlemi kolaylaştırmak için çok daha az özel mülk oluşturulması gerekir.

Aşağıdaki söz dizimi örneğinde, bir onaltılık taban değeri sağlanır ve buna göre iki yeni renk oluşturulur. İlk renk --absolute-change, ana renkten LCH'de yeni bir renk oluşturur, ardından ana rengin açıklığını 75% ile değiştirir. Bu sırada renk doygunluğu (c) ve ton (h) korunur. İkinci renk --relative-change, ana renkten LCH'de yeni bir renk oluşturur ancak bu kez renk doygunluğu (c) %20 oranında azaltılır.

.relative-color-syntax {
  --color: #0af;
  --absolute-change: lch(from var(--color) 75% c h);
  --relative-change: lch(from var(--color) l calc(c-20%) h);
}

Renk karıştırmaya benzer ancak karıştırmaya kıyasla daha çok değişiklik yapmaya benzer. Başka bir renkten renk oluşturabilirsiniz. Böylece, kullanılan renk işlevi tarafından adlandırılan üç kanal değerine erişebilir ve bu kanalları ayarlayabilirsiniz. Genel olarak, renk için çok havalı ve güçlü bir söz dizimidir.

Aşağıdaki demoda, temel rengin daha açık ve daha koyu varyantlarını oluşturmak için göreli renk söz dizimini, etiketlerin uygun kontrasta sahip olmasını sağlamak için de color-contrast() değerini kullandım:

Demoyu deneyin

Bu işlev, renk paleti oluşturmak için de kullanılabilir. Burada, paletlerin tamamının sağlanan bir temel renkten oluşturulduğu bir demo verilmiştir. Bu tek CSS grubu, tüm farklı paletleri destekler. Her palet farklı bir temel sağlar. LCH kullandığım için bonus olarak paletlerin duyusal olarak ne kadar dengeli olduğuna bakın. Bu renk alanı sayesinde aşırı parlak veya sönük noktalar yok.

:root {
  --_color-base: #339af0;

  --color-0:  lch(from var(--_color-base) 98% 10 h);
  --color-1:  lch(from var(--_color-base) 93% 20 h);
  --color-2:  lch(from var(--_color-base) 85% 40 h);
  --color-3:  lch(from var(--_color-base) 75% 46 h);
  --color-4:  lch(from var(--_color-base) 66% 51 h);
  --color-5:  lch(from var(--_color-base) 61% 52 h);
  --color-6:  lch(from var(--_color-base) 55% 57 h);
  --color-7:  lch(from var(--_color-base) 49% 58 h);
  --color-8:  lch(from var(--_color-base) 43% 55 h);
  --color-9:  lch(from var(--_color-base) 39% 52 h);
  --color-10: lch(from var(--_color-base) 32% 48 h);
  --color-11: lch(from var(--_color-base) 25% 45 h);
  --color-12: lch(from var(--_color-base) 17% 40 h);
  --color-13: lch(from var(--_color-base) 10% 30 h);
  --color-14: lch(from var(--_color-base) 5% 20 h);
  --color-15: lch(from var(--_color-base) 1% 5 h);
}

Demoyu deneyin

Umarız şimdiye kadar renk alanlarının ve farklı renk işlevlerinin, güçlü ve zayıf yönlerine göre farklı amaçlar için nasıl kullanılabileceğini görebilirsiniz.

Kaynaklar

• Göreli renk söz dizimi spesifikasyonu
• İlişkili renk söz dizimini kullanarak renk paletleri oluşturma
• İlişkili renk söz dizimini kullanarak renk varyantları oluşturma

Gradyan renk alanları

Gradyan renk alanlarından önce, kullanılan varsayılan renk alanı sRGB'di. sRGB genellikle güvenilirdir ancak gri ölü bölge gibi bazı zayıf yönleri vardır.

Renk geçişi renk alanlarından sonra tarayıcıya renk aralığı için hangi renk alanının kullanılacağını söyleyin. Bu sayede geliştiriciler ve tasarımcılar istedikleri degradeyi seçebilir. Varsayılan renk alanı da sRGB yerine LCH olarak değişir.

Söz dizimi eklemesi, degrade yönünün ardından gelir, yeni in söz dizimini kullanır ve isteğe bağlıdır:

background-image: linear-gradient(
  to right in hsl,
  black, white
);

background-image: linear-gradient(
  to right in lch,
  black, white
);

İşte siyahtan beyaza uzanan temel ve gerekli bir renk. Her renk alanındaki sonuç aralığına bakın. Bazıları koyu siyaha diğerlerinden daha erken ulaşır, bazıları ise beyaza çok geç dönüşür.

Bir sonraki örnekte, degradeler için bilinen bir sorun alanı olduğu için siyahtan maviye geçiş yapılır. Çoğu renk alanı, renk enterpolasyonu sırasında veya renklerin renk alanlarında A noktasından B noktasına doğru ilerlerken mor renge doğru kayar. Renk geçişi A noktasından B noktasına kadar düz bir çizgi alacağından, renk alanının şekli, yolun yol boyunca izlediği durakları büyük ölçüde değiştirir.

Not: okLCH ve okLAB, mor renge doğru olan bu gibi çeşitli kaymaları hesaba katan özel renk alanlarıdır. Bu sayede özellikle degradeler için doğru sonuçlar elde edilir.

Daha ayrıntılı incelemeler, örnekler ve yorumlar için bu Twitter mesaj dizisini okuyun.

Kaynaklar

• Gradyan enterpolasyon spesifikasyonu
• Alanlardaki gradyanları karşılaştırma demosu
• Gradyentleri karşılaştıran gözlemlenebilir not defteri

inert

Tarayıcı desteği

• 102
• 102
• 112
• 15,5

Kaynak

inert öncesinde, kullanıcının dikkatini sayfanın veya uygulamanın acil olarak ilgilenilmesi gereken alanlarına yönlendirmek iyi bir uygulamaydı. Bu rehberli odak stratejisi, geliştiricilerin odağı etkileşimli bir alana yerleştirmesi, odak değişikliği etkinliklerini dinlemesi ve odak etkileşimli alandan çıkarsa tekrar zorla yerleştirilmesi nedeniyle odak tuzağı olarak bilinir. Klavye veya ekran okuyucu kullanan kullanıcılar, ilerlemeden önce görevin tamamlandığından emin olmak için etkileşimli alana geri yönlendirilir.

inert'ten sonra, sayfanın veya uygulamanın tüm bölümlerini dondurabilir ya da koruyabileceğiniz için tuzak oluşturmanız gerekmez. Bir belgenin bu bölümleri etkin olmadığında tıklamalar ve odak değiştirme denemeleri kullanılamaz. Bu durumu bir tuzak yerine, inert'ün sizi bir yerde tutmaya değil, diğer yerleri kullanamamanıza odaklandığı bir koruma gibi de düşünebilirsiniz.

Bunun iyi bir örneği, JavaScript alert() işlevidir:

Web sitesi etkileşimli olarak gösterilir, ardından alert() çağrılır ve sayfa artık etkin değildir.

Önceki videoda, bir alert() çağrılana kadar sayfanın fare ve klavyeyle nasıl erişilebilir olduğunu görebilirsiniz. Uyarı iletişim kutusu pop-up'ı gösterildikten sonra sayfanın geri kalanı dondu veya inert oldu. Kullanıcıların odağı uyarı iletişim kutusunun içine yerleştirilir ve yapacak başka bir şey yoktur. Kullanıcı etkileşimde bulunup uyarı işlevi isteğini tamamladıktan sonra sayfa yeniden etkileşimli hale gelir. inert, geliştiricilerin bu rehberli odaklanma deneyimini kolayca elde etmesini sağlar.

İşleyiş şeklini gösteren küçük bir kod örneği aşağıda verilmiştir:

<body>
  <div class="modal">
    <h2>Modal Title</h2>
    <p>...<p>
    <button>Save</button>
    <button>Discard</button>
  </div>
  <main inert>
    <!-- cannot be keyboard focused or clicked -->
  </main>
</body>

İletişim kutusu harika bir örnektir ancak inert, açılıp kapanan yan menü kullanıcı deneyimi gibi konularda da faydalıdır. Kullanıcı yan menüyü açtığında farenin veya klavyenin arkasındaki sayfayla etkileşime girmesine izin verilmemelidir. Bu, kullanıcılar için biraz karmaşıktır. Bunun yerine, yan menü gösterildiğinde sayfayı atlatın. Artık kullanıcıların bu yan menüyü kapatması veya bu menü içinde gezinmesi gerekiyor. Böylece, açık bir menü bulunan kullanıcılar kendilerini sayfada başka bir yerde kaybolmayacaktır.

Kaynaklar

• Etkisiz spesifika
• MDN'de devre dışı bırakma
• Chrome Geliştiricileri: inert özelliğini kullanıma sunuyoruz

COLRv1 Yazı Tipleri

COLRv1 yazı tiplerinden önce, web'de OT-SVG yazı tipleri bulunuyordu. Bu yazı tipleri aynı zamanda renk geçişleri, yerleşik renk ve efektler içeren yazı tipleri için de açık bir biçimdi. Ancak bu kartlar çok büyük olabilir ve metnin düzenlenmesine izin verse de özelleştirme için çok fazla alan yoktu.

COLRv1 yazı tiplerinden sonra web'de, yazı tipini kullanım durumuna göre özelleştirmek veya bir markayla eşleştirmek için parametreleri kabul eden daha küçük yer kaplayan, vektör ölçeklenebilir, yeniden konumlandırılabilir, degrade özellikli ve karışım modu destekli yazı tipleri vardır.

https://developer.chrome.com/blog/colrv1-fonts/ adresinden alınan resim

Chrome Geliştirici'nin emojilerle ilgili blog yayınındaki bir örneği aşağıda bulabilirsiniz. Bir emojinin yazı tipi boyutunu büyüttüğünüzde emojinin keskinliğini kaybetmesini fark etmiş olabilirsiniz. Vektör resim değil, resim olmalıdır. Genellikle emoji kullanılan uygulamalarda, bu emojiler daha kaliteli bir öğeyle değiştirilir. COLRv1 yazı tipleriyle emojiler vektörel ve güzel görünür:

Simge yazı tipleri, bu biçimle özel ikili ton renk paletleri ve daha fazlasını sunarak harikalar yaratabilir. COLRv1 yazı tipini yükleme işlemi diğer yazı tipi dosyalarıyla aynıdır:

@import url(https://fonts.googleapis.com/css2?family=Bungee+Spice);

COLRv1 yazı tipini özelleştirme işlemi, bir dizi özelleştirme seçeneğini daha sonra başvurmak üzere bir pakette gruplandırmayı ve adlandırmayı sağlayan özel bir CSS olan @font-palette-values ile yapılır. Özel bir adı, özel mülk gibi -- ile başlayarak nasıl belirttiğinize dikkat edin:

@import url(https://fonts.googleapis.com/css2?family=Bungee+Spice);

@font-palette-values --colorized {
  font-family: "Bungee Spice";
  base-palette: 0;
  override-colors: 0 hotpink, 1 cyan, 2 white;
}

Özelleştirmelerin takma adı --colorized ise son adım, paleti renk yazı tipi ailesini kullanan bir öğeye uygulamaktır:

@import url(https://fonts.googleapis.com/css2?family=Bungee+Spice);

@font-palette-values --colorized {
  font-family: "Bungee Spice";
  base-palette: 0;
  override-colors: 0 hotpink, 1 cyan, 2 white;
}

.spicy {
  font-family: "Bungee Spice";
  font-palette: --colorized;
}

Özel renklerle gösterilen Bungee Spice yazı tipi. Kaynak: https://developer.chrome.com/blog/colrv1-fonts/

Değişken yazı tipleri ve renkli yazı tipleri giderek daha fazla kullanıma sunuluyor. Bu da web yazı tiplerinin zengin özelleştirme ve yaratıcı ifadeye doğru ilerlediğine dair çok güzel bir gösterge.

Kaynaklar

• GitHub'daki Colrv1 spesifikasyonu
• Chrome Developers: Colrv1 Fonts
• BlinkOn geliştirici açıklayıcı videosu

Görüntü alanı birimleri

Yeni görüntü alanı varyantlarından önce web, görüntü alanlarını sığdırmaya yardımcı olmak için fiziksel birimler sunuyordu. Yükseklik, genişlik, en küçük boyut (vmin) ve en büyük kenar (vmax) için birer tane vardı. Bu yöntemler birçok durumda işe yaradı ancak mobil tarayıcılar karmaşıklık getirdi.

Mobilde, bir sayfa yüklenirken URL'yi içeren durum çubuğu gösterilir ve bu çubuk, görüntü alanının bir kısmını kullanır. Birkaç saniye ve biraz etkileşimden sonra durum çubuğu, kullanıcıya daha büyük bir ekran deneyimi sunmak için kaydırılabilir. Ancak bu çubuk dışarı kaydırıldığında görüntü alanı yüksekliği değişir ve tüm vh birimleri, hedef boyutları değiştikçe kaydırılır ve yeniden boyutlandırılır. Daha sonraki yıllarda, vh birimi, mobil cihazlarda rahatsız edici görsel düzen sorunlarına neden olduğu için iki görüntü alanı boyutundan hangisini kullanacağına karar vermesi gerekiyordu. vh değerinin her zaman en büyük görüntü alanını temsil edeceği belirlenmiştir.

.original-viewport-units {
  height: 100vh;
  width: 100vw;
  --size: 100vmin;
  --size: 100vmax;
}

Yeni görüntü alanı varyantlarından sonra küçük, büyük ve dinamik görüntü alanı birimleri kullanıma sunulur. Fiziksel görüntü alanlarına mantıksal eşdeğerler de eklenir. Amaç, geliştiricilere ve tasarımcılara belirli senaryoları için kullanmak istedikleri birimi seçme olanağı sunmaktır. Durum çubuğu kaybolduğunda küçük bir sarsıcı düzen kayması olması sorun olmayabilir. Bu durumda dvh (dinamik görüntü alanı yüksekliği) endişelenmeden kullanılabilir.

Yeni görüntü alanı varyantlarıyla kullanıma sunulan tüm yeni görüntü alanı birimi seçeneklerinin tam listesini burada bulabilirsiniz:

Yükseklik görüntü alanı birimleri

​​.new-height-viewport-units {
  height: 100vh;
  height: 100dvh;
  height: 100svh;
  height: 100lvh;
  block-size: 100vb;
  block-size: 100dvb;
  block-size: 100svb;
  block-size: 100lvb;
}

Genişlik görüntü alanı birimleri

.new-width-viewport-units {
  width: 100vw;
  width: 100dvw;
  width: 100svw;
  width: 100lvw;
  inline-size: 100vi;
  inline-size: 100dvi;
  inline-size: 100svi;
  inline-size: 100lvi;
}

En küçük görüntü alanı yan birimleri

.new-min-viewport-units {
  --size: 100vmin;
  --size: 100dvmin;
  --size: 100svmin;
  --size: 100lvmin;
}

En büyük görüntü alanı yan birimleri

.new-max-viewport-units {
  --size: 100vmax;
  --size: 100dvmax;
  --size: 100svmax;
  --size: 100lvmax;
}

Bu özelliklerin, geliştiricilere ve tasarımcılara, duyarlı görünüm alanı tasarımları oluşturmak için ihtiyaç duydukları esnekliği sağlayacağını umuyoruz.

Kaynaklar

• Görüntü alanı göreli birimleri spesifikasyonu
• Bramus: Büyük, Küçük ve Dinamik Görüntü Alanları

:has()

Tarayıcı desteği

• 105
• 105
• 121
• 15.4

Kaynak

:has() öncesinde, seçicinin öznesi her zaman sondaydı. Örneğin, bu seçicinin konusu bir liste öğesidir: ul > li. Sözde seçiciler seçiciyi değiştirebilir ancak konuyu değiştirmez: ul > li:hover veya ul > li:not(.selected).

:has() öğesinden sonra, öğe ağacında daha üstte olan bir konu, çocuklarla ilgili bir sorgu sağlarken konu olarak kalabilir: ul:has(> li). Seçicinin konusu bu durumda üst öğe olduğundan :has()'ün "üst öğe seçici" olarak adlandırılmasının nedeni kolayca anlaşılabilir.

Aşağıda, .parent sınıfının özne olarak kaldığı ancak yalnızca bir alt öğenin .child sınıfına sahip olması durumunda seçildiği temel bir söz dizimi örneği verilmiştir:

.parent:has(.child) {...}

Aşağıda, öznenin bir <section> öğesi olduğu ancak seçicinin yalnızca alt öğelerden birinde :focus-visible varsa eşleştiği bir örnek verilmiştir:

section:has(*:focus-visible) {...}

Not: :focus-within zaten section:has(*:focus-visible)'a benzer şekilde davranıyor ve bunun yerine kullanılmalıdır.

Daha pratik kullanım alanları ortaya çıktıktan sonra :has() seçici, müthiş bir yardımcı program olmaya başladı. Örneğin, şu anda resimleri sarmalayan <a> etiketlerini seçmek mümkün değildir. Bu da, ana sayfa etiketine bu kullanım alanında stillerini nasıl değiştireceğini öğretmeyi zorlaştırır. Ancak :has() ile şunları yapabilirsiniz:

a:has(> img) {...}

Bunların hepsi, :has()'ün yalnızca bir üst öğe seçici gibi göründüğü örneklerdir. <figure> öğelerinin içindeki resimlerin kullanım alanını göz önünde bulundurun ve şekillerde <figcaption> varsa resimlerdeki stilleri ayarlayın. Aşağıdaki örnekte, altyazı içeren şekiller ve ardından bu bağlamdaki resimler seçilir. Hedeflediğimiz konu şekiller değil resimler olduğu için :has() kullanılır ve konuyu değiştirmez:

figure:has(figcaption) img {...}

Kombinasyonlar sonsuzdur. :has() öğesini miktar sorgularıyla birleştirin ve CSS ızgara düzenlerini alt öğe sayısına göre ayarlayın. :has()'ü etkileşimli sözde sınıf durumlarıyla birleştirin ve yeni ve yaratıcı şekillerde yanıt veren uygulamalar oluşturun.

Destek olup olmadığını kontrol etmek, @supports ve selector() işleviyle kolayca yapılabilir. Bu işlev, tarayıcı söz dizimini kullanmadan önce söz dizimini anlayıp anlamadığını test eder:

@supports (selector(:has(works))) {
  /* safe to use :has() */
}

Kaynaklar

• :has() spesifikasyonu
• MDN'de :has()
• CSS :has() seçici, "üst öğe seçicisinden" çok daha fazlasıdır

2022 ve sonrası

2022'de kullanıma sunacağımız bu muhteşem özelliklerin ardından da yapmamız gereken çok şey var. Sonraki bölümde, kalan sorunlardan bazılarına ve bunları çözmek için aktif olarak geliştirilmekte olan çözümlere göz atılmaktadır. Tarayıcılarda belirtilmiş veya işaretler arkasında kullanılabilir olsalar bile bu çözümler deneyseldir.

Sonraki bölümlerde, listelenen sorunların birçok şirketten çok sayıda kullanıcının çözüm aradığına dair rahatlık verici bilgiler verilecektir. Bu çözümlerin 2023'te kullanıma sunulacağından bahsedilmeyecektir.

Gevşek yazılmış özel özellikler

Tarayıcı desteği

• 85
• 85
• 128
• 16,4

Kaynak

CSS özel özellikleri muhteşemdir. Her türlü şeyin adlandırılmış bir değişkende depolanmasına olanak tanır. Bu değişken daha sonra genişletilebilir, hesaplanabilir, paylaşılabilir ve daha birçok işlem yapılabilir. Aslında o kadar esnekler ki daha az esnek olanları olsa iyi olurdu.

box-shadow öğesinin, değerleri için özel özellikler kullandığı bir senaryo düşünün:

box-shadow: var(--x) var(--y) var(--blur) var(--spread) var(--color);

Bu özelliklerin tümü, özelliklerden biri CSS'nin kabul etmediği bir değere (ör. --x: red) değiştirilene kadar sorunsuz çalışır. İç içe yerleştirilmiş değişkenlerden herhangi biri eksikse veya geçersiz bir değer türüne ayarlanmışsa gölgenin tamamı bozulur.

@property burada devreye girer: --x artık esnek ve esnek olmayan ancak bazı tanımlanmış sınırlarla güvenli olan, yazılan bir özel mülk haline gelebilir:

@property --x {
  syntax: '<length>';
  initial-value: 0px;
  inherits: false;
}

Artık box-shadow, var(--x)'u kullandığında ve daha sonra --x: red denediğinde red, <length> olmadığı için yoksayılır. Bu, özel özelliklerinden birine geçersiz bir değer verilmiş olsa bile gölgenin çalışmaya devam ettiği anlamına gelir. Başarısız olmak yerine 0px değerinin initial-value değerine geri döner.

Animasyon

Tür güvenliğine ek olarak animasyon için de birçok kapı açar. CSS söz dizisinin esnekliği, gradyanlar gibi bazı öğelerin animasyonunu imkansız hale getirir. Yazılan CSS özelliği tarayıcıya, aksi takdirde aşırı karmaşık interpolasyondaki niyetini bildirebileceği için @property burada yardımcı olur. Bu, temel olarak bir tarayıcının bir stilin daha önce animasyonlu hale getiremediği özelliklerini animasyonlu hale getirebilmesi için olasılıkların kapsamını sınırlandırır.

Bir yer paylaşımının bir bölümünü oluşturmak için radyal gradyanın kullanıldığı ve spot ışığı odak efekti oluşturan bu demo örneğini düşünün. JavaScript, alt/opt tuşuna basıldığında farenin x ve y koordinatlarını ayarlar, ardından odak boyutunu %25 gibi daha küçük bir değere değiştirerek fare konumunda spot ışığı odak çemberini oluşturur:

Demoyu deneyin

.focus-effect {
  --focal-size: 100%;
  --mouse-x: center;
  --mouse-y: center;

  mask-image: radial-gradient(
    circle at var(--mouse-x) var(--mouse-y),
    transparent 0%,
    transparent var(--focal-size),
    black 0%
  );
}

Ancak degradeler animasyonlu olamaz. Bu öğeler, tarayıcının animasyonlarını istediğiniz şekilde "türetmesi" için çok esnek ve karmaşıktır. Bununla birlikte, @property ile bir özellik ayrı olarak yazılabilir ve canlandırılabilir. Böylece tarayıcı, amacı kolayca anlayabilir.

Bu odaklanma efektini kullanan video oyunlarında, daire her zaman büyük bir daireden küçük bir daireye doğru animasyonlu olarak gösterilir. Tarayıcının gradyan maskesine animasyon eklemesi için @property özelliğinin demomuzla nasıl kullanılacağı aşağıda açıklanmıştır:

@property --focal-size {
  syntax: '<length-percentage>';
  initial-value: 100%;
  inherits: false;
}

.focus-effect {
  --focal-size: 100%;
  --mouse-x: center;
  --mouse-y: center;

  mask-image: radial-gradient(
    circle at var(--mouse-x) var(--mouse-y),
    transparent 0%,
    transparent var(--focal-size),
    black 0%
  );

  transition: --focal-size .3s ease;
}

Demoyu deneyin

Değişikliğin yüzey alanını yalnızca bir özelliğe indirdiğimizden ve tarayıcının uzunlukları akıllı bir şekilde hesaplayabilmesi için değeri yazdığımızdan, tarayıcı artık renk geçişi boyutunu canlandırabilir.

@property çok daha fazlasını yapabilir ancak bu küçük etkinleştirmeler çok faydalı olabilir.

Kaynaklar

• @property specification
• MDN'deki @property
• web.dev'de@property
• Yakınlaştırma odağı demosu
• CSS Tricks: Exploring @property and its animating powers

min-width veya max-width'da bulunuyordu

CSS medya sorgusu, medya sorgusu aralıklarını belirtmeden önce min-width ve max-width kullanarak "üstünde" ve "altında" koşullarını belirtir. Bu, aşağıdaki gibi görünebilir:

@media (min-width: 320px) {
  …
}

Medya sorgu aralıkları eklendikten sonra aynı medya sorgusu şu şekilde görünebilir:

@media (width >= 320px) {
  …
}

Hem min-width hem de max-width kullanan bir CSS medya sorgusu aşağıdaki gibi görünebilir:

@media (min-width: 320px) and (max-width: 1280px) {
  …
}

Medya sorgusu aralıkları eklendikten sonra aynı medya sorgusu şu şekilde görünebilir:

@media (320px <= width <= 1280px) {
  …
}

Kodlama geçmişinize bağlı olarak, bunlardan biri diğerine kıyasla çok daha okunaklı görünür. Spesifikasyonlara eklenen özellikler sayesinde geliştiriciler tercihlerini belirleyebilir ve hatta bunları birbirinin yerine kullanabilir.

Kaynaklar

• Medya sorgu aralığı söz dizimi spesifikasyonu
• MDN'de medya sorgusu aralık söz dizimi
• Medya sorgu aralığı söz dizimi PostCSS eklentisi

Medya sorgusu değişkeni yok

@custom-media'ten önce medya sorgularının tekrar tekrar tekrarlanması veya derleme sırasında statik değişkenlere göre doğru çıkışı oluşturmak için önişleyicilere başvurulması gerekiyordu.

@custom-media'den sonra CSS, medya sorgularının takma ad almasına ve özel bir özellik gibi bunlara referans verilmesine izin verir.

Nesnelere ad vermek çok önemlidir: Amaçla söz dizimi arasında uyum sağlayarak öğelerin paylaşılmasını ve ekiplerde kullanılmasını kolaylaştırır. Projeler arasında beni takip eden birkaç özel medya sorgusu aşağıda verilmiştir:

@custom-media --OSdark  (prefers-color-scheme: dark);
@custom-media --OSlight (prefers-color-scheme: light);

@custom-media --pointer (hover) and (pointer: coarse);
@custom-media --mouse   (hover) and (pointer: fine);

@custom-media --xxs-and-above (width >= 240px);
@custom-media --xxs-and-below (width <= 240px);

Tanımlandıktan sonra bunlardan birini şu şekilde kullanabilirim:

@media (--OSdark) {
  :root {
    …
  }
}

CSS özel mülk kitaplığımda kullandığım özel medya sorgularının tam listesini Open Props'u bulun.

Kaynaklar

• Özel medya sorguları spesifikasyonu
• Özel medya sorguları PostCSS eklentisi

İç içe yerleştirilmiş seçiciler çok güzel

@nest'ten önce stil sayfalarında çok fazla tekrar vardı. Seçiciler uzun olduğunda ve her biri küçük farklılıkları hedeflediğinde bu durum özellikle zorlaşır. İç içe yerleştirmenin rahatlığı, ön işlemci benimsemenin en yaygın nedenlerinden biridir.

@nest sonra, tekrarlar kaybolur. Ön işlemci destekli iç içe yerleştirmenin neredeyse tüm özellikleri CSS'de yerleşik olarak sunulacaktır.

article {
  color: darkgray;
}

article > a {
  color: var(--link-color);
}

/* with @nest becomes */

article {
  color: darkgray;

  & > a {
    color: var(--link-color);
  }
}

Not: Söz dizimini PostCSS ve PostCSS İç İçe Yerleştirme eklentisiyle birlikte kullanın.

İç içe yerleştirmeyle ilgili benim için en önemli şey, iç içe yerleştirilmiş seçicide article değerinin tekrarlanmaması ve stil bağlamının tek bir stil bloğunda kalması. Okuyucu, bir seçici ve stillerinden başka bir seçiciye (örnek 1) atlamak yerine bir makalenin bağlamında kalabilir ve makalenin içindeki bağlantıları görebilir. İlişki ve stil amacı bir araya getirildiğinden article kendi stillerine sahip gibi görünür.

Sahiplik, merkezileşme olarak da düşünülebilir. Alakalı stiller için bir stil sayfasında arama yapmak yerine, hepsini bir bağlamda birlikte iç içe yerleştirilmiş olarak bulabilirsiniz. Bu, üst öğe ile alt öğe arasındaki ilişkilerde olduğu gibi alt öğe ile üst öğe arasındaki ilişkilerde de kullanılabilir.

Stilin sahibi olan ve çocuğu değiştiren ebeveynin aksine, farklı bir ebeveyn bağlamındayken kendini ayarlamak isteyen bir alt bileşeni düşünün:

/* parent owns this, adjusting children */
section:focus-within > article {
  border: 1px solid hotpink;
}

/* with @nest becomes */

/* article owns this, adjusting itself when inside a section:focus-within */
article {
  @nest section:focus-within > & {
     border: 1px solid hotpink;
  }
}

@nest, daha sağlıklı bir stil organizasyonu, merkezileştirme ve sahiplik için genel olarak yardımcı olur. Bileşenler, diğer stil blokları arasında yayılmaları yerine kendi stillerini gruplandırabilir ve sahip olabilir. Bu örneklerde küçük görünse de hem kolaylık hem de okunabilirlik açısından çok büyük etkileri olabilir.

Uyarı: Dört veya beşten fazla düzeyde iç içe yerleştirme yapmak, seçicileri tekrarlamaktan daha fazla soruna yol açabilir. Çok derin iç içe yerleştirme yapmamanızı, bunun yerine yeni bir seçici blogu başlatıp içine yerleştirme yapmanızı öneririz.

Kaynaklar

• @nest specification
• @nest PostCSS eklentisi
• Bramus: CSS'nin geleceği: Seçicilerin iç içe yerleştirilmesi

Stil kapsamını belirlemek gerçekten zor

Tarayıcı desteği

• 118
• 118
• 
• 17,4

Kaynak

@scope'ten önce, CSS'deki stiller basamaklandırıldığı, devraldığı ve varsayılan olarak küresel kapsama sahip olduğu için birçok strateji mevcuttu. CSS'nin bu özellikleri birçok şey için çok kullanışlıdır ancak birçok farklı bileşen stili bulunan karmaşık siteler ve uygulamalarda, genel alan ve basamaklandırmanın yapısı, stillerin sızıyormuş gibi görünmesine neden olabilir.

@scope sonrasında stillerin kapsamı yalnızca sınıf gibi bir bağlamda yer alacak şekilde ayarlamakla kalmaz, aynı zamanda stillerin nerede sona ereceğini de belirtebilir. Stiller basamaklamaya veya devralmaya devam etmez.

Aşağıdaki örnekte, BEM adlandırma kuralı kapsamı gerçek amaca göre tersine çevrilebilir. BEM seçici, adlandırma kurallarıyla header öğesinin rengini .card kapsayıcıya dahil etmeye çalışıyor. Bunun için başlıkta bu sınıf adının bulunması ve hedefin tamamlanması gerekir. @scope kullanıldığında, başlık öğesini işaretlemeden aynı hedefi tamamlamak için herhangi bir adlandırma kuralı gerekmez:

.card__header {
  color: var(--text);
}

/* with @scope becomes */

@scope (.card) {
  header {
    color: var(--text);
  }
}

Burada daha az bileşene özgü ve daha çok CSS'nin global kapsam yapısıyla ilgili bir örnek daha verilmiştir. Koyu ve açık temaların bir stil sayfasında birlikte bulunması gerekir. Bu durumda, başarılı bir stilin belirlenmesinde sıra önemlidir. Bu genellikle koyu tema stillerinin açık temadan sonra geldiği anlamına gelir. Bu durumda açık tema varsayılan, koyu tema ise isteğe bağlı stil olarak belirlenir. @scope ile sıralama ve kapsam çakışmasını önlemek için:

​​@scope (.light-theme) {
  a { color: purple; }
}

@scope (.dark-theme) {
  a { color: plum; }
}

Buradaki hikayeyi tamamlamak için @scope, stil kapsamının nerede sona ereceğini belirlemenize de olanak tanır. Bu, herhangi bir adlandırma kuralı veya önişleyiciyle yapılamaz. Özel bir işlemdir ve yalnızca tarayıcıya yerleşik CSS'nin yapabileceği bir işlemdir. Aşağıdaki örnekte, img ve .content stilleri yalnızca bir .media-block öğesinin alt öğesi .content öğesinin kardeş veya üst öğesi olduğunda uygulanır:

@scope (.media-block) to (.content) {
  img {
    border-radius: 50%;
  }

  .content {
    padding: 1em;
  }
}

Kaynaklar

• @kapsam spesifikasyonu
• @kapsam açıklayıcısı

Duvar düzeni için CSS yolu yok

CSS ızgaralı taş döşeme düzeninden önce, sütun veya flexbox içeren CSS yöntemlerinden herhangi biri içerik sırasını yanlış şekilde temsil ettiğinden, taş döşeme düzeni oluşturmanın en iyi yolu JavaScript'ti.

CSS ızgaralı duvarı kullanıldığında JavaScript kitaplıkları gerekmez ve içerik sırası doğru olur.

Smashing Magazine'den resim ve demo
https://www.smashingmagazine.com/native-css-masonry-layout-css-grid/

Önceki demo aşağıdaki CSS ile gerçekleştirilir:

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: masonry;
}

Eksik bir düzen stratejisi olarak radarda olduğunu bilmek rahatlatıcıdır. Ayrıca Firefox'ta hemen deneyebilirsiniz.

Kaynaklar

• Duvar düzeni spesifikasyonu
• MDN'de taş kaplama düzeni
• Smashing Magazine: CSS Grid ile Yerel CSS Duvar Düzeni

CSS, kullanıcıların veri kullanımını azaltmasına yardımcı olamaz

Tarayıcı desteği

• 
• 
• x
• x

Kaynak

prefers-reduced-data medya sorgusundan önce JavaScript ve sunucu, kullanıcının işletim sistemine veya tarayıcı "veri tasarrufu" seçeneğine göre davranışlarını değiştirebiliyordu ancak CSS bunu yapamıyordu.

prefers-reduced-data medya sorgusundan sonra CSS, kullanıcı deneyimi iyileştirmesine katılır ve verilerin kaydedilmesinde hesaba katılır.

@media (prefers-reduced-data: reduce) {
  picture, video {
    display: none;
  }
}

Önceki CSS, bu medya kaydırma bileşeninde kullanılır ve büyük tasarruf sağlayabilir. Ziyaret edilen görüntü alanının boyutuna bağlı olarak sayfa yükleme işleminde daha fazla tasarruf elde edilebilir. Kullanıcılar medya kaydırma çubuklarıyla etkileşim kurarken kaydetme işlemi devam eder. Resimlerin tümü loading="lazy" özelliklerine sahiptir ve CSS'nin öğeyi tamamen gizlemesiyle birlikte, resim için hiçbir zaman ağ isteği gönderilmez.

Yaptığım testler için orta boyutlu bir görüntü alanında başlangıçta 40 istek ve 700 kb kaynak yüklendi. Kullanıcı medya seçimini kaydırırken daha fazla istek ve kaynak yüklenir. CSS ve azaltılmış veri medya sorgusu ile 10 istek ve 172 KB kaynak yüklenir. Bu, yarım megabayt tasarruf demektir ve kullanıcı henüz medya öğelerinde kaydırma yapmamıştır. Bu noktada ek istek gönderilmez.

Bu kısaltılmış veri deneyiminin avantajları, veri tasarrufundan ibaret değildir. Daha fazla başlık görülebilir ve dikkati dağıtacak kapak resimleri yoktur. Birçok kullanıcı, megabayt başına ödeme yaptığı için veri tasarrufu modunda gezinir. CSS'nin bu konuda yardımcı olabildiğini görmek gerçekten çok güzel.

Kaynaklar

• azaltılmış veri spesifikasyonunu tercih eder
• MDN'de azaltılmış verileri tercih eder
• Grafik kullanıcı arayüzünde prefers-reduced-data ile ilgili sorun
• Smashing Magazine: Core Web Vitals'ı İyileştirme, Smashing Magazine Örnek Çalışması

Kaydırma sabitleme özellikleri çok sınırlı

Bu kaydırma anlık görüntüleme önerilerinden önce, bir bant, kaydırma çubuğu veya galeriyi yönetmek için kendi JavaScript'inizi yazmak, tüm gözlemciler ve durum yönetimiyle birlikte hızla karmaşık hale gelebilirdi. Ayrıca, dikkatli olunmaması halinde doğal kaydırma hızları komut dosyası tarafından normalleştirilerek kullanıcı etkileşiminin doğal olmayan ve hantal bir deneyim yaşamasına yol açabilir.

Yeni API'ler

snapChanging()

Tarayıcı bir anlık görüntü alt öğesini yayınlar yayınlamaz bu etkinlik tetiklenir. Bu, kullanıcı arayüzünün anlık bir alt öğe eksikliğini ve kaydırıcının belirsiz anlık durumunu yansıtmasını sağlar. Çünkü artık kullanılmakta olup yeni bir yere yerleştirilecektir.

document.querySelector('.snap-carousel').addEventListener('snapchanging', event => {
  console.log('Snap is changing', event.snappedTargetsList);
});

snapChanged()

Tarayıcı yeni bir alt öğeye sabitlenir ve kaydırma çubuğu dinlenmeye alınır alınmaz bu etkinlik tetiklenir. Bu sayede, yakalanan alt öğeye bağlı tüm kullanıcı arayüzleri güncellenir ve bağlantıyı yansıtır.

document.querySelector('.snap-carousel').addEventListener('snapchanged', event => {
  console.log('Snap changed', event.snappedTargetsList);
});

scroll-start

Kaydırma her zaman baştan başlamaz. Sola veya sağa kaydırmanın farklı etkinlikleri tetiklediği kaydırılabilir bileşenleri veya sayfa yüklendiğinde en üste kaydırana kadar başlangıçta gizli olan bir arama çubuğunu düşünün. Bu CSS mülkü, geliştiricilerin kaydırma çubuğunun belirli bir noktada başlamasını belirtmesine olanak tanır.

:root { --nav-height: 100px }

.snap-scroll-y {
  scroll-start-y: var(--nav-height);
}

:snap-target

Bu CSS seçici, şu anda tarayıcı tarafından tutturulmuş olan bir kaydırma tutturma kapsayıcısındaki öğeleri eşleştirir.

.card {
  --shadow-distance: 5px;
  box-shadow: 0 var(--shadow-distance) 5px hsl(0 0% 0% / 25%);
  transition: box-shadow 350ms ease;
}

.card:snapped {
  --shadow-distance: 30px;
}

Bu kaydırma anlık görüntü önerilerinden sonra, tarayıcı artık görev için kolaylıklar sunduğundan, yerleşik API'leri kullanmak üzere gözlemcileri ve kaydırma orkestrasyon kodunu ortadan kaldırdığından kaydırma çubuğu, bant veya galeri oluşturmak çok daha kolaydır.

Bu CSS ve JS özelliklerinin kullanıma sunulması henüz çok yeni olsa da yakında bu özelliklerin benimsenmesine ve test edilmesine yardımcı olabilecek polyfill'ler kullanıma sunulacaktır.

Kaynaklar

• Kaydırma 2 taslak spesifikasyonu
• Scroll Snap 2 açıklamalarını kaydırın
• Snap demoları

Bilinen durumlar arasında geçiş yapma

toggle() tarihinden önce, stil ve etkileşim için yalnızca tarayıcıda yerleşik olan durumlardan yararlanılmaktaydı. Örneğin, onay kutusu girişinde :checked bulunur. Bu, CSS'nin öğeyi görsel olarak değiştirmek için kullanabileceği giriş için dahili olarak yönetilen bir tarayıcı durumudur.

toggle() sürümünden sonra, CSS'nin değiştirip stil oluşturmak için kullanabileceği herhangi bir öğede özel durumlar oluşturulabilir. Gruplar, geçiş, yönlendirmeli açma/kapatma ve daha fazlasını sağlar.

Aşağıdaki örnekte, tamamlanmış bir liste öğesinin üzerinin çizilmesi ile aynı etki, onay kutusu öğeleri olmadan elde edilmiştir:

<ul class='ingredients'>
   <li>1 banana
   <li>1 cup blueberries
  ...
</ul>

İlgili CSS toggle() stilleri:

li {
  toggle-root: check self;
}

li:toggle(check) {
  text-decoration: line-through;
}

Durum makineleri hakkında bilginiz varsa toggle() ile ne kadar kesişim olduğunu fark edebilirsiniz. Bu özellik, geliştiricilerin durumlarının daha fazlasını CSS'de oluşturmasına olanak tanıyacak. Bu da etkileşim ve durumu düzenlemenin daha net ve daha anlamlı yollarına yol açacaktır.

Kaynaklar

• toggle() taslak spesifikasyonu
• Bramus: CSS'nin Geleceği: CSS Toggles

Belirli öğeleri özelleştirme

<selectmenu> öncesinde CSS'nin <option> öğelerini zengin HTML ile özelleştirebilme veya seçenek listesinin görüntülenmesiyle ilgili büyük ölçüde değişiklik yapma imkanı yoktu. Bu da geliştiricilerin, <select> işlevinin işlevlerinin büyük bir kısmını yeniden oluşturan harici kitaplıkları yüklemesine ve bunun sonucunda çok fazla iş çıkarmasına yol açtı.

<selectmenu>'ten sonra geliştiriciler, seçenek öğeleri için zengin HTML sağlayabilir ve erişilebilirlik şartlarını karşılayıp semantik HTML sağlarken bunları istedikleri kadar biçimlendirebilir.

<selectmenu> Açıklama sayfasından alınan aşağıdaki örnekte, bazı temel seçeneklerin yer aldığı yeni bir seçim menüsü oluşturulmuştur:

<selectmenu>
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</selectmenu>

CSS, öğenin bölümlerini hedefleyebilir ve bunlara stil uygulayabilir:

.my-select-menu::part(button) {
  color: white;
  background-color: red;
  padding: 5px;
  border-radius: 5px;
}

.my-select-menu::part(listbox) {
  padding: 10px;
  margin-top: 5px;
  border: 1px solid red;
  border-radius: 5px;
}

Web denemeleri işareti etkinken Canary'deki Chromium'daki <selectmenu> öğesini deneyebilirsiniz. 2023 ve sonrasında özelleştirilebilir belirli menü öğelerini kullanıma sunacağız.

Kaynaklar

• Selectmenu özellikleri
• Selectmenu demo

Bir öğeyi başka bir öğeye sabitleme

anchor()'ten önce, geliştiricilerin alt öğelerin bir üst öğe içinde hareket etmesini sağlamak için mutlak ve göreli konum stratejileri sağlanıyordu.

anchor() tarihinden sonra geliştiriciler, alt öğe olup olmamalarına bakılmaksızın öğeleri diğer öğelere yerleştirebilir. Ayrıca geliştiricilerin hangi kenara göre konumlanacağını ve öğeler arasında konum ilişkileri oluşturmak için diğer ayrıntıları belirtmesine olanak tanır.

Daha fazla bilgi edinmek isterseniz açıklama bölümünde birkaç mükemmel örnek ve kod örneği verilmiştir.

Kaynaklar

• anchor() açıklama