CSS'nin durumu 2022

Google IO 2022'de görüldüğü gibi bugünün ve geleceğin web stili özellikleri ve bazı ekstralar.

Adam Argyle

Twitter GitHub Glitch Ana Sayfa

2022 yılı, CSS'nin hem özellikler hem de ortak tarayıcı özelliği sürümleri bakımından en iyi yıllarından biri olacak. 14 özelliği birlikte uygulamaya koyma hedefiyle çalışıyoruz.

Genel bakış

Bu yayın, Google KS 2022'de yapılan konuşmanın makale biçimindedir. Amacınız her bir özellik hakkında ayrıntılı bir kılavuz değil, merak uyandırmak için bir giriş ve kısa bir genel bakış sunarak derinlik yerine ayrıntı sağlayarak. İlginizi çektiyse daha fazla bilgiye ulaşmanızı sağlayacak kaynak bağlantıları için bölümün sonuna göz atın.

İçindekiler

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

Tarayıcı uyumluluğu

Bu kadar çok CSS özelliğinin birlikte çalışarak kullanıma sunulmasının birincil nedeni, Interop 2022 çalışmalarıdır. Interop çalışmalarını incelemeden önce Compat 2021'in çalışmalarını incelemek önemlidir.

2021 Karşılaştırması

Geliştiricilerin anketler üzerinden verdiği geri bildirimler doğrultusunda 2021 hedefleri; mevcut özellikleri kararlı hale getirmek, test paketini geliştirmek ve beş özellik için tarayıcıların geçme puanlarını artırmaktı:

1. sticky konumlandırma
2. Boyut: aspect-ratio
3. flex düzeni
4. grid düzeni
5. transform konumlandırma ve animasyon

Test puanları genel olarak yükselerek istikrarın ve güvenilirliğin arttığını gösterir. Buradaki tüm ekipleri tebrik ederiz.

Birlikte Çalışabilirlik 2022

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

1. @layer
2. Renk alanları ve işlevler
3. Kapsama alanı
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ı bir liste ve oluşmasını sabırsızlıkla bekliyorum.

2022'ye Özel Gelişmeler

Beklendiği üzere, CSS 2022 durumu Interop 2022 çalışmasından önemli ölçüde etkilendi.

Katmanları basamakla

En son yüklenen stiller, daha önce yüklenen stillerin üzerine yazabildiğinden, @layer tarihinden önce yüklenen stil sayfalarının keşfedilen sırası çok önemliydi. Bu durum, titizlikle yönetilen giriş stil sayfalarına yol açtı. Bunun sonucunda, geliştiricilerin önce daha az önemli stilleri, daha sonra da daha önemli stilleri yüklemesi gerekiyordu. Geliştiricilerin bu önemi yönetmelerine yardımcı olmak için ITCSS gibi metodolojiler mevcuttur.

@layer ile giriş dosyası, katmanları ve sıralarını önceden tanımlayabilir. Ardından, stiller yüklendikçe, yüklendikçe veya tanımlandıklarında, titizlikle yönetilen yükleme düzenlemesi olmadan stili geçersiz kılma öneminin korunması sağlanır.

Videoda, tanımlanan basamaklı katmanların nasıl daha özgür ve serbest stilde yazma ve yükleme işlemine olanak tanıdığını, bununla birlikte şelaleyi gerektiği gibi nasıl koruduğunu gösteriyoruz.

Chrome Geliştirici Araçları, hangi stillerin hangi katmanlardan geldiğini görselleştirmeye yardımcı olur:

Kaynaklar

• CSS Cascade 5 spesifikasyonu
• Basamaklı katmanlar açıklayıcı
• MDN'deki basamak katmanları
• Una Kravets: Basamaklı Katmanlar
• Ahmad Shadeed: Merhaba, CSS Cascade Katmanlar

Alt ızgara

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

subgrid sonrasında bir ızgaranın alt öğesi, üst kısmındaki sütunları veya satırları kendi sütunu veya satırlarıyla hizalayarak kendini ya da alt öğelerini bunlara göre hizalayabilir.

Aşağıdaki demoda, gövde öğesi üç sütunlu klasik bir ızgara oluşturur: Orta sütun main, sol ve sağ sütunlar satırları adlandırır fullbleed olarak adlandırılır. Daha sonra gövdedeki her bir öğe (<nav> ve <main>), grid-template-columns: subgrid ayarlayarak adlandırılmış satırları alı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> alt öğeleri fullbleed ve main sütun ve çizgilerini kullanarak kendilerini hizalayabilir ya da 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 yerleştirilmiştir. Şimdi tasarımcıların sayfa düzeni hakkında düşünme şekline 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üzen doğrulaması için oldukça kullanışlıdır.

Kaynaklar

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

Kapsayıcı sorguları

@container tarihinden önce web sayfası öğeleri yalnızca tüm görüntü alanı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ı olmadığı mikro düzenlerde düzenin buna göre ayarlaması imkansızdır.

@container'den sonra, öğeler üst kapsayıcı boyutuna veya stiline yanıt verebilir. Dikkat edilmesi gereken tek nokta, container'ların kendilerini olası sorgu hedefleri olarak tanımlaması gerektiğidir. Bu, büyük bir avantaj için küçük bir gereksinimdir.

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

Aşağıdaki videoda bulunan Pazartesi, Salı, Çarşamba, Perşembe ve Cuma sütunlarını etkinlik öğeleri tarafından sorgulanabilir hale getiren bu stillerdir.

