CSS'nin durumu 2022

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

Adam Argyle

2022, hem özellikleri hem de kullanımı açısından CSS'nin en iyi yıllarından biri olacak. kullanıma sunmak üzere birlikte işbirliğine dayalı tarayıcı özelliği sürümleri ile 14 özellikleri hakkında daha fazla bilgi edinin.

Genel Bakış

Bu gönderi, Google IO 2022'de yapılan konuşmanın makale biçimidir. Hayır ancak her özellikle ilgili ayrıntılı bir kılavuz değil, daha sonra söz konusu özellikle ilgili genel bir bakış açısıyla ilginizi çekecek bilgiler sunabilirsiniz. Eğer ilgi arttığında, daha fazla bilgiye yönlendiren kaynak bağlantıları için bölümün sonuna bakın.

İç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 nedeni, Interop 2022'nin katkısıyla Çalışmadan önce birlikte çalışırken, kontrol etmek için Compat 2021 çabaları.

Comat 2021

Anketler aracılığıyla alınan geliştirici geri bildirimleriyle belirlenen 2021 hedeflerinde, test paketini iyileştirmek ve tarayıcıların geçme puanlarını artırmak beş özellik için:

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

Test puanları genel olarak yükseltilmiştir. Bu da daha istikrarlı ve bahsedeceğim. Buradaki ekipleri tebrik ederiz.

Birlikte Çalışabilirlik 2022

Bu yıl, tarayıcılar bir araya gelerek Google'ın reklamcılık platformlarını ve ortak bir paydada buluşmasını sağlamak sizin görevinizdir. Arkadaş Bitkiler projesinin geliştiriciler için aşağıdaki web özellikleri:

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'tan önemli ölçüde etkileniyor. 2022'deki işler.

Katmanları basamakla

@layer öncesinde, yüklenen stil sayfalarının keşfedilme sırası çok önemliydi. yeni yüklenen stiller daha önce yüklenen stillerin üzerine yazabilir. Bu da geliştiricilerin daha az yükleme yapması gereken, titizlikle yönetilen giriş stil sayfaları önemli stilleri daha sonra tekrar deneyin. Metodolojilerin tamamı Geliştiricilerin bu önemi yönetmelerine yardımcı olmak için vardır. ITCSS kapsamındadır.

@layer ile giriş dosyası, katmanları ve sıralarını önceden tanımlayarak gerekir. Daha sonra, stiller yüklendikçe veya tanımlandıkça, bu öğeler için katmanında, stilin geçersiz kılma önemini korur. Ancak özenle yönetilen bir yükleme sürecidir.

Video, tanımlanan basamak katmanlarının nasıl daha özgür ve serbest stil yazma ve yükleme sürecini desteklerken, kadrajı gerekir.

Chrome Geliştirici Araçları, hangi stillerin nereden geldiğini görselleştirmek için katmanlar:

Kaynaklar

• CSS Cascade 5 spesifikasyonu
• Basamaklı katman açıklayıcısı
• MDN'de katmanları basamakla
• Una Kravets: Cascade Katmanlar
• Ahmad Shadeed: Merhaba, CSS Cascade Katmanlar

Alt ızgara

subgrid tarihinden önce, başka bir ızgaranın içindeki bir ızgara kendi kendine hizalayamıyordu üst hücreler veya kılavuz çizgileridir. Her ızgara düzeni benzersizdi. Birçok tasarımcı, tek bir çizelgeye göre ilerler ve içindeki öğeleri sürekli olarak hizalar. işlemi CSS'de yapılamadı.

subgrid tarihinden sonra, bir tablonun alt öğeleri kendi üst sütun veya satırlarını kendilerine uygun düşmanları ya da çocuklara uygun hale getirmelidir.

Aşağıdaki demoda, gövde öğesi üç sütunlu klasik bir ızgara oluşturur: ortadaki sütun main, sol ve sağ sütunlardaki sütunlar ise çizgiler fullbleed. Daha sonra, gövdedeki her öğe (<nav> ve <main>) grid-template-columns: subgrid ayarlayarak gövdeden adlandırılmış satırlar.

​​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 çizgiler.

.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ım fikirlerine benzetebiliriz.

Geliştirici Araçları'nın öğeler panelinde hangi öğelerin ızgara ve çok yardımcı olan alt öğeler içerir.

Kaynaklar

• Alt ızgara spesifikasyonu
• MDN'de alt tablo
• Bramus: Pratik CSS Alt Izgara Videosu Eğitici içerikler

Kapsayıcı sorguları

@container tarihinden önce, bir web sayfasının öğeleri yalnızca tüm görüntü alanını içerir. Bu, makro düzenler için çok işe yarar. Ancak mikro düzenler için dış kapsayıcıları tüm görüntü alanını kapsamaz. Bu yapıda, ve buna göre ayarlama yapmaktır.

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

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

Pzt, Sal, Çar, Perşembe ve Cuma sütunlarını oluşturan bu stiller, aşağıdaki video etkinlik öğeleri tarafından sorgulanabilir.

calendar-day kapsayıcısını boyutuna göre sorgulamak için kullanılan CSS aşağıda verilmiştir: Bir düzeni ve yazı tipi boyutlarını ayarlama:

@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 kendisini kullanılabilir alana uyarlar sütuna sürüklediğiniz sütuna dikkat edin:

