CSS sarmalandı: 2023

CSS Wrapped: 2023

İçeriğe atla:

• Mimari temeller
• Trigonometrik fonksiyonlar
• Karmaşık n.* seçimi
• Kapsam
• İç içe yerleştirme

• Yazı biçimi
• Initial-letter
• Metin kaydırma dengesi/güzelleştirme

• Renk
• Renk düzeyi 4
• Renk karıştırma işlevi
• Göreli renk söz dizimi

• Duyarlı tasarım
• Container sorguları
• Stil sorguları
• :has seçici
• Medya sorgusunu güncelleme
• Medya sorgusu komut dosyası
• Şeffaflık medya sorgusu

• Etkileşim
• Geçişleri görüntüleme
• Doğrusal yumuşatma işlevi
• Scrollend
• Kaydırmayla çalışan animasyonlar
• Ertelenen zaman çizelgesi eki
• Ayrı mülk geçişleri
• Başlangıç stili kuralı
• Yer paylaşımlı animasyon

• Bileşenler
• Pop-up
• Hr in select
• Kullanıcı tarafından geçerli/geçersiz sözde sınıflar
• Özel akordeon

İnanılmaz! 2023, CSS için çok önemli bir yıldı.

#Interop2023'ten CSS ve kullanıcı arayüzü alanında, geliştiricilerin bir zamanlar web platformunda imkansız olduğunu düşündüğü özellikleri etkinleştiren birçok yeni açılış sayfasına kadar. Artık her modern tarayıcı kapsayıcı sorgularını, alt ızgarayı, :has() seçiciyi ve çok sayıda yeni renk alanını ve işlevini destekliyor. Chrome'da yalnızca CSS'de kaydırmayla çalışan animasyonlar ve görüntü geçişleriyle web görünümleri arasında sorunsuz animasyonlar için destek sunuyoruz. Tüm bunların yanı sıra, CSS iç içe yerleştirme ve kapsamlı stiller gibi daha iyi geliştirici deneyimleri için kullanıma sunulan çok sayıda yeni temel öğe de var.

Ne kadar hızlı geçti bir yılın daha. Bu nedenle, bu dönüm noktası niteliğindeki yılı, tarayıcıların geliştiricileri ve web topluluğunun tüm bu başarıları mümkün kılan yoğun çalışmalarını kutlayarak ve takdir ederek sonlandırmak istiyoruz.

Özellik başlıklarının yanındaki yeni referans rozetlerine göz atın. Buradan daha fazla bilgi edinebilirsiniz.

• = Başlıca tarayıcıların tüm kararlı sürümlerinde yeni kullanıma sunuldu.

• = Başlıca tarayıcılarda kısmi kullanılabilirlik.

Mimari temeller

Temel CSS dili ve özellikleriyle ilgili güncellemelerle başlayalım. Bunlar, stil oluşturma ve düzenleme şeklinizin temelini oluşturan ve geliştiricinin ellerine büyük bir güç veren özelliklerdir.

Trigonometrik fonksiyonlar

Tarayıcı desteği

• 111
• 111
• 108
• 15.4

Kaynak

Chrome 111'de sin(), cos(), tan(), asin(), acos(), atan() ve atan2() trigonometrik işlevleri için destek eklendi. Bu işlevler artık tüm büyük motorlarda kullanılabilir. Bu işlevler, animasyon ve düzen için çok kullanışlıdır. Örneğin, öğeleri seçili bir merkez etrafında bir daire üzerinde düzenlemek artık çok daha kolay.

Trigonometrik fonksiyonlar demosu

CSS'deki trigonometrik işlevler hakkında daha fazla bilgi edinin.

Karmaşık n.* seçimi

Tarayıcı desteği

• 111
• 111
• 113
• 9

:nth-child() sözde sınıf seçicisiyle DOM'daki öğeleri dizinlerine göre seçebilirsiniz. An+B mikro söz dizimini kullanarak hangi öğeleri seçmek istediğiniz üzerinde ayrıntılı kontrol sahibi olursunuz.

Varsayılan olarak :nth-*() sözde öğeleri tüm alt öğeleri hesaba katar. Chrome 111'den itibaren isteğe bağlı olarak :nth-child() ve :nth-last-child() parametrelerine bir seçici listesi iletebilirsiniz. Böylece, An+B işleme başlamadan önce çocuk listesini ön filtreleyebilirsiniz.

Aşağıdaki demoda, 3n+1 mantığı of .small kullanılarak önceden filtrelenerek yalnızca küçük bebeklere uygulanır. Kullanılan seçiciyi dinamik olarak değiştirmek için açılır menüleri kullanın.

Karmaşık n.* seçim demo

Karmaşık n.* seçimleri hakkında daha fazla bilgi edinin.

Kapsam

Tarayıcı desteği

• 118
• 118
• 
• 17,4

Kaynak

Chrome 118, seçici eşleştirme kapsamını dokümanın belirli bir alt ağacıyla sınırlandırmanıza olanak tanıyan bir at-kuralı olan @scope için destek ekledi. Kapsamlı stillendirmeyle, çok spesifik seçiciler yazmak veya bunları DOM yapısına sıkıca bağlamak zorunda kalmadan hangi öğeleri seçtiğiniz konusunda çok net olabilirsiniz.

