CSS'nin durumu 2022

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

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

Genel bakış

Bu gönderi, Google IO 2022'de yapılan konuşmanın makale biçimidir. Amacınız her özellikle ilgili ayrıntılı bir rehber değil, ilginizi çekmek için bir giriş ve kısa bir genel bakış sunmak ve derinlik yerine konuyu ele almak amacıyla hazırlanmıştır. İlginizi çekerse daha fazla bilgi edinebileceğiniz kaynak bağlantılarını görmek için ilgili bölümün sonundaki bölümü inceleyin.

İçindekiler

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

Tarayıcı uyumluluğu

Birçok CSS özelliğinin birlikte kullanıma sunulmasının ana nedenlerinden biri, Interop 2022'nin çalışmalarıdır. Birlikte çalışabilirlik çalışmalarını incelemeden önce Compat 2021'in çalışmalarına göz atmanız önemlidir.

Comat 2021

Geliştiricilerin anketler aracılığıyla edindiği geri bildirimler doğrultusunda 2021 hedefleri; mevcut özellikleri sabitlemek, test paketini iyileştirmek ve beş özellik için tarayıcıların geçme puanlarını yükseltmekti:

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

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

Birlikte Çalışabilirlik 2022

Bu yıl tarayıcılar, üzerinde çalışmak istedikleri özellikleri ve öncelikleri tartışmak için bir araya gelerek çalışmalarını bir araya getirdi. Geliştiricilere aşağıdaki web özelliklerini sunmayı planladılar:

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

Bu, ortaya çıkmasını sabırsızlıkla beklediğim heyecan verici ve iddialı bir liste.

2022'nin yeni haberleri

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

Katmanları basamakla

Tarayıcı Desteği

  • 99
  • 99
  • 97
  • 15,4

Kaynak

@layer öncesinde, en son yüklenen stiller önceden yüklenen stillerin üzerine yazabileceğinden, yüklenen stil sayfalarının keşfedilen sırası çok önemliydi. Bu da giriş stil sayfalarının titizlikle yönetilmesini sağladı. Böylece geliştiriciler önce daha az önemli stilleri, daha sonra da daha önemli stilleri yüklemek zorunda kaldı. ITCSS gibi, geliştiricilerin bu önemi yönetmelerine yardımcı olmak için metodolojilerin tamamı mevcuttur.

@layer ile giriş dosyası, katmanları ve sıralarını önceden tanımlayabilir. Daha sonra, stiller yüklendikçe veya tanımlandıkça bir katman içine yerleştirilebilirler. Böylece, özenle yönetilen yükleme düzenlemesi olmadan stili geçersiz kılmanın öneminin korunması sağlanır.

Videoda, tanımlanan basamaklı katmanların gerektiğinde yazma ve yükleme sürecini sürdürürken daha özgür ve serbest bir yazma ve yükleme sürecine nasıl olanak tanıdığını göstermektedir.

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

Chrome Geliştirici Araçları&#39;nın, stillerin yeni katman gruplarında nasıl göründüğünü vurgulayan Stiller kenar çubuğunun ekran görüntüsü.

Kaynaklar

Alt ızgara

Tarayıcı Desteği

  • 117
  • 117
  • 71
  • 16

Kaynak

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

subgrid tarihinden sonra, bir ızgaranın alt öğesi, üst sütununun veya satırlarının kendi sütun veya satırlarını kendi olarak alıp kendilerini veya alt satırlarını bunlara uygun hale getirebilir.

Aşağıdaki demoda, gövde öğesi üç sütunlu klasik bir ızgara oluşturur: Ortadaki sütun main olarak adlandırılır ve sol ve sağ sütunlarda satırların adları belirtilir fullbleed. Daha sonra, grid-template-columns: subgrid ayarlayarak gövdedeki <nav> ve <main> öğelerinin her biri, gövdedeki adlandırılmış satırları uyarlar.

​​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 veya boyutlandırabilir.

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

.fullbleed {
  grid-column: fullbleed;
}

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

CSS tarafından tanımlanan satırları göstermek için Chrome Devtools ızgara yer paylaşımı aracının kullanıldığı alt ızgara demosunun ekran görüntüsü.

Geliştirici Araçları'nın öğeler panelinde, hangi öğelerin ızgara ve alt ızgara olduğunu görebilirsiniz. Bu, hata ayıklamada veya düzeni doğrulamada oldukça faydalıdır.

Izgara veya alt ızgara düzenine sahip öğeleri etiketleyen Chrome Geliştirici Araçları Öğeleri panelinin ekran görüntüsü.
Firefox Devtools ekran görüntüsü

Kaynaklar

Kapsayıcı sorguları

Tarayıcı Desteği

  • 105
  • 105
  • 110
  • 16

Kaynak

@container tarihinden önce, bir web sayfasının öğ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ının tamamını içermediği mikro düzenlerde düzenin buna uygun şekilde ayarlanması imkansızdır.

@container sonrasında öğeler üst kapsayıcı boyutuna veya stiline yanıt verebilir. Tek dikkat edilmesi gereken nokta, container'ların kendilerini olası sorgu hedefleri olarak tanımlamalarıdır. Bu, büyük bir avantaj için küçük bir koşuldur.

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