Una, durumu yeni pazarlama uzmanının duyarlıdır. Orada kullanırken verilebilecek heyecan verici ve anlamlı tasarım kararları @container

Kaynaklar

• Kapsayıcı Sorguları spesifikasyonu
• Kapsayıcı Sorguları açıklayıcısı
• MDN'deki Kapsayıcı Sorguları
• web.dev'deki yeni duyarlı reklam
• Una tarafından sunulan takvim demosu
• Muhteşem container sorguları koleksiyonu
• Web.dev'de Designcember'ı nasıl geliştirdik?
• Ahmet Gölge: CSS'ye Merhaba deyin Saklama Kabı Sorgular

accent-color

accent-color tarihinden önce, markayla eşleşen renklere sahip bir form istediğinizde yönetimi zorlaşan karmaşık kitaplıklar veya CSS çözümleriyle sonuçlanabilir oluşacaktır. Size tüm seçenekleri sundular. Umarım size tüm seçenekleri erişilebilirlik, yerleşik bileşenleri kullanma veya kendi bileşenlerinizi seçim yapmak canını sıkabilir.

accent-color tarihinden sonra, bir CSS satırı yerleşik öğeye marka rengi getiriyor bileşenlerine ayıralım. Tonlamanın yanı sıra tarayıcı akıllı şekilde bileşenin yardımcı parçaları için zıt renkler sunar ve sisteme renk şemaları (açık veya koyu).

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

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

accent-color hakkında daha fazla bilgi edinmek için şu sayfadaki yayınıma göz atın: pek çok yönünü keşfettiğim web.dev CSS özelliğini kullanabilirsiniz.

Kaynaklar

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

Renk düzeyi 4 ve 5

SRGB, son on yıllarda web'in hakimiyetini oluşturdu. yüksek tanımlı ekranların ve önceden donanımlı mobil cihazların dijital dünyası OLED veya QLED ekranlar, sRGB yeterli değildir. Ayrıca, belirli bir kitleye uyum sağlayan dinamik sayfalar, kullanıcı tercihlerine uygun olması beklenen ve renk yönetiminin 7/24 uygulayabilirsiniz.

Ancak CSS'de bazı yeni renk işlevleri ve boşluklar 2022'de kullanıma sunuldu: - 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 hangi alanı kullanacağınızı seçmenize yardımcı olacak renk işlevleri daha iyi olur.

Tüm bu renk özelliklerinden önce, doğru malzemeleri önceden hesaplamayı renklerle kontrast yaratın ve uygun, canlı paletlerin kullanılmasını sağlayın. işin büyük bir kısmını ön işlemciler veya JavaScript'in yaptığını fark ettik.

Tüm bu renk özelliklerinin ardından tarayıcı ve CSS tüm işi yapabiliyor, dinamik olarak ve zamanında yapmaktır. Çok sayıda CSS ve JavaScript KB göndermek yerine kullanıcılara tema ve veri görselleştirme renklerini etkinleştirme olanağı sunuyorsa CSS bu araçları kullanabilirsiniz. CSS'ler ayrıca, destek sağlamayan ve yedekleri sorunsuz bir şekilde işlemeye başladı.

@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. Kendisini insan dostu bir yöntem işlevi görür. Çünkü yalnızca bir ton karartmak için beyaz veya siyahtır. Renkleri beyaz veya siyahla birleştiren sanatçılar beğendikleri için teşekkür ederiz.

Bu renk işlevini kullandığınızda, sRGB renk alanından gelen renkler elde edilir. ve RGB olarak ayarlayın. 2022'nin yeniliği size yeni renkler vermez. ancak söz dizimi ve zihinsel model hayranları için bazı görevleri kolaylaştırabilir.

Kaynaklar

• HWB spesifikasyonu
• MDN'de HWB
• Stefan Judis: hwb() – bir renk gösterimi için ne anlama geliyor?

Renk alanları

Renklerin temsil edilme şekli bir renk alanıyla yapılır. Her bir renk alanı renkle çalışmaya yönelik çeşitli özellikler ve ödünler sunuyor. Bazıları hepsini paketleyebilir parlak renkleri bir arada kullanır. bazılarına göre, bazılarına göre parlaklık.

2022 CSS, her biri benzersiz özellikler içeren 10 yeni renk alanı sunacak. Tasarımcılara ve geliştiricilere renkleri görüntüleme, seçme ve karıştırma konusunda yardımcı olmak. Önceden, sRGB renkle çalışmanın tek seçeneğiydi ancak şimdi CSS yeni bir potansiyel ve yeni bir varsayılan renk alanı, LCH'dir.

color-mix()

color-mix() öncesinde geliştiriciler ve tasarımcılar aşağıdaki gibi ön işlemcilere ihtiyaç duyuyordu: Renkleri tarayıcı görmeden önce karıştırmak için Sass komutunu kullanın. Renk karıştırma işlevlerinin çoğu, aynı zamanda hangi renk renk alanı kullanarak karışıklığa neden olabilir.

color-mix() tarihinden sonra, geliştiriciler ve tasarımcılar tarayıcıda renkleri karıştırabilir, derleme süreçleri çalıştırmadan veya JavaScript'e dokunun. Ayrıca, karıştırma işlemi için hangi renk alanını veya LCH'nin varsayılan karıştırma renk alanını kullanın.

Genellikle, marka renkleri temel olarak kullanılır ve bu renklerden varyantlar oluşturulur. Örneğin: daha açık veya koyu renkler kullanmanızı öneririz. Bu değişiklik color-mix():