Kapsamlı alt ağaç, bir kapsamlama kökü (üst sınır) ve isteğe bağlı bir kapsamlama sınırı (alt sınır) ile tanımlanır.

@scope (.card) { … } /* scoping root */
@scope (.card) to (.card__content) { … } /* scoping root + scoping limit*/

Bir kapsam bloğuna yerleştirilen stil kuralları yalnızca ayrılmış alt ağaçtaki öğeleri hedefler. Örneğin, aşağıdaki kapsamlı stil kuralı yalnızca .card öğesi ile [data-component] seçici tarafından eşleşen iç içe yerleştirilmiş bileşen arasında bulunan <img> öğelerini hedefler.

@scope (.card) to ([data-component]) {
  img { … }
}

Aşağıdaki demoda, uygulanan kapsam sınırı nedeniyle bant bileşenindeki <img> öğeleri eşleşmez.

Kapsam Demo Ekran Görüntüsü

Scope Canlı Demo

CSS @scope demosu

@scope hakkında daha fazla bilgiyi "@scope'ü seçicilerinizin erişimini sınırlamak için kullanma" başlıklı makalede bulabilirsiniz. Bu makalede :scope seçici, özgüllüğün nasıl ele alındığı, ön ek içermeyen kapsamlar ve @scope'nin basamak etkisi hakkında bilgi edineceksiniz.

İç içe yerleştirme

Tarayıcı desteği

• 120
• 120
• 117
• 17.2

Kaynak

İç içe yerleştirmeden önce her seçicinin birbirinden ayrı olarak açıkça tanımlanması gerekiyordu. Bu da tekrarlara, stiller dosyasının hacminin artmasına ve dağınık bir içerik üretme deneyimine yol açar. Artık seçicilere, gruplandırılmış ilgili stil kurallarıyla devam edilebilir.

dl {
  /* dt styles */
  
  dt {
    /* dl dt styles */
  }

  dd {
    /* dl dd styles */
  }
}

/* same as */
dt {
  /* dt styles */
}

dl dt {
  /* dl dt styles */
}

dl dd {
  /* dl dd styles */
}

Ekran video kaydını iç içe yerleştirme

İç İçe Yerleştirme Canlı Demo

Yarışın kazananını belirlemek için gevşek iç içe yerleştirme seçiciyi değiştirme

İç içe yerleştirme, stil sayfasının ağırlığını azaltabilir, yinelenen seçicilerden kaynaklanan yükü azaltabilir ve bileşen stillerini merkezileştirebilir. İlk olarak çeşitli yerlerde & kullanılması gereken bir sınırlamayla yayınlanan söz dizimi, iç içe yerleştirme için gevşek söz dizimi güncellemesiyle kaldırıldı.

İç içe yerleştirme hakkında daha fazla bilgi edinin.

Alt ızgara

Tarayıcı desteği

• 117
• 117
• 71
• 16

Kaynak

CSS subgrid, alt düzenler arasında daha iyi bir hizalamayla daha karmaşık ızgaralar oluşturmanıza olanak tanır. Izgara satırları veya sütunları için değer olarak subgrid kullanılarak başka bir ızgaranın içindeki bir ızgaranın, dış ızgaranın satırlarını ve sütunlarını kendi satırları ve sütunları olarak benimsemesine olanak tanır.

Alt ızgara ekran kaydı

Alt ızgara canlı demosu

Üstbilgi, gövde ve altbilgiler, eşdeğerlerinin dinamik boyutlarına göre ayarlanır.

Alt ızgara, özellikle kardeşleri birbirlerinin dinamik içerikleriyle hizalamak için yararlıdır. Bu sayede metin yazarları, kullanıcı deneyimi yazarları ve çevirmenler, sayfa düzenine "uyan" proje metni oluşturmaya çalışmaktan kurtulur. Alt ızgara sayesinde düzen, içeriğe uyacak şekilde ayarlanabilir.

Alt ızgara hakkında daha fazla bilgi edinin.

Yazı biçimi

Web yazı tipleri 2023'te birkaç önemli güncelleme gördü. text-wrap mülkü, özellikle de aşamalı iyileştirmeler açısından çok iyi. Bu özellik, ek komut dosyası gerekmeden tarayıcıda oluşturulan tipografik düzen ayarını sağlar. Eğri satır uzunluklarına veda edin ve daha tahmin edilebilir bir yazı tipiyle tanışın.

Initial-letter

Tarayıcı desteği

• 110
• 110
• x
• 9

Kaynak

Yılın başında Chrome 110'da kullanıma sunulan initial-letter mülkü, ilk harflerin yerleştirilmesi için stili belirleyen küçük ancak güçlü bir CSS özelliğidir. Harfleri alçaltılmış veya yükseltilmiş olarak konumlandırabilirsiniz. Özellik iki bağımsız değişken kabul eder: Birincisi, harfin ilgili paragrafa ne kadar derin yerleştirileceğini, ikincisi ise harfin ne kadar yukarı kaldırılacağını belirtir. Hatta aşağıdaki demoda gösterildiği gibi ikisini birden kullanabilirsiniz.

Baş harfi ekran görüntüsü

Baş harfi demo

