CSS'nin durumu 2022

Google IO 2022'de gösterilen, günümüzün ve geleceğin web stil özellikleri ile bazı ekstralar.

Adam Argyle

2022, hem özellikler hem de işbirlikçi tarayıcı özelliği yayınları açısından CSS'nin en iyi yıllarından biri olacak. 14 özelliği kullanıma sunmak için işbirliği yapılacak.

Genel Bakış

Bu yayın, Google IO 2022'de yapılan konuşmanın makale biçimidir. Bu kılavuz, her özellik hakkında ayrıntılı bilgi vermek yerine, ilginizi çekmek için kısa bir giriş ve genel bakış sunmayı amaçlar. Bu nedenle, derinlemesine bilgi yerine geniş bir bakış açısı sunar. İlginizi çektiyse daha fazla bilgi için bölüm sonundaki kaynak bağlantılarına göz atın.

İçindekiler

İlginizi çeken konulara gitmek için aşağıdaki listeyi kullanın:

Tarayıcı uyumluluğu

Birçok CSS özelliğinin ortaklaşa yayınlanmasının temel nedeni Interop 2022'nin çalışmalarıdır. Interop çalışmalarını incelemeden önce Compat 2021'in çalışmalarına göz atmak önemlidir.

Compat 2021

Anketler aracılığıyla geliştiricilerden gelen geri bildirimler doğrultusunda 2021'deki hedefler, 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 konumlandırma ve animasyon

Test puanları genel olarak yükseldi. Bu, kararlılık ve güvenilirliğin iyileştirildiğini gösteriyor. Bu ekipleri tebrik ederiz.

Interop 2022

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

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

Bu heyecan verici ve iddialı listenin nasıl şekilleneceğini görmek için sabırsızlanıyorum.

2022'de yenilenenler

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

Basamaklı katmanlar

@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 yazabiliyordu. Bu durum, giriş stil sayfalarının titizlikle yönetilmesine yol açtı. Geliştiricilerin daha az önemli stilleri önce, daha önemli stilleri ise sonra yüklemesi gerekiyordu. Geliştiricilerin bu önemi yönetmesine yardımcı olmak için ITCSS gibi yöntemler mevcuttur.

@layer ile giriş dosyası, katmanları ve bunların sırasını önceden tanımlayabilir. Ardından, stiller yüklendikçe veya tanımlandıkça bir katmana yerleştirilebilir. Bu sayede, stil geçersiz kılma önceliği korunur ancak yükleme düzeni titizlikle yönetilmez.

Videoda, tanımlanan basamaklı katmanların, basamağı gerektiği gibi korurken daha özgür ve serbest stil bir yazma ve yükleme sürecine nasıl olanak tanıdığı gösterilmektedir.

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

Kaynaklar

• CSS Cascade 5 spesifikasyonu
• Katmanları sıralama açıklayıcısı
• MDN'de basamaklı katmanlar
• Una Kravets: Cascade Layers
• Ahmad Shadeed: Hello, CSS Cascade Layers

Alt Izgara

subgrid öncesinde, başka bir ızgaranın içindeki bir ızgara, üst hücreleri veya ızgara çizgileriyle hizalanamıyordu. Her ızgara düzeni benzersizdi. Birçok tasarımcı, tasarımının tamamına tek bir ızgara yerleştirir ve içindeki öğeleri sürekli olarak hizalar. Bu, CSS'de yapılamaz.

subgrid sonrasında, bir ızgaranın alt öğesi, ebeveynlerinin sütunlarını veya satırlarını kendi sütunları ya da satırları olarak kullanabilir ve kendisini veya alt öğelerini bunlara göre hizalayabilir.

Aşağıdaki demoda, gövde öğesi üç sütunlu klasik bir ızgara oluşturur: Ortadaki sütuna main adı verilir, sol ve sağ sütunlar ise çizgilerine ad verirler fullbleed. Ardından, gövdedeki her öğe (<nav> ve <main>), grid-template-columns: subgrid ayarlanarak gövdedeki adlandırılmış satırları kullanır.

​​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> ç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ı, satırları ve alt ızgaraları görmenize yardımcı olabilir (şu anda yalnızca Firefox). Aşağıdaki resimde, üst ızgara ve alt ızgaralar üst üste yerleştirilmiştir. Artık tasarımcıların düzen hakkında düşündüklerine benziyor.

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

Kaynaklar

• Alt ızgara spesifikasyonu
• MDN'de alt ızgara
• Bramus: Pratik CSS Alt Izgara Video Eğitimleri

Kapsayıcı sorguları

@container öncesinde, bir web sayfasının öğeleri yalnızca görüntü alanının tamamının boyutuna yanıt verebiliyordu. Bu, makro düzenler için harika bir yöntemdir ancak dış kapsayıcılarının tüm görüntü alanı olmadığı mikro düzenlerde, düzenin buna göre ayarlanması mümkün değildir.

@container sonrasında öğeler, üst kapsayıcı boyutuna veya stiline yanıt verebilir. Tek uyarı, kapsayıcıların kendilerini olası sorgu hedefleri olarak bildirmesi gerektiğidir. Bu, büyük bir avantaj için küçük bir gerekliliktir.

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

Bu stiller, aşağıdaki videodaki Pazartesi, Salı, Çarşamba, Perşembe ve Cuma sütunlarının etkinlik öğeleri tarafından sorgulanabilmesini sağlar.