.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 farklı bir renk alanında (ör. s tamam) 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-mix() spesifikasyonu
• MDN'de color-mix()
• Tema demosu
• Başka bir tema demosu
• Fabio Giolito: Bir renk teması oluşturmak için yakında yayınlanacak CSS'ler özellikler

color-contrast()

color-contrast() tarihinden önce, stil sayfası yazarlarının erişilebilir renkleri bilmesi gerekiyordu gerekir. Çoğu zaman bir palet, renk paletinde siyah veya beyaz metin gösterir. renk sistemi kullanıcısına hangi metin renginin gerekli olacağını belirtmek için uygun bir kontrast oluşturun.

Stil sayfası yazarları, color-contrast() tarihinden sonra görevi tamamen tarayıcı. Yalnızca siyah rengi otomatik olarak seçmek için tarayıcıyı veya beyaz renkte olduğunu fark ederseniz, tasarım sistemine uygun renklerin bir listesini seçeneğinden, istediğiniz kontrast oranını geçiren ilki seçmesini isteyin.

Burada, HWB renk paleti grubunun ekran görüntüsü demoda bulabilirsiniz. tarayıcı tarafından kartela rengine göre otomatik olarak seçilir:

Söz diziminin temelleri bu şekilde görünür. Burada gri, işleve aktarılır ve tarayıcı en fazla kontrastın siyah mı yoksa beyaz mı olduğunu belirler:

color: color-contrast(gray);

Fonksiyon, bir renk listesiyle de özelleştirilebilir. seçimden en yüksek kontrast rengi seçin:

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

Son olarak, malzemeden en yüksek kontrastlı rengin seçilmemesi için bir hedef kontrast oranı sağlanabilir ve 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ı olacaktır. Bunu teslim etmenin ne kadar kolay olacağını düşünün uygun zıt renkler seçildikten sonra erişilebilir ve okunaklı arayüzler CSS dilinin kendisinde yerleşik olarak bulunmaktadır.

Kaynaklar

• color-contrast() spesifikasyon
• color-contrast() açık MDN
• Demo

Göreli renk söz dizimi

Göreli renk söz diziminden önce, rengi hesaplamak ve ayarlamalar yapmak için renk kanallarının özel özelliklere ayrı ayrı yerleştirilmesi gerekir. Bu sınırlama, aynı zamanda HSL'yi renkleri işlemek için birincil renk işlevi haline getirdi. çünkü renk tonunun, doygunluğun veya ışığın tamamı belirli bir calc() ile çok kolay.

Göreceli renk söz diziminden sonra, herhangi bir boşluktaki tüm renkler ayrıştırılabilir. CSS'nin tek bir satırında bulunuyor ve renk olarak döndürülüyor. Sınırlamaya son HSL'ye göre manipülasyonlar istenen herhangi bir renk alanında ve çok daha az özel özelliklerin oluşturulması gerekir.

Aşağıdaki söz dizimi örneğinde, bir taban onaltılık renk verilmiştir ve iki yeni renk bir örnek teşkil eder. İlk renk (--absolute-change) yeni bir renk oluşturur LCH'de, temel rengin açıklığını değiştirecek. renk (c) ve tonu (h) koruyarak 75% ile. İkinci renk --relative-change, LCH'de temel renkten yeni bir renk oluşturur, ancak bu 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 değişikliklere benzer karıştırma. Başka bir rengin rengini öğrenerek üç renk seçeneğine erişebilirsiniz. kanal değerleri, kullanılan renk işleviyle adlandırıldığı gibi, yardımcı olmaktır. Sonuçta bu, her bir web sitesi için çok iyi ve güçlü bir rengi.

Aşağıdaki demoda daha açık ve renkli bir renk oluşturmak için göreli renk söz dizimi daha koyu renkler ve color-contrast() kullanıldı. Etiketler uygun kontrasta sahiptir:

Bu işlev, renk paleti oluşturmak için de kullanılabilir. Demoyu inceleyebilirsiniz Burada, verilen temel renkten bütün paletler oluşturulur. Bu tek grup CSS çeşitli paletleri destekler, her palet farklı bir palet sağlar büyütmek açısından önemlidir. Buna ek olarak, LCH'yi kullandığım için, yapay zekanın Paletler bu renk alanı sayesinde sıcak veya ölü noktalar olarak görülmüyor.

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

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

Umarım şimdiye kadar renk alanlarının ve farklı renk fonksiyonlarının Bunların tümü, güçlü ve zayıf yanlarına göre farklı amaçlar için kullanılır.

Kaynaklar

• Göreli renk söz dizimi spesifikasyon
• Göreli renklerle renk paletleri oluşturma söz dizimi
• Göreceli renklere sahip renk varyantları oluşturma söz dizimi

Gradyan renk alanları

Gradyan renk alanlarından önce, sRGB kullanılan varsayılan renk alanıydı. sRGB (şimdiki değeri) genellikle güvenilir, ancak güçlü ölüler gibi bölge'ye dokunun.

Gradyan renk alanlarından sonra, tarayıcıya renk interpolasyonu gibidir. Bu, geliştiriciler ve tasarımcılara istedikleri renk değiştirebilirsiniz. Varsayılan renk alanı da sRGB'dir.