::first-letter sözde öğesinin kaymasını izlemek için initial-letter değerlerini değiştirin.

initial-letter hakkında daha fazla bilgi edinin.

text-wrap: balance and pretty

Geliştirici olarak, bir başlığın veya paragrafın nihai boyutunu, yazı tipi boyutunu ve hatta dilini bilmiyorsunuzdur. Metin kaydırma işleminin etkili ve estetik bir şekilde yapılması için gereken tüm değişkenler tarayıcıda bulunur. Tarayıcı; yazı tipi boyutu, dil ve ayrılan alan gibi tüm faktörleri bildiğinden gelişmiş ve yüksek kaliteli metin düzenini işlemek için mükemmel bir adaydır.

Bu noktada, biri balance, diğeri pretty adlı iki yeni metin kaydırma tekniği devreye girer. balance değeri, uyumlu bir metin bloğu oluşturmayı amaçlarken pretty, metnin tek satırda bitmesini önlemeyi ve satır ayırma işleminin düzgün olmasını sağlamayı amaçlar. Bu iki görev de geleneksel olarak manuel olarak yapılıyordu. Bu görevi tarayıcıya verip çevrilen tüm diller için çalışmasını sağlamak harika bir şey.

Metin kaydırma ekran kaydı

Metin Kaydırma Canlı Demo

Aşağıdaki demoda, kaydırma çubuğunu sürükleyerek balance ve pretty'nin bir başlık ve paragraf üzerindeki etkilerini karşılaştırabilirsiniz. Demoyu başka bir dile çevirmeyi deneyin.

text-wrap: balance hakkında daha fazla bilgi edinin.

Renk

2023, web platformu için renklerin yılıydı. Dinamik renk temalarını etkinleştiren yeni renk alanları ve işlevlerle, kullanıcılarınızın hak ettiği canlı ve zengin temaları oluşturabilir ve bunları özelleştirebilirsiniz.

HD Renk Alanları (Renk Düzeyi 4)

Tarayıcı desteği

• 111
• 111
• 113
• 15

Kaynak

Tarayıcı desteği

• 111
• 111
• 113
• 15

Kaynak

Donanımdan yazılıma, CSS'den yanıp sönen ışıklara kadar bilgisayarlarımızın renkleri insan gözünün görebildiği kadar iyi göstermesi çok fazla iş gerektirebilir. 2023'te yeni renkler, daha fazla renk, yeni renk alanları, renk işlevleri ve yeni özellikler sunuyoruz.

CSS ve renk artık şunları yapabilir: - Kullanıcının ekran donanımının geniş gam HDR renkleri destekleyip desteklemediğini kontrol edin. - Kullanıcının tarayıcısının Oklch veya Display P3 gibi renk söz dizimini anlayıp anlamadığını kontrol edin. - HDR renkleri Oklab, Oklch, HWB, Display P3, Rec.2020, XYZ ve daha fazlasında belirtin. - HDR renklerle gradyan oluşturma, - Alternatif renk alanlarında gradyanların ara değer hesaplaması - color-mix() ile renkleri karıştırın. - Göreli renk söz dizimini kullanarak renk varyantları oluşturun.

Color 4 Ekran Kaydı

Color 4 Demosu

Aşağıdaki demoda, kaydırma çubuğunu sürükleyerek "denge" ve "güzel" seçeneklerinin bir başlık ve paragraf üzerindeki etkilerini karşılaştırabilirsiniz. Demoyu başka bir dile çevirmeyi deneyin.

Color 4 ve renk alanları hakkında daha fazla bilgi edinin.

color-mix işlevi

Tarayıcı desteği

• 111
• 111
• 113
• 16.2

Kaynak

Renk karıştırma, klasik bir görevdir ve 2023'te CSS de bunu yapabilir. Bir renge yalnızca beyaz veya siyah değil, şeffaflık da ekleyebilirsiniz. Tüm bunları istediğiniz renk alanında yapabilirsiniz. Hem temel bir renk özelliği hem de gelişmiş bir renk özelliğidir.

color-mix() ekran kaydı

color-mix() Demosu

Demo, renk seçiciyi kullanarak iki renk seçmenize, renk alanını belirlemenize ve her rengin karışımda ne kadar baskın olması gerektiğine karar vermenize olanak tanır.

color-mix() değerini, bir gradyanda belirli bir an olarak düşünebilirsiniz. Gradyan, maviden beyaza geçiş için gereken tüm adımları gösterirken color-mix() yalnızca bir adımı gösterir. Renk alanlarını dikkate almaya ve renk alanı karıştırmanın sonuçlara ne kadar farklı etki edebileceğini öğrenmeye başladığınızda işler biraz daha karmaşık hale gelir.

color-mix() hakkında daha fazla bilgi edinin.

Göreli renk söz dizimi

Göreli renk söz dizimi (RCS), renk varyantları oluşturmak için color-mix()'e tamamlayıcı bir yöntemdir. color-mix() işlevinden biraz daha güçlüdür ancak renklerle çalışmak için farklı bir stratejidir. color-mix(), bir rengi açmak için beyaz rengi karıştırabilir. Bu durumda RCS, açıklık kanalına hassas erişim sağlar ve açıklığı programatik olarak azaltmak veya artırmak için kanalda calc() kullanma olanağı sunar.