calendar-day kapsayıcısını boyutu için sorgulayıp ardından bir düzeni ve yazı tipi boyutlarını ayarlamak için kullanılan CSS'yi aşağıda görebilirsiniz:

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

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

Başka bir örnek daha verelim: Bir kitap bileşeni kendisini, sürüklendiği sütunda bulunan alana uyarlar:

Una bu durumu yeni duyarlı olarak değerlendirirken doğru yanıt veriyor. @container'i kullanırken verilmesi gereken heyecan verici ve anlamlı pek çok tasarım kararı vardır.

Kaynaklar

• Kapsayıcı Sorguları spesifikasyonu
• Kapsayıcı Sorguları açıklayıcı
• MDN'deki Container Sorguları
• web.dev'de yeni duyarlı reklam
• Una'dan takvim demosu
• Muhteşem kapsayıcı sorguları toplama
• Web.dev üzerinde Designcember'ı nasıl oluşturduk?
• Ahmad Shadeed: CSS Kapsayıcı Sorgularına Merhaba deyin

accent-color

accent-color tarihinden önce, markayla eşleşen renkler içeren bir form istediğinizde, zaman içinde yönetimi zor hale gelen karmaşık kitaplıklar veya CSS çözümleriyle karşılaşabiliyordunuz. Bu platform size tüm seçenekleri sunuyor olsa ve umduğumuz gibi erişilebilirlik de içeriyor olsalar da, yerleşik bileşenleri kullanma veya kendi bileşenlerinizi kullanma seçeneği, sürekli olarak tercih yapmak yorucu hale geliyor.

accent-color tarihinden sonra bir CSS satırı, yerleşik bileşenlere marka rengi getirir. Tarayıcı, tonlamaya ek olarak, bileşenin yardımcı parçaları için uygun kontrastlı renkleri akıllı bir şekilde 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 yayınıma göz atın. Burada, bu yararlı CSS mülkünün daha birçok özelliğini keşfedebilirsiniz.

Kaynaklar

• aksan rengi spesifikasyonu
• MDN'de vurgu rengi
• web.dev'de accent-color
• Bramus: Kullanıcı Arayüzü Kontrollerini CSS aksan rengiyle Tonlayın

Renk düzeyi 4 ve 5

Geçtiğimiz on yıllardır web'e sRGB hakim olsa da, yüksek çözünürlüklü ekranların ve önceden OLED veya QLED ekranlarla donatılmış mobil mobil cihazlardan oluşan genişleyen dijital dünyada sRGB yeterli değildir. Ayrıca, kullanıcı tercihlerine uyum sağlayan dinamik sayfaların olması beklenen bir durumdur ve renk yönetimi, tasarımcılar, tasarım sistemleri ve kod bakım uzmanları için giderek artan bir endişedir.

Ancak 2022 yılında kullanıma sunulmadı. CSS'de bir dizi yeni renk işlevi ve alan kullanıma sunuldu: - Ekranların HD renk özelliklerine hitap eden renkler. - Algıda tek tiplik gibi bir niyetle eşleşen renk alanları. - İnterpolasyon sonuçlarını önemli ölçüde değiştiren gradyanlar için renk alanları. - Renk işlevleri, karıştırıp kontrast oluşturmanıza ve işi hangi alanda yapacağınıza karar vermenize yardımcı olur.

Tüm bu renk özelliklerinden önce, tasarım sistemlerinin uygun kontrastlı renkleri önceden hesaplaması ve uygun canlı paletlerin sağlandığından emin olması gerekiyordu. Bu sırada işin en zor kısmını ön işlemciler veya JavaScript üstleniyordu.

Tüm bu renk özelliklerinden sonra, tarayıcı ve CSS tüm işi dinamik olarak ve tam zamanında yapabilir. Temaları ve veri görselleştirme renklerini etkinleştirmek için kullanıcılara çok sayıda CSS ve JavaScript KB göndermek yerine, düzenlemeyi ve hesaplamaları CSS yapabilir. CSS, kullanımdan önce desteği kontrol etmek veya yedekleri sorunsuz bir şekilde 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()

HWB; ton, beyazlık ve siyahlık anlamına gelir. Renk, yalnızca bir ton ve biraz da aydınlatılacak ya da koyulaştırılacak kadar beyaz veya siyah olduğundan, renklerin eklenmesinde insan dostu bir yöntem olarak kendini gösterir. Renkleri beyaz veya siyahla birleştiren sanatçılar, bu renk söz dizimi ekini çok beğeniyor olabilir.

Bu renk işlevi kullanıldığında HSL ve RGB ile aynı şekilde sRGB renk alanından renkler elde edilir. 2022'ye gelecek olursak, bu yenilik size yeni renkler sunmasa da söz dizimini ve zihinsel modeli sevenler için bazı görevleri kolaylaştırabilir.

Kaynaklar

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

Renk alanları

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

2022 CSS, tasarımcılara ve geliştiricilere renkleri görüntüleme, seçme ve karıştırma konusunda yardımcı olacak benzersiz özelliklere sahip 10 yeni renk alanı sunacak. Önceden, sRGB renklerle çalışmanın tek seçeneğiydi. Ancak artık CSS, yeni potansiyelin ve yeni bir varsayılan renk alanı olan LCH'nin kilidini açıyor.

color-mix()

color-mix() tarihinden önce, geliştiriciler ve tasarımcılar, renkleri tarayıcı görmeden önce karıştırmak için Sass gibi ön işlemcilere ihtiyaç duyuyordu. Çoğu renk karıştırma işlevi, karıştırma işlemi için hangi renk alanının kullanılacağını belirtme seçeneği de sunmuyordu ve bu da bazen kafa karıştırıcı sonuçlara yol açıyordu.