Söz dizimi ekleme işlemi, gradyan yönünden sonra gelir ve 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. Anahtar kelimelerin aralığına bakın her bir renk alanı elde eder. Bazıları koyu siyaha diğerlerinden daha erken ulaşır, bazıları kararır.

Aşağıdaki örnekte siyah renk maviye dönüştürülür, çünkü bu bilinen bir sorundur alanı da oluşturur. Renk alanlarının çoğu renk sırasında mora doğru kayıyor renkler kendi renklerinin içinde dolaştıkça, interpolasyon veya alanı A noktasından B noktasına kadar uzatır. Gradyan noktası A noktasından B noktasına gittiğinde, renk alanının şekli durakları büyük ölçüde değiştirmektedir emin olmanız gerekir.

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

Kaynaklar

• Gradyan interpolasyonu spesifikasyon
• Alanlardaki gradyanları karşılaştırma demosu
• Gözlemlenebilir not defteri karşılaştırması renk geçişleri

inert

inert öncesinde kullanıcının dikkatini hemen ilgilenmeniz gereken sayfa veya uygulama. Bu rehberli odaklanma stratejisi, Buna odaklanma tuzağı olarak bilinir çünkü geliştiriciler, odaklanmanız gerekir. Odaklanmanın etkileşimli sonra tekrar içeri zorlanmıştı. Klavye veya ekran okuyucu kullananlar görevinden önce tamamlandığından emin olmak için etkileşimli alana yaşayabilirsiniz.

inert tarihinden sonra, tamamını dondurabileceğiniz veya koruyabileceğiniz için sıkışmaya gerek yok. bazı bölümleri görebilirsiniz. Tıklamalar ve odak değişikliği denemeleri, bu bölümler durağandığında kullanılamaz. Mesela, inert bir tuzak yerine gardlar oluşturur. Bu durumda inert bir yerde kalıyorsunuz.

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

Önceki videoda, sayfaya fare ve klavyeden nasıl erişildiğine dikkat edin alert() çağrılana kadar devam eder. Uyarı iletişim kutusu pop-up'ı gösterildikten sonra sayfası donduruldu veya inert. Kullanıcının odağı uyarının içine yerleştirilir ve gidebileceğimiz başka bir yer yok. Kullanıcı etkileşimde bulunup uyarı işlevi isteğinde bulunduğunda, sayfa tekrar etkileşimli hale gelir. inert güçlendirir geliştiricilerin de bu rehberli odaklanma deneyimini kolayca gerçekleştirmelerine yardımcı oluyor.

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>

Diyalog harika bir örnektir ama inert kullanıcı deneyimini yaşayabilirsiniz. Bir kullanıcı yan menüyü kaydırarak fare veya klavyenin, arkasındaki sayfayla etkileşimde bulunmasına izin vermeyecek şekilde; bu kullanıcılar için karmaşık bir süreçtir. Bunun yerine, yan menü gösterildiğinde, eklemez ve artık kullanıcıların bu yan menüyü kapatması veya içinde gezinmesi gerekir ve kendilerini sayfada başka bir yerde kaybolmuş buluyor.

Kaynaklar

• Inert spesifikasyon
• MDN'de Durdurma
• Chrome Geliştiricileri: Tanıtım durağan

COLRv1 Yazı Tipleri

COLRv1 yazı tiplerinden önce web'de OT-SVG yazı tipleri ayrıca gradyanları, yerleşik renkleri ve efektleri olan yazı tipleri için de açık bir biçim sunar. Bunlar çok büyüyebilir ve metni düzenlemeye izin verebilmekle birlikte, fazla özelleştirme olanağı sunulmuyordu.

COLRv1 yazı tiplerinden sonra, web vektör ölçeklenebilir, yeniden konumlandırılabilir, gradyanlı ve daha küçük boyutlu Kullanılan yazı tipini özelleştirmek için kullanılan parametreleri kabul eden, karışım modu destekli yazı tipleri markayla eşleşmesi gerekir.

Aşağıda, emojilerle ilgili Chrome Developer blog yayınından bir örnek verilmiştir. Belki bu bir emojinin yazı tipi boyutunu büyüttüğünüzde çok net olamayacağını fark ettiniz. Vektör sanatı değil, resimdir. Genellikle emoji kullanılan uygulamalarda daha yüksek kaliteli bir öğeyle değiştirildi. COLRv1 yazı tiplerinde emojiler vektörel ve güzel:

Simge yazı tipleri, özel e-postalar ve telefon görüşmeleri gibi ve daha fazlası. COLRv1 yazı tipi yükleme işlemi, diğer yazı tiplerine benzer yazı tipi dosyası:

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

COLRv1 yazı tipi, özel bir CSS olan @font-palette-values ile özelleştirilebilir bir grup özelleştirme seçeneğini bir pakette gruplandırmak ve adlandırmak için referans olabilir. Özel bir adı özel bir ad gibi nasıl belirttiğinize dikkat edin mülkü (-- ile başlayan):

@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ıyorsanız son adım, renk yazı tipi ailesini kullanan bir öğeye ekler:

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

Daha fazla sayıda değişken yazı tipi ve renk yazı tipi kullanıma sunuldukça, web tipografi, zengin özelleştirme olanaklarına ve reklam öğelerine doğru ifade eder.

Kaynaklar

• Colrv1 spesifikasyonu GitHub
• Chrome Geliştiricileri: Colrv1 Yazı tipleri
• BlinkOn geliştirici açıklayıcısı video