RCS Ekran Kaydı

RCS Canlı Demo

Rengi ve sahneleri değiştirin. Her biri, ana renkten varyantlar oluşturmak için göreli renk söz dizimini kullanır.

RCS, bir renk üzerinde göreceli ve mutlak işlemler yapmanıza olanak tanır. Göreceli değişiklik, doygunluk veya açıklığın mevcut değerini alıp calc() ile değiştirdiğiniz bir değişikliktir. Mutlak değişiklik, bir kanal değerini tamamen yeni bir değerle değiştirdiğiniz değişikliktir (ör. opaklığı %50'ye ayarlama). Bu söz dizimi, tema oluşturma, tam zamanında varyantlar ve daha fazlası için anlamlı araçlar sağlar.

Göreceli renk söz dizimi hakkında daha fazla bilgi edinin.

Duyarlı Tasarım

Duyarlı tasarım 2023'te gelişti. Bu çığır açan yıl, duyarlı web deneyimleri oluşturma şeklimizi tamamen değiştiren yeni özellikleri kullanıma sundu ve bileşen tabanlı duyarlı tasarımın yeni bir modelini kullanıma sundu. Kapsayıcı sorguları ve :has()'ün kombinasyonu, üst öğelerinin boyutuna ve alt öğelerinin varlığına ya da durumuna göre duyarlı ve mantıklı bir stil sahibi olan bileşenleri destekler. Yani artık sayfa düzeyindeki düzeni bileşen düzeyindeki düzenden ayırabilir ve bileşeninizi her yerde kullanmak için mantığı bir kez yazabilirsiniz.

Boyut kapsayıcı sorguları

Tarayıcı desteği

• 105
• 105
• 110
• 16

Kaynak

CSS stilleri uygulamak için ekran alanının genel boyut bilgilerini kullanmak yerine kapsayıcı sorguları, sayfadaki bir üst öğenin sorgulanmasını destekler. Bu, bileşenlerin birden fazla düzende ve birden fazla görünümde dinamik bir şekilde biçimlendirilebileceği anlamına gelir. Boyut için konteyner sorguları, bu yılki Sevgililer Günü'nde (14 Şubat) tüm modern tarayıcılarda kararlı hale geldi.

Bu özelliği kullanmak için önce sorguladığınız öğede kapsayıcıyı ayarlayın ve ardından, medya sorgusuna benzer şekilde, stilleri uygulamak için boyut parametreleriyle birlikte @container kullanın. Kapsayıcı sorgularının yanı sıra kapsayıcı sorgu boyutlarını da alırsınız. Aşağıdaki demoda, kart başlığının boyutunu belirlemek için kapsayıcı sorgu boyutu cqi (satır içi kapsayıcının boyutunu temsil eder) kullanılır.

@container Ekran Kaydı

@container Demo

Kapsayıcı sorgularını kullanma hakkında daha fazla bilgi edinin.

Stil kapsayıcı sorguları

Tarayıcı desteği

• 111
• 111
• x
• 18

Kaynak

Stil sorguları, Chrome 111'de kısmi olarak kullanıma sunuldu. Şu anda stil sorgularında, @container style() kullanırken bir üst öğedeki özel özelliklerin değerini sorgulayabilirsiniz. Örneğin, özel bir mülk değerinin olup olmadığını veya @container style(--rain: true) gibi belirli bir değere ayarlanıp ayarlanmadığını sorgulayabilirsiniz.

Stil sorgusunun ekran görüntüsü

Stil sorgusu demosu

Rengi ve sahneleri değiştirin. Her biri, ana renkten varyantlar oluşturmak için göreli renk söz dizimini kullanır.

Bu, CSS'de sınıf adlarının kullanılmasına benzer olsa da stil sorgularının bazı avantajları vardır. Bunlardan ilki, stil sorgularıyla CSS'deki değeri, sözde durumlar için gerektiği gibi güncelleyebilmenizdir. Ayrıca, uygulamanın gelecekteki sürümlerinde, uygulanan stili (ör. style(60 <= --weather <= 70)) ve mülk-değer çiftlerine dayalı stili (ör. style(font-style: italic)) belirlemek için değer aralıklarını sorgulayabileceksiniz.

Stil sorgularını kullanma hakkında daha fazla bilgi edinin.

:has() seçici

Tarayıcı desteği

• 105
• 105
• 121
• 15.4

Kaynak

Geliştiriciler yaklaşık 20 yıldır CSS'de "ana seçici" isteğinde bulunuyordu. Chrome 105'te kullanıma sunulan :has() seçici sayesinde artık bu işlem mümkün. Örneğin, .card:has(img.hero) kullanıldığında alt öğesi olarak hero resmi olan .card öğeleri seçilir.

:has() Demo Ekran Görüntüsü

:has() Canlı Demo

CSS :has() demosu: Resimsiz/resimli kart

:has(), bağımsız değişkeni olarak göreli bir seçici listesi kabul ettiğinden, üst öğeden çok daha fazlasını seçebilirsiniz. Çeşitli CSS birleştiricileri kullanarak yalnızca DOM ağacında yukarı çıkmakla kalmaz, aynı zamanda yatay seçimler de yapabilirsiniz. Örneğin, li:has(+ li:hover), fareyle üzerine gelinen <li> öğesinden önceki <li> öğesini seçer.

:has() Ekran Kaydı

:has() Demo

CSS :has() demosu: Yerleşim

CSS :has() seçicisi hakkında daha fazla bilgi edinin.

Medya sorgusunu güncelleme

Tarayıcı desteği

• 113
• 113
• 102
• 17

Kaynak

update medya sorgusu, kullanıcı arayüzünü cihazın yenileme hızına uyarlamanızı sağlar. Bu özellik, farklı cihazların özellikleriyle ilgili fast, slow veya none değerini bildirebilir.

Tasarımınıza uygun cihazların çoğunun yenileme hızı yüksektir. Masaüstü bilgisayarlar ve çoğu mobil cihaz bu kapsamdadır. E-okuyucular ve düşük güçlü ödeme sistemleri gibi cihazların yenileme hızı yavaş olabilir. Cihazın animasyonu veya sık güncellemeleri kaldıramadığını bilmek, pil kullanımından veya hatalı görüntü güncellemelerinden tasarruf edebileceğiniz anlamına gelir.

Ekran kaydını güncelleme

Demoyu güncelleme

Bir güncelleme hızı değerini simüle edin (radyo seçeneğini belirleyerek) ve bunun ördeği nasıl etkilediğini görün.

@media (update) hakkında daha fazla bilgi edinin.

Medya sorgusu komut dosyası

Tarayıcı desteği

• 120
• 120
• 113
• 17

Kaynak

JavaScript'in kullanılabilir olup olmadığını kontrol etmek için komut dosyası medya sorgusu kullanılabilir. Bu, aşamalı iyileştirme için çok iyidir. Bu medya sorgusundan önce, JavaScript'in kullanılıp kullanılamadığını algılamak için HTML'ye bir nojs sınıfı yerleştirip JavaScript ile kaldırmak gibi bir strateji kullanılıyordu. CSS artık JavaScript'i algılayıp buna göre ayarlama yapabileceğinden bu komut dosyaları kaldırılabilir.

Chrome Geliştirici Araçları aracılığıyla bir sayfada JavaScript'i test için etkinleştirmeyi ve devre dışı bırakmayı buradan öğrenebilirsiniz.

Komut Dosyası Yazarak Ekran Kaydı

Komut Dosyası Çalıştırma Demosu

Bir web sitesinde tema geçişini düşünün. JavaScript kullanılamadığından komut dosyası medya sorgusu, geçişin sistem tercihine göre yapılmasına yardımcı olabilir. Alternatif olarak bir anahtar bileşeni de kullanabilirsiniz. JavaScript kullanılabilir durumdaysa anahtar, yalnızca açma/kapatma düğmesi olarak değil, hareketle de kaydırılabilir. Komut dosyası kullanılabilir durumdaysa kullanıcı deneyimini iyileştirmek için birçok harika fırsattan yararlanabilir, komut dosyası devre dışıysa anlamlı bir temel deneyim sunabilirsiniz.

Komut dosyası hakkında daha fazla bilgi edinin.

Düşük şeffaflık medya sorgusu

Tarayıcı desteği

• 118
• 118
• 
• x

Kaynak

Saydam olmayan arayüzler baş ağrısına neden olabilir veya çeşitli görme bozukluğu türleri için görsel bir mücadele olabilir. Bu nedenle Windows, macOS ve iOS'te kullanıcı arayüzündeki saydamlığı azaltabilecek veya kaldırabilecek sistem tercihleri vardır. prefers-reduced-transparency için bu medya sorgusu, diğer tercih medya sorgularıyla iyi uyum sağlar. Bu sayede, kullanıcılara göre ayarlama yaparken yaratıcı olabilirsiniz.

Azaltılmış Şeffaflık Ekran Video Kaydının

Azaltılmış Şeffaflık Demo

Bazı durumlarda, diğer içeriğin üzerine binen içeriklerin olmadığı alternatif bir düzen sağlayabilirsiniz. Diğer durumlarda, bir rengin opaklığı opak veya neredeyse opak olacak şekilde ayarlanabilir. Aşağıdaki blog yayınında, kullanıcı tercihine uyum sağlayan daha fazla ilham verici demo bulunmaktadır. Bu medya sorgusunun değerli olduğu durumları merak ediyorsanız bu demolara göz atın.

@media (prefers-reduced-transparency) hakkında daha fazla bilgi edinin.

Etkileşim

Etkileşim, dijital deneyimlerin temel taşıdır. Kullanıcıların, sanal alanda neleri tıkladıkları ve nerede oldukları hakkında geri bildirim almasına yardımcı olur. Bu yıl, etkileşimlerin oluşturulmasını ve uygulanmasını kolaylaştıran, sorunsuz kullanıcı yolculukları ve daha hassas bir web deneyimi sağlayan birçok heyecan verici özellik kullanıma sunuldu.

Geçişleri görüntüleme

Tarayıcı desteği

• 111
• 111
• x
• 18

Kaynak

Görüntüleme geçişleri, bir sayfanın kullanıcı deneyimini büyük ölçüde etkiler. Görünüm Geçişleri API'si ile tek sayfalık uygulamanızın iki sayfa durumu arasında görsel geçişler oluşturabilirsiniz. Bu geçişler tam sayfa geçişleri veya bir sayfadaki daha küçük işlemler (ör. bir listeye yeni öğe ekleme veya kaldırma) olabilir.

Görünüm Geçişleri API'sinin temelinde document.startViewTranstion işlevi vardır. DOM'u yeni duruma güncelleyen bir işlev iletin. API her şeyi sizin için halleder. Bunu, önce ve sonra anlık görüntü alarak ve ardından ikisi arasında geçiş yaparak yapar. CSS'yi kullanarak nelerin yakalanacağını kontrol edebilir ve isteğe bağlı olarak bu anlık görüntülerin nasıl animasyonlu hale getirileceğini özelleştirebilirsiniz.

VT Ekran Kaydı

VT Demo

Geçişler demosunu görüntüleyin

Tek Sayfalı Uygulamalar için Görüntü Geçişleri API'si, Chrome 111'de kullanıma sunulmuştur. Görüntüleme Geçişleri hakkında daha fazla bilgi edinin.

Doğrusal yumuşatma işlevi

Tarayıcı desteği

• 113
• 113
• 112
• 17.2

Bu işlevin adının sizi yanıltmasına izin vermeyin. linear() işlevi (linear anahtar kelimesiyle karıştırılmamalıdır), bazı hassasiyetleri kaybetme pahasına karmaşık yumuşatma işlevlerini basit bir şekilde oluşturmanıza olanak tanır.

Chrome 113'te kullanıma sunulan linear() özelliğinden önce CSS'de sıçrama veya yay efektleri oluşturmak mümkün değildi. linear() sayesinde, bu yumuşatma işlemlerini bir dizi noktaya basitleştirip bu noktalar arasında doğrusal olarak ara değer hesaplayarak yaklaşık olarak elde edebilirsiniz.

Mavi renkli orijinal hemen çıkma eğrisi, yeşil renkli bir dizi önemli noktayla basitleştirilmiştir. linear() işlevi bu noktaları kullanır ve aralarında doğrusal olarak enterpolasyon yapar.

Doğrusal yumuşatma ekran kaydı

Doğrusal yumuşatma demosu

CSS linear() demosu.

linear() hakkında daha fazla bilgi edinin. linear() eğrileri oluşturmak için doğrusal yumuşatma oluşturucuyu kullanın.

Kaydırma Sonu

Tarayıcı desteği

• 114
• 114
• 109
• x

Kaynak

Birçok arayüzde kaydırma etkileşimleri bulunur ve bazen arayüzün mevcut kaydırma konumuyla ilgili bilgileri senkronize etmesi veya mevcut duruma göre veri getirmesi gerekir. scrollend etkinliğinden önce, kullanıcının parmağı hâlâ ekrandayken tetiklenebilecek hatalı bir zaman aşımı yöntemi kullanmanız gerekiyordu. scrollend etkinliği, kullanıcının hareketin ortasında olup olmadığını anlayan, mükemmel zamanlanmış bir kaydırma sonu etkinliğidir.

Kaydırmalı Ekran Video Kaydı

Kaydırma Demosu

JavaScript, kaydırma sırasında ekrandaki parmak varlığını izleyemediğinden bu bilginin tarayıcı tarafından kullanılması önemlidir. Hatalı kaydırma sonu deneme kodu parçaları artık silinip tarayıcıya ait yüksek hassasiyetli bir etkinlikle değiştirilebilir.

scrollend hakkında daha fazla bilgi edinin.

Kaydırmayla çalışan animasyonlar

Tarayıcı desteği

• 115
• 115
• 
• x

Kaynak

Kaydırmayla çalışan animasyonlar, Chrome 115'te kullanıma sunulan heyecan verici bir özelliktir. Bu yöntemler, mevcut bir CSS animasyonunu veya Web Animasyonları API ile oluşturulmuş bir animasyonu bir kaydırma çubuğunun kaydırma ofsetiyle birleştirmenize olanak tanır. Dikey kaydırma çubuğunu yukarı ve aşağı veya yatay kaydırma çubuğunu sola ve sağa kaydırdığınızda bağlı animasyon doğrudan yanıt olarak ileri ve geri kayar.

ScrollTimeline ile, aşağıdaki demoda gösterildiği gibi kaydırma çubuğunun genel ilerleme durumunu izleyebilirsiniz. Sayfanın sonuna ilerlediğinizde metin karakter karakter gösterilir.

SDA Ekran Kaydı

SDA Demo

CSS kaydırma odaklı animasyon demo: kaydırma zaman çizelgesi

ViewTimeline ile bir öğenin kaydırma çubuğunu geçerken izlerini takip edebilirsiniz. Bu, IntersectionObserver'ın bir öğeyi izleme şekline benzer şekilde çalışır. Aşağıdaki demoda her resim, kaydırma çubuğuna girdiği andan merkeze gelene kadar gösterilir.

SDA Demo Ekran Kaydı

SDA Canlı Demo

Kaydırmayla çalışan CSS animasyonları demosu: zaman çizelgesini görüntüleme

Kaydırmayla çalışan animasyonlar CSS animasyonlarıyla ve Web Animations API ile çalıştığından bu API'lerin sunduğu tüm avantajlardan yararlanabilirsiniz. Bu animasyonların ana iş parçacığında çalıştırılmasına olanak tanır. Artık yalnızca birkaç satır ek kodla ana iş parçacığında çalışan, kaydırmayla kontrol edilen, son derece akıcı animasyonlar oluşturabilirsiniz.

Kaydırmayla çalışan animasyonlar hakkında daha fazla bilgi edinmek için tüm ayrıntıların yer aldığı bu makaleyi inceleyin veya birçok demo içeren scroll-driven-animations.style sayfasını ziyaret edin.

Ertelenen zaman çizelgesi eki

Tarayıcı desteği

• 116
• 116
• x
• x

Kaynak

CSS aracılığıyla kaydırma odaklı bir animasyon uygulanırken, kontrol eden kaydırma çubuğunu bulmak için kullanılan arama mekanizması her zaman DOM ağacında yukarı doğru ilerler ve bu da animasyonu yalnızca kaydırma üst öğeleriyle sınırlandırır. Ancak çoğu zaman, animasyon uygulanması gereken öğe kaydırma çubuğunun alt öğesi değil, tamamen farklı bir alt ağaçta bulunan bir öğedir.

Animasyonlu öğenin, ata olmayan bir öğenin adlandırılmış kaydırma zaman çizelgesini bulmasına izin vermek için paylaşılan bir üst öğede timeline-scope mülkünü kullanın. Bu, aynı ada sahip tanımlanmış scroll-timeline veya view-timeline öğesinin bu öğeye eklenmesine olanak tanır ve daha geniş bir kapsam sağlar. Bu işlem yapıldıktan sonra, paylaşılan üst öğenin tüm alt öğeleri bu ada sahip zaman çizelgesini kullanabilir.

Paylaşılan üst öğede timeline-scope tanımlandığında, kaydırma çubuğunda tanımlanan scroll-timeline, animation-timeline

olarak kullanan öğe tarafından bulunabilir

Demo Ekran Kaydı

Canlı Demo

Kaydırmayla çalışan CSS animasyonları demosu: ertelenen zaman çizelgesi eki

timeline-scope hakkında daha fazla bilgi edinin.

Bağımsız mülk animasyonları

2023'teki yeni özelliklerden biri de ayrı animasyonları canlandırma (ör. display: none'e gidip gelme animasyonu) özelliğidir. Chrome 116'dan itibaren, anahtar kare kurallarında display ve content-visibility kullanabilirsiniz. Ayrık mülkleri% 0 yerine% 50 noktasında da geçirebilirsiniz. Bu, allow-discrete anahtar kelimesini kullanarak transition-behavior mülküyle veya kısayol olarak transition mülküyle yapılır.