Bir sonraki videoda yer alan Pazartesi, Sal, Çar, Perşembe ve Cuma sütunlarının etkinlik öğeleri tarafından sorgulanabilmesini sağlayan bu stiller kullanılır.

Demo, Una Kravets

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

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

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

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

Demo, Max Böck'ten

Una, durumu yeni yanıt veren kullanıcı olarak değerlendirdiğinde haklı. @container kullanırken vereceğiniz heyecan verici ve anlamlı tasarım kararları vardır.

Kaynaklar

accent-color

Tarayıcı Desteği

  • 93
  • 93
  • 92
  • 15,4

Kaynak

accent-color tarihinden önce, markalarla eşleşen renklere sahip bir form istediğinizde, zamanla yönetimi zorlaşan karmaşık kitaplıklar veya CSS çözümleri elde edebiliyordunuz. Size tüm seçenekleri sunan ve umarım erişilebilirlik de dahil olmak üzere, yerleşik bileşenleri kullanma veya kendi bileşenlerinizi kullanma tercihi, seçim yapmak için yorucu oluyor.

accent-color sonrasında, bir CSS satırı yerleşik bileşenlere marka rengi getiriyor. Tarayıcı, bir tona ek olarak, bileşenin yardımcı parçaları için uygun kontrast oluşturan renkleri 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;
}

Karşılaştırma için açık ve koyu vurgulu HTML öğeleri yan yana.

accent-color hakkında daha fazla bilgi edinmek için bu kullanışlı CSS mülkünün diğer birçok yönünü keşfettiğim web.dev'deki yayınıma göz atın.

Kaynaklar

Renk düzeyi 4 ve 5

Geçtiğimiz on yıllarda sRGB, web'in hakimiyetini oluştursa da yüksek çözünürlüklü ekranların ve önceden OLED ya da QLED ekranla donatılmış mobil cihazların gitgide büyüyen dijital dünyasında sRGB yeterli değildir. Ayrıca, kullanıcı tercihlerine uyum sağlayan dinamik sayfalar beklenmektedir. Renk yönetimi, tasarımcılar, tasarım sistemleri ve kod sorumluları için giderek daha fazla ilgi görmektedir.

Ancak CSS 2022'de kullanıma sunulmadı. CSS'de bir dizi yeni renk işlevi ve boşluk bulunur: - Ekranların HD renk özelliklerine ulaşan renkler. - Amaçla eşleşen renk alanları (ör. algısal tek tiplik). - İnterpolasyon sonuçlarını büyük ölçüde değiştiren gradyanlar için renk alanları. - Karıştırıp kontrast oluşturmanıza ve çalışmayı hangi alanda yapacağınızı seçmenize yardımcı olacak renk işlevleri.

Tüm bu renk özelliklerinden önce, tasarım sistemlerinin uygun kontrast oluşturan renkleri önceden hesaplaması ve uygun şekilde canlı paletler sağlaması gerekiyordu. Üstelik tüm bunları ön işlemciler veya JavaScript yapıyordu.

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

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

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

hwb()

Tarayıcı Desteği

  • 101
  • 101
  • 96
  • 15

Kaynak

HWB ton, beyazlık ve siyahlık anlamına gelir. Renk betimlemenin insan dostu bir yoluymuş gibi görünür. Çünkü yalnızca bir ton ve aydınlatılacak ya da koyulaşacak bir miktar beyaz veya siyahtan ibarettir. Renkleri beyaz ya da siyahla bir araya getiren sanatçılar bu renk söz dizimini beğenebilir.

Bu renk işlevini kullandığınızda, HSL ve RGB ile aynı şekilde sRGB renk alanından renkler elde edilir. 2022'nin yeniliği size yeni bir renk vermese de söz dizimi ve zihinsel model tutkunları için bazı görevleri kolaylaştırabilir.

Kaynaklar

Renk alanları

Renklerin temsil edilme şekli bir renk alanıyla yapılır. Her bir renk alanı, renklerle çalışırken çeşitli özellikler ve ödünler sunar. Bazıları tüm parlak renkleri bir araya getirebilir, bazıları ise ilk olarak parlaklıklarına göre hizalayabilir.

2022 CSS, 10 yeni renk alanı sunacak. Bu alanların her biri, tasarımcılara ve geliştiricilere renkleri görüntüleme, seçme ve karıştırma konusunda yardımcı olacak benzersiz özelliklere sahip. Önceden, renklerle çalışmak için kullanabileceğiniz tek seçenek sRGB'ydi. Ancak şimdi CSS, yeni bir potansiyel ve yeni bir varsayılan renk alanı LCH'yi kullanıma sunuyor.

color-mix()

Tarayıcı Desteği

  • 111
  • 111
  • 113
  • 16.2

Kaynak

color-mix() öncesinde geliştiriciler ve tasarımcılar, tarayıcı bunları görmeden renkleri karıştırmak için Sass gibi ön işlemcilere ihtiyaç duyuyordu. Renk karıştırma işlevlerinin çoğu, karıştırma için hangi renk alanını kullanacağını belirtme seçeneği de sunmadı. Bu durum, 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 dahil etmeden diğer tüm stillerin yanı sıra tarayıcıda renkleri karıştırabilirler. Buna ek olarak, karıştırmanın yapılacağı renk alanını belirtebilir veya LCH'nin varsayılan karıştırma renk alanını kullanabilirler.

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

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

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

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

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

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

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

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