Görüntü alanı birimleri

Yeni görüntü alanı varyantlarından önce, web yardımcı olacak fiziksel birimler sunuyordu. uyumlu hale getirmek çok önemli. Yükseklik, genişlik, en küçük boyut (vmin) ve en büyük kenar (vmax). Bunlar birçok işe yaradı ancak mobil tarayıcılar bir karmaşıklık yarattı.

Mobilde bir sayfa yüklenirken URL'yi içeren durum çubuğu gösterilir ve bölmesi, görüntü alanının bir kısmını kaplar. Birkaç saniye ve etkileşim varsa, durum çubuğu kayarak daha büyük bir görüntü alanına sahip kullanıcı deneyimi sunmaktır. Ancak bu çubuk dışarı kaydırıldığında görüntü alanı yüksekliği ve hedef boyutları değiştikçe tüm vh birimler kayarak yeniden boyutlandırılacaktı. İlerleyen yıllarda vh biriminin özellikle, bu iki kuruluştan hangisinin rahatsız edici bir görsel düzene neden olduğundan, kullanılacak görüntü alanı boyutlarından sorunlarından bahsedeceğiz. vh metriğinin daima en büyük görüntü alanına sahip.

.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 eşdeğerlerini sağlar. Ana fikir geliştiricilere ve tasarımcılara istedikleri birimi seçme olanağını yaygın şekilde öğrendik. Düzensiz bir düzende ufak bir kaymanın Böylece, durum çubuğu kaybolduğunda dvh (dinamik görüntü alanı yüksekliği) sorunsuz bir şekilde kullanılır.

Aşağıda, yeni görüntü alanı varyantları:

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

Umarım bu uygulamalar, geliştiricilere ve tasarımcılara duyarlı tasarımlara sahip olabiliyor.

Kaynaklar

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

:has()

:has() tarihinden önce, konu bir seçicinin her zaman sonundaydı. Örneğin, bu seçicinin konusu bir liste öğesidir: ul > li. Sözde seçiciler, seçici, ancak konuyu değiştirmez: ul > li:hover veya ul > li:not(.selected).

:has() tarihinden sonra, öğe ağacında daha üstte olan bir özne, öğe olarak kalabilir aynı zamanda çocuklarla ilgili bir sorgu sağlar: ul:has(> li). Anlaşılması kolay. :has(), seçici artık bu örnekte üst öğedir.

.parent sınıfının konu olarak kaldığı ancak yalnızca bir alt öğe .child sınıfına sahipse seçilir:

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

<section> öğesinin konu, seçicinin ise yalnızca çocuklardan birinde :focus-visible varsa eşleşir:

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

:has() seçicisi, artık daha pratik bir şekilde faydalı bir yardımcı haline geliyor. kullanım alanları ortaya çıkıyor. Örneğin, şu anda Resimleri sarmaladıklarında, bağlantı etiketinin öğretilmesini zorlaştıran <a> etiketleri stillerini nasıl değiştireceğinizi öğreneceksiniz. :has() ile mümkündür ancak:

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

Bunların tümü, :has() öğesinin yalnızca bir üst seçici gibi göründüğü örneklerdir. <figure> öğelerinin içindeki resimlerin kullanım alanını göz önünde bulundurun ve ayarlamalar yapın stilde <figcaption> varsa resimlerdeki stilleri kullanabilirsiniz. Sonraki figürleri olan figürler ve bu figürlerin içindeki resimler bağlam. :has() kullanılır ve konuyu değiştirmez. rakamlar değil, "resimler"dir.

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

Kombinasyonlar görünüşte sonsuzdur. :has() öğesini quantity ile birleştir sorguları düzenleyin Alt öğe sayısına göre CSS ızgara düzenleri. :has() öğesini şununla birleştir: etkileşimli sözde sınıf eyaletlere gidin ve yanıt veren uygulamalar geliştirebilirsiniz.

ile ilgili destek almak çok daha kolay. @supports ve onun selector() fonksiyonudur:

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

Kaynaklar

• :has() spesifikasyonu
• :has() on MDN
• CSS :has() seçicisi, bir "üst öğe"den çok daha fazlasıdır seçici"

2022 ve sonrası

Tüm bunlardan sonra yapılması zor olacak bazı şeyler var harika özellikler 2022 yılında sunulacak. Bir sonraki bölümde, ve bunların sonucunda ortaya çıkan sorunları çözmek için çözer. Bu çözümler deneysel olsa da veya tarayıcılarda bulunan işaretlerin arkasında bulunmalıdır.

Sonraki bölümlerin sonucunda ortaya çıkan sonuç, listelenen sorunların kullanıcılar tarafından rahatça görülebilmesini sağlamalıdır. birçok şirketten birçok kişinin çözüm arayışında olması gerekir. 2023'te kullanıma sunulacak.

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

CSS özel özellikleri muhteşem. Her tür öğenin adlandırılmış bir değişkeni kullanılabilir. Bu değişken daha sonra genişletilebilir, üzerine hesaplanabilir, paylaşılabilir ve daha pek çok işlem yapılabilir. İçinde çok esnek olduğu için 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 bu değer CSS burada --x: red gibi öğeleri kabul etmez. Varsa gölgenin tamamı kırılıyor iç içe yerleştirilmiş değişkenlerden biri eksik veya geçersiz bir değer türüne ayarlanmış.