Ayrık Anim. Ekran video kaydı

Ayrık Anim. Demo

Bağımsız animasyonlar arasında geçiş yapma hakkında daha fazla bilgi edinin.

@starting-style

Tarayıcı desteği

• 117
• 117
• 129
• 17,5

Kaynak

@starting-style CSS kuralı, display: none ile display: none arasında animasyon oluşturmak için yeni web özelliklerini temel alır. Bu kural, bir öğeye tarayıcı tarafından sayfadaki öğe açılmadan önce aranabilecek bir "açmadan önce" stili verme olanağı sağlar. Bu, giriş animasyonları ve pop-up veya iletişim kutusu gibi öğelerde animasyon oluşturmak için çok kullanışlıdır. Ayrıca, bir öğe oluşturup öğeye animasyon eklemek istediğinizde de bu yöntemden yararlanabilirsiniz. Aşağıdaki örnekte, popover özelliği (sonraki bölüme bakın) görüntü alanına ve görüntü alanının dışından üst katmana sorunsuz bir şekilde animasyonlu olarak yerleştirilmektedir.

@starting-style Ekran Kaydı

@starting-style Demo

@starting-style ve diğer giriş animasyonları hakkında daha fazla bilgi edinin.

Yer paylaşımlı

Tarayıcı desteği