color-mix() tarihinden sonra geliştiriciler ve tasarımcılar, derleme işlemlerini çalıştırmadan veya JavaScript'i eklemeden tarayıcıdaki renkleri diğer tüm stilleriyle birlikte karıştırabilir. Ayrıca, karıştırma işleminin yapılacağı renk alanını belirtebilir veya LCH'nin varsayılan karıştırma renk alanını kullanabilirler.

Genellikle temel olarak bir marka rengi kullanılır ve bundan varyantlar oluşturulur (ör. fareyle üzerine gelme stilleri için daha açık veya daha koyu renkler). color-mix() kullanıldığında 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 srgb gibi farklı bir renk alanında karıştırmak isterseniz 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);
}

Burada, color-mix() kullanan bir tema demosu görebilirsiniz. Marka rengini değiştirmeyi deneyin ve tema güncellemesini izleyin:

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

Kaynaklar

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

color-contrast()

color-contrast() tarihinden önce stil sayfası yazarlarının erişilebilir renkleri önceden bilmeleri gerekiyordu. Bir palet, renk paletinin üzerinde genellikle siyah veya beyaz metin gösterir. Bu metin, renk sistemi kullanıcısı için paletle doğru şekilde kontrast oluşturmak üzere hangi metin renginin gerekli olacağını belirtir.

color-contrast() tarihinden sonra stil sayfası yazarları görevi tamamen tarayıcıya yükleyebilir. Tarayıcının siyah veya beyaz rengini otomatik olarak seçmesini sağlamakla kalmaz, aynı zamanda tasarım sistemine uygun renklerin bir listesini de verebilir ve istediğiniz kontrast oranını geçen ilk rengi seçmesini sağlayabilirsiniz.

Aşağıda, metin renklerinin tarayıcı tarafından palet rengine göre otomatik olarak seçildiği bir HWB renk paleti grubu demosunun ekran görüntüsü verilmiştir:

Söz diziminin temelleri şu şekildedir: Burada gri işlev işleve iletilir ve tarayıcı, en fazla kontrastın siyah mı beyaz mı olduğunu belirler:

color: color-contrast(gray);

İşlev, bir renk listesiyle de özelleştirilebilir. Burada, seçimdeki en yüksek kontrastlı rengi seçer:

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

Son olarak, listeden en yüksek kontrastlı rengin seçilmemesi durumunda bir hedef kontrast oranı sağlanabilir ve bunu 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, metin renginden daha fazlası için de kullanılabilir, ancak birincil kullanım alanı olacağını tahmin ediyorum. Uygun zıt renklerin seçimi CSS diline yerleştirildikten sonra erişilebilir ve okunabilir arayüzler sunmanın ne kadar kolay olacağını düşünün.

Kaynaklar

• color-contrast() spesifikasyonu
• MDN'de color-contrast()
• Tanıtım

Göreli renk söz dizimi

Göreli renk söz diziminden önce, renk hesaplaması ve ayarlamalar yapmak için renk kanallarının ayrı ayrı özel özelliklere yerleştirilmesi gerekiyordu. Ton, doygunluk veya açıklık calc() ile kolayca düzenlenebildiği için bu sınırlama, HSL'yi renkleri düzenlemede birincil renk işlevi haline de getirmiştir.

Göreli renk söz diziminden sonra, herhangi bir alandaki herhangi bir renk tek bir CSS satırında oluşturulabilir, değiştirilebilir ve renk olarak döndürülebilir. HSL için artık sınırlama yok. Manipülasyonlar istenen herhangi bir renk alanında yapılabilir. Ayrıca, bunu kolaylaştırmak için daha az sayıda özel özelliğin oluşturulması gerekir.

Aşağıdaki söz dizimi örneğinde, bir onaltılık taban sağlanmış ve buna göre iki yeni renk oluşturulmuştur. Birinci renk (--absolute-change), temel renkten LCH'de yeni bir renk oluşturur, ardından renk (c) ile tonu (h) koruyarak taban rengin açıklığını 75% ile değiştirir. İkinci renk --relative-change, LCH'de temel renkten yeni bir renk oluşturur ancak bu kez renk (c) %20 oranında azalı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 değişikliklere, karıştırmaktan daha çok benzerdir. Başka bir renkten renk elde edebilir, kullanılan renk işleviyle adlandırılan üç kanal değerine erişebilir ve bu kanalları ayarlayabilirsiniz. Sonuçta bu, renkler için çok havalı ve güçlü bir söz dizimidir.

Aşağıdaki demoda, bir temel rengin daha açık ve daha koyu varyantlarını oluşturmak için göreli renk söz dizimini kullandım ve etiketlerin doğru 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 bütün paletlerin oluşturulduğu bir demo gösterilmektedir. Bu CSS grubu, çeşitli paletlerin tümünü destekler. Her palet sadece farklı bir temel sağlar. Ek olarak, LCH'yi kullandığım için paletlerin bile ne kadar algılandığına bakın. Bu renk alanı sayesinde sıcak ya da ölü nokta görülmü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);
}

Artık renk alanlarının ve farklı renk işlevlerinin, güçlü ve zayıf yanlarına bağlı olarak farklı amaçlar için nasıl kullanılabileceğini görebiliyorsunuz.

Kaynaklar

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

Gradyan renk alanları

Gradyan renk alanlarından önce kullanılan varsayılan renk alanı sRGB'ydi. sRGB genellikle güvenilirdir ancak gri ölü bölge gibi bazı zayıf noktalara sahiptir.