Kaynaklar

color-contrast()

Tarayıcı Desteği

  • x
  • x
  • x

Kaynak

color-contrast() tarihinden önce, stil sayfası yazarlarının erişilebilir renkleri önceden bilmesi gerekiyordu. Çoğunlukla bir palet, renk paleti üzerinde siyah veya beyaz metin göstererek renk sistemi kullanıcısına bu paletin renginin uygun bir şekilde kontrastı olarak hangi metin renginin gerekeceğini belirtmek için kullanılır.

3 Malzeme paletinin, 14 renk ve metin için uygun beyaz veya siyah kontrast renklerinin gösterildiği ekran görüntüsü.
2014 Materyal Tasarım renk paletlerinden örnek

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

Metin renklerinin, kartela rengine göre tarayıcı tarafından otomatik olarak seçildiği bir HWB renk paleti grubu tanıtımının ekran görüntüsünü burada bulabilirsiniz:

Her paletin tarayıcı tarafından belirlenen farklı bir açık veya koyu metin eşlemesine sahip olduğu HWB demosunun ekran görüntüsü.
Demoyu deneyin

Söz diziminin temelleri şöyledir:

color: color-contrast(gray);

İşlev, bir renk listesiyle de özelleştirilebilir. Bu liste, seçimden en yüksek kontrast rengi seçer:

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

Son olarak, listeden en yüksek kontrast rengi seçilmemesinin tercih edilmesi halinde, bir hedef kontrast oranı sağlanabilir ve bunun için 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 kullanılabilir, ancak ana kullanım alanının da bu olacağını tahmin ediyorum. Uygun zıt renklerin seçimi CSS dilinin kendisinde oluşturulduktan sonra, erişilebilir ve okunaklı arayüzler sunmanın ne kadar kolay olacağını düşünün.

Kaynaklar

Göreli renk söz dizimi

Tarayıcı Desteği

  • 111
  • 111
  • 113
  • 15

Kaynak

Göreli renk söz diziminden önce, renk hesaplama yapmak ve ayarlamalar yapmak için renk kanallarının özel özelliklere ayrı ayrı yerleştirilmesi gerekiyordu. Bu sınırlama aynı zamanda HSL'yi, renkler manipülasyonunda birincil renk işlevi haline getirdi. Çünkü ton, doygunluk veya açıklık calc() kullanılarak kolayca ayarlanabilir.

Göreli renk söz diziminden sonra, herhangi bir boşluktaki tüm renkler tek bir CSS satırında ayrılabilir, değiştirilebilir ve renk olarak döndürülebilir. HSL'de artık sınırlama yok. Manipülasyonlar istenen herhangi bir renk alanında yapılabilir. Bunu kolaylaştırmak için daha az özel özelliğin oluşturulması gerekir.

Aşağıdaki söz dizimi örneğinde, bir onaltılık taban değeri sağlanır ve buna göre iki yeni renk oluşturulur. İlk renk (--absolute-change), temel rengi kullanarak LCH'de yeni bir renk oluşturur. Ardından, renk (c) ve tonu (h) koruyarak temel rengin açıklığını 75% ile değiştirir. İkinci renk, --relative-change, LCH'de temel renkten yeni bir renk oluşturur, ancak bu süre, renk değerini (c) %20 azaltı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şikliğe benzer. Başka bir rengin rengini yayınlayabilirsiniz. Kullanılan renk işleviyle adlandırılan üç kanal değerine ve bu kanalları ayarlama fırsatına erişebilirsiniz. Sonuç olarak bu, renk 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 dizimi kullandım ve etiketlerin uygun kontrasta sahip olmasını sağlamak için color-contrast() kullandım:

3 sütunlu ekran görüntüsü. Her sütun ortadaki sütundan daha koyu veya daha açık olacaktır.
Demoyu deneyin

Bu işlev, renk paleti oluşturmak için de kullanılabilir. Burada, verilen temel renkten bütün paletlerin üretildiği bir demoyu görebilirsiniz. Bu tek CSS grubu, tüm çeşitli paletleri destekler ve her palet farklı bir taban sağlar. Buna ek olarak, LCH'yi kullandığım için paletlerin bile ne kadar algısal olduğuna bakın. Bu renk alanı sayesinde sıcak veya ölü nokta görülemeyecek.

: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);
}
Hepsi CSS tarafından dinamik bir şekilde oluşturulan 15 paletin ekran görüntüsü.
Demoyu deneyin

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

Kaynaklar

Gradyan renk alanları

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

Izgarada, camgöbeğinden koyu pembeye uzanan 4 gradyan. LCH ve LAB daha tutarlı bir canlılığa sahip. sRGB ise ortada biraz doygunluğunu yitirmiş durumda.

Gradyan renk alanlarından sonra, tarayıcıya renk interpolasyonu için hangi renk alanının kullanılacağını söyleyin. Böylece 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 ekleme işlemi, renk geçişi 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
);

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

Siyah ile beyazın karşılaştırıldığı 11 renk alanı gösteriliyor.