• 117
• 117
• x
• x

Kaynak

Üst katman stillerine sahip öğelerin (ör. popover ve dialog) üst katmandan sorunsuz bir şekilde animasyonla çıkmasını sağlamak için geçişinize yeni CSS overlay mülkü eklenebilir. Yer paylaşımı geçişi yapmazsanız öğeniz hemen kırpılmış, dönüştürülmüş ve örtülmüş hâline geri döner ve geçişi görmezsiniz. Benzer şekilde, overlay, üst katman bir öğeye eklendiğinde ::backdrop'ün sorunsuz bir şekilde kaybolmasını sağlar.

Yer paylaşımlı ekran kaydı

Yer paylaşımlı canlı demo

Yer paylaşımı ve diğer çıkış animasyonları hakkında daha fazla bilgi edinin.

Bileşenler

2023, stil ve HTML bileşenlerinin kesişimi açısından önemli bir yıldı. popover'ün kullanıma sunulması, ana sayfa bağlantısı konumlandırması ve açılır menülerin gelecekteki stili ile ilgili çok sayıda çalışmanın yapılması bu yıla damgasını vurdu. Bu bileşenler, ek kitaplıklara başvurmanıza veya her seferinde sıfırdan kendi durum yönetimi sistemlerinizi oluşturmanıza gerek kalmadan yaygın kullanıcı arayüzü kalıpları oluşturmayı kolaylaştırır.