Gradyan renk alanlarından sonra tarayıcıya, renk interpolasyonu için hangi renk alanını kullanacağını bildirin. Bu, geliştiricilere ve tasarımcılara tercih ettikleri renk geçişini seçme olanağı verir. 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
);

Siyahtan beyaza temel ve önemli bir renk geçişini burada bulabilirsiniz. Her bir renk alanındaki sonuç aralığına bakın. Bazıları koyu siyaha diğerlerinden daha erken ulaşır, bazıları ise çok geç beyaz hale gelir.

Bir sonraki örnekte, siyah renk renk geçişleri için bilinen bir sorunlu alan olduğu için maviye dönüştürülmüştür. Renk interpolasyonu sırasında veya benim görmek istediğim gibi, renkler renk alanının içinde A noktasından B noktasına seyahat ettikçe renk alanlarının çoğu mora dönüşür. Renk geçişi, A noktasından B noktasına düz bir çizgi getireceği için renk alanının şekli, yolun yol boyunca izlediği durakları önemli ölçüde değiştirir.

Diğer ayrıntılı keşifler, örnekler ve yorumlar için bu Twitter ileti dizisini okuyun.

Kaynaklar

• Gradyan interpolasyon spesifikasyonu
• Alanlardaki gradyanların karşılaştırıldığı demo
• Renk geçişlerini karşılaştıran gözlemlenebilir not defteri

inert

inert öncesinde kullanıcının odağını sayfa veya uygulamada hemen ilgilenmesi gereken alanlara yönlendirmek iyi bir uygulamaydı. Geliştiriciler etkileşimli bir alana odaklanmaları, odak değişikliği etkinliklerini dinlemeleri ve odak etkileşimli alandan ayrılırsa bu alana geri dönmeye zorlandığı için bu rehberli odak stratejisi odak yakalama olarak bilinir hale geldi. Klavye veya ekran okuyucu kullanan kullanıcılar, devam etmeden önce görevin tamamlandığından emin olmak için tekrar etkileşimli alana yönlendirilir.

inert tarihinden sonra sayfanın veya uygulamanın tüm bölümlerini dondurabileceğiniz ya da koruyabileceğiniz için sıkıştırmaya gerek yoktur. Tıklamalar ve odak değiştirme denemeleri, dokümanın bu bölümleri hareketsizken kullanılamaz. Bunu bir tuzak yerine bekçiler gibi de düşünebilirsiniz. inert, sizi bir yerde konaklamak yerine başka yerleri müsait hale getirmekle ilgilenmiyor.

JavaScript alert() işlevi buna iyi bir örnektir:

Önceki videoda, alert() çağrılana kadar sayfanın fare ve klavyeye nasıl erişilebildiğine dikkat edin. Uyarı iletişim kutusu pop-up'ı gösterildikten sonra sayfanın geri kalanı dondu, yani inert. Kullanıcıların odağı uyarı iletişim kutusunun içine yerleştirilir ve başka bir yere gitmez. 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 etmelerini sağlar.

Aşağıda, bu özelliğin nasıl çalıştığını gösteren küçük bir kod örneği 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>

Diyalog harika bir örnektir ancak inert, kaydırmalı yan menü kullanıcı deneyimi gibi şeyler için de yararlı olur. Bir kullanıcı yan menüyü kaydırdığında, farenin veya klavyenin arkasındaki sayfayla etkileşimde bulunmasına izin vermek doğru değildir. Bu, kullanıcılar için biraz zordur. Bunun yerine, yan menü görüntülenirken sayfayı sadeleştirin. Böylece kullanıcılar, yan menüyü kapatmalı veya bu yan menüyü kullanarak gezinmelidir. Böylece, kendilerini sayfadaki başka bir yerde açık bir menüyle hiçbir zaman kaybetmezler.

Kaynaklar

• Atıl çözüm spesifikasyonu
• MDN'de etkin değil
• Chrome Geliştiricileri: inert ile tanışın

COLRv1 Yazı Tipleri

COLRv1 yazı tiplerinden önce web'de, gradyanlı yazı tipleri, yerleşik renkler ve efektler için de açık bir biçim olan OT-SVG yazı tipleri vardı. Ancak bunlar çok büyüyebilir ve metnin düzenlenmesine olanak sağlasalar da özelleştirme için fazla kapsam olmuyordu.

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 bir ayak izi, vektör ile ölçeklenebilir, yeniden konumlandırılabilir, gradyan özellikli ve harmanlama modu destekli yazı tipleri bulunur.

Aşağıda, emojilerle ilgili Chrome Geliştiricisi blog yayınından bir örnek verilmiştir. Belki de bir emojinin yazı tipi boyutunu ölçeklediğinizde keskin kalmadığını fark etmişsinizdir. Bu bir görseldir, vektör sanatı değildir. Uygulamalarda emojiler genellikle daha yüksek kaliteli bir öğe ile değiştirilir. COLRv1 yazı tiplerinde emojiler vektör ve güzeldir:

Simge yazı tipleri bu biçimle özel çift tonlu renk paletleri ve daha birçok özellik sunarak muhteşem şeyler yapabilir. COLRv1 yazı tipi, diğer herhangi bir yazı tipi dosyasıyla aynı şekilde yüklenir:

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

COLRv1 yazı tipinin özelleştirilmesi, bir grup özelleştirme seçeneğini daha sonra başvurmak üzere bir paket halinde gruplandırmayı ve adlandırmayı sağlayan özel bir CSS olan @font-palette-values ile yapılır. -- ile başlayan özel bir mülk gibi özel adı 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 olduğunda 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;
}