calendar-day kapsayıcısının boyutunu sorgulayıp düzeni ve yazı tipi boyutlarını ayarlamak için kullanılan CSS aşağıda verilmiştir:

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

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

Başka bir örnek: Bir kitap bileşeni, sürüklendiği sütundaki kullanılabilir alana göre kendini ayarlar:

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

Kaynaklar

• Container Queries spesifikasyonu
• Kapsayıcı sorgularını açıklayan doküman
• MDN'deki kapsayıcı sorguları
• web.dev'deki yeni duyarlılık
• Una'dan Takvim tanıtımı
• Harika kapsayıcı sorguları koleksiyonu
• web.dev'de Designcember'ı nasıl oluşturduk?
• Ahmad Shadeed: CSS Container Queries'e Merhaba Deyin

accent-color

accent-color öncesinde, markayla eşleşen renklere sahip bir form istediğinizde zamanla yönetilmesi zorlaşan karmaşık kitaplıklar veya CSS çözümleriyle karşılaşabiliyordunuz. Tüm seçenekleri sunsalar ve umarız erişilebilirlik de dahil olsa da yerleşik bileşenleri kullanma veya kendi bileşenlerinizi kullanma seçimi zamanla sıkıcı hale gelir.

accent-color sonrasında, bir satırlık CSS kodu, yerleşik bileşenlere marka rengi getirir. Tarayıcı, renk tonunun yanı sıra bileşenin yardımcı kısımları 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 web.dev'deki gönderime göz atın. Bu gönderide, bu faydalı CSS özelliğiyle ilgili birçok farklı konuyu ele alıyorum.

Kaynaklar

• accent-color spesifikasyonu
• accent-color on MDN
• web.dev'de accent-color
• Bramus: Tint User-Interface Controls with CSS accent-color

Renk seviyesi 4 ve 5

Web, son on yıllardır sRGB'nin hakimiyetindeydi ancak yüksek çözünürlüklü ekranlar ve OLED veya QLED ekranlarla önceden donatılmış mobil cihazların yer aldığı, genişleyen bir dijital dünyada sRGB yeterli değil. Ayrıca, kullanıcı tercihlerine uyum sağlayan dinamik sayfalar bekleniyor ve renk yönetimi, tasarımcılar, tasarım sistemleri ve kod bakımcıları için giderek artan bir endişe kaynağı haline geldi.

Ancak 2022'de değil. CSS'de bir dizi yeni renk işlevi ve alanı var: - Ekranların HD renk özelliklerine ulaşan renkler. - Algısal tekdüzelik gibi bir amaca uygun renk uzayları. - Renk geçişleri için, enterpolasyon sonuçlarını önemli ölçüde değiştiren renk alanları. - Karıştırmanıza, kontrast oluşturmanıza ve çalışacağınız alanı seçmenize yardımcı olan renk işlevleri

Tüm bu renk özelliklerinden önce, tasarım sistemlerinin uygun 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. Temalandırma ve veri görselleştirme renklerini etkinleştirmek için kullanıcılara çok sayıda CSS ve JavaScript göndermek yerine, CSS düzenleme ve hesaplama işlemlerini yapabilir. CSS, kullanımdan önce desteği kontrol etme veya geri dönüşleri sorunsuz bir şekilde işleme konusunda da daha iyi donatılmıştı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()

HWB, renk tonu, beyazlık ve siyahlık anlamına gelir. Renkleri ifade etmenin insan dostu bir yolu olarak sunulur. Çünkü yalnızca bir renk tonu ve beyaz veya siyah miktarı ile rengi açmak ya da koyulaştırmak mümkündür. Renkleri beyaz veya siyahla karıştıran sanatçılar bu renk söz dizimi eklemesini beğenebilir.

Bu renk işlevinin kullanılması, HSL ve RGB ile aynı olan sRGB renk alanındaki renklerle sonuçlanır. 2022'deki yenilikler açısından bu özellik, yeni renkler sunmaz ancak söz dizimi ve zihinsel model hayranları için bazı görevleri kolaylaştırabilir.

Kaynaklar

• HWB spesifikasyonu
• MDN'deki HWB
• Stefan Judis: hwb() – a color notation for humans?

Renk alanları

Renklerin gösterilme şekli, renk uzayıyla yapılır. Her renk alanı, renkle çalışmak için çeşitli özellikler ve ödünler sunar. Bazıları tüm parlak renkleri bir araya getirir, bazıları ise önce parlaklıklarına göre sıralar.

2022 CSS, tasarımcıların ve geliştiricilerin renkleri görüntülemesine, seçmesine ve karıştırmasına yardımcı olmak için her biri 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 bir potansiyel ve yeni bir varsayılan renk alanı olan LCH'nin kilidini açıyor.

color-mix()

color-mix() öncesinde, geliştiricilerin ve tasarımcıların renkleri tarayıcı görmeden önce karıştırmak için Sass gibi ön işlemciler kullanması gerekiyordu. Çoğu renk karıştırma işlevi, 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çlar ortaya çıkıyordu.

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

Genellikle bir marka rengi temel olarak kullanılır ve bu renkten varyantlar oluşturulur. Örneğin, fareyle üzerine gelme stilleri için daha açık veya daha koyu renkler kullanılır. color-mix() ile bu işlem 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);
}

ve bu renkleri srgb gibi farklı bir renk alanında karıştırmak istiyorsanız: 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);
}