Pop-up

Tarayıcı desteği

• 114
• 114
• 125
• 17

Kaynak

Popover API, sayfanın geri kalanının üzerine yerleştirilen öğeler oluşturmanıza yardımcı olur. Menüler, seçimler ve ipuçları bu kapsamdadır. Açılan öğeye popover özelliğini ve bir id ekleyerek ve id özelliğini popovertarget="my-popover" kullanarak bir çağırma düğmesine bağlayarak basit bir pop-up oluşturabilirsiniz. Popover API aşağıdakileri destekler:

• Üst katmana promosyon. Pop-up'lar sayfanın geri kalanının üzerinde ayrı bir katmanda görüneceğinden Z-endeksi ile uğraşmanız gerekmez.
• Işığı kapatma işlevi Pop-up alanının dışındaki bir yeri tıkladığınızda pop-up kapatılır ve odak geri döner.
• Varsayılan odak yönetimi Pop-up açıldığında bir sonraki sekme, pop-up'ın içinde durur.
• Erişilebilir klavye bağlamaları esc tuşuna basmak veya açma/kapatma düğmesini iki kez tıklamak pop-up'ı kapatır ve odağı geri verir.
• Erişilebilir bileşen bağlamaları. Bir pop-up öğesini pop-up tetikleyiciye anlamsal olarak bağlama.

