CSS sarmalandı: 2023

CSS'nin kullanıma sunulması: 2023

İçeriğe atla:

• Mimari temeller
• Trigonometrik fonksiyonlar
• Karmaşık nth-* seçim
• Kapsam
• İç içe yerleştirme

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

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

• Duyarlı tasarım
• Kapsayıcı 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şak geçiş 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 olarak ayarlanan 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.

• = Büyük 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 eline 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çilen bir merkezin çevresinde bir daireye yerleştirmek 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 ile önceden filtre uygulanarak küçük bebeklere yalnızca uygulanmıştı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 demo

@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çicilerin ek yükünü azaltabilir ve bileşen stillerini merkezileştirebilir. Söz dizimi, başlangıçta çeşitli yerlerde & kullanımını gerektiren bir sınırlamayla yayınlandı. Ancak o zamandan bu yana iç içe yerleştirme rahat söz dizimi güncellemesi ile 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 hizalanır.

Alt ızgara, özellikle kardeş öğeleri 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 başarılı. Bu özellik, ek komut dosyası gerekmeden tarayıcıda oluşturulan tipografik düzen ayarını etkinleştirir. Garip çizgi uzunluklarına veda edin, daha öngörülebilir tipografiyle 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. Mülk, iki argüman kabul eder: Birincisi, mektubun karşılık gelen paragrafa ne kadar derinden ekleneceğini, ikincisi ise üzerindeki mektubun ne kadar yükseltileceğini ifade eder. Hatta aşağıdaki demoda gösterildiği gibi ikisini birden kullanabilirsiniz.

İlk harfin 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: dengeli ve güzel

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ı, pretty ise yetimleri önlemeyi ve sağlıklı kısa çizgi oluşturmayı hedefler. 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: - Kullanıcının ekran donanımının geniş yelpazedeki HDR renklerine uygun olup olmadığını 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. - Oklab, Oklch, HWB, Display P3, Rec.2020, XYZ ve diğer platformlarda HDR renkleri 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.

Renk 4 Ekran Kaydı

Color 4 Demosu

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

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

color-mix işlevi

Tarayıcı desteği

• 111
• 111
• 113
• 16.2

Kaynak

Renkleri karıştırmak klasik bir görevdir ve 2023'te CSS de bunu yapabilir. Bir renk için yalnızca beyaz veya siyahı değil, şeffaflık da kullanabilir ve tüm bunları seçtiğiniz herhangi bir renk alanında yapabilirsiniz. Bu, hem temel bir renk özelliği hem de gelişmiş bir renk özelliğidir.

color-mix() ekran kaydı

color-mix() Demosu

Demo sayesinde bir renk seçici ile iki renk seçebilirsiniz. Renk alanı ve her rengin ne kadar baskın olması gerektiği.

color-mix()'ı bir gradyandan alınmış bir an olarak düşünebilirsiniz. Gradyan maviden beyaza geçmek için gereken tüm adımları gösterirken color-mix() yalnızca bir adım gösterir. Renk alanlarını dikkate almaya başladığınızda ve renk alanı karıştırmanın sonuçlara ne kadar farklı etki edebileceğini öğrendiğinizde 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ı ile :has() kombinasyonu, üst öğelerinin boyutu ile alt öğelerden herhangi birinin varlığına veya durumuna göre duyarlı ve mantıksal stillerine sahip 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.

Kapsayıcı sorgularının boyutu

Tarayıcı Desteği

• 105
• 105
• 110
• 16

Kaynak

CSS stilleri uygulamak için görüntü 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ıyla, @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 gönderilen :has() seçici sayesinde artık bunu yapabilirsiniz. Ö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ştirici kullanarak yalnızca DOM ağacında yukarı çıkmakla kalmayıp, aynı zamanda kenardan seçimler de yapabilirsiniz. Örneğin li:has(+ li:hover), fareyle üzerine gelindiğinde görünen <li> öğesinden önceki <li> öğesini seçer.

:has() Ekran Kaydı

:has() Demo

CSS :has() demosu: Yuva

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 buna dahildir. e-Okuyucuların ve düşük destekli ö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üncelle

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ılabilir olup olmadığını belirlemek için bir strateji, HTML'ye bir nojs sınıfı yerleştirmek ve onu JavaScript ile kaldırmaktı. CSS artık JavaScript'i algılayıp buna göre ayarlama yapabildiğ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ı 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.

Azaltılmış ş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'in, kullanıcı arayüzündeki şeffaflığı 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ı deneyimi üzerinde büyük bir etkiye sahiptir. Görüntü 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 listeye yeni bir öğe ekleme ya da kaldırma gibi sayfadaki daha küçük işlemler 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 şeyle sizin adınıza ilgilenir. Bunu, önce ve sonra anlık görüntü alarak ve ardından iki resim 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şak geçiş 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 sürümünde kullanıma sunulan linear() öncesinde CSS'de hemen çıkma veya ilkbahar efektleri oluşturmak imkansızdı. 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 bunların arasında doğrusal olarak interpolasyon yapar.

Doğrusal yumuşatma ekran kaydı

Doğrusal yumuşak geçiş 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 etkinleşebilecek yanlış 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 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. Yukarı ve aşağı kaydırırken veya yatay kaydırma çubuklarında sola ve sağa kaydırırken bağlı animasyon doğrudan yanıt olarak ileri ve geri kayar.

ScrollTimeline ile, aşağıdaki demoda gösterildiği gibi bir 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 kod girerek ana iş parçacığının ilerlemesini sağlayan, kaydırmanın sağladığı akıcı animasyonlar kullanabilirsiniz. Peki hoşunuza gitmeyen bir şey var mı?

Kaydırma odaklı animasyonlar hakkında daha fazla bilgi edinmek için tüm ayrıntıların yer aldığı bu makaleye göz atın veya birçok demo içeren kaydırma odaklı-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 üst öğe olmayan bir öğeye ait adlandırılmış kaydırma zaman çizelgesini bulmasına izin vermek için paylaşılan bir üst öğede timeline-scope özelliğini 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

CSS kaydırmaya dayalı animasyonlar demosu: ertelenmiş 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 eklemek 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ının geçişini yapmazsanız öğeniz hemen kırpılır, dönüştürülür ve üzerini kaplar. Böyle bir durumda geçiş gerçekleşmez. Benzer şekilde, overlay, üst katman bir öğeye eklendiğinde ::backdrop'nin 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ı ve ana sayfa bağlantısı konumlandırması ile açılır menülerin gelecekteki stili konusunda çok sayıda çalışma yapıldı. 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. Bunlar menüler, seçimler ve ipuçları içerebilir. 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 iki kez açıp kapatmak, pop-up'ı kapatır ve odağı geri getirir.
• Erişilebilir bileşen bağlamaları. Bir pop-up öğesini pop-up tetikleyiciye anlamsal olarak bağlama.

Pop-up ekran kaydı

Popover Canlı Demo

Bazı 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ğrulaması sahte öğ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ştirir ve genellikle birbirlerine ait olduklarını belirtecek şekilde 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 akordeon türüne özel akordeon adı verilir.

Özel akordeon demosu

Özel bir akordeonun parçası olan <details> öğelerinin kardeş olması gerekmez. Bunlar dokümanın farklı yerlerinde olabilir.

Sonuç

CSS, son birkaç yılda ve özellikle 2023'te büyük bir canlanma 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