color-mix() kullanılarak oluşturulan bir tema demosu aşağıda verilmiştir. Marka rengini değiştirmeyi deneyin ve temanın güncellenmesini izleyin:

2022'de stil sayfalarınızdaki çeşitli renk alanlarında renkleri karıştırmanın keyfini çıkarın.

Kaynaklar

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

color-contrast()

color-contrast() öncesinde, stil sayfası yazarlarının erişilebilir renkleri önceden bilmesi gerekiyordu. Genellikle bir palet, renk sistemini kullanan bir kullanıcıya hangi metin renginin söz konusu örnekle uygun şekilde kontrast oluşturmak için gerekli olduğunu belirtmek amacıyla renk örneği üzerinde siyah veya beyaz metin gösterir.

color-contrast() sonrasında stil sayfası yazarları, görevi tamamen tarayıcıya devredebilir. Tarayıcıyı siyah veya beyaz rengi otomatik olarak seçmek için kullanmanın yanı sıra, tasarım sistemine uygun renklerin listesini de verebilir ve istediğiniz kontrast oranını karşılayan ilk rengi seçmesini sağlayabilirsiniz.

Metin renklerinin, renk örneği rengine göre tarayıcı tarafından otomatik olarak seçildiği bir HWB renk paleti seti demosunun ekran görüntüsünü aşağıda bulabilirsiniz:

Söz diziminin temelleri şu şekildedir: Gri renk işlevine iletilir ve tarayıcı, en fazla kontrastın siyah mı yoksa beyaz renkte mi olduğunu belirler:

color: color-contrast(gray);

Bu işlev, renk listesiyle de özelleştirilebilir. Bu listeden, seçilenler arasında en yüksek kontrastı sağlayan renk seçilir:

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

Son olarak, listeden en yüksek kontrastlı rengi seçmemek tercih ediliyorsa hedef kontrast oranı sağlanabilir ve bu oranı geçen 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 yalnızca metin rengi için değil, başka amaçlarla da kullanılabilir. Ancak, asıl kullanım alanının metin rengi olacağını tahmin ediyorum. Uygun kontrast renkleri seçme özelliği CSS diline eklendiğinde erişilebilir ve okunabilir arayüzler sunmanın ne kadar kolaylaşacağını düşünün.

Kaynaklar

• color-contrast() specification
• MDN'de color-contrast()
• Demo

Göreceli renk söz dizimi

Bağıl renk söz diziminden önce, renk üzerinde hesaplama yapmak ve ayarlamalar yapmak için renk kanallarının özel özelliklere ayrı ayrı yerleştirilmesi gerekiyordu. Bu sınırlama, ton, doygunluk veya parlaklık calc() ile kolayca ayarlanabildiğinden HSL'yi renkleri değiştirmek için kullanılan birincil renk işlevi haline getirmiştir.

Bağıl renk söz diziminden sonra, herhangi bir alandaki herhangi bir renk, CSS'nin tek bir 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 değişiklik yapabilir ve bunu kolaylaştırmak için çok daha az özel özellik oluşturmanız gerekir.

Aşağıdaki söz dizimi örneğinde, temel bir onaltılık değer sağlanır ve buna göre iki yeni renk oluşturulur. İlk renk --absolute-change, temel renkten LCH'de yeni bir renk oluşturur, ardından temel rengin açıklığını 75% ile değiştirerek kroma (c) ve renk tonunu (h) korur. İkinci renk --relative-change, temel renkten LCH'de yeni bir renk oluşturur ancak bu kez kroma (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);
}

Renkleri karıştırmaya benzer ancak karıştırmaktan çok değişiklik yapmaya yakındır. Başka bir renkten renk oluşturabilir, kullanılan renk işlevi tarafından adlandırılan üç kanal değerine erişebilir ve bu kanalları ayarlayabilirsiniz. Sonuç olarak bu, 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 kullandım. Ayrıca, etiketlerin uygun kontrasta sahip olmasını sağlamak için color-contrast() kullandım:

Bu işlev, renk paleti oluşturmak için de kullanılabilir. Burada, sağlanan bir temel renkten yola çıkılarak tüm paletlerin oluşturulduğu bir demo bulunmaktadır. Bu CSS grubu, tüm paletlere güç verir. Her palet yalnızca farklı bir taban sağlar. Ek olarak, LCH kullandığım için paletlerin algısal olarak ne kadar eşit olduğuna bakın. Bu renk alanı sayesinde sıcak veya ölü noktalar görünmüyor.

: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);
}

Umarız bu noktada, renk uzaylarının ve farklı renk işlevlerinin, güçlü ve zayıf yönlerine bağlı olarak farklı amaçlarla nasıl kullanılabileceğini anlamışsınızdır.

Kaynaklar

• Göreceli renk söz dizimi spesifikasyonu
• Göreceli renk söz dizimiyle renk paletleri oluşturma
• Bağıl renk söz dizimiyle renk varyantları oluşturma

Renk geçişli renk alanları

Gradyan renk alanlarından önce kullanılan varsayılan renk alanı sRGB idi. 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 enterpolasyonu için hangi renk alanının kullanılacağını söyleyin. Bu sayede geliştiriciler ve tasarımcılar tercih ettikleri gradyanı seçebilir. Varsayılan renk alanı da sRGB yerine LCH olarak değişir.

Söz dizimi eklemesi, gradyan yönünden sonra 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
);

