Google IO 2022'de görüldüğü şekliyle bugünün ve geleceğin web stil özellikleri ve bazı ekstralar.
2022 yılı, 14 özelliği uygulamaya koyma hedefiyle CSS'nin hem özellikler hem de ortak tarayıcı özelliği sürümleri açısından en iyi yıllarından biri olacak.
Genel bakış
Bu gönderi, Google IO 2022'de yapılan konuşmanın makale biçimidir. Her özellik hakkında ayrıntılı bir kılavuz değil, merakınızı çekecek bir giriş ve kısa bir genel bakış sunarak derinlik yerine ayrıntı sağlamayı amaçlar. İlginizi çekiyorsa daha fazla bilgiye ulaşabileceğiniz kaynak bağlantıları için bölümün sonuna göz atın.
İçindekiler
İlgilendiğiniz konulara atlamak için aşağıdaki listeyi kullanın:
Tarayıcı uyumluluğu
Bu kadar çok CSS özelliğinin birlikte çalışmak üzere kullanıma sunulmasının başlıca nedeni, Interop 2022 çalışmalarıdır. Interop çalışmalarını incelemeden önce Compat 2021'in çalışmalarına bakmak önemlidir.
2021'in Sonu
2021 yılı için hedeflerimiz, geliştiricilerin anketler yoluyla sağladığı geri bildirimler doğrultusunda; mevcut özellikleri kararlı hale getirmek, test paketini geliştirmek ve tarayıcıların beş özellik için geçme puanlarını artırmaktı:
stickykonumuaspect-ratioboyutlandırmaflexdüzenigriddüzenitransformkonumlandırma ve animasyon
Herkes tarafından gerçekleştirilen test puanlarının yükselmesi, kararlılığın ve güvenilirliğin arttığını ortaya koydu. 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:
@layer- Renk alanları ve işlevler
- Kapsama alanı
<dialog>- Form uyumluluğu
- Kaydırma
- Alt ızgara
- Yazı biçimi
- Görüntü alanı birimleri
- Web uyumluluğu
Bu, ortaya çıkmak için sabırsızlandığım heyecan verici ve iddialı bir liste.
2022'nin yeni şarkıları
Beklendiği gibi, CSS 2022'nin durumu, Interop 2022 çalışmasından önemli ölçüde etkilendi.
Katmanları basamakla
En son yüklenen stiller, daha önce yüklenen stillerin üzerine yazabileceğinden, @layer öncesinde yüklenen stil sayfalarının keşfedilen sırası çok önemliydi. Bu durum, geliştiricilerin önce daha az önemli stilleri, sonra da daha önemli stilleri yüklemesi gereken giriş stil sayfalarını titiz bir şekilde yönetilenlere yol açtı. Bu metodolojinin tamamı geliştiricilere bu önemi yönetmelerinde yardımcı olur (ör. ITCSS).
@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 olmaksızın, stilin geçersiz kılma öneminin korunması için katman içine yerleştirilebilirler.
Videoda, tanımlanan basamaklamalı katmanların gerekli şekilde basamakları korurken nasıl daha özgür ve serbest stilde bir yazma ve yükleme sürecine olanak sağladığı gösterilmektedir.
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çıklaması
- MDN'deki basamak katmanları
- Una Kravets: Cascade Katmanları
- Ahmad Shadeed: Merhaba, CSS Cascade Katmanları
Alt ızgara
subgrid öncesinde başka bir ızgaranın içindeki ızgara kendi üst hücreleriyle veya kılavuz çizgileriyle hizalanamıyordu. Her ızgara düzeni benzersizdi. Birçok tasarımcı, tasarımının tamamına tek bir ızgara yerleştirir ve öğeleri CSS'de yapılamayacak şekilde sürekli olarak bunun içine hizalar.
subgrid tarihinden sonra, bir tablonun alt öğesi kendi üst kısmındaki sütunları veya satırları alıp kendisini veya alt öğelerini bunlara hizalayabilir.
Aşağıdaki demoda, body öğesi üç sütunlu klasik bir ızgara oluşturur: Ortadaki sütun main, soldaki ve sağdaki sütunlar ise satırlarına ad verir
fullbleed. Daha sonra gövdedeki her bir öğe (<nav> ve <main>), grid-template-columns: subgrid ayarlayarak gövdedeki adlandırılmış satırları kullanır.
body {
display: grid;
grid-template-columns:
[fullbleed-start]
auto [main-start] min(90%, 60ch) [main-end] auto
[fullbleed-end]
;
}
body > * {
display: grid;
grid-template-columns: subgrid;
}
Son olarak, <nav> veya <main> alt öğeleri fullbleed ve main sütunlarını 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'ta kullanılabilir). Aşağıdaki resimde, üst ızgara ve alt ızgaralar yerleştirilmiştir. Artık tasarımcıların sayfa düzeni hakkındaki düşüncelerine benziyor.
Geliştirici Araçları'nın öğeler panelinde, hangi öğelerin ızgara ve alt ızgara olduğunu görebilirsiniz. Bu, hata ayıklama veya düzen doğrulama için çok yararlıdır.
Kaynaklar
Kapsayıcı sorguları
@container öncesinde, 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ı olmadığı mikro düzenlerde düzenin buna göre ayarlanması imkansızdır.
@container tarihinden sonra, öğeler bir ü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 gerekliliktir.
/* establish a container */
.day {
container-type: inline-size;
container-name: calendar-day;
}
Aşağıdaki videoda bulunan Pzt, Sal, Çar, Perşembe ve Cuma sütunlarının etkinlik öğeleri tarafından sorgulanabilmesini sağlayan bu stillerdir.
calendar-day kapsayıcısını boyutuna göre sorguladıktan sonra bir düzeni ve yazı tipi boyutunu ayarlamanızı sağlayan 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: Bir kitap bileşeni, sürüklendiği sütunda bulunan alana kendini uyarlar:
Una, durumu yeni duyarlı olarak değerlendirirken doğru yanıt veriyor. @container 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ısı
- MDN'deki Kapsayıcı Sorguları
- web.dev'de yeni duyarlı sürüm
- Una'nın takvim demosu
- Mükemmel kapsayıcı sorguları toplama
- Web.dev üzerinde Designcember'ı nasıl geliştirdik?
- Ahmad Shadeed: CSS Kapsayıcı Sorgularına Merhaba Deyin
accent-color
accent-color tarihinden önce, markayla uyumlu renkler içeren bir form istediğinizde, zamanla yönetimi zor hale gelen karmaşık kitaplıklar veya CSS çözümleriyle karşılaşabiliyordunuz. Bu platform size tüm seçenekleri sunmuş olsalar ve umarım erişilebilirlik de ekledikleri için, yerleşik bileşenleri kullanma veya kendi bileşenlerinizi kullanma seçenekleri sürekli seçim yapmak için yorucu hale gelir.
accent-color tarihinden sonra, bir CSS satırı yerleşik bileşenlere marka rengi getirir. Tonlamaya ek olarak, tarayıcı, bileşenin yardımcı parçaları için uygun zıt renkleri akıllı bir şekilde seçer ve sistemdeki 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 özelliğinin daha birçok özelliğini keşfedebilirsiniz.
Kaynaklar
- aksan rengi spesifikasyonu
- MDN'de vurgu rengi
- web.dev'de acent-color
- Bramus: Kullanıcı Arayüzü Kontrollerini CSS aksan-rengi ile tonlayın
Renk seviyesi 4 ve 5
Geçtiğimiz yıllarda web'e sRGB hakim olmuş olsa da yüksek çözünürlüklü ekranların ve önceden donatılmış OLED veya QLED ekranlı mobil cihazların yer aldığı dijital dünyada sRGB yeterli değildir. Ayrıca, kullanıcı tercihlerine uyum sağlayan dinamik sayfalar beklenir ve renk yönetimi tasarımcılar, tasarım sistemleri ve kod geliştiricileri için gittikçe daha fazla ilgi görüyor.
Ancak 2022'de değil. CSS'de bir dizi yeni renk işlevi ve boşluk kullanıma sunuldu: - Ekranların HD renk özelliklerini kullanabilen renkler. - Algısal bütünlük gibi bir amaçla eşleşen renk alanları. - İnterpolasyon sonuçlarını önemli ölçüde değiştiren gradyanlar için renk alanları. - Karıştırıp kontrast oluşturmanıza ve çalışacağınız alanı seçmenize yardımcı olacak renk işlevleri.
Tüm bu renk özelliklerinden önce tasarım sistemlerinin uygun kontrastlı renkleri önceden hesaplaması ve uygun şekilde canlı paletler elde etmesi gerekiyordu. Tüm bu işin de 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 etme veya yedekleri sorunsuz bir şekilde ele alma konusunda 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. Beyaz veya siyahtan ibaret olan, rengi açmanın veya karartmanın yalnızca bir tonu ve insan dostu bir renk oluşturma yöntemi olarak kendini gösterir. Renkleri beyazla veya siyahla harmanlayan sanatçılar, bu renk söz dizimi ekini 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ı işleri kolaylaştırabilir.
Kaynaklar
Renk alanları
Renklerin gösterilme şekli bir renk alanıyla yapılır. Her renk alanı, çeşitli özellikler sunar ve renklerle çalışırken bazı ödünler verir. Bazıları tüm parlak renkleri bir araya getirebilirken bazıları açıklıklarına göre ilk önce sıralayabilirler.
2022 CSS, tasarımcılara ve geliştiricilere renkleri görüntüleme, seçme ve karıştırma konusunda yardımcı olmak için her biri benzersiz özelliklere sahip 10 yeni renk alanı sunacak. Önceden, sRGB renklerle çalışmak için tek seçenekti, ancak şimdi CSS yeni potansiyelin ve yeni bir varsayılan renk alanı olan LCH'nin kilidini açıyor.
color-mix()
color-mix() öncesinde geliştiriciler ve tasarımcılar, tarayıcı görmeden önce renkleri karıştırmak için Sass gibi ön işlemcilere ihtiyaç duyuyordu.
Renk karıştırma işlevlerinin çoğu, karıştırılacak renk alanı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 hangi renk alanı için yapılacağını belirtebilir veya LCH'nin varsayılan karıştırma renk alanını kullanabilirler.
Genellikle marka rengi temel olarak kullanılır ve markadan varyantlar oluşturulur (ör. fareyle üzerine gelme stilleri için daha açık veya daha koyu renkler). color-mix() ile şöyle 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 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);
}
color-mix() kullanılan bir tema demosu aşağıda verilmiştir. Markanın 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 üzerinde 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. Genellikle paletler, renk sistemi kullanıcısına göre paletle doğru zıtlık oluşturmak için hangi metin rengine ihtiyaç duyulacağını belirtmek amacıyla renk kartelası üzerinde siyah veya beyaz metin gösterir.
color-contrast() tarihinden sonra stil sayfası yazarları görevi tamamen tarayıcıya aktarabilir. Tarayıcıyı yalnızca siyah veya beyaz rengi otomatik olarak seçmesi için kullanmakla kalmaz, tasarım sistemine uygun renklerin listesini de verebilir ve istediğiniz kontrast oranını geçen ilk rengi seçmesini sağlayabilirsiniz.
Tarayıcı tarafından metin renklerinin kartela rengine göre otomatik olarak seçildiği bir HWB renk paleti grubu demosunun ekran görüntüsünü burada bulabilirsiniz:
Söz diziminin temelleri şu şekilde görünür: Gri renk işleve geçirilir ve tarayıcı, en fazla kontrastın siyah mı yoksa beyaz mı olduğunu belirler:
color: color-contrast(gray);
Bu işlev, bir renk listesiyle de özelleştirilebilir. Bu işlev, seçimdeki en yüksek kontrastı oluşturan 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 kullanılabilir, ancak birincil kullanım alanı olacağını tahmin ediyorum. Uygun kontrastlı renklerin seçimi, CSS dilinin kendisine entegre edildikten sonra erişilebilir ve okunaklı arayüzler sunmanın ne kadar kolay olacağını düşünün.
Kaynaklar
Göreli renk söz dizimi
Göreli renk söz diziminden önce, rengi hesaplamak ve ayarlamalar yapmak için renk kanallarının ayrı ayrı özel özelliklere yerleştirilmesi gerekiyordu. Bu sınırlama, HSL'yi renkleri değiştirmek için birincil renk işlevi de yaptı. Bunun nedeni, ton, doygunluk veya açıklığın calc() ile kolayca ayarlanabilmesiydi.
Göreli renk söz diziminden sonra, herhangi bir boşluktaki herhangi bir renk tek bir CSS satırında oluşturulabilir, değiştirilebilir ve renk olarak döndürülebilir. HSL için daha fazla sınırlama yok. İstenen herhangi bir renk alanında manipülasyonlar yapılabilir ve 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. İlk renk --absolute-change, LCH'de temel renkten 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, temel renkten LCH'de yeni bir renk oluşturur ancak bu kez renk tonu (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);
}
Bu, renkleri karıştırmaya benzer, ancak değişikliklere, karıştırmaktan daha benzerdir. Başka bir renkten renk elde edebilir, kullanılan renk işleviyle adlandırılmış üç kanal değerine erişebilir ve bu kanalları ayarlama fırsatına sahip olabilirsiniz. Sonuç olarak 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 uygun kontrasta sahip olmasını sağlamak için color-contrast() kullandım:
Bu işlev, renk paleti oluşturmak için de kullanılabilir. Burada, sağlanan temel renkten bütün paletlerin oluşturulduğu bir demo gösterilmektedir. Bu CSS kümesi tüm çeşitli paletleri destekler, her palet sadece farklı bir taban sağlar. Bonus olarak, LCH'yi kullandığım için paletlerin bile ne kadar algı algısına sahip olduğuna bakın. Bu renk alanı sayesinde, sıcak veya ölü nokta görülmez.
: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 fonksiyonlarının, 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öreli 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, sRGB kullanılan varsayılan renk alanıydı. sRGB genellikle güvenilir olsa da gri ölü bölge gibi bazı zayıflıklar içerir.
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 gradyanı seçme olanağı tanır. Varsayılan renk alanı, sRGB yerine LCH olarak da 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
);
Burada siyahtan beyaza temel ve gerekli bir renk geçişini görebilirsiniz. Her bir renk alanındaki sonuç aralığına bakın. Bazıları koyu siyaha diğerlerinden daha erken ulaşırken bazıları çok geç beyaza ulaşır.
Bir sonraki örnekte, siyah renk geçişleri için bilinen bir sorunlu alan olduğundan maviye dönüştürülmüştür. Renk interpolasyonu sırasında veya bence renkler, A noktasından B noktasına renklerle renk alanlarının içinde dolaşırken çoğu renk alanı mora ulaşır. Renk geçişi, A noktasından B noktasına düz bir çizgi alacağından renk alanının şekli, yolun yol boyunca izlediği durakları önemli ölçüde değiştirir.
Daha ayrıntılı keşifler, örnekler ve yorumlar için bu Twitter ileti dizisini okuyun.
Kaynaklar
- Gradyan interpolasyonu özelliği
- Alanlarda renk geçişlerini karşılaştırma
- 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 noktası etkileşimli alandan ayrılırsa bunlara tekrar odaklanmaları nedeniyle bu rehberli odaklanma stratejisi olarak biliniyordu. 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 yakalamaya gerek yoktur. Tıklama ve odak değiştirme girişimleri yalnızca dokümanın bu kısımları hareketsizken kullanılamaz. Bu durum bir tuzak yerine bekçiler gibi de düşünülebilir. Burada inert, sizi bir yerde tutmakla ilgilenmek yerine başka yerleri kullanılamaz hale getirmekle ilgilenmektedir.
JavaScript alert() işlevi buna iyi bir örnektir:
Önceki videoda, bir 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 kutusuna yerleştirilir ve başka bir yeri yoktur. 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 örnek olsa da inert, kaydırmalı yan menü kullanıcı deneyimi gibi konularda da faydalıdır. Bir kullanıcı yan menüyü kaydırdığında, farenin veya klavyenin altındaki sayfayla etkileşime girmesine izin vermek uygun değildir; bu, kullanıcılar için biraz zorlayıcı bir iştir. Bunun yerine, yan menü görüntülenirken sayfayı hareketsiz hale getirin. Böylece kullanıcılar, bu yan menüyü kapatmalı veya bu yan menüyü içinde gezinmelidir ve açık menüyle sayfanın başka bir yerinde kaybolmamaları gerekir.
Kaynaklar
COLRv1 Yazı Tipleri
COLRv1 yazı tiplerinden önce web'de, gradyan, yerleşik renk ve efektlere sahip yazı tipleri için açık bir biçim olan OT-SVG yazı tipleri bulunuyordu. Ancak bunlar çok büyüyebilir ve metnin düzenlenmesine olanak tanınsa da özelleştirme için fazla imkan sağlanamıyordu.
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 kapladığı alan, vektörle ölçeklenebilir, yeniden konumlandırılabilir, gradyan özellikli ve harmanlama modu destekli yazı tipleri vardır.
Emojilerle ilgili Chrome Geliştirici blog yayınından bir örneği burada bulabilirsiniz. Bir emojinin yazı tipi boyutunu büyüttüğünüzde fotoğrafın keskin kalmadığını fark etmiş olabilirsiniz. Bu bir görseldir, vektör sanatı değildir. Emoji kullanılan uygulamalarda, emojiler daha yüksek kaliteli öğelerle değiştirilir. COLRv1 yazı tiplerinde emojiler vektöre ve güzeldir:
Simge yazı tipleri, özel çift tonlu renk paletleri ve çok daha fazlasını sunarak bu biçimle bazı harika şeyler yapabilir. Bir COLRv1 yazı tipinin yüklenmesi, diğer herhangi bir yazı tipi dosyası gibidir:
@import url(https://fonts.googleapis.com/css2?family=Bungee+Spice);
COLRv1 yazı tipinin özelleştirilmesi, bir kural grubu olan ve özelleştirme seçeneklerini daha sonra kullanılmak üzere paket halinde adlandırmaya yönelik özel bir CSS olan @font-palette-values ile yapılır. Özel mülk gibi, -- ile başlayan ö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ştirmeler için takma ad olarak --colorized kullanıldığında 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;
}
Giderek daha fazla değişken yazı tipi ve renk yazı tipi kullanıma sunulmasıyla birlikte, web tipografisi, zengin özelleştirme ve yaratıcı ifade açısından çok başarılı bir yoldadır.
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 taraf (vmax) için bir değer vardı. Bunlar birçok 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ının bir kısmını kaplar. Durum çubuğu, birkaç saniye bekleyip bir miktar etkileşimde bulunduktan sonra kullanıcıya daha büyük bir görüntü alanı deneyimi sunmak için kaybolabilir. Ancak bu çubuk kaydığında görüntü alanı yüksekliği de değişir ve hedef boyutları değiştikçe tüm vh birimleri de kayarak 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ği belirlendi.
.original-viewport-units {
height: 100vh;
width: 100vw;
--size: 100vmin;
--size: 100vmax;
}
Yeni görüntü alanı varyantlarından sonra küçük, büyük ve dinamik görüntü alanı birimleri, fiziksel olanlara mantıksal eşdeğerler eklenerek kullanıma sunulmuştur. Amaç, geliştiricilere ve tasarımcılara belirli senaryolarında hangi birimi kullanmak istediklerini seçebilme olanağı vermektir. Durum çubuğu kaybolduğunda rahatsız edici küçük bir düzen değişikliği olması sorun yaratmaz. Böylece dvh (dinamik görüntü alanı yüksekliği) sorunsuz bir şekilde 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ım elde etmek için gereken esnekliği sağlayacağını umuyoruz.
Kaynaklar
: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, çocuklar hakkında sorgu oluştururken 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ı edindiğini anlamak kolaydır.
.parent sınıfının konu olarak kaldığı, ancak yalnızca .child sınıfına sahip bir alt öğenin seçildiği temel bir söz dizimi örneği aşağıda verilmiştir:
.parent:has(.child) {...}
Bir <section> öğesinin konu olduğu, ancak seçicinin yalnızca alt öğelerden birinin :focus-visible olması durumunda eşleştiği bir örneği burada görebilirsiniz:
section:has(*:focus-visible) {...}
Daha pratik kullanım alanları ortaya çıktıkça :has() seçici, muhteşem bir yardımcı program hâline gelmeye başlar. Örneğin, şu anda resimleri sarmalarken <a> etiketlerini seçmek mümkün değildir. Bu da bağlantı etiketine bu kullanım örneğinde stillerini nasıl değiştireceğini öğretmeyi zorlaştırır. Ancak :has() ile bu mümkündür:
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 şekil bir <figcaption> içeriyorsa resimlerdeki stilleri ayarlamayı düşünün. Aşağıdaki örnekte, ibarelerin bulunduğu şekiller ve ardından bu bağlamda resimler seçilmiştir. Hedeflediğimiz konu figürlerden değil resimlerden oluştuğu için :has() kullanılmış ve konuyu değiştirmez:
figure:has(figcaption) img {...}
Kombinasyonlar sonsuz gibi görünüyor. :has() öğesini miktar sorguları ile birleştirin ve CSS ızgara düzenlerini alt öğe sayısına göre düzenleyin. :has() özelliğini etkileşimli sözde sınıf durumlarıyla birleştirin ve yeni reklam öğesi yöntemleriyle yanıt veren uygulamalar oluşturun.
@supports ve tarayıcının söz dizimini kullanmadan önce söz dizimini anlayıp anlamadığını test eden selector() işleviyle destek kontrolü basitleştirildi:
@supports (selector(:has(works))) {
/* safe to use :has() */
}
Kaynaklar
2022 ve sonrası
Tüm bu olağanüstü özellikler 2022'de kullanıma sunulduktan sonra hâlâ yapılması zor bazı şeyler olacak. Bir sonraki bölümde geri kalan sorunlardan bazılarına ve bunları çözmek için aktif olarak geliştirilmekte olan çözümlere göz atacağız. Bu çözümler, tarayıcılarda işaretlerin arkasında belirtilse veya bulunsa bile deneyseldir.
Sonraki bölümlerden alınan sonuçlar, listelenen sorunların birçok şirketten çözüm arayan birçok kişi olduğu için rahatlatıcı olmalı, bu çözümlerin 2023'te kullanıma sunulacağı değil.
Gevşek bir şekilde yazılmış özel özellikler
CSS özel özellikleri harika. Adlandırılmış bir değişkenin içinde her türden öğenin depolanmasına olanak tanırlar. Bu değişkenler daha sonra genişletilebilir, hesaplanabilir, paylaşılabilir ve daha pek çok işlem yapabilir. Aslına bakarsanız bu özellikler çok esnektir ki daha az esnek olan bazılarına 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);
Özelliklerden herhangi biri CSS tarafından kabul edilmeyen bir değere (--x: red gibi) dönüştürülünceye kadar bu işlemlerin tümü sorunsuz bir şekilde çalışır. İç içe yerleştirilmiş değişkenlerden herhangi biri eksikse veya geçersiz bir değer türüne ayarlanmışsa tüm gölge sonları gösterilir.
@property burada devreye girer: --x, artık serbest ve esnek olmamasına rağmen tanımlanmış sınırlar dahilinde güvenli olan bir yazılmış özel mülk haline gelebilir:
@property --x {
syntax: '<length>';
initial-value: 0px;
inherits: false;
}
Artık box-shadow, var(--x) değerini kullandığında ve daha sonra --x: red çalıştırılmaya çalışıldığında, <length> olmadığı için red 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 initial-value değerine geri döner.
Animasyonlar
Tür güvenliğine ek olarak, animasyon için pek ç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 bilgilendirebildiğinden @property burada yardımcı olur. Temelde, olasılık kapsamını, bir tarayıcının daha önce yapamadığı bir stilin
yönlerini canlandırabileceği kadar sınırlandırır.
Dairesel renk geçişinin, bindirmenin bir kısmını yapmak için kullanıldığı ve spot ışığı odağı efekti oluşturduğu bu demo örneğini düşünün. JavaScript, alt/opt tuşuna basıldığında fareyi x ve y'ye ayarlar ve ardından odak boyutunu %25 gibi daha küçük bir değere değiştirerek farenin konumunda odak 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şlerine animasyon eklenemez. Bunlar, tarayıcının animasyonlarını istediğiniz şekilde "türetemeyeceği" kadar esnek ve karmaşıktır. Ancak @property ile bir özellik izole olarak yazılabilir ve canlandırılabilir. Böylece tarayıcı amacı kolayca anlayabilir.
Bu odak efektini kullanan video oyunları, büyük bir daireden iğne deliği çemberine
her zaman daireyi canlandırır. Tarayıcının gradyan maskesini canlandırması için @property demosuyla birlikte ş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 değeri yazdığımız için artık gradyan boyutunu tarayıcı olarak gradyan boyutuna dönüştürebiliyoruz.
@property bundan çok daha fazlasını yapabilir, ancak bu küçük etkinleştirmelerle çok şey başarabilirsiniz.
Kaynaklar
- @mülk spesifikasyonu
- MDN'de@property
- web.dev'de@property
- Zoom odaklama demosu
- CSS Püf Noktaları: @property ve animasyon güçlerini keşfetme
min-width veya max-width içindeydi
Medya sorgusu aralıklarından önce, bir CSS medya sorgusu koşullar altında ve altında ifade oluşturmak için min-width ve max-width kullanır. Şöyle 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ğerine göre çok daha okunaklı görünür. Spesifikasyon eklemeleri sayesinde geliştiriciler hangisini tercih ettiklerini seçebilecek ve hatta bunları birbirlerinin yerine kullanabilecekler.
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 tarihinden önce, medya sorgularının kendilerini tekrar tekrar tekrarlaması veya derleme sırasında statik değişkenlere dayalı doğru çıktıyı oluşturmak için ön işlemcilerden yararlanması gerekiyordu.
@custom-media tarihinden sonra CSS, tıpkı özel bir özellikte 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 öğelerin paylaşılmasını ve ekiplerde 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ığına göre, bunlardan birini şöyle kullanabilirim:
@media (--OSdark) {
:root {
…
}
}
CSS özel özellik kitaplığımın Open Props içinde kullandığım özel medya sorgularının tam listesini bulun.
Kaynaklar
İç içe yerleştirilmiş seçiciler çok güzel
@nest öncesinde stil sayfalarında birçok tekrar bulunuyordu. Bu, özellikle seçiciler uzun olduğunda ve her biri küçük farkları hedeflediğinde kullanışsız bir hale geldi. İç içe yerleştirme kolaylığı, ön işlemci almanın en yaygın nedenlerinden biridir.
@nest sonra tekrarlama kaldırılır. Ön işlemciyle etkinleştirilmiş 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);
}
}
İç içe yerleştirilmiş seçicide article öğesini tekrarlamamanın yanı sıra iç içe yerleştirmeyle ilgili en önemli nokta, stil içeriğinin tek bir stil bloğunda kalmasıdır.
Okuyucu, bir seçiciden ve stillerinden farklı stillere sahip başka bir seçiciye (örnek 1) geri dönmek yerine bir makalenin bağlamı içinde kalabilir ve makalenin içindeki bağlantıların bulunduğunu görebilir. İlişki ve stil amacı birlikte gruplandırılır. Bu nedenle, article kendi stillerine sahip gibi görünür.
Sahiplik, merkezileşme olarak da düşünülebilir. İlgili 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, üst-çocuk ilişkilerinde olduğu gibi alt-üst ilişkilerinde de işe yarar.
Stil sahibi olmak ve çocuğu değiştirmekten ziyade farklı bir üst bağlamda kendisini uyarlamak isteyen bir bileşen olduğunu 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 tarzınızı daha iyi düzenlemenize, merkezileştirmenize ve sahiplenmenize yardımcı olur. Bileşenler, diğer stil bloklarına 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
Stillerin kapsamını oluşturmak gerçekten
Tarayıcı Desteği
- 118
- 118
- x
- 17,4
@scope tarihinden önce CSS'deki stiller varsayılan olarak kademeli, devralma ve global kapsama alınması nedeniyle birçok strateji mevcuttu. CSS'nin bu özellikleri birçok şey için son derece uygundur ancak çok sayıda farklı bileşen tarzına sahip karmaşık siteler ve uygulamalarda, şelalenin global alanı ve doğası nedeniyle stiller sızıyormuş gibi hissedilebilir.
@scope tarihinden sonra stiller yalnızca sınıf gibi bir bağlam içinde kapsama almakla kalmaz, aynı zamanda stillerin nerede bitip basamaklamaya veya devralmaya devam etmeyeceğini de ifade edebilir.
Aşağıdaki örnekte BEM adlandırma kuralı kapsamı, gerçek amaca tersine döndürülebilir. BEM seçici, bir header öğesinin rengini, adlandırma kurallarına sahip bir .card kapsayıcısına kapsamaya çalışıyor. Bunu yapmak 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ı gerekmez:
.card__header {
color: var(--text);
}
/* with @scope becomes */
@scope (.card) {
header {
color: var(--text);
}
}
Burada, daha az bileşene dayalı ve CSS'nin global kapsamlı yapısı hakkında daha fazla
bir örnek verilmiştir. Koyu ve açık temaların bir stil sayfasında bir arada bulunması gerekir. Bu durumda, kazanan stili belirlemede düzen önemlidir. Genellikle bu, koyu tema stillerinin açık temadan sonra geldiği anlamına gelir. Bu, varsayılan stil olarak açık, isteğe bağlı stil olarak koyu temayı oluşturur. @scope ile sıralama ve kapsam çatışması yaşamayın:
@scope (.light-theme) {
a { color: purple; }
}
@scope (.dark-theme) {
a { color: plum; }
}
Buradaki hikayeyi tamamlamak için @scope, stil kapsamının bittiği yerin belirlenmesine de izin verir. Bu, herhangi bir adlandırma kuralı veya ön işlemciyle yapılamaz. Bu, özeldir ve yalnızca tarayıcıda yerleşik CSS'nin yapabileceği bir şeydir. Aşağıdaki örnekte, img ve .content stilleri özellikle, .media-block alt öğesi .content öğesinin eşdüzeyi veya üst öğesi olduğunda uygulanır:
@scope (.media-block) to (.content) {
img {
border-radius: 50%;
}
.content {
padding: 1em;
}
}
Kaynaklar
Duvar düzeni için CSS yöntemi yok
Izgaralı CSS duvar işinden önce, sütun veya flexbox içeren CSS yöntemlerinin içerik sırasını yanlış göstermesi nedeniyle, duvar düzeni için JavaScript kullanılması en iyi yöntemdi.
Izgaralı CSS duvarından sonra JavaScript kitaplığı gerekmez ve içerik sırası doğru olur.
https://www.smashingmagazine.com/native-css-masonry-layout-css-grid/
Ö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 bu özelliği bugün Firefox'ta deneyebilirsiniz.
Kaynaklar
- Duvar düzeni spesifikasyonu
- MDN'de duvar düzeni
- Smashing Magazine: CSS Izgara ile Yerel CSS Duvar Düzeni
CSS, kullanıcıların verileri azaltmasına yardımcı olamaz
prefers-reduced-data medya sorgusundan önce, JavaScript ve bir sunucu kullanıcının işletim sistemi veya tarayıcının "veri tasarrufu" seçeneğine göre davranışlarını değiştirebiliyordu, ancak CSS değiştiremiyordu.
prefers-reduced-data medya sorgusundan sonra CSS, kullanıcı deneyimi geliştirmesine katılabilir ve veri tasarrufuna katkıda bulunabilir.
@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üklemesinde
daha fazla tasarruf sağlanır. Kullanıcılar medya kaydırma çubuklarıyla etkileşim kurdukça kaydetme işlemi devam eder. Resimlerin tümünde loading="lazy" özellikleri bulunur. Bu, CSS'nin öğeyi tamamen gizlemesiyle birleştiğinde resim için hiçbir zaman ağ isteği yapılmayacağı anlamına gelir.
Testimde, 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 tasarruf demek ve kullanıcı hiçbir medya içeriğini kaydırmamış bile. Bu noktada ek bir istek oluşturulmamış demektir.
Bu azaltılmış veri deneyiminin avantajı, veri tasarrufundan çok daha fazladır. Daha fazla başlık görülebilir ve dikkat çekmek için dikkat dağıtıcı kapak resimleri bulunmaz. Birçok kullanıcı, megabayt veri başına ödeme yaptıkları için veri tasarrufu moduna göz atar. CSS'nin burada yardımcı olabileceğini görmek gerçekten güzel.
Kaynaklar
- reduced-data-spesifikasyonunu tercih eder
- MDN'de-reddetilmiş-verileri tercih eder
- bir GUI Meydan Okumasında-azaltılmış-verileri tercih eder
- Smashing Magazine: Core Web Vitals'ı İyileştirme, Smashing Magazine Örnek Çalışması
Kaydırma tutturma ö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 hızla karmaşıklaşabilirdi. 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 olmayan ve kullanışsız bir hale gelmesine neden olabilir.
Yeni API'ler
snapChanging()
Tarayıcı bir tutturma alt öğesi yayınladığı anda bu etkinlik tetiklenir. Bu sayede, artık kullanıldığı ve yeni bir yere yönlendirileceği için kullanıcı arayüzünün hızlı bir alt öğe olmamasını ve kaydırma çubuğunun belirsiz durumunu yansıtmasını sağlar.
document.querySelector('.snap-carousel').addEventListener('snapchanging', event => {
console.log('Snap is changing', event.snappedTargetsList);
});
snapChanged()
Tarayıcı yeni bir alt öğeye tutturulur ve kaydırma çubuğu durduğunda, bu etkinlik tetiklenir. Bu, tutturulan alt öğeye bağlı tüm kullanıcı arayüzlerinin bağlantıyı güncellemesini ve 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 kaydırılabilir bileşenleri veya siz en üste kadar kaydırıncaya kadar sayfa yüklenirken görünen bir arama çubuğunu ilk başta gizlenen kaydırılabilir bileşenler düşünün. Bu CSS özelliği, geliştiricilerin bir kaydırıcının belirli bir noktadan başlaması gerektiğini belirtmelerini sağlar.
:root { --nav-height: 100px }
.snap-scroll-y {
scroll-start-y: var(--nav-height);
}
:snap-target
Bu CSS seçici, tarayıcı tarafından tutturulmakta olan bir kaydırma tutturma kapsayıcısındaki öğeleri eşleştirir.
.card {
--shadow-distance: 5px;
box-shadow: 0 var(--shadow-distance) 5px hsl(0 0% 0% / 25%);
transition: box-shadow 350ms ease;
}
.card:snapped {
--shadow-distance: 30px;
}
Bu kaydırma önerilerinden sonra, tarayıcı artık gözlemcileri ortadan kaldırarak ve kaydırma düzenleme kodunu yerleşik API'leri kullanmaya yönelik hale getirerek görev için kolaylık sağladığından, kaydırma çubuğu, bant veya galeri oluşturmak çok daha kolay hale geliyor.
Bu CSS ve JS özellikleri için henüz yolun başındayız, ancak yakında bunların benimsenmesine ve test edilmesine yardımcı olabilecek çoklu dolgulara dikkat edin.
Kaynaklar
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şe ait, dahili olarak yönetilen bir tarayıcı durumu olan :checked bulunur.
toggle() tarihinden sonra, CSS'nin değiştirmesi ve stil için kullanması için herhangi bir öğede özel durumlar oluşturulabilir. Gruplar, bisiklet, yönlendirilmiş geçiş ve daha pek çok özelliğe izin verir.
Aşağıdaki örnekte, üstü çizili bir liste öğesinin tamamlanma üzerindeki etkisi, herhangi bir onay kutusu öğesi olmadan sağlanır:
<ul class='ingredients'>
<li>1 banana
<li>1 cup blueberries
...
</ul>
Ve ilgili 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 fark edebilirsiniz. Bu özellik, geliştiricilerin CSS'ye durumlarının daha büyük bir kısmını oluşturmalarını sağlayarak etkileşim ve durum düzenlemenin daha net ve semantik yollarını bulmalarını sağlayacak.
Kaynaklar
Seçilen öğeleri özelleştirme
<selectmenu> öncesinde CSS'nin <option> öğelerini zengin HTML ile özelleştirme veya seçenek listesinin görüntülenme şeklini 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üklemesine neden oldu ve sonuç olarak çok fazla iş yarattı.
<selectmenu> tarihinden sonra, geliştiriciler seçenek öğeleri için zengin HTML sağlayabilir ve bunları, ihtiyaç duydukları kadar biçimlendirebilir ve bir yandan da erişilebilirlik gereksinimlerini karşılamaya ve anlamsal HTML sağlamaya devam edebilirler.
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 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;
}
<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
Bir öğeyi başka bir öğeye bağlama
anchor() öncesinde mutlak ve göreli konum, geliştiricilerin alt öğelerin bir üst öğe içinde hareket etmesini sağlamak için sunduğu konum stratejileriydi.
anchor() tarihinden sonra geliştiriciler, alt öğe olup olmamalarından bağımsız olarak öğeleri diğer öğelere konumlandırabilir. Ayrıca, geliştiricilerin hangi kenara odaklanacaklarını belirtmelerine imkan tanır ve öğeler arasında konum ilişkileri oluşturmanın diğer özelliklerini kullanabilirler.
Daha fazla bilgi edinmek isterseniz açıklayıcı birkaç örnek ve kod örneklerinden yararlanabilirsiniz.