Kullanılabilen çok sayıda değişken yazı tipi ve renk yazı tipiyle birlikte, web tipografisi, zengin özelleştirme ve reklam öğesi ifade etme yolunda muazzam bir yol izler.

Kaynaklar

• GitHub'da Colrv1 spesifikasyonu
• Chrome Geliştiricileri: Colrv1 Yazı Tipleri
• 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ı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 kenar (vmax) için birer tane vardı. Bunlar birçok şeyde işe yaradı, ancak mobil tarayıcılar bir karmaşıklığı da beraberinde getirdi.

Mobil cihazlarda bir sayfa yüklenirken URL'yi içeren durum çubuğu gösterilir ve bu çubuk görüntü alanı alanının bir kısmını kaplar. Durum çubuğu, birkaç saniye ve bir miktar etkileşimde bulunduktan sonra kaybolarak kullanıcıya daha büyük bir görüntü alanı deneyimi sunabilir. Ancak bu çubuk uzaklaştığında görüntü alanı yüksekliği de değişir ve hedef boyutları değiştikçe tüm vh birimleri de kayar ve yeniden boyutlandırılır. Sonraki yıllarda, mobil cihazlarda rahatsız edici görsel düzen sorunlarına neden olduğu için vh biriminin özellikle iki görüntü alanı boyutundan hangisini kullanacağına karar vermesi gerekiyordu. vh her zaman en büyük görüntü alanını temsil edeceğine karar verildi.

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

Yeni görüntü alanı varyantlarının ardından, fiziksel öğelere mantıksal eşdeğerlerin eklenmesiyle küçük, büyük ve dinamik görüntü alanı birimleri kullanıma sunuldu. Buradaki amaç, geliştiricilere ve tasarımcılara kendi senaryolarında kullanmak istedikleri birimi seçme olanağı vermektir. Durum çubuğu kapandığında küçük bir düzen değişikliğinin olması sorun yaratmaz. Böylece dvh (dinamik görüntü alanı yüksekliği) endişe duymadan kullanılabilir.

Yeni görüntü alanı varyantlarıyla kullanıma sunulan tüm yeni görüntü 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;
}

Bunların, geliştiricilere ve tasarımcılara görüntü alanlarına duyarlı tasarımlar yapmak için gereken esnekliği sağlayacağını umuyoruz.

Kaynaklar

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

:has()

:has() öncesinde bir seçicinin konusu 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() tarihinden sonra, öğe ağacında daha yukarıda yer alan bir konu, alt öğeler hakkında bir sorgu sağlarken konu olarak kalabilir: ul:has(> li). Bu örnekte seçicinin konusu artık üst öğe olduğundan, :has() ürününün nasıl yaygın bir "üst seçici" adı aldığını kolayca anlayabilirsiniz.

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

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

Aşağıda, <section> öğesinin konu olduğu ancak seçicinin yalnızca alt öğelerden birinin :focus-visible olması durumunda eşleştiği bir örnek verilmiştir:

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

:has() seçici, daha pratik kullanım alanları ortaya çıktıkça harika bir yardımcı program haline gelmeye başlıyor. Örneğin, resimleri sarmalarken <a> etiketlerini seçmek şu anda mümkün değildir. Bu da, bağlantı etiketine bu kullanım durumunda stillerinin nasıl değiştirileceğini öğretmeyi zorlaştırır. Yine de :has() ile bunu yapmak mümkün:

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

Bunların tümü, :has() öğesinin yalnızca üst seçici gibi göründüğü örneklerdir. <figure> öğelerinin içindeki resimlerin kullanım alanını ve resimde <figcaption> varsa resimlerdeki stilleri ayarlamayı düşünün. Aşağıdaki örnekte, figürleri bulunan şekiller ve ardından bu bağlamdaki resimler seçilmiştir. Hedeflediğimiz konu figür olmadığı için :has() kullanılmıştır ve konuyu değiştirmez:

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

Kombinasyonlar sonsuz görünüyor. :has() öğesini miktar sorgularıyla birleştirin ve CSS ızgara düzenlerini alt öğe sayısına göre düzenleyin. :has() öğesini etkileşimli sözde sınıf durumlarıyla birleştirin ve yeni reklam öğesi biçimleriyle yanıt veren uygulamalar oluşturun.

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

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

Kaynaklar

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

2022 ve sonrası

Tüm bu inanılmaz özellikler 2022'de kullanıma sunulduktan sonra hâlâ yapılması zor olacak birkaç şey olacak. Bir sonraki bölümde, mevcut sorunlardan bazılarına ve bunları çözmek için aktif olarak geliştirilmekte olan çözümlere göz atacağız. Bu çözümler deneysel olsa da, tarayıcılardaki işaretlerin arkasında belirtilmiş veya kullanılabilir durumdadırlar.

Sonraki bölümlerden alınan sonuçlar, listelenen sorunların birçok şirketten çözüm arayan birçok insanı olduğunu düşünerek, bu çözümlerin 2023'te piyasaya sürüleceğini değil.

Düzgün yazılmış özel özellikler

CSS özel özellikleri çok iyidir. Adlandırılmış bir değişkenin içinde her tür öğenin depolanmasına izin verirler. Bunlar daha sonra genişletilebilir, hesaplanabilir, paylaşılabilir ve daha pek çok işlem yapabilir. Aslına bakarsanız çok esnekler ki daha az esnek olan bazı işlere sahip olmak güzel olurdu.

Bir 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);

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

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

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

Bu noktada, box-shadow var(--x) kullandığında ve daha sonra --x: red denendiğinde, red bir <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, 0px olan initial-value değerine geri döner.