Siyah ve beyaz arasındaki temel ve gerekli gradyanı burada bulabilirsiniz. Her renk alanındaki sonuç aralığına bakın. Bazı renkler diğerlerinden daha erken koyu siyaha ulaşır, bazıları ise çok geç beyazlaşır.

Bir sonraki örnekte, siyah renk, gradyanlar için bilinen bir sorun alanı olduğundan maviye dönüştürülüyor. Çoğu renk alanı, renk enterpolasyonu sırasında veya benim düşünce tarzımla renkler, renk alanlarında A noktasından B noktasına giderken mora doğru kayar. Renk geçişi A noktasından B noktasına düz bir çizgiyle ilerleyeceğinden renk alanının şekli, yolun ilerlerken uğradığı noktaları önemli ölçüde değiştirir.

Daha fazla ayrıntılı inceleme, örnek ve yorum için bu Twitter iş parçacığını okuyun.

Kaynaklar

• Gradyan enterpolasyonu spesifikasyonu
• Alanlardaki gradyanları karşılaştırma demosunu izleyin
• Gradyanları karşılaştıran Observable not defteri

inert

inert öncesinde, kullanıcının dikkatini sayfanın veya uygulamanın acil olarak dikkat edilmesi gereken alanlarına yönlendirmek iyi bir uygulamaydı. Bu odaklanma stratejisi, geliştiriciler odağı etkileşimli bir alana yerleştirip odak değişikliği etkinliklerini dinledikten sonra odak etkileşimli alandan ayrılırsa tekrar bu alana zorla geri döndürdükleri için odak tuzağı olarak bilinir. Klavyede veya ekran okuyucuda bulunan kullanıcılar, işleme devam etmeden önce görevin tamamlanmasını sağlamak için etkileşimli alana yönlendirilir.

inert sonrasında, sayfanın veya uygulamanın tamamını dondurabileceğiniz ya da koruyabileceğiniz için yakalama gerekmez. Belgenin bu bölümleri etkisizken tıklamalar ve odak değiştirme denemeleri kullanılamaz. Bunu, sizi bir yerde tutmak yerine diğer yerleri kullanılamaz hale getirmekle ilgilenen inert'nın kurduğu bir tuzak değil, bekçiler gibi de düşünebilirsiniz.

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

Önceki videoda, alert() çağrılana kadar sayfaya fare ve klavye ile nasıl erişilebildiğine dikkat edin. Uyarı iletişim kutusu pop-up'ı gösterildikten sonra sayfanın geri kalanı dondurulmuş veya inert. Kullanıcıların odağı uyarı iletişim kutusunun içinde kalır ve başka bir yere gidemez. Kullanıcı etkileşimde bulunup uyarı işlevi isteğini tamamladığında sayfa tekrar 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ğini aşağıda bulabilirsiniz:

<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 bunun için iyi bir örnektir ancak inert, kayarak açılan yan menü kullanıcı deneyimi gibi şeyler için de faydalıdır. Kullanıcı yan menüyü açtığında, fare veya klavyenin arkasındaki sayfayla etkileşime girmesine izin verilmemelidir. Bu durum, kullanıcılar için biraz kafa karıştırıcıdır. Bunun yerine, yan menü gösterildiğinde sayfayı etkisiz hale getirin. Böylece kullanıcılar artık bu yan menüyü kapatmak veya menüde gezinmek zorunda kalacak ve açık menüyle sayfada başka bir yerde kaybolmayacak.

Kaynaklar

• Inert specification
• MDN'de Inert
• Chrome Developers: Introducing inert

COLRv1 yazı tipleri

COLRv1 yazı tiplerinden önce web'de OT-SVG yazı tipleri vardı. Bu yazı tipleri de gradyanlar, yerleşik renkler ve efektler içeren yazı tipleri için açık bir biçimdi. Ancak bunlar çok büyük olabilir ve metnin düzenlenmesine izin verilse de özelleştirme için pek fazla alan yoktu.

COLRv1 yazı tiplerinden sonra web'de daha küçük boyutlu, vektörle ölçeklenebilir, yeniden konumlandırılabilir, gradyan özellikli ve harmanlama modu destekli yazı tipleri kullanılmaya başlandı. Bu yazı tipleri, yazı tipini kullanım alanına göre özelleştirmek veya bir markayla eşleştirmek için parametreleri kabul eder.

Chrome Geliştirici blog yayınındaki emoji'lerle ilgili örneği aşağıda bulabilirsiniz. Emoji'nin yazı tipi boyutunu büyüttüğünüzde keskinliğini korumadığını fark etmiş olabilirsiniz. Resimdir, vektörel sanat değildir. Uygulamalarda emoji kullanıldığında genellikle daha yüksek kaliteli bir öğeyle değiştirilir. COLRv1 yazı tipleriyle emojiler vektörel ve güzel görünür:

Simge fontları, bu biçimle harika işler yapabilir, özel iki tonlu renk paletleri ve daha fazlasını sunabilir. COLRv1 yazı tiplerini yüklemek diğer yazı tipi dosyalarını yüklemek gibidir:

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

COLRv1 yazı tipini özelleştirmek için @font-palette-values kullanılır. Bu, bir dizi özelleştirme seçeneğini gruplandırıp adlandırarak daha sonra başvurmak üzere bir pakette toplamak için kullanılan özel bir CSS @kuralıdır. -- ile başlayarak özel bir adı nasıl belirlediğ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ştirmeler için --colorized takma adını kullanırken 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;
}

