- 2023, CSS için olağanüstü bir yıldı. Web platformunda imkansız sayılan özellikleri mümkün kılan CSS ve UI alanında birçok yeni özellik geldi
- Tüm büyük tarayıcılar artık container query'leri, subgrid'i,
:has() seçicisini ve daha fazlasını destekliyor; ayrıca yeni renk uzayları ve fonksiyonları da destekleniyor
- Chrome, yalnızca CSS ile scroll tabanlı animasyonları ve web görünümleri arasında akıcı geçişleri destekliyor
- CSS nesting ve scoped style'lar gibi geliştirici deneyimini iyileştiren birçok yeni temel özellik kullanıma sunuldu
Architectural foundations
Trigonometric functions
- Chrome 111,
sin(), cos(), tan(), asin(), acos(), atan(), atan2() gibi trigonometrik fonksiyonları destekliyor
- Bu fonksiyonlar animasyon ve layout amaçları için çok kullanışlı
Complex nth-* selection
:nth-child() pseudo class seçicisi, DOM içindeki öğeleri indekslerine göre seçmeyi sağlar- Chrome 111'den itibaren
:nth-child() ve :nth-last-child() için isteğe bağlı olarak bir seçici listesi geçirilebiliyor
Scope
- Chrome 118, seçici eşleşmesini belgenin belirli bir alt ağacına sınırlayan
@scope desteği sunuyor
- Scoped alt ağaç, bir scope root ve isteğe bağlı bir scope limit ile tanımlanıyor
Nesting
- Nesting kullanılmadan önce tüm seçicileri ayrı ayrı ve açık biçimde tanımlamak gerekiyordu
- Artık ilgili stil kuralları gruplandırılabiliyor ve seçiciler bu yapı içinde kullanılmaya devam edebiliyor
Subgrid
- CSS
subgrid, daha karmaşık grid'ler oluşturmayı ve alt layout'lar arasında daha iyi hizalama yapmayı sağlıyor
- İç grid'in dış grid'in satır ve sütunlarını kendi satır ve sütunları olarak benimsemesine imkan veriyor
Typography
Initial-letter
- Chrome 110 ile gelen
initial-letter özelliği, ilk harfin yerleşimini ayarlayan küçük ama güçlü bir CSS özelliği
- Harf, düşürülmüş ya da yükseltilmiş biçimde yerleştirilebiliyor
text-wrap: balance and pretty
- Geliştiriciler son boyutu, font boyutunu hatta başlık ya da paragrafın dilini önceden bilemez
balance ve pretty adlı iki yeni metin sarma tekniği sunuldu
Color
HD Color Spaces (Color Level 4)
- Yeni renkler, daha fazla renk, yeni renk uzayları, renk fonksiyonları ve yeni yetenekler 2023'te kullanıma girdi
- CSS ve renk artık HDR renklerle degrade oluşturabiliyor ve farklı renk uzaylarında degrade interpolasyonu yapabiliyor
color-mix function
- Renk karıştırma klasik bir işlemdir ve 2023 itibarıyla CSS'te de mümkün hale geldi
- Renklere yalnızca beyaz veya siyah değil, saydamlık da karıştırılabiliyor; üstelik bu işlem seçilen renk uzayında yapılabiliyor
Relative color syntax
- Relative color syntax (RCS),
color-mix() ile renk varyasyonları üretmeye tamamlayıcı bir yaklaşımdır
- RCS, bir rengin göreli ve mutlak biçimde manipüle edilmesini sağlar
Responsive Design
Size container queries
- Viewport'un genel boyut bilgisini kullanmak yerine, container query'ler sayfa içindeki üst öğelerin sorgulanmasını destekler
Style container queries
- Stil query'leri, üst öğenin custom property değerlerinin sorgulanmasını sağlar
:has() selector
- Geliştiriciler yaklaşık 20 yıldır CSS'te bir "parent selector" talep ediyordu
:has() seçicisi sayesinde, örneğin .card:has(img.hero) ile çocuk olarak hero görseli içeren .card öğesi seçilebiliyor
Update media query
update media query'si ile UI, cihazın yenileme hızına göre uyarlanabiliyor
Scripting media query
- Scripting media query'si, JavaScript'in kullanılabilir olup olmadığını kontrol etmek için kullanılabiliyor
Reduced-transparency media query
- Opak olmayan arayüzler, çeşitli görme bozukluklarında baş ağrısına neden olabilir veya görsel olarak zorlayıcı olabilir
- Bu media query, kullanıcının UI'da saydamlığı azaltmaya veya kaldırmaya yönelik bir sistem tercihi olduğunu gösterir
Interaction
View transitions
- View transition'lar, sayfadaki kullanıcı deneyimi üzerinde büyük etki yaratır
- View Transitions API ile bir single-page application içindeki iki sayfa durumu arasında görsel geçişler oluşturulabiliyor
Linear-easing function
linear() fonksiyonu, az miktarda hassasiyet kaybı karşılığında karmaşık easing fonksiyonlarını basit biçimde oluşturmayı sağlar
Scroll End
scrollend olayı, kullanıcının hâlâ gesture içinde olup olmadığını anlamayı sağlayan doğru zamanlanmış bir scroll bitiş olayı sunar
Scroll-driven animations
- Scroll tabanlı animasyonlar, bir scroller'ın scroll offset'ine mevcut CSS animasyonları ya da Web Animations API ile oluşturulmuş animasyonları bağlamayı sağlar
Deferred timeline attachment
- CSS ile scroll tabanlı animasyon uygulandığında, onu kontrol eden scroller'ı bulma mekanizması her zaman DOM ağacında yukarı çıktığı için yalnızca scroll atalarla sınırlı kalır
Discrete property animations
display: none durumundan animasyon yapabilme gibi discrete animasyon yetenekleri, 2023'te yeni bir özellik olarak eklendi
@starting-style
@starting-style CSS kuralı, display: none durumundan animasyon yapmayı sağlayan yeni web özelliğinin üzerine kuruludur
Overlay
- Yeni CSS
overlay özelliği, popover ve dialog gibi üst katman stil öğelerinin üst katmanda akıcı biçimde animasyonla görünmesini sağlar
Components
Popover
- Popover API, sayfanın geri kalanının üzerinde konumlanan öğeler oluşturmaya yardımcı olur
Horizontal rules in select
- Chrome ve Safari bu yıl
öğesi içine yatay ayırıcı öğelerinin ( etiketi) eklenmesini desteklemeye başladı
:user-valid and invalid pseudo classes
:user-valid ve :user-invalid, :valid ve :invalid pseudo class'larına benzer şekilde çalışır; ancak yalnızca kullanıcı form kontrolüyle yeterince etkileşime girdikten sonra eşleşir
Exclusive accordion
- Chrome 120, `` öğesinde
name niteliğini destekliyor
- Bu nitelik sayesinde aynı
name değerine sahip birden fazla `` öğesi anlamsal bir grup oluşturuyor
Henüz yorum yok.