Animasyonlar

Tip güvenliğine ek olarak, animasyon için birçok kapı açar. CSS söz diziminin esnekliği, renk geçişleri gibi bazı şeylerin animasyonunu imkansız hale getirir. Yazılan CSS özelliği, aşırı karmaşık interpolasyon içinde tarayıcıyı bir geliştiricinin niyeti hakkında bilgilendirebilir. Bu nedenle @property burada yardımcı olur. Esasen, olasılık kapsamını o kadar sınırlamalıdır ki bir tarayıcı daha önce yapamadığı bir stilin çeşitli yönlerini canlandırabilir.

Yer paylaşımının bir kısmını oluşturmak için dairesel renk geçişinin kullanılarak spot odağı efektinin oluşturulduğu bu demo örneğine bakalım. JavaScript, alt/opt tuşuna basıldığında fareyi x ve y'yi ayarlar ve ardından odak boyutunu %25 gibi daha küçük bir değerle değiştirerek, fare konumunda odak odağı dairesi 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, renk geçişleri animasyonlu olamaz. Bunlar, tarayıcının animasyonlarını istediğiniz şekilde "türetemeyeceği" kadar esnek ve karmaşıktır. Ancak @property ile bir özellik ayrı olarak yazılabilir ve canlandırılabilir. Böylece tarayıcı bu özelliğin amacını kolayca anlayabilir.

Bu odaklanma efektini kullanan video oyunlarında, daireyi her zaman büyük bir daireden küçük bir iğne deliği çemberine hareket ettirir. Tarayıcının gradyan maskesini animasyonlu hale getirmesi için demomuzla birlikte @property şu şekilde kullanılı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ı tek bir özelliğe indirgediğimiz ve tarayıcının uzunlukların arabuluculuğunu akıllı bir şekilde yapabilmesi için değeri yazdığımız için tarayıcı artık gradyan boyutunu canlandırabiliyor.

@property bundan çok daha fazlasını yapabilir, ancak bu küçük etkinleştirmelerle çok şey yapabilirsiniz.

Kaynaklar

• @property specification
• MDN'de@property
• web.dev'de@property
• Zoom odaklı demo
• CSS Püf Noktaları: @property özelliğini ve animasyon özelliklerini keşfetme

min-width veya max-width içindeydi

Medya sorgusu aralıklarından önce, bir CSS medya sorgusu tekrar tekrar ve koşullar altında ifade oluşturmak için min-width ve max-width kullanır. Bu simge aşağıdaki gibi görünebilir:

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

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

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

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

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

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

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

Kodlama arka planınıza bağlı olarak, bunlardan biri diğerinden çok daha okunaklı görünecektir. Spesifikasyon eklemeleri sayesinde geliştiriciler istedikleri ürünü seçebilecek ve hatta birbirinin yerine kullanabilecektir.

Kaynaklar

• Medya sorgusu aralığı söz dizimi spesifikasyonu
• 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 kendilerini tekrar tekrar tekrarlaması veya derleme sırasında statik değişkenlere göre doğru çıktıyı oluşturmak için ön işlemcilerden yararlanması gerekiyordu.

@custom-media tarihinden sonra CSS, tıpkı özel bir mülkte olduğu gibi medya sorgularının takma adlandırılmasına ve bunlara referans verilmesine izin verir.

Öğeleri adlandırmak çok önemlidir: Amacı, söz dizimiyle uyumlu hâle getirerek işlerin ekiplerde paylaşılmasını ve kullanımını kolaylaştırır. Projeler arasında beni takip eden birkaç özel medya sorgusu şöyle:

@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);

Bunlar tanımlandıklarına göre, içlerinden birini şöyle kullanabilirim:

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

Kullandığım özel medya sorgularının tam listesini CSS özel özellik kitaplığımdaki Open Props bölümünde bulabilirsiniz.

Kaynaklar

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

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

@nest öncesinde stil sayfalarında çok fazla tekrar vardı. Bu, özellikle seçiciler uzun olduğunda ve her biri küçük farkları hedeflediğinde verimsiz hale geldi. İç içe yerleştirmenin kolaylığı, ön işlemci benimsemenin en yaygın nedenlerinden biridir.

@nest sonra tekrarlama kaldırılır. Ön işlemcinin etkin olduğu iç içe yerleştirmenin neredeyse tüm özellikleri CSS'de yerleşik olarak kullanıma sunulacaktır.

article {
  color: darkgray;
}

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

/* with @nest becomes */