@property burada devreye girer: --x şunları yapabilir: artık esnek ve esnek olmayan, ancak belirli şekillerde güvenli bir şekilde tanımlanan sınırlar:

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

Artık box-shadow, var(--x) ve sonraki sürümleri kullandığında --x: red denenmeye çalışılır. red, <length> olmadığından yoksayılacak. Bu, gölgenin devam ettiği anlamına gelir çalışmasını sağlayabilir. Başarısız olmak yerine, 0px olan initial-value değerine geri döner.

Animasyon

Tip güvenliğine ek olarak, animasyon için de birçok kapı açıyor. İlgili içeriği oluşturmak için kullanılan CSS söz diziminin esnekliği, bazı şeyleri animasyonla oynatmayı imkansız hale getirir. renk geçişlerini kullanabilirsiniz. @property burada yardımcı olur çünkü yazılan CSS özelliği, niyetiyle ilgili bilgi veren bir tarayıcı. interpolasyondur. Olasılık kapsamını, olasılık kapsamını, o kadar tarayıcı, bir stilin daha önce yapamayacağı belirli yönlerini canlandırabilir.

Resmin bir bölümünü yapmak için dairesel bir renk geçişinin kullanıldığı şu demo örneğine yer paylaşımı oluşturur. JavaScript, fareyi x ve y'yi ayarlar alt/opt tuşuna basıldığında ve ardından odak boyutunu daha küçük bir değere ayarlar değerini 25 olarak ayarlayabilirsiniz (örneğin, %25 gibi).

.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. Basit ve karmaşıktır. "sadece türetmek” için istediğiniz şekilde düzenlemenizi sağlar. @property ile, Ancak, bir özellik ayrı olarak yazılabilir ve canlandırılabilir. Bu özellik, amacı kolayca anlayabilir.

Bu odaklama efektini kullanan video oyunları, büyük bir resimden daireye her zaman bir iğne deliği çemberine dönüşür. @property özelliğinin demomuzla birlikte nasıl kullanılacağına Tarayıcı, gradyan maskesine animasyon ekler:

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

Renk geçişinin boyutunu küçülttüğümüzden yalnızca bir mülkte yapılan değişikliğin yüzey alanını ve değeri yazdıktan sonra, uzunlukları akıllı bir şekilde değerlendirebilir.

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

Kaynaklar

• @mülk spesifikasyon
• MDN'de@property
• web.dev'de@property
• Zoom odağı demosu
• CSS Püf Noktaları: @mülkü keşfetme ve animasyon güçler

min-width veya max-width adlı yerdeydi

Medya sorgusu aralıklarından önce, bir CSS medya sorgusu şu işlemleri yapmak için min-width ve max-width kullanır: farklı şartlarda ifade edebilme. 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 çok daha okunaklı görünür daha fazla bilgi sağlar. Spesifikasyonlarda yapılan eklemeler sayesinde geliştiriciler, hatta bunları birbirlerinin yerine kullanabilir.

Kaynaklar

• Medya sorgu aralığı söz dizimi spesifikasyon
• MDN
• Medya sorgu aralığı söz dizimi PostCSS eklenti

Medya sorgusu değişkeni yok

@custom-media öncesinde medya sorgularının kendisini tekrar tekrar etmesi gerekiyordu veya Statik değişkenlere göre doğru çıktıyı üretmek için ön işlemcilerden yararlanma yardımcı olabilir.

@custom-media tarihinden sonra CSS, medya sorgularının takmalanmasına ve özel bir özellik gibi kullanabilirsiniz.

Öğeleri adlandırmak çok önemlidir: Amacı söz dizimiyle uyumlu hale getirebilir, ve ekiplerde kullanımı daha kolay hale geliyor. Bazı özel medya öğelerini projeler arasında beni takip eden sorgular:

@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 {
    …
  }
}

Özel medyaların tam listesini bulun CSS özel sayfamda kullandığım sorgular mülk kitaplığı Open Props'u seçin.

Kaynaklar

• Özel medya sorguları spesifikasyon
• Özel medya sorguları PostCSS eklenti

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

@nest tarihinden önce stil sayfalarında çok fazla tekrar oluyordu. O zaman özellikle seçiciler uzun olduğunda ve her biri küçük kullanıcıları hedeflediğinde kararsızdı farklar olabilir. İç içe yerleştirmenin rahatlığı, Google Ads'deki benimsemeye ikna edebilirsiniz.

@nest sonra, tekrarlar kaybolur. Planlamanın neredeyse ön işlemcinin etkin olduğu iç içe yerleştirme, CSS'de yerleşik olarak kullanıma sunulacaktır.

article {
  color: darkgray;
}

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

/* with @nest becomes */