Değişken yazı tiplerinin ve renkli yazı tiplerinin sayısı giderek artıyor. Bu sayede web tipografisi, zengin özelleştirme ve yaratıcı ifade açısından çok güzel bir yolda ilerliyor.

Kaynaklar

• Github'daki Colrv1 spesifikasyonu
• Chrome Developers: Colrv1 Fonts
• BlinkOn geliştirici açıklama videosu

Görüntü alanı birimleri

Yeni görüntü alanı varyantlarından önce web, görüntü alanlarının sığdırılmasına yardımcı olmak için fiziksel birimler sunuyordu. Yükseklik, genişlik, en küçük boyut (vmin) ve en büyük taraf (vmax) için birer tane vardı. Bunlar birçok durumda işe yarasa da mobil tarayıcılar işleri karmaşıklaştırdı.

Mobil cihazlarda bir sayfa yüklenirken URL'nin bulunduğu durum çubuğu gösterilir ve bu çubuk, görüntü alanı alanının bir kısmını kaplar. Birkaç saniye ve biraz etkileşimden sonra, durum çubuğu kayarak kullanıcının daha büyük bir görüntü alanı deneyimi yaşamasını sağlayabilir. Ancak bu çubuk kaydığında görüntü alanı yüksekliği değişir ve hedef boyutu değiştiği için tüm vh birimleri kayar ve yeniden boyutlandırılır. Daha sonraki yıllarda, vh biriminin özellikle iki görüntü alanı boyutundan hangisini kullanacağına karar vermesi gerekiyordu. Çünkü bu durum, mobil cihazlarda rahatsız edici görsel düzen sorunlarına neden oluyordu. vh öğesinin her zaman en büyük görüntü alanını temsil edeceği belirlendi.

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

Yeni görüntü alanı varyantları (küçük, büyük ve dinamik görüntü alanı birimleri) kullanıma sunulduktan sonra, fiziksel birimlere mantıksal eşdeğerler de eklendi. Bu özelliğin amacı, geliştiricilere ve tasarımcılara belirli senaryolar için hangi birimi kullanmak istediklerini 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ünüm alanı varyantlarıyla kullanıma sunulan tüm yeni görünüm alanı birimi seçeneklerinin tam listesini aşağıda bulabilirsiniz:

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

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

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

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

Bu özelliklerin, geliştiricilere ve tasarımcılara duyarlı tasarımlar oluşturmak için gereken esnekliği sağlayacağını umuyoruz.

Kaynaklar

• Görünüm alanı göreli birimleri spesifikasyonu
• Bramus: The Large, Small, and Dynamic Viewports

:has()

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

:has() öğesinden sonra, öğe ağacında daha yüksek bir konumda bulunan bir konu, çocuklar hakkında bir sorgu sağlarken konu olarak kalabilir: ul:has(> li). Seçicinin konusu bu durumda üst öğe olduğundan :has()'nın neden "üst öğe seçici" olarak adlandırıldığını anlamak kolaydır.

Sınıfın .parent olarak kaldığı ancak yalnızca bir alt öğe .child sınıfına sahipse seçildiği temel bir söz dizimi örneğini aşağıda bulabilirsiniz:

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

Burada, <section> öğesinin konu 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) {...}

:has() seçici, daha pratik kullanım alanları ortaya çıktıkça tekrar harika bir yardımcı araç haline geliyor. Örneğin, resimleri sarmaladıklarında <a> etiketlerini seçmek şu anda mümkün değildir. Bu nedenle, bu kullanım alanında stilini nasıl değiştireceğini bağlantı etiketine öğretmek zordur. Ancak :has() ile bu mümkündür:

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

Bunların hepsi, :has() öğesinin yalnızca bir üst seçici gibi göründüğü örneklerdir. <figure> öğelerindeki resimlerin kullanım alanını ve şekil <figcaption> içeriyorsa resimlerdeki stilleri ayarlamayı göz önünde bulundurun. Aşağıdaki örnekte, figcaption'lı şekiller ve ardından bu bağlamdaki resimler seçiliyor. :has() kullanılıyor ve hedeflediğimiz konu rakamlar değil resimler olduğundan konuyu değiştirmiyor:

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

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

Tarayıcının söz dizimini kullanmadan önce anlayıp anlamadığını test eden @supports ve selector() işleviyle destek kontrolü kolayca yapılabilir:

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

Kaynaklar

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

2022 ve sonrası

2022'de tüm bu harika özellikler kullanıma sunulduktan sonra yapılması zor olacak bazı şeyler var. Sonraki bölümde, kalan sorunlardan bazıları ve bunları çözmek için aktif olarak geliştirilen çözümler ele alınmaktadır. Bu çözümler, tarayıcılarda işaretlerin arkasında belirtilmiş veya kullanılabilir olsa da deneyseldir.

Sonraki bölümlerdeki sonuçlar, listelenen sorunların çözümü için birçok şirketten birçok kişinin uğraştığı konusunda rahatlatıcı olacaktır. Bu çözümlerin 2023'te yayınlanacağı anlamına gelmez.

Gevşek türde özel özellikler

CSS özel özellikleri çok kullanışlıdır. Adlandırılmış bir değişkende her türlü şeyin depolanmasına olanak tanır. Bu değişkenler daha sonra genişletilebilir, üzerinde hesaplama yapılabilir, paylaşılabilir ve daha birçok işlem yapılabilir. Hatta o kadar esnekler ki daha az esnek olanları da kullanmak iyi olurdu.