article {
  color: darkgray;

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

İç içe yerleştirilmiş seçicide article öğesini tekrarlamamanın yanı sıra benim için en önemli olan, stil bağlamının tek bir stil bloğunda kalmasıdır. Okuyucu, bir seçiciden ve stillerinden stil içeren başka bir seçiciye gitmek yerine (1. örnek), bir makalenin bağlamı içinde kalabilir ve makalenin, içinde bağlantıların bulunduğunu görebilir. İlişki ve stil amacı bir araya geldiğinde article, kendi stiline sahip gibi görünür.

Bu sahiplik, merkezileşme olarak da düşünülebilir. Alakalı stiller için bir stil sayfasının çevresine bakmak yerine, bunların tümü bir bağlam içinde iç içe yerleştirilmiş olarak bulunabilir. Bu yaklaşım, ebeveyn-çocuk ilişkilerinin yanı sıra çocuk-üst arası ilişkilerde de işe yarar.

Stil sahibi olan ve çocuğu değiştiren ebeveyn yerine farklı bir ebeveyn bağlamında kendini uyarlamak isteyen bir alt öğe olarak 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, düzenin daha sağlıklı olmasına, merkezileşmeye ve sahiplenmeye genel olarak yardımcı olur. Bileşenler, diğer stil bloklarının arasında yayılmak yerine kendi stillerini gruplandırıp kendilerine ait olabilir. Bu örneklerde küçük görünse de, hem kolaylık hem de okunabilirlik açısından çok büyük etkileri olabilir.

Kaynaklar

• @nest spesifikasyonu
• @nest PostCSS eklentisi
• Bramus: CSS'nin geleceği: İç İçe Yerleştirme Seçiciler

Kapsam oluşturma stilleri gerçekten zor

@scope tarihinden önce, CSS'deki stiller varsayılan olarak kademeli olarak değiştiği, devraldığı ve küresel bir kapsama sahip olduğu için birçok strateji mevcuttu. CSS'nin bu özellikleri birçok şey için son derece uygundur ancak potansiyel olarak birçok farklı bileşen tarzına sahip karmaşık siteler ve uygulamalar için şelalenin global alanı ve doğası stillerin sızıyormuş gibi hissetmesine neden olabilir.

@scope'dan sonra stiller yalnızca sınıf içinde (ör. sınıf) kapsama dahil edilebilir. Ayrıca stillerin nerede sona erdiğini ve basamaklamaya veya devralmaya devam etmeyeceğini de belirtebilirler.

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

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

/* with @scope becomes */

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

Burada, bileşene daha az özgü olan ve CSS'nin global kapsam yapısı hakkında daha fazla bilgi veren başka bir örnek verilmiştir. Koyu ve açık temaların bir stil sayfasında bir arada bulunması gerekir. Bu temalarda, kazanan stilin belirlenmesinde sıra önemlidir. Genellikle bu, koyu tema stillerinin açık temadan sonra geldiği anlamına gelir. Bu durumda varsayılan stil açık tema, isteğe bağlı stil olarak koyu renk kullanılır. @scope ile sıralama ve kapsam savaşından kaçının:

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

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

Buradaki hikayeyi tamamlamak için @scope, stil kapsamının nerede biteceğinin belirlenmesine de olanak tanır. Bu, herhangi bir adlandırma kuralı veya ön işlemcisiyle yapılamaz. Bu, özel bir durumdur ve yalnızca tarayıcıda yerleşik olarak bulunan CSS'nin yapabileceği bir şeydir. Aşağıdaki örnekte, img ve .content stilleri, .media-block öğesinin alt öğesi .content öğesinin eşdüzey veya üst öğesi olduğunda özel olarak uygulanır:

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

  .content {
    padding: 1em;
  }
}

Kaynaklar

• @scope spesifikasyon
• @scope açıklama

Duvarcılık düzeninin CSS yöntemi yok

Izgaralı CSS duvarcılıktan önce, sütun veya flexbox içeren CSS yöntemlerinin içerik sırasını yanlış temsil etmesi nedeniyle JavaScript, duvar düzeni gerçekleştirmenin en iyi yoluydu.

Izgaralı CSS duvarından sonra JavaScript kitaplıkları gerekmez ve içerik sırası doğru olur.

Önceki demo aşağıdaki CSS ile elde edilir:

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

Bunun eksik bir düzen stratejisi olarak gözden kaçmış olduğunu bilmek rahatlatıcıdır. Ayrıca, bunu bugün Firefox'ta deneyebilirsiniz.

Kaynaklar

• Duvarcılık düzeni spesifikasyonu
• MDN'de duvar düzeni
• Smashing Magazine: CSS Izgaralı Yerel CSS Duvarcılık Düzeni

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

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

prefers-reduced-data medya sorgusundan sonra CSS, kullanıcı deneyimi iyileştirmesine katılabilir ve veri tasarrufunda rolünü oynayabilir.

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

Önceki CSS bu medya kaydırma bileşeninde kullanılır ve çok büyük tasarruf sağlayabilir. Ziyaretçi görüntü alanının ne kadar büyük olduğuna bağlı olarak, sayfa yükleme işlemi sırasında o kadar fazla tasarruf sağlanır. Kullanıcılar medya kaydırıcılarıyla etkileşimde bulundukça kaydetme işlemi devam eder. Resimlerin tümünde loading="lazy" özellik bulunur. Bu, CSS'nin öğeyi tamamen gizlediği bir yapıda resim için hiçbir zaman ağ isteği yapılmayacağı anlamına gelir.

Testimde, orta boyutlu bir görüntü alanında ilk başta 40 istek ve 700 kb kaynak yüklendi. Kullanıcı medya seçimini kaydırdıkça daha fazla istek ve kaynak yüklenir. CSS ve azaltılmış veri medyası sorgusu ile 10 istek ve 172 kb kaynak yüklenir. Bu, yarım megabayt tasarruf anlamına geliyor ve kullanıcı hiçbir medya içeriğini kaydırmamış bile. Bu noktada, başka bir talep bulunmuyor.

Bu daha düşük veri deneyiminin avantajları, veri tasarrufundan daha fazladır. Daha fazla başlık görünür ve dikkat çekmek için dikkat dağıtan kapak resimleri yoktur. Birçok kullanıcı, megabayt veri başına ödeme yaptığından veri tasarrufu moduna göz atar. CSS'nin burada yardımcı olabileceğini görmek gerçekten güzel.

Kaynaklar

• reddetilmiş-veri-spesifikasyonunu tercih eder
• MDN'de-reddetli-verileri tercih eder
• prefers-reduced-data (bir GUI yarışmasında)
• Smashing Magazine: Önemli Web Verileri İyileştirme, Smashing Magazine Örnek Çalışması