article {
  color: darkgray;

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

article öğesini tekrarlamamak dışında, benim için iç içe yerleştirme hakkında en önemli şey iç içe geçmiş seçici, stil bağlamının tek bir stil bloğu içinde kalmasıdır. Bir seçiciden ve stillerinden birine gitmek yerine başka bir seçiciye bir makale bağlamında okuyabiliyorsa (ör. 1. örnek), okuyucunun makalenin içindeki bağlantılara sahip olduğunu görebilirsiniz. İlişki ve stil amacı, Böylece article kendi stillerine sahipmiş gibi görünür.

Sahiplenme aynı zamanda merkezileşme olarak da düşünülebilir. Bu bilgilere bakmak yerine ilgili stiller için bir stil sayfasını doldurur. Bu stillerin tümü, iç içe düşünmesi gerekir. Bu, ebeveyn-çocuk ilişkilerinde işe yarar ancak alt-üst arasındaki ilişkidir.

Farklı bir ortamdayken kendini düzenlemek isteyen bir bileşen ebeveyn bağlamına sahip olmak (ör. stilin sahibi olan ve alt öğeleri değiştiren ebeveyndir):

/* 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 gösterir. Bileşenler, tek tek sahip olmak yerine kendi stillerini gruplandırabilir farklı stile sahip bloklar arasında yayılmıştır. Bu örneklerde çok küçük görünebilir ancak hem kolaylık hem de okunabilirliği açısından büyük etkilere sahip olabilir.

Kaynaklar

• @nest spesifikasyonu
• @nest PostCSS eklenti
• Bramus: CSS'nin geleceği: Nesting Seçiciler

Kapsam oluşturma stilleri çok zor

@scope öncesinde birçok strateji vardı çünkü CSS'deki stiller kademeli olarak, ve varsayılan olarak global kapsamlıdır. CSS'nin bu özellikleri, Ancak karmaşık siteler ve uygulamalar için farklı anlamlara gelen değişse de küresel alan ve bu şelalenin doğası stillerin sızdırıyormuş gibi görünmesini sağlar.

@scope sonrasında stillerin kapsamı yalnızca bir bağlam içinde (ör. stillerin nerede bittiğini ve ne zaman sona erdiğini de basamaklama veya devralma.

Aşağıdaki örnekte BEM adlandırma kuralı kapsam, asıl niyetin tersine çevrilebilir. BEM seçici, bir header öğesinin rengini, adlandırması olan bir .card kapsayıcısıyla kapsama almak için belirler. Bunun için üstbilgide bu sınıf adının bulunması gerekir. yardımcı olur. @scope ile birlikte verilen bilgileri tamamlamak için başlık öğesini işaretlemeden aynı hedefi:

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

/* with @scope becomes */

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

Daha az bileşene özgü ve daha çok global kapsam hakkında bir örnek daha. yapısı olabilir. Koyu ve açık temanın bir stil sayfasında bir arada bulunması gerekir. kazanan stili belirlemede sıralama önemlidir. Genellikle bu koyu tema anlamına gelir stiller açık temadan sonra gelir; bu şekilde ışığı varsayılan değer olarak belirler koyuyu seçeceğim. @scope ile sıralama ve kapsam mücadelesinden kaçının:

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

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

Hikayenin tamamlanabilmesi için @scope, stil kapsamının sona ermesiyle ilgili. Bu, herhangi bir adlandırma kuralı veya ön işlemciyle yapılamaz. bu özel bir şeydir 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 bir .media-block adlı çocuğun alt öğesi, .content adlı çocuğun kardeşi veya ebeveynidir:

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

  .content {
    padding: 1em;
  }
}

Kaynaklar

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

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

Izgaralı CSS duvar işçiliğinden önce, duvar işini sağlamanın en iyi yolu JavaScript'ti. düzen (sütun veya flexbox içeren CSS yöntemlerinden herhangi biri yanlış bir şekilde) , içerik sırasını temsil eder.

Izgaralı CSS duvar işinden sonra, JavaScript kitaplığı gerekmez ve emin olun.

Ö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 özelliği hemen deneyebilirsiniz. Firefox Hakkında'yı seçin.

Kaynaklar

• Tavan işçiliği düzeni spesifikasyon
• Duvar düzeni açık MDN
• Smashing Magazine: CSS ile Yerel CSS Duvarcılık Düzeni Izgara

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

prefers-reduced-data medya sorgusundan önce JavaScript ve bir sunucu davranışını, kullanıcının işletim sistemine veya tarayıcısına göre değiştirme: "veri tasarrufu" ancak CSS bunu yapamadı.

prefers-reduced-data medya sorgusundan sonra CSS, kullanıcı deneyimine katılabilir ve verilerin kaydedilmesinde nasıl bir rol oynadığını açıkladık.

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

Önceki CSS, bu medya kaydırmasında kullanılır bileşeni ve tasarrufları çok büyük olabilir. Ziyaret edilen görüntü alanının ne kadar geniş olduğuna bağlı olarak, olması gerekir. Kullanıcılar medyayla etkileşim kurdukça kaydetme işlemi devam eder kaydırma araçları. Resimlerin tümünde loading="lazy" özellikleri var. öğeyi tamamen gizleyen CSS ile birlikte kullanıldığında, hiçbir zaman oluşturulmaz.

Testim için orta boyutlu bir görüntü alanında, 40 istek ve 700 kb kaynak yüklendi. Kullanıcı medya seçimini kaydırdıkça daha fazla istek ve kaynaklar yüklenir. CSS ve azaltılmış veri medya sorgusu ile, 10 istek ve 172 KB kaynak yüklendi. Bu yarım megabaytlık tasarruf ve kullanıcı hiç bir medyayı kaydırmadı bile. Bu noktada başka talepte bulunuldu.

Bu kısaltılmış veri deneyiminin sadece verilerden sağladığı avantajlara değil, tasarruf anlamına gelir. Daha fazla başlık görülebilir ve dikkat dağıtıcı kapak resimleri Dikkat çekmeleridir. Birçok kullanıcı, kullanıcı başına ödeme yaptığı için veri tasarrufu modunda göz atar veri var. CSS'nin bu konuda size yardımcı olabildiğini görmek gerçekten güzel.