Bir box-shadow öğesinin değerleri için özel özellikler kullandığı bir senaryoyu ele alalım:

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

Bu durum, özelliklerden herhangi biri CSS'nin kabul etmediği bir değere (ör. --x: red) dönüştürülene kadar sorunsuz bir şekilde çalışır. 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 giriyor: --x, artık gevşek ve esnek olmayan, ancak belirli sınırlarla güvenli olan türü belirlenmiş bir özel özellik haline gelebilir:

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

Artık box-shadow, var(--x) kullanıp daha sonra --x: red denenirse 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 edeceği anlamına gelir. Başarısız olmak yerine initial-value değerine geri döner.0px

Animasyon

Tür güvenliğinin yanı sıra animasyon için de birçok kapı açar. CSS söz diziminin esnekliği, bazı öğelerin (ör. gradyanlar) animasyonunu imkansız kılar. @property, yazılan CSS özelliği, tarayıcıyı aksi takdirde aşırı karmaşık olan enterpolasyon içindeki bir geliştiricinin amacı hakkında bilgilendirebileceğinden bu noktada yardımcı olur. Bu özellik, tarayıcının daha önce yapamadığı şekilde bir stilin yönlerini canlandırabilmesi için olasılık kapsamını sınırlar.

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 inceleyin. JavaScript, alt/opt tuşuna basıldığında fare x ve y değerlerini ayarlar, ardından odak boyutunu %25 gibi daha küçük bir değere değiştirerek fare konumunda spot ışığı odak çemberini oluşturur:

.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 gradyanlar animasyonlu olamaz. Tarayıcının, animasyonlarınızı nasıl yapacağınızı "sadece türetmesi" için çok esnek ve çok karmaşıktırlar. Ancak @property ile bir özellik tek başına yazılabilir ve animasyonlandırılabilir. Bu durumda tarayıcı, amacı kolayca anlayabilir.

Bu odak efektini kullanan video oyunlarında daire her zaman büyük bir daireden iğne deliği kadar küçük bir daireye dönüşecek şekilde animasyonlandırılır. Tarayıcının gradyan maskesini animasyonla göstermesi için @property öğesini demomuzla nasıl kullanacağınız 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;
}

Değişikliğin yüzey alanını yalnızca bir özellikle sınırladığımız ve değeri yazdığımız için tarayıcı artık gradyan boyutunu canlandırabiliyor. Böylece tarayıcı, uzunlukları akıllıca enterpolasyon yapabiliyor.

@property çok daha fazlasını yapabilir ancak bu küçük etkinleştirmeler büyük fark yaratabilir.

Kaynaklar

• @property specification
• MDN'deki@property
• web.dev'de@property
• Yakınlaştırma vurgusu demosu
• CSS Tricks: Exploring @property and its animating powers (CSS Tricks: @property ve animasyon güçlerini keşfetme)

min-width veya max-width adlı yerlerdeydi

Medya sorgusu aralıklarından önce, CSS medya sorgusu, üst ve alt koşulları belirtmek için min-width ve max-width kullanıyordu. Şöyle görünebilir:

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

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

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

Hem min-width hem de max-width kullanan bir CSS medya sorgusu şu şekilde görünebilir:

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

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

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

Kodlama geçmişinize bağlı olarak, bu iki yazı tipinden biri diğerinden çok daha okunaklı görünecektir. Şartname eklemeleri sayesinde geliştiriciler, tercih ettiklerini seçebilecek veya bunları birbirinin yerine kullanabilecek.

Kaynaklar

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

Medya sorgusu değişkeni yok

@custom-media öncesinde, medya sorgularının tekrar tekrar kullanılması veya derleme sırasında statik değişkenlere göre uygun çıktıyı oluşturmak için ön işlemcilere güvenilmesi gerekiyordu.

@custom-media sonrasında CSS, medya sorgularının diğer adlandırılmasına ve özel bir özellik gibi bunlara referans verilmesine olanak tanır.

Öğeleri adlandırmak çok önemlidir: Amacı söz dizimiyle uyumlu hale getirerek öğelerin paylaşılmasını ve ekiplerde kullanılmasını kolaylaştırır. Projeler arasında kullandığım birkaç özel medya sorgusu:

@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ıklarına göre, bunlardan birini şu şekilde kullanabilirim:

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

CSS özel özellik kitaplığım Open Props'ta kullandığım özel medya sorgularının tam listesini bulun.

Kaynaklar

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

İç içe seçiciler çok kullanışlıdır

@nest öncesinde 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şıyordu. İç içe yerleştirme kolaylığı, ön işlemci kullanmanın en yaygın nedenlerinden biridir.

@nest sonra tekrar kaybolur. Ön işlemci etkin iç içe yerleştirme özelliğinin neredeyse tüm özellikleri CSS'ye yerleştirilerek kullanıma sunulacak.

article {
  color: darkgray;
}

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

/* with @nest becomes */