Pop-up ekran kaydı

Popover Canlı Demo

Seçimdeki yatay kurallar

HTML'de bu yıl Chrome ve Safari'de kullanıma sunulan bir diğer küçük değişiklik de, içeriğinizi görsel olarak bölmenize yardımcı olmak için <select> öğelerine yatay çizgi öğeleri (<hr> etiketleri) ekleme olanağıdır. Daha önce, bir seçeneğe <hr> etiketi koymak renderlanmıyordu. Ancak bu yıl hem Safari hem de Chrome bu özelliği destekleyerek <select> öğeleri içindeki içeriğin daha iyi ayrılmasını sağlıyor.

Ekran Görüntüsü Seçin

Canlı Demo'yu seçin

Seçimde hr kullanma hakkında daha fazla bilgi edinin.

:user-valid ve invalid sözde sınıfları

Tarayıcı desteği

• 119
• 119
• 88
• 16,5

Kaynak

Bu yıl tüm tarayıcılarda kararlı olan :user-valid ve :user-invalid, :valid ve :invalid sözde sınıflarına benzer şekilde davranır ancak bir form kontrolüyle yalnızca kullanıcı girişle önemli ölçüde etkileşime geçtikten sonra eşleşir. Zorunlu ve boş bir form kontrolü, kullanıcı sayfayla etkileşime geçmeye başlamamış olsa bile :invalid ile eşleşir. Kullanıcı girişi değiştirip geçersiz bir durumda bırakana kadar aynı kontrol :user-invalid ile eşleşmez.

Bu yeni seçicilerle, kullanıcının değiştirdiği girişi takip etmek için durum bilgisi içeren kod yazmaya gerek kalmaz.

:user-* Ekran Kaydı

:user-* Canlı Demo

user-* form doğrulama sözde öğelerini kullanma hakkında daha fazla bilgi edinin.

Özel akordeon

Tarayıcı desteği

• 120
• 120
• 130
• 17.2

Web'de yaygın bir kullanıcı arayüzü kalıbı akordeon bileşenidir. Bu kalıbı uygulamak için birkaç <details> öğesini birleştirirsiniz. Genellikle bu öğeleri, birlikte olduklarını belirtmek için görsel olarak gruplandırırsınız.

Chrome 120'de <details> öğelerinde name özelliği için destek eklendi. Bu özellik kullanıldığında, aynı name değerine sahip birden fazla <details> öğesi anlamsal bir grup oluşturur. Grupta aynı anda en fazla bir öğe açık olabilir: Gruptaki <details> öğelerinden birini açtığınızda daha önce açık olan öğe otomatik olarak kapanır. Bu tür akordeonlara özel akordeon denir.

Özel akordeon demosu

Özel akordeonun parçası olan <details> öğelerinin aynı ebeveyn öğeye sahip olması gerekmez. Bunlar dokümanın farklı yerlerinde olabilir.

Sonuç

CSS, son birkaç yılda ve özellikle 2023'te bir tür yeniden doğuş yaşadı. CSS'de yeniyseniz veya temel bilgiler konusunda kendinizi tazelemek istiyorsanız web.dev'de sunulan diğer ücretsiz kursların yanı sıra ücretsiz CSS'yi Öğrenin kursumuza göz atın.

Yeni yıl sezonunda keyifli günler dileriz. Bu yeni ve muhteşem CSS ve kullanıcı arayüzü özelliklerinden bazılarını yakında çalışmalarınıza dahil edeceğiniz umuduyla.

⇾ Chrome Kullanıcı Arayüzü DevRel Ekibi,

Una Kravets

Bramus

Adam Argyle