Kaynaklar

• azaltılmış-verileri tercih eder spesifikasyon
• daha-azaltılmış-verileri tercih eder MDN
• GUI'de azaltılmış verileri tercih eder Zorluk
• Smashing Magazine: Core Web Vitals'ı İyileştirme, Smashing Magazine Case Çalışma

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

Bu kaydırma hızlı tekliflerinden önce, tüm gözlemcilerle birlikte atlı karınca, kaydırma çubuğu veya galeri ve eyalet yönetimi. Ayrıca dikkatli olmazsanız doğal kaydırma hızları komut dosyası tarafından normalleştirildiği için kullanıcı etkileşimine hantal olabiliyor.

Yeni API'ler

snapChanging()

Tarayıcı bir anlık öğeyi serbest bırakır bırakmaz bu etkinlik tetiklenir. Bu da ve çünkü şu anda kullanılıyor ve yeni bir yere gelecek.

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

snapChanged()

Tarayıcı yeni bir çocuğa sabitlenir ve kaydırma çubuğu yerine yerleştirilmiş durumdayken etkinleşir. Bu, tutturulan alt öğeye bağlı tüm kullanıcı arayüzünün güncellenmesini sağlar ve bağlantıyı yansıtması gerekir.

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

scroll-start

Kaydırma her zaman başlangıçta başlamaz. Kaydırılabilir bileşenleri göz önünde bulundurun: sağa veya sola kaydırmak farklı etkinlikleri tetikler ya da sayfada yük başlangıçta gizlenir. Bu CSS mülkü sayesinde geliştiriciler, kaydırma çubuğunun belirli bir noktada başlaması gerektiğini belirtmektedir.

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

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

:snap-target

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

.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 tutturma tekliflerinin ardından bir kaydırma çubuğu, bant veya galeri oluşturmak çok daha kolay olur. daha da kolay hale gelir. Çünkü artık tarayıcı görev için kolaylık sağlar, gözlemcileri ve kaydırma düzenleme kodunu teşvik eder.

Bu CSS ve JS özelliklerinin kullanımı henüz çok erken olsa da dikkatli olun kullanıma sunuyoruz.

Kaynaklar

• Snap 2 taslağını kaydır spesifikasyon
• Kaydırma Görüntüsü 2 açıklayıcı videolar
• Snap demoları

Bilinen durumlar arasında geçiş yapma

toggle() tarihinden önce, yalnızca tarayıcıda yerleşik olan durumlardan yararlanılabiliyordu stil ve etkileşim için tasarlandı. Örneğin, onay kutusu girişinde :checked, bir CSS'nin kullanabileceği giriş için dahili olarak yönetilen tarayıcı durumu değiştirmekten ibaret değildir.

toggle() tarihinden sonra, CSS'nin değişmesi için herhangi bir öğede özel durumlar oluşturulabilir ve stil için kullanın. Gruplara, bisiklete binmeye, doğrudan açma/kapatmaya ve daha fazlasına izin verir.

Aşağıdaki örnekte, bir liste öğesinin üstü çizili olmasının aynı etkisi herhangi bir onay kutusu öğesi olmadan 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, bu makinelerde ne kadar geçiş toggle() ile birlikte. Bu özellik, geliştiricilerin daha fazla eyalet oluşturmalarına olanak tanıyacak Bu sayede daha net ve anlamsal düzenlemeler sağlayacağını umuyorum. ve durum.

Kaynaklar

• toggle() taslak spesifikasyonu
• Bramus: CSS'nin Geleceği: CSS Açma/kapatma düğmesi

Seçili öğeleri özelleştirme

<selectmenu> tarihinden önce CSS'nin <option> öğesini özelleştirebilme olanağı yoktu öğelerin zengin HTML'li olması veya seçenek listesinin görüntülenmesiyle ilgili büyük oranda değişiklik yapması anlamına gelir. Bu, geliştiricilerin, ve sonrasında da çok fazla çalışma gerektiren bir <select> ortaya çıktı.

Geliştiriciler, <selectmenu> tarihinden sonra seçenek öğeleri için zengin HTML sağlayabilir ve erişilebilirlik gereksinimlerini karşılamaya devam ederken, ihtiyaç duydukları kadar stilini de ayarlayabilirsiniz. ve semantik HTML sağlama.

Aşağıdaki örnekte, <selectmenu> açıklayıcısından alınmıştır sayfası çıktığında yeni bir seçim menüsü bazı temel seçenekleri kullanabilirsiniz:

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

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

Kaynaklar

• Selectmenu özellikleri
• Seçme menüsü demosu

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

anchor() öncesinde, konum mutlak ve göreceli konum stratejileriydi geliştiricilerin alt öğelerin bir üst öğe içinde hareket etmesi için sağlanır öğesine dokunun.

anchor() tarihinden sonra geliştiriciler, çocuk olup olmadıklarını görebilirsiniz. Ayrıca, geliştiricilerin hangi kenarı ve diğer pozisyonlar arasında pozisyon ilişkisi kurmanın öğeler.

Açıklayıcıda birkaç harika örnek ve kod örneği verilmiştir. daha fazla bilgi edinmek istiyorsunuz.

Kaynaklar

• çapa() açıklayıcı