Bir sonraki örnekte, siyah renk, renk geçişleri için bilinen bir sorun alanı olduğu için maviye geçirilir. Çoğu renk alanı, renk interpolasyonu veya benim belirttiğim gibi renkler kendi renk alanları içinde A noktasından B noktasına kadar seyahat ederken mora kaymaya başlar. Renk geçişi A noktasından B noktasına kadar düz bir çizgi alacağından, renk alanının şekli, yolun yol boyunca izlediği durakları büyük ölçüde değiştirir.

Mavi ile siyahın karşılaştırıldığı 11 renk alanı gösteriliyor.

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

Kaynaklar

inert

Tarayıcı Desteği

  • 102
  • 102
  • 112
  • 15,5

Kaynak

inert tarihinden önce, kullanıcının odağını sayfanın veya uygulamanın hemen dikkat etmesi gereken alanlarına yönlendirmek iyi bir uygulamaydı. Bu rehberli odak stratejisi, odak yakalama olarak biliniyordu. Çünkü geliştiriciler etkileşimli bir alana odaklanıyor, odak değişimi etkinliklerini dinliyor ve odak etkileşimli alandan ayrılırsa tekrar içeri girmeye zorlanıyordu. Klavye veya ekran okuyucu kullanan kullanıcılar, ilerlemeden önce görevin tamamlandığından emin olmak için etkileşimli alana geri yönlendirilir.

inert tarihinden sonra, sayfanın veya uygulamanın tüm bölümlerini dondurabileceğiniz ya da koruyabileceğiniz için sıkıştırma gerekmez. Tıklamalar ve odak değiştirme denemeleri, belgenin bu kısımları hareketsizken kullanılamaz. Bunu bir tuzak yerine garsonlar gibi düşünebilirsiniz. inert, sizin bir yerde kalmanızı istemez, başka yerleri kullanılamaz hale getirir.

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

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

Ö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ı donduruldu veya inert. Kullanıcıların odağı uyarı iletişim kutusunun içine yerleştirilir ve gidecek başka bir yer yoktur. Kullanıcı etkileşimde bulunup uyarı işlevi isteğini tamamladıktan sonra sayfa yeniden etkileşimli hale gelir. inert, geliştiricilerin bu rehberli odaklanma deneyimini kolayca gerçekleştirmelerine yardımcı olur.

Aşağıda, bu kodun 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>

İletişim kutusu harika bir örnektir ancak inert, açılan yan menü kullanıcı deneyimi gibi konularda da faydalıdır. Bir kullanıcı yan menüden ayrıldığında fare veya klavyenin arkasındaki sayfayla etkileşim kurmasına izin verilemez, bu kullanıcılar için biraz zor olabilir. Bunun yerine, yan menü gösterildiğinde sayfayı atlatın. Artık kullanıcıların bu yan menüyü kapatması veya bu menü içinde gezinmesi gerekiyor. Böylece, açık bir menü bulunan kullanıcılar kendilerini sayfada başka bir yerde kaybolmayacaktır.

Kaynaklar

COLRv1 Yazı Tipleri

COLRv1 yazı tiplerinden önce, web'de OT-SVG yazı tipleri vardı. Ayrıca renk geçişleri, yerleşik renk ve efektler içeren yazı tipleri de açık bir biçime sahipti. Bunlar çok büyüyebilir ve metni düzenlemeye izin verse de özelleştirme için fazla kapsam olmazdı.

COLRv1 yazı tiplerinden sonra, web'de yazı tipini kullanım alanına göre özelleştirmek veya bir markayla uyumlu hale getirmek için parametreleri kabul eden, vektörle ölçeklenebilen, yeniden konumlandırılabilen, gradyan özellikli ve karıştırma modu destekli yazı tipleri daha küçüktür.

COLRv1 yazı tiplerinin ne kadar keskin ve daha küçük olduğunu gösteren karşılaştırma görselleştirmesi ve çubuk grafik.
Resim https://developer.chrome.com/blog/colrv1-fonts/ adresinden alınmıştır.

Aşağıda, emojilerle ilgili Chrome Developer blog yayınından bir örnek verilmiştir. Belki de emojilerin yazı tipi boyutunu büyütürseniz gerçekten pek iyi sonuç vermediğini fark etmişsinizdir. Vektör sanatı değil, resimdir. Genellikle emoji kullanılan uygulamalarda, bu emojiler daha kaliteli bir öğeyle değiştirilir. COLRv1 yazı tiplerinde emojiler vektör ve güzeldir:

Simge yazı tipleri, özel çift tonlu renk paletleri ve daha fazlasını sunarak bu biçimle harika şeyler yapabilir. Bir COLRv1 yazı tipini yüklemek, tıpkı diğer yazı tipi dosyaları gibidir:

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

COLRv1 yazı tipini özelleştirme işlemi, bir dizi özelleştirme seçeneğini daha sonra başvurmak üzere bir pakette gruplandırmayı ve adlandırmayı sağlayan özel bir CSS olan @font-palette-values ile yapılır. -- ile başlayarak özel bir mülk gibi, özel bir 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 ise son adım, paleti renk yazı tipi ailesini kullanan bir öğeye uygulamaktır:

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

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

.spicy {
  font-family: "Bungee Spice";
  font-palette: --colorized;
}
DUNE kelimesini içeren Bungee Spice yazı tipinin ekran görüntüsü.
Özel renklerle gösterilen Bungee Spice yazı tipi. Kaynak: https://developer.chrome.com/blog/colrv1-fonts/