article {
  color: darkgray;

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

İç içe yerleştirme konusunda benim için en önemli şey, iç içe yerleştirilmiş seçicide article tekrar etmemenin yanı sıra stil bağlamının tek bir stil bloğunda kalmasıdır. Okuyucu, bir seçiciden ve stillerinden stiller içeren başka bir seçiciye geçmek yerine (örnek 1) bir makalenin bağlamında kalabilir ve makalenin içerdiği bağlantıları görebilir. İlişki ve stil amacı birlikte paketlendiğinden article kendi stillerine sahipmiş gibi görünebilir.

Sahiplik, merkezileşme olarak da düşünülebilir. Geliştiriciler, alakalı stilleri bulmak için stil sayfasına göz atmak yerine, tüm stilleri bir bağlam içinde iç içe yerleştirilmiş olarak bulabilir. Bu özellik, üst-alt ilişkilerinde olduğu gibi alt-üst ilişkilerinde de kullanılabilir.

Stili sahibi olan ve bir alt öğeyi değiştiren üst öğenin aksine, farklı bir üst öğe 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, genel olarak daha sağlıklı bir stil organizasyonu, merkezileştirme ve sahiplenmeye yardımcı olur. Bileşenler, stillerinin diğer stil bloklarına yayılması yerine kendi stillerini gruplandırabilir ve bunlara sahip olabilir. Bu örneklerde küçük bir değişiklik gibi görünse de hem kolaylık hem de okunabilirlik açısından çok büyük etkileri olabilir.

Kaynaklar

• @nest specification
• @nest PostCSS plugin
• Bramus: CSS'in geleceği: Seçicileri İç İçe Yerleştirme

Stilleri kapsamlandırmak gerçekten zordur

@scope öncesinde, CSS'deki stiller basamaklı olarak uygulandığı, devralındığı ve varsayılan olarak küresel kapsamda olduğu için birçok strateji vardı. CSS'nin bu özellikleri birçok açıdan çok kullanışlı olsa da karmaşık siteler ve uygulamalarda, bileşenlerin potansiyel olarak birçok farklı stili olduğunda, küresel alan ve basamaklı yapının doğası stillerin sızıyormuş gibi görünmesine neden olabilir.

@scope'dan sonra stiller yalnızca bir bağlamla (ör. sınıf) sınırlandırılmakla kalmaz, aynı zamanda stillerin nerede sona erdiği ve basamaklanmaya ya da devralınmaya devam etmediği de belirtilebilir.

Aşağıdaki örnekte, BEM adlandırma kuralı kapsamı gerçek amaca göre tersine çevrilebilir. BEM seçici, adlandırma kuralları olan bir header öğesinin rengini bir .card kapsayıcıya göre kapsamaya çalışıyor. Bu, hedefin tamamlanması için başlığın bu sınıf adına sahip olmasını gerektirir. @scope ile, başlık öğesini işaretlemeden aynı hedefi tamamlamak için adlandırma kuralları gerekmez:

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

/* with @scope becomes */

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

Aşağıda, bileşenlere özgü olmayan ve CSS'nin global kapsamlı yapısıyla ilgili başka bir örnek verilmiştir. Koyu ve açık temalar, bir stil sayfasında birlikte bulunmalıdır. Burada, kazanan stili belirlemede 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 savaşından kaçının:

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

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

Hikayeyi tamamlamak için @scope, stil kapsamının nerede sona erdiğinin belirlenmesine de olanak tanır. Bu, herhangi bir adlandırma kuralı veya ön işlemciyle yapılamaz. Bu, özel bir durumdur ve yalnızca tarayıcıya yerleşik CSS ile yapılabilir. Aşağıdaki örnekte, img ve .content stilleri yalnızca .media-block öğesinin alt öğesi .content öğesinin kardeşi veya üst öğesi olduğunda uygulanır:

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

  .content {
    padding: 1em;
  }
}

Kaynaklar

• @scope specification
• @scope explainer

Duvar düzeni için CSS yolu yok

Izgaralı CSS duvar düzeninden önce, sütunlu veya flexbox'lı CSS yöntemlerinin herhangi biri içerik sırasını yanlış şekilde temsil edeceğinden JavaScript, duvar düzeni elde etmenin en iyi yoluydu.

Izgara ile CSS duvar örgüsü kullanıldıktan sonra JavaScript kitaplıkları gerekmeyecek ve içerik sırası doğru olacaktır.

Yukarıdaki demo, aşağıdaki CSS ile oluşturulmuştur:

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

Bu özelliğin eksik bir düzen stratejisi olarak değerlendirildiğini bilmek rahatlatıcıdır. Ayrıca, bu özelliği bugün Firefox'ta deneyebilirsiniz.

Kaynaklar

• Duvarcılık düzeni spesifikasyonu
• MDN'de duvarcılık düzeni
• Smashing Magazine: Native CSS Masonry Layout with CSS Grid

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

prefers-reduced-data medya sorgusundan önce JavaScript ve bir sunucu, kullanıcının işletim sistemine veya tarayıcısının "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ı deneyimini iyileştirmeye dahil olabilir ve veri tasarrufunda rol oynayabilir.

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

Yukarıdaki CSS, bu medya kaydırma bileşeninde kullanılır ve tasarruf çok büyük olabilir. Ziyaret edilen görüntü alanının büyüklüğüne bağlı olarak, sayfa yükleme işleminde daha fazla tasarruf sağlanabilir. Kullanıcılar medya kaydırma çubuklarıyla etkileşimde bulundukça kaydetme işlemi devam eder. Resimlerin hepsinde loading="lazy" özellikleri var ve bu özellikler, öğeyi tamamen gizleyen CSS ile birlikte kullanıldığında resim için hiçbir zaman ağ isteğinde bulunulmadığı anlamına geliyor.

Testimde, orta boyutlu bir görüntü alanında başlangıçta 40 istek ve 700 KB kaynak yüklendi. Kullanıcı medya seçiminde ilerledikçe 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 megabaytlık bir tasarruf anlamına gelir ve kullanıcı, medyayı kaydırmamıştır. Bu noktada ek istekler yapılmaz.

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

Kaynaklar

• prefers-reduced-data specification
• MDN'de prefers-reduced-data
• GUI'de prefers-reduced-data Sorun
• Smashing Magazine: Improving Core Web Vitals, A Smashing Magazine Case Study

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

Bu kaydırma yakalama önerilerinden önce, bir bant, kaydırma çubuğu veya galeri 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 olunmazsa doğal kaydırma hızları komut dosyası tarafından normalleştirilebilir. Bu da kullanıcı etkileşiminin biraz yapay ve potansiyel olarak hantal olmasına neden olabilir.

Yeni API'ler

snapChanging()

Tarayıcı, alt öğeyi serbest bıraktığı anda bu etkinlik tetiklenir. Bu, artık kullanılmakta olan ve yeni bir yerde yer alacak kaydırma çubuğunun, yerleştirilmiş bir alt öğe olmaması ve yerleştirme durumunun belirsiz olması nedeniyle kullanıcı arayüzünün bu durumu yansıtmasına olanak tanır.

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

snapChanged()

Tarayıcı yeni bir alt öğeye tutturulup kaydırıcı dinlenmeye bırakılır bırakılmaz bu etkinlik tetiklenir. Bu sayede, bağlı alt öğeye bağlı olan 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şlangıçtan başlamaz. Sola veya sağa kaydırmanın farklı etkinlikleri tetiklediği kaydırılabilir bileşenleri ya da sayfa yüklendiğinde başlangıçta gizlenen ve en üste kaydırana kadar görünmeyen bir arama çubuğunu kullanabilirsiniz. Bu CSS özelliği, geliştiricilerin kaydırma çubuğunun belirli bir noktada başlaması gerektiğini belirtmesine olanak tanır.

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

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

:snap-target

Bu CSS seçici, kaydırma noktası kapsayıcısında tarayıcı tarafından şu anda sabitlenmiş öğelerle eşleşir.

.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 yakalama önerilerinden sonra, tarayıcı artık bu görev için kolaylıklar sunduğundan kaydırıcı, carousel veya galeri oluşturmak çok daha kolay. Tarayıcı, yerleşik API'leri kullanmak için gözlemcileri ve kaydırma düzenleme kodunu ortadan kaldırıyor.

Bu CSS ve JS özellikleri henüz çok yeni olsa da yakında bu özelliklerin benimsenmesine ve test edilmesine yardımcı olabilecek polyfill'leri takip etmeye devam edin.

Kaynaklar

• Scroll Snap 2 taslak spesifikasyonu
• Scroll Snap 2 açıklayıcıları
• Snap demoları

Bilinen durumlar arasında geçiş yapma

toggle() öncesinde, stil ve etkileşim için yalnızca tarayıcıda yerleşik olarak bulunan durumlar kullanılabiliyordu. Ö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() tarihinden sonra, CSS'nin değişmesi ve stil oluşturmak için kullanılması amacıyla herhangi bir öğede özel durumlar oluşturulabilir. Gruplara izin verir, bisikletle gezme, yönlendirilmiş geçiş ve daha fazlasını destekler.

Aşağıdaki örnekte, tamamlanan liste öğesinin üzerini çizme işlemi aynı şekilde yapılıyor ancak onay kutusu öğeleri kullanılmıyor:

<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 çok ortak nokta olduğunu fark edebilirsiniz. Bu özellik, geliştiricilerin durumlarının daha fazlasını CSS'ye yerleştirmesine olanak tanıyacak. Bu sayede, etkileşim ve durumun daha net ve semantik bir şekilde düzenlenmesi sağlanacak.

Kaynaklar

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

Belirli öğeleri özelleştirme

<selectmenu> öncesinde CSS, <option> öğelerini zengin HTML ile özelleştirme veya seçenek listesinin gösterimiyle ilgili çok fazla şeyi değiştirme özelliğine sahip değildi. Bu durum, geliştiricilerin <select> işlevlerinin çoğunu yeniden oluşturan harici kitaplıklar yüklemesine neden oldu. Bu da çok fazla iş anlamına geliyordu.

<selectmenu> sonrasında geliştiriciler, seçenek öğeleri için zengin HTML sağlayabilir ve erişilebilirlik şartlarını karşılamaya ve semantik HTML sağlamaya devam ederken bunları istedikleri kadar stilize edebilir.

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

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

CSS, öğenin bölümlerini hedefleyip stil verebilir:

.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 etkinleştirilmişken Canary'deki Chromium'da <selectmenu> öğesini deneyebilirsiniz. 2023'te ve sonrasında özelleştirilebilir seçme menüsü öğeleri için bizi takip etmeye devam edin.

Kaynaklar

• Selectmenu spesifikasyonu
• Selectmenu demosu

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

anchor()'dan önce, geliştiricilerin alt öğeleri üst öğe içinde hareket ettirmesi için mutlak ve göreli konumlandırma, konumlandırma stratejileri olarak sunuluyordu.

anchor()'dan sonra geliştiriciler, öğeleri alt öğe olup olmadıklarına bakılmaksızın diğer öğelerin yanına yerleştirebilir. Ayrıca geliştiricilerin hangi kenara göre konumlandırılacağı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çıklayıcıda birkaç harika örnek ve kod örneği verilmiştir.

Kaynaklar

• anchor() explainer