Tarayıcılar (ve CSS) için Heyecanlı Zamanlar

Faydalı Alternatif Metin Yazma

Geçen ay bazı heyecan verici şeyler hakkında yazdım yeni CSS özellikleri 2022’de Smashing Magazine için yakınınızdaki bir tarayıcıya gelmeyi bekleyebilirsiniz. Şimşek hızında ilerleyen yeni özellikler için tarayıcı desteği ile şu anda web üzerinde çalışmak kesinlikle heyecan verici bir zaman! Bu ay Safari’nin bir Yeni sürüm için destek içeren bir ton dahil olmak üzere yeni şeylerin :has() (AKA “ebeveyn seçici”), accent-colorve Katmanları Basamakla (hepsi Smashing makalemde ele alınmıştır) ve ayrıca bazı ek mücevherler:

Trigonometrik fonksiyonlar

Safari yayın duyurusunu gözden geçirirken bu satırı neredeyse gözden kaçırıyordum, ancak evet, Webkit CSS için destek sağladı trigonometrik fonksiyonlar! Bunun yaratıcı CSS için açacağı olasılıklar konusunda inanılmaz derecede heyecanlıyım. CSS ve JS’de trigonometri üzerine seriler geçen yıl Codrops için yazdığım.

Yeni görüntü alanı birimleri

Görüntü alanı birimleri (vh, vw, vmin ve max) harika, olmadıkları zamanlar hariç. hiç kullandın mı vh yalnızca mobil cihazlarda beklendiği gibi çalışmadığını bulmak için mi? Bunun nedeni, genellikle görüntü alanı yüksekliğinin sabitlenmemesi ve kullanıcı ekranı kaydırdığında ve cihaz menü çubuğu görüş alanı dışına çıktığında değişmesidir. bu yeni görüntü alanı birimleri en büyük, en küçük veya dinamik görüntü birimi birimlerini belirtmemize izin veren bu soruna bir çözümdür. Webkit ayrıca mantıksal özellik stili görünüm alanı birimleri için destek ekledi (vi, vbve dinamik varyasyonlar), genişlik ve yüksekliğin aksine görüntü alanı birimini satır içi veya blok boyutunda belirtmemize olanak tanır.

:odak-görünür

Bu sürüm, Safari’yi destekleme konusunda diğer tarayıcılarla birlikte güncel hale getiriyor. :focus-visible Erişilebilir odak stilleri sağlamak için süper kullanışlı olan sözde sınıf, çoklu dolgu ihtiyacını azaltır. Bu CSS Püf Noktaları gönderisi bu konuda neyin yararlı olduğunu açıklıyor.

Harika yazı tipi şeyler

İtiraf etmeliyim ki, bu tamamen radarımdan: font-palette ve @font-palette-values geliştiricilere önceden renklendirilmiş bir yazı tipine başvurmaları ve bir yazı tipinin özel renk paletini tanımlamaları için bir yol sağlar. Bunu henüz araştırmadım, ancak web tipografisi için oldukça heyecan verici bir adım gibi görünüyor!

kaydırma davranışı

scroll-behavior bir eylemle (örneğin, bir sayfa içi bağlantı bağlantısını tıklayarak) tetiklendiğinde, kullanıcıların bir web sayfasındaki bir öğeye nasıl kaydırılacağını belirtmemize olanak tanır. Önceden sayfa belirtilen noktaya atlar, ancak bunun yerine sorunsuz bir şekilde kaydırmasını isteyebiliriz. Çoğu tarayıcı bir süredir bu özelliği destekliyor, ancak Safari bizden uzak duruyor. Artık her yerde sorunsuzca kaydırabiliriz – her ikisi de scroll-behavior: smooth mülkiyet ve JS ile scrollTo seçenek:

window.scrollTo({
top: 1000,
left: 0,
behavior: 'smooth',
})

HTML ve Javascript

Bazı harika CSS özelliklerine ek olarak, bazı HTML ve JS güzelliklerimiz de var. Öne çıkanlardan sadece birkaçı:

Lazyloading resimler

bu loading="lazy" öznitelik <img> öğesi, görüntü yüklemesinin görünüme kaydırılana kadar ertelenmesine izin verir ve harika bir performans kazancıdır. Yine, Safari şimdiye kadar bu konuda diğer tarayıcıların gerisinde kaldı.

öğesi

bu <dialog> geçici çözümlerle uğraşmak yerine, tüm erişilebilirlik öğelerinin doğrudan dahil edildiği bir modal oluşturmamızı sağlar. Yaşasın! Una güzel bir demo hakkı var burada.

Array.prototype.at()

Bu arsız küçük dizi yöntemi arasından bir öğe seçmek için negatif bir tamsayı iletmemize izin verir. son diziden. Yapma günlerine veda et someArray[someArray.length - 1].

Birlikte Çalışma 2022

Bu ay ayrıca tüm büyük tarayıcı motorlarından ortak bir duyuru yapıldı. birlikte çalışmaya kararlı büyük yeni CSS özelliklerini birlikte çalışabilir bir şekilde uygulamak – yani her tarayıcıda aynı şekilde uygulandıkları anlamına gelir. Öncelikli özellikler listesi, kapsayıcı sorguları gibi oldukça arzu edilen bazı şeyleri içerir ve umarız CSS özellik geliştirmenin hız kazanmaya devam ettiği anlamına gelir! Kontrol panelini ziyaret edin tarayıcıların nasıl çalıştığını görmek için.

Safari’nin bu özelliklerin çoğu için sıralamaları yukarılara tırmandığını görmek oldukça inanılmaz ve ekibin daha önce CSS’yi geri tutmakla suçlanan bir tarayıcıda işleri ilerletme kararlılığını açıkça gösteriyor. Uzun devam etsin!

Nicole Sullivan, yenilmemesi gerektiğini doğruladı Twitter aracılığıyla Chrome ekibinin, en sık istenen özelliklerin hemen hemen hepsini uygulamak için yoğun bir şekilde çalıştığını da belirtelim. CSS için kesinlikle heyecan verici bir zaman.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.