Gittikçe daha fazla değişken ve renk seçeneği sunan yazı tipi ve web tipografisi, zengin özelleştirme ve reklam öğesi ifade etme konusunda muazzam bir yolda ilerliyor.

Kaynaklar

Görüntü alanı birimleri

Cihaz ekranı, tarayıcı penceresi ve bir iframe&#39;in nasıl farklı görüntü alanlarına sahip olduğunu gösteren grafik.

Yeni görüntü alanı varyantlarından önce, web, görüntü alanlarını sığdırmaya yardımcı olacak fiziksel birimler sunuyordu. Yükseklik, genişlik, en küçük boyut (vmin) ve en büyük kenar (vmax) için bir reklam vardı. Bunlar birçok alanda işe yaradı, ancak mobil tarayıcılar birçok şeyi zorlaştırdı.

Mobilde, bir sayfa yüklenirken URL'yi içeren durum çubuğu gösterilir ve bu çubuk, görüntü alanının bir kısmını kullanır. Birkaç saniye ve biraz etkileşimin ardından durum çubuğu kayarak kullanıcıya daha büyük bir görüntü alanı deneyimi sağlayabilir. Ancak bu çubuk dışarı kaydırıldığında görüntü alanının yüksekliği değişmiş ve tüm vh birimleri, hedef boyutları değiştikçe kayarak yeniden boyutlandırılacaktır. İlerleyen 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 değerinin her zaman en büyük görüntü alanını temsil edeceği belirlenmiştir.

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

Yeni görüntü alanı varyantlarından sonra, fiziksel olanlara mantıksal denklikler eklenerek küçük, büyük ve dinamik görüntü alanı birimleri kullanıma sunulmuştur. Burada amaç, geliştiricilere ve tasarımcılara belirli senaryoları için hangi birimi kullanmak istediklerini seçme olanağı sunmaktır. Durum çubuğu kaybolduğunda düzensiz bir düzende ufak bir kayma olmasında bir sakınca yoktur. Dolayısıyla dvh (dinamik görüntü alanı yüksekliği) sorunsuz kullanılabilir.

DVH, LVH ve SVH&#39;nin gösterildiği üç telefon içeren bir grafik. DVH örnek telefonunda, biri arama çubuğunun alt kısmı ile görüntü alanının alt kısmı arasında, diğeri arama çubuğunun üzerinde (sistem durum çubuğunun altında) görüntü alanının alt kısmı arasında olmak üzere iki dikey çizgi vardır. Bu çizgi, DVH&#39;nin bu iki uzunluktan birini nasıl olabileceğini göstermektedir. LVH ortada, cihaz durum çubuğunun alt kısmı ile telefon görüntü alanının düğmesi arasında bir çizgi olacak şekilde gösterilir. Sonuncusu, tarayıcı arama çubuğunun altından görüntü alanının altına kadar bir çizgi gösteren SVH birimi örneğidir.

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

Yükseklik görüntü alanı birimleri
​​.new-height-viewport-units {
  height: 100vh;
  height: 100dvh;
  height: 100svh;
  height: 100lvh;
  block-size: 100vb;
  block-size: 100dvb;
  block-size: 100svb;
  block-size: 100lvb;
}
Genişlik görüntü alanı birimleri
.new-width-viewport-units {
  width: 100vw;
  width: 100dvw;
  width: 100svw;
  width: 100lvw;
  inline-size: 100vi;
  inline-size: 100dvi;
  inline-size: 100svi;
  inline-size: 100lvi;
}
En küçük görüntü alanı yan birimleri
.new-min-viewport-units {
  --size: 100vmin;
  --size: 100dvmin;
  --size: 100svmin;
  --size: 100lvmin;
}
En büyük görüntü alanı yan birimleri
.new-max-viewport-units {
  --size: 100vmax;
  --size: 100dvmax;
  --size: 100svmax;
  --size: 100lvmax;
}

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

Kaynaklar

:has()

Tarayıcı Desteği

  • 105
  • 105
  • 121
  • 15,4

Kaynak

:has() tarihinden önce, 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 üst sırada yer alan bir özne, alt öğeler hakkında sorgu sağlarken konu olarak kalabilir: ul:has(> li). :has() öğesinin "üst seçici" olarak bilinen adını nasıl aldığını anlamak kolaydır. Çünkü bu örnekte seçicinin konusu artık üst öğedir.

.parent sınıfının konu 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) {...}

Konunun <section> öğesi olduğu, ancak seçicinin yalnızca alt öğelerden birinde :focus-visible öğesinin bulunduğu bir örneği aşağıda görebilirsiniz:

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

Daha pratik kullanım alanları ortaya çıktıktan sonra :has() seçici, müthiş bir yardımcı program olmaya başladı. Örneğin, şu anda resimleri sarmalarken <a> etiketlerini seçmek mümkün değildir. Bu da, bağlantı etiketinin söz konusu kullanım durumunda stillerinin nasıl değiştirileceğini öğretmesini zorlaştırır. Yine de :has() ile bu mümkündür:

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