Kaydırma yapışma özellikleri çok sınırlı

Bu kaydırma önerilerinden önce, bir atlı karınca, kaydırma çubuğu veya galeriyi yönetmek için kendi JavaScript'inizi yazmak, tüm gözlemciler ve durum yönetimi ile birlikte hızla karmaşık bir hal alabilir. Ayrıca, dikkatli olunmadığı takdirde, doğal kaydırma hızları komut dosyası tarafından normalleştirilebilir. Bu durum, kullanıcı etkileşiminin biraz doğal olmamasına ve muhtemelen kullanışsız gibi görünmesine neden olabilir.

Yeni API'ler

snapChanging()

Tarayıcı bir tutturma alt öğesini serbest bırakır bırakmaz bu etkinlik tetiklenir. Bu sayede, artık kullanılmakta olan ve yeni bir yere indiği için kullanıcı arayüzünün geçici çocuk eksikliğini ve kaydırma çubuğunun belirsiz durumunu yansıtmasına imkan tanıyor.

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

snapChanged()

Tarayıcı yeni bir çocuğa tutturulduğunda ve kaydırma çubuğu durduğunda bu etkinlik tetiklenir. Bu şekilde, tutturulan çocuğa bağlı olan tüm kullanıcı arayüzleri bağlantıyı güncelleyebilir ve yansıtabilir.

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

scroll-start

Kaydırma her zaman en başta başlamaz. Sola veya sağa kaydırmanın farklı etkinlikleri tetiklediği kaydırılabilir bileşenler ya da siz en üste gidinceye kadar sayfa yüklemesinde bir arama çubuğunun başlangıçta gizlendiğini düşünün. Bu CSS özelliği, geliştiricilerin bir kaydırıcının belirli bir noktadan 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, tarayıcı tarafından tutturulan kaydırma yapışma 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 önerilerinden sonra, tarayıcı artık görev için kolaylıklar sunarak gözlemcileri ortadan kaldırarak ve kaydırma düzenleme kodunu yerleşik API'ler yerine getirdiğinden bir kaydırma çubuğu, atlı karınca veya galeri oluşturmak çok daha kolay oluyor.

Bu CSS ve JS özellikleri için henüz çok erken. Ancak, bunların kısa süre içinde benimsenmesine ve test edilmesine yardımcı olabilecek çoklu dolguları arayın.

Kaynaklar

• Kaydırma 2 taslak spesifikasyonu
• Scroll Snap 2 açıklamaları
• Demoları görüntüleyin

Bilinen durumlar arasında bisiklet sürme

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

toggle() tarihinden sonra, CSS'nin değişmesi ve stil kullanımı için herhangi bir öğede özel durumlar oluşturulabilir. Gruplara, bisiklete binmeye, yönlendirilmiş açma/kapatma ve daha fazlasına olanak tanır.

Aşağıdaki örnekte, üstü çizili bir liste öğesinin etkisi, herhangi bir onay kutusu öğesi olmadan tamamlanmıştır:

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

Alakalı CSS toggle() stilleri:

li {
  toggle-root: check self;
}

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

Durum makinelerine aşinaysanız toggle() ile ne kadar çapraz geçiş olduğunu fark edebilirsiniz. Bu özellik, geliştiricilerin CSS'ye durumlarını daha fazla oluşturmalarını sağlayacak ve bu da etkileşim ve durumu düzenlemek için daha net ve anlamlı yollar sağlayacaktır.

Kaynaklar

• toggle() taslak spesifikasyonu
• Bramus: CSS'nin Geleceği: CSS Geçişleri

Seçili öğeleri özelleştirme

<selectmenu> öncesinde CSS'nin <option> öğelerini zengin HTML ile özelleştirme veya bir seçenek listesinin görünümünü büyük oranda değiştirme imkanı yoktu. Bu durum, geliştiricilerin, <select> işlevinin büyük bir kısmını yeniden oluşturan harici kitaplıkları yüklemelerine neden oldu.

<selectmenu> tarihinden sonra geliştiriciler, seçenek öğeleri için zengin HTML sağlayıp bunları gereken şekilde biçimlendirebilirken erişilebilirlik gereksinimlerini karşılamaya ve semantik HTML sağlamaya devam edebilir.

Aşağıdaki örnekte, <selectmenu> açıklayıcı sayfasından alınan bazı temel seçeneklerle 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 parçalarını hedefleyebilir ve stilini belirleyebilir:

.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;
}

<selectmenu> öğesini, web denemeleri işareti etkin durumdayken Canary'deki Chromium'da deneyebilirsiniz. 2023 ve sonrasında özelleştirilebilir seçili menü öğelerine dikkat edin.

Kaynaklar

• Menü özellikleri seçme
• Menü demosu

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

anchor() öncesinde, geliştiricilerin alt öğelerin bir üst öğe içinde hareket etmesini sağlaması için konum mutlak ve göreli konum stratejileri sunuluyordu.

anchor() tarihinden sonra geliştiriciler, alt öğe olup olmamalarına bakılmaksızın öğeleri diğer öğelere konumlandırabilirler. Ayrıca, geliştiricilerin hangi kenara karşı konumlandırılacağını ve öğeler arasında konum ilişkileri oluşturmanın diğer özelliklerini belirtmelerine de olanak tanır.

Daha fazla bilgi edinmek isterseniz açıklayıcı birkaç örnek ve kod örnekleri mevcuttur.

Kaynaklar

• anchor() açıklayıcı