Bunların tümü, :has() öğesinin yalnızca bir üst seçici gibi göründüğü örneklerdir. <figure> öğelerinin içindeki görüntülerin kullanım alanını ve şekilde <figcaption> varsa resimlerdeki stilleri ayarlamayı göz önünde bulundurun. Aşağıdaki örnekte, Caps'i gösteren rakamlar ve ardından bu bağlamdaki resimler seçilmiştir. Hedeflediğimiz konu rakamlar değil, resimler olduğundan, :has() kullanılır ve konuyu değiştirmez:

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

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

Destek kontrolü, @supports ve tarayıcının selector() işleviyle daha basittir. Bu işlev, tarayıcının söz dizimini kullanmadan önce söz dizimini anlayıp anlamadığını test eder:

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

Kaynaklar

2022 ve sonrası

Tüm bu muhteşem özellikler 2022'de kullanıma sunulduktan sonra yapılması zor olacak bazı şeyler var. Bir sonraki bölümde, mevcut sorunlardan bazılarına ve bunları çözmek için aktif olarak geliştirilmekte olan çözümlere değinilmektedir. Bu çözümler, tarayıcılarda belirtilip belirtilseler de deneyseldir.

Sonraki bölümlerin sonucunda ortaya çıkan sonuç, listelenen sorunların birçok şirketten çözüm arayan birçok kişi olduğunu rahatlatmalıdır. Bu çözümlerin 2023'te kullanıma sunulacağından emin olabilirsiniz.

Düzensiz yazılmış özel özellikler

Tarayıcı Desteği

  • 85
  • 85
  • 16,4

Kaynak

CSS özel özellikleri muhteşemdir. Her tür öğenin adlandırılmış bir değişken içinde depolanmasına olanak tanırlar. Bu değişken daha sonra genişletilebilir, bunlara göre hesaplanabilir, paylaşılabilir ve daha pek çok işlem yapabilir. Aslında çok esnektirler ki daha az esnekliğe sahip olmak güzel olurdu.

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

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

Özelliklerden herhangi biri CSS'nin kabul etmediği --x: red gibi bir değerle değiştirilene kadar tüm bu adımlar sorunsuz şekilde çalışır. İç içe yerleştirilmiş değişkenlerden herhangi biri eksikse veya geçersiz bir değer türüne ayarlanırsa gölgenin tamamı sonlandırılır.

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

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

Artık box-shadow, var(--x) kullandığında ve sonraki --x: red girilmeye çalışıldığında red, <length> olmadığından yoksayılacak. Bu, özel özelliklerinden birine geçersiz bir değer verilmiş olsa bile gölgenin çalışmaya devam ettiği anlamına gelir. Başarısız olmak yerine, 0px olan initial-value değerine geri döner.

Animasyonlar

Tip güvenliğine ek olarak, animasyon için de birçok kapı açıyor. CSS söz diziminin esnekliği, gradyanlar gibi bazı şeyleri animasyonla uygulamayı imkansız hale getirir. Yazılan CSS özelliği, tarayıcının aşırı karmaşık interpolasyon alanındaki niyeti hakkında tarayıcıya bilgi verebileceği için @property burada yardımcı olur. Temelde, bir tarayıcının daha önce yapamayacağı bir stilin özelliklerini canlandırabileceği kadar sınırlı olur.

Yer paylaşımının bir bölümünü oluşturmak için dairesel bir renk geçişinin odak odağı efekti oluşturmak için kullanıldığı bu demo örneğini düşünün. JavaScript, alt/opt tuşuna basıldığında fareyi x ve y olarak ayarlar ve ardından odak boyutunu %25 gibi daha küçük bir değerle değiştirerek fare konumunda odak odağı dairesini oluşturur.

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

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

Ancak renk geçişleri animasyonlu olamaz. Bunlar, tarayıcının canlandırmalarını istediğiniz şekilde "çıkaramayacağı" kadar esnek ve karmaşıktır. Bununla birlikte, @property ile bir özellik ayrı olarak yazılabilir ve canlandırılabilir. Böylece tarayıcı, amacı kolayca anlayabilir.

Bu odaklama efektini kullanan video oyunları, büyük bir daireden bir iğne deliği dairesine kadar daireyi her zaman canlandırır. Tarayıcının gradyan maskesine animasyon eklemesi için @property özelliğinin demomuzla nasıl kullanılacağı aşağıda açıklanmıştır:

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

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

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

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

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

@property çok daha fazlasını yapabilir ancak bu küçük etkinleştirmelerle büyük fayda sağlayabilirsiniz.

Kaynaklar

min-width veya max-width adlı yerdeydi

Medya sorgusu aralıklarından önce, bir CSS medya sorgusu koşullar altında ve koşullar altında karar vermek için min-width ve max-width kullanır. Bu kod 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 şu şekilde 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 geçmişinize bağlı olarak, bunlardan biri diğerinden çok daha okunaklı görünür. Eklenen özellikler sayesinde geliştiriciler hangisini tercih ettiklerini seçebilecek, hatta bu cihazları birbirlerinin yerine kullanabilecekleri şekilde kullanabilecekler.

Kaynaklar

Medya sorgusu değişkeni yok

@custom-media tarihinden önce medya sorgularının kendilerini tekrar tekrar tekrar etmesi veya derleme süresi sırasında statik değişkenlere göre doğru çıkışı oluşturmak için ön işlemcilerden yararlanması gerekiyordu.

@custom-media tarihinden sonra CSS, özel bir özellikte olduğu gibi medya sorgularının takma adlarına ve bunlara referans verilmesine izin verir.

Öğeleri adlandırmak çok önemlidir: Amaç, söz dizimiyle uyumlu hale getirilebilir, böylece öğelerin paylaşılması ve ekiplerde kullanımı kolaylaşır. Projeler arasında beni takip eden birkaç özel medya sorgusu şu şekildedir:

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

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

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

Kaynaklar

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

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

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

article {
  color: darkgray;
}

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

/* with @nest becomes */

article {
  color: darkgray;

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

Benim için iç içe yerleştirmeyle ilgili en önemli nokta, iç içe yerleştirilmiş seçicide article öğesini tekrar etmemenin yanı sıra, stil içeriğinin tek bir stil bloğunda kalmasıdır. Bir seçiciden ve stillerinden, stiller içeren başka bir seçiciye gitmek yerine (örnek 1) okuyucu, bir makale bağlamında kalabilir ve makalenin içindeki bağlantılara sahip olduğunu görebilir. İlişki ve stil amacı bir araya getirilir. Böylece article, kendi stillerine sahip gibi görünür.

Sahiplenme aynı zamanda merkezileşme olarak da düşünülebilir. İlgili stiller için stil sayfasında gezinmek yerine tümünü bir bağlam içinde iç içe yerleştirilmiş halde bulabilirsiniz. Bu, üst ve alt ilişkilerde olduğu gibi alt-üst ilişkilerde de işe yarar.

Stilin sahibi olan ve alt öğeleri değiştiren ebeveyn yerine farklı bir ebeveyn bağlamında kendini düzenlemek isteyen bir bileşen alt öğesi 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 düzen, merkezileşme ve sahipliğe katkıda bulunur. Bileşenler, diğer stil blokları arasında yayılmaları yerine kendi stillerini gruplandırabilir ve sahip olabilir. Bu örneklerde küçük gibi görünse de hem kolaylık hem de okunabilirlik açısından çok büyük etkileri olabilir.

Kaynaklar

Kapsam oluşturma stilleri çok zor

Tarayıcı Desteği

  • 118
  • 118
  • x
  • 17,4

Kaynak

CSS'deki stiller kademeli olarak artırıldığı, devralındığı ve varsayılan olarak global kapsamlı olarak ayarlandığı için @scope tarihinden önce birçok strateji vardı. CSS'nin bu özellikleri pek çok şey için son derece uygundur ancak karmaşık siteler ve uygulamalar için potansiyel olarak birçok farklı bileşen türüne sahip olan bu şelalenin küresel alanı ve doğası, stillerin sızdırıldığı hissine kapılabilir.

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

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

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

/* with @scope becomes */

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

Burada daha az bileşene özgü ve daha çok CSS'nin global kapsam yapısıyla ilgili bir örnek daha verilmiştir. Koyu ve açık temalar, kazanan stili belirlemede sıralamanın önemli olduğu bir stil sayfasında bir arada bulunmalıdır. Genellikle bu, koyu tema stillerinin açık temadan sonra geleceği anlamına gelir. Bu nedenle, varsayılan olarak açık tema, isteğe bağlı stil olarak koyu rengi belirler. @scope ile sıralama ve kapsam mücadelesinden kaçının:

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

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

@scope, hikayeyi burada tamamlamak için stil kapsamının sona erdiği yerin belirlenmesine de olanak tanır. Bu, herhangi bir adlandırma kuralı veya ön işlemciyle yapılamaz. Bu özeldir ve yalnızca tarayıcıda yerleşik olarak bulunan CSS'nin yapabileceği bir şeydir. Aşağıdaki örnekte, img ve .content stilleri yalnızca .media-block öğesinin bir alt öğesi, .content öğesinin kardeş veya üst öğesi olduğunda uygulanır:

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

  .content {
    padding: 1em;
  }
}

Kaynaklar

Duvarcılık düzeni için CSS yöntemi yoktur

Izgaralı CSS duvar işçiliğinden önce, sütunlar veya flexbox içeren CSS yöntemlerinden herhangi biri içerik sırasını yanlış bir şekilde temsil ettiğinden, duvar düzeni elde etmenin en iyi yolu JavaScript'ti.

Izgaralı CSS duvar işinden sonra, JavaScript kitaplığı gerekmez ve içerik sırası doğru olur.

Yukarıdan aşağıya doğru ilerleyen sayıların gösterildiği duvar düzeninin ekran görüntüsü.
Smashing Magazine'den resim ve demo
https://www.smashingmagazine.com/native-css-masonry-layout-css-grid/

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

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

Bunun eksik bir düzen stratejisi olarak gündemde olduğunu bilmek rahatlatıcı. Ayrıca, bu stratejiyi hemen Firefox'ta da deneyebilirsiniz.

Kaynaklar

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

Tarayıcı Desteği

  • x
  • x

Kaynak

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

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

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

Önceki CSS, bu medya kaydırma bileşeninde kullanılır ve büyük tasarruf sağlayabilir. Ziyaret edilen görüntü alanının ne kadar geniş olduğuna bağlı olarak, sayfa yüklemede daha fazla tasarruf elde edilir. Kullanıcılar medya kaydırıcılarıyla etkileşimde bulunurken kayıt devam eder. Resimlerin tümünde loading="lazy" özellikleri vardır. Bu özellik, öğeyi tamamen gizleyen CSS ile birleştirildiğinde, hiçbir zaman resim için bir ağ isteği yapılmaz.

Çok sayıda küçük resim ve başlığın gösterildiği TV programı bandı arayüzünün ekran görüntüsü.

Yaptığım testler için orta boyutlu bir görüntü alanında başlangıçta 40 istek ve 700 kb kaynak yüklendi. Kullanıcı medya seçimini kaydırdıkça daha fazla istek ve kaynak yüklenir. CSS ve azaltılmış veri medya sorgusu ile 10 istek ve 172 kb kaynak yüklenir. Bu yarım megabayt kadar tasarruf eder ve kullanıcı medyaların hiçbirini kaydırmaz bile. Bu noktada başka bir istekte bulunulmaz.

Küçük resim ve çok sayıda başlığın gösterilmediği TV programı bant arayüzünün ekran görüntüsü.

Bu kısaltılmış veri deneyiminin avantajları, veri tasarrufundan ibaret değildir. Daha fazla başlık görülebilir ve dikkat çekmek için dikkat dağıtan kapak resimleri bulunmaz. Birçok kullanıcı, her megabayt veri için ödeme yaptıkları için veri tasarrufu modunda göz atar. CSS'nin bu konuda size yardımcı olabildiğini görmek çok güzel.

Kaynaklar

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

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

Yeni API'ler

snapChanging()

Tarayıcı bir anlık öğeyi serbest bırakır bırakmaz bu etkinlik tetiklenir. Bu, kullanıcı arayüzünün anlık bir alt öğe eksikliğini ve kaydırıcının belirsiz anlık durumunu yansıtmasını sağlar. Çünkü artık kullanılmakta olup yeni bir yere yerleştirilecektir.

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

Tarayıcı yeni bir alt öğeye takıldığında ve kaydırma çubuğu sabitlendiğinde bu etkinlik tetiklenir. Bu, tutturulan alt öğeye bağlı olan tüm kullanıcı arayüzünün güncellemeyi ve bağlantıyı yansıtmasını sağlar.

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

Kaydırma her zaman başlangıçta başlamaz. Sola veya sağa kaydırmanın farklı etkinlikleri tetiklediği veya siz en üste kaydırana kadar sayfa yüklenirken arama çubuğunun başlangıçta gizlendiği kaydırılabilir bileşenleri düşünün. Bu CSS özelliği, geliştiricilerin bir kaydırıcının belirli bir noktada başlaması gerektiğini belirtmesini sağlar.

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

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

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

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

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

Tarayıcı anlık önerilerde bulunduktan sonra, tarayıcı artık gözlemcileri ve kaydırma düzenleme kodunu kaldırarak yerleşik API'lerin kullanılmasını sağlayarak görev için kolaylıklar sunduğundan kaydırma çubuğu, bant veya galeri oluşturmak çok daha kolay hale geliyor.

Bu CSS ve JS özellikleri henüz çok erken olsa da, bunların yakında benimsenmesine ve test edilmesine yardımcı olabilecek çoklu dolguları göz önünde bulundurun.

Kaynaklar

Bilinen durumlar arasında geçiş yapma

toggle() tarihinden önce, stil ve etkileşim için yalnızca tarayıcıda yerleşik olan durumlardan yararlanılmaktaydı. Örneğin, onay kutusu girişinde :checked vardır. 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 belirleme amacıyla kullanılması için herhangi bir öğede özel durumlar oluşturulabilir. Gruplara, bisiklete binmeye, doğrudan açma/kapatmaya ve daha fazlasına izin verir.

Aşağıdaki örnekte, bir liste öğesinin üstü çizili olması, herhangi bir onay kutusu öğesi olmadan da gerçekleştirilir:

<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 makinelerine aşinaysanız toggle() ile ne kadar geçiş olduğunu görebilirsiniz. Bu özellik, geliştiricilerin CSS'de daha fazla durum oluşturmalarını sağlar. Bunun sonucunda, etkileşimi ve durumu daha açık ve anlamlı bir şekilde düzenleyebilirsiniz.

Kaynaklar

Seçili öğeleri özelleştirme

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

<selectmenu> tarihinden sonra geliştiriciler, seçenek öğeleri için zengin HTML sağlayabilir ve bunları istedikleri kadar biçimlendirirken erişilebilirlik gereksinimlerini karşılamaya ve anlamsal HTML sağlamaya devam edebilirler.

<selectmenu> açıklayıcı sayfasından alınan aşağıdaki örnekte, 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 bölümlerini hedefleyebilir ve biçimlendirebilir:

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

Kırmızı vurgu renklerine sahip, seçkin bir menü.

Web denemeleri işareti etkinken Canary'deki Chromium'daki <selectmenu> öğesini deneyebilirsiniz. Özelleştirilebilir seçim menü öğeleri için 2023 ve sonrasında dikkatli olun.

Kaynaklar

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

anchor() öncesinde, mutlak ve göreceli konum stratejileri, geliştiricilerin alt öğelerin bir üst öğe içinde hareket etmesini sağlamak için sağlanan konum stratejileriydi.

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

Daha fazla bilgi edinmek istiyorsanız açıklayıcı birkaç harika örnek ve kod örneği bulabilirsiniz.

Kaynaklar