CSS Sarmalanmış: 2023
İçeriğe git:
- Duyarlı tasarım
- Kapsayıcı sorguları
- Stil sorguları
- :has seçici
- Medya sorgusunu güncelle
- Komut dosyası medya sorgusu
- Şeffaflık medya sorgusu
İnanılmaz! 2023 CSS için çok iyi bir yıldı.
#Interop2023'ten CSS ve kullanıcı arayüzü alanındaki, geliştiricilerin bir zamanlar web platformunda imkansız olduğunu düşündüğü özellikleri etkinleştiren birçok yeni açılışına kadar pek çok yeni özellik kullanıma sunuluyor. 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şlevi destekliyor. Chrome'da yalnızca CSS'ye dayalı kaydırma odaklı animasyonlar ve görünüm geçişleriyle web görünümleri arasında sorunsuz animasyon yapma desteği sunuyoruz. Hepsinden önemlisi, CSS iç içe yerleştirme ve kapsamlı stiller gibi daha iyi geliştirici deneyimleri sunmak amacıyla kullanıma sunulan çok sayıda yeni temel öğe var.
Bir yıl oldu! Bu nedenle, bu dönüm noktasını, tarayıcı geliştiricilerinin ve web topluluğunun tüm bunları mümkün kılan tüm sıkı çalışmalarını kutlamak ve onlara teşekkür etmek üzere bitirmek istiyoruz.
Mimari temeller
Temel CSS dili ve özelliklerinde yapılan güncellemelerle başlayalım. Bunlar, stilleri yazma ve düzenleme şeklinizin temelini oluşturan ve geliştiricinin ellerine büyük bir güç katan özelliklerdir.
Trigonometrik fonksiyonlar
Chrome 111; sin(), cos(), tan(), asin(), acos(), atan() ve atan2() trigonometrik fonksiyonlarını destekleyerek tüm önemli motorlarda kullanılabilmesini sağladı. Bu işlevler, animasyon ve düzen amacıyla çok kullanışlıdır. Örneğin, öğeleri seçili bir merkezin etrafındaki bir daire üzerine yerleştirmek artık çok daha kolay.
CSS'deki trigonometrik işlevler hakkında daha fazla bilgi edinin.
Karmaşık nth-* seçimi
Tarayıcı Desteği
- 111
- 111
- 113
- 9
:nth-child() sözde sınıf seçici sayesinde DOM'daki öğeler, dizinlerine göre seçilebilir. An+B mikro söz dizimi sayesinde, seçmek istediğiniz öğeleri daha ayrıntılı bir şekilde kontrol edebilirsiniz.
Varsayılan olarak, :nth-*() sözde özellikleri tüm alt öğeleri dikkate alır. Chrome 111 sürümünden itibaren isteğe bağlı olarak :nth-child() ve :nth-last-child() uygulamalarına bir seçici listesi aktarabilirsiniz. Böylece, An+B gerekli olan işlemi yapmadan önce alt öğelerin listesini önceden filtreleyebilirsiniz.
Aşağıdaki demoda, yalnızca küçük bebekler of .small ile önceden filtrelenerek hariç tutularak 3n+1 mantığı uygulanır. Kullanılan seçiciyi dinamik olarak değiştirmek için açılır listeleri kullanın.
Karmaşık nth-* seçimleri hakkında daha fazla bilgi edinin.
Kapsam
Tarayıcı Desteği
- 118
- 118
- x
- 17,4
Chrome 118, dokümanın belirli bir alt ağacıyla kapsam seçici eşleştirmesini sağlayan bir kural olan @scope desteğini ekledi. Kapsamlı stil sayesinde, aşırı spesifik seçiciler yazmak veya bunları DOM yapısıyla birleştirmek zorunda kalmadan seçtiğiniz öğeler konusunda çok spesifik olabilirsiniz.
Kapsamlı alt ağaç, bir kapsam oluşturma kökü (üst sınır) ve isteğe bağlı bir kapsam oluşturma sınırı (alt sınır) ile tanımlanır.
@scope (.card) { … } /* scoping root */
@scope (.card) to (.card__content) { … } /* scoping root + scoping limit*/
Kapsam bloğuna yerleştirilen stil kuralları, yalnızca oyulmuş alt ağacın içindeki öğeleri hedefler. Örneğin, aşağıdaki kapsamlı stil kuralı yalnızca .card öğesi ile [data-component] seçicisiyle eşleşen iç içe yerleştirilmiş herhangi bir bileşen arasında yer alan <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şmiyor.
Kapsam Demosu Ekran Görüntüsü
Canlı Kapsama Başvurusu Demosu
@scope demosu@scope hakkında daha fazla bilgi edinmek için "Seçicilerinizin erişimini sınırlamak için @scope nasıl kullanılır?" başlıklı makaleyi inceleyin. Bu makalede, :scope seçici, kesinliğin nasıl kullanıldığı, başlangıcı olmayan kapsamlar ve basamaklamanın @scope ürününden nasıl etkilendiği hakkında bilgi edineceksiniz.
İç içe yerleştirme
İç içe yerleştirmeden önce her seçicinin birbirinden ayrı ve açık bir şekilde bildirilmesi gerekiyordu. Bu da tekrara, stil sayfalarında yığına ve dağınık yazma deneyimine yol açar. Artık seçiciler, içinde gruplandırılmış ilgili stil kurallarıyla devam ettirilebilir.
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ı İç İçe Yerleştirme
İç İçe Yerleştirme Canlı Demosu
İç 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. Bu söz dizimi başlangıçta çeşitli yerlerde & kullanımına yönelik bir sınırlamayla yayınlanmıştır, ancak iç içe yerleştirilen rahat bir söz dizimi güncellemesiyle kaldırılmıştır.
İç içe yerleştirme hakkında daha fazla bilgi edinin.
Alt ızgara
CSS subgrid, alt düzenler arasında daha iyi hizalama sayesinde daha karmaşık ızgaralar oluşturmanıza olanak tanır. Izgara satırları veya sütunları için subgrid değerini kullanarak, başka bir ızgaranın içinde bulunan bir ızgaranın, dış ızgaranın satır ve sütunlarını kendisine ait olarak almasına olanak tanır.
Alt Izgara Ekran Kaydı
Subgrid Canlı Demosu
Alt ızgara, özellikle kardeş öğeleri birbirlerinin dinamik içerikleriyle hizalamak açısından yararlıdır. Bu yöntem metin yazarlarını, kullanıcı deneyimi yazarlarını ve çevirmenleri düzene "uyacak" bir proje metni oluşturmaktan kurtarır. Alt ızgara sayesinde düzen, içeriğe uyacak şekilde ayarlanabilir.
Alt ızgara hakkında daha fazla bilgi edinin.
Yazı biçimi
Web tipografisinde 2023'te birkaç önemli güncelleme yapıldı. Özellikle text-wrap özelliğidir. Bu özellik, ek komut dosyası gerekmeden tarayıcıda oluşturulan tipografik düzen ayarlamasına olanak tanır. Tuhaf satır uzunluklarına son ve daha kolay tahmin edilebilir tipografiye merhaba deyin.
İlk harf
Chrome 110'da yılın başında kullanıma sunulan initial-letter özelliği, ilk harflerin yerleşimi için stil ayarlayan küçük ama güçlü bir CSS özelliğidir. Harfleri yükseltilmiş veya düşürülmüş olarak yerleştirebilirsiniz. Bu özellik iki bağımsız değişkeni kabul eder: İlki, mektubun ilgili paragrafa ne kadar derinleştirileceğine, ikincisi ise mektubun üzerindeki paragrafın ne kadar yükseltileceğine bağlıdır. Aşağıdaki demoda gösterildiği gibi ikisinin bir kombinasyonunu bile yapabilirsiniz.
İlk Harf Ekran Görüntüsü
İlk Harf Demosu
::first-letter sözde öğenin kaymasını izlemek için initial-letter değerlerini değiştirin.İlk harfler hakkında daha fazla bilgi edinin.
text-wrap: denge ve güzel
Geliştirici olarak, bir başlığın veya paragrafın son boyutunu, yazı tipi boyutunu, hatta dilini bilmezsiniz. Metin kaydırmanın etkili ve estetik bir şekilde işlenmesi 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 kullanmak için mükemmel bir adaydır.
Burada biri balance, diğeri pretty olmak üzere iki yeni metin sarmalama tekniği devreye girer. balance değeri, uyumlu bir metin bloğu oluşturmayı amaçlarken pretty, öksüzleri önlemeyi ve sağlıklı kısa çizgilemeyi sağlamayı amaçlar. Bu görevlerin ikisi de eskiden elle yapılıyordu. İşin tarayıcıya verilmesi ve tüm çeviri dillerde çalışmasını sağlamak harika bir şey.
Ekran Kaydı Metnini Sarmala
Metin Kaydırma Canlı Demosu
balance ve pretty öğelerinin 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 renk yılı oldu. Dinamik renk temalarını etkinleştiren yeni renk alanları ve işlevlerle, kullanıcılarınızın hak ettiği canlı, canlı temaları oluşturmanıza ve bunları özelleştirilebilir hale getirmenize hiçbir engel yok!
HD Renk Alanları (Renk Düzeyi 4)
Donanımdan yazılıma, CSS'den yanıp sönen ışıklara kadar; bilgisayarlarımızın renkleri insan gözünün gördüğü kadar iyi temsil etmesi için çok çalışmak gerekebilir. 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ıların ekran donanımında geniş yelpazedeki HDR renkleri uygulanıp uygulanmadığını kontrol edebilirsiniz.
- 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 renklerini belirtin.
- HDR renkleri içeren gradyanlar oluşturun,
- Renk geçişlerini alternatif renk alanlarında birleştirin.
- color-mix() ile renkleri karıştırın.
- Göreli renk söz dizimiyle renk varyantları oluşturun.
Renk 4 Ekran Kaydı
Renk 4 Demosu
Renk 4 ve renk alanları hakkında daha fazla bilgi edinin.
renk karışımı işlevi
Renkleri karıştırmak klasik bir görevdir ve 2023'te CSS de bunu yapabilir. Yalnızca beyaz veya siyahı bir renkle değil, aynı zamanda şeffaflığı da karıştırarak bunu istediğiniz renk alanında yapabilirsiniz. Aynı anda hem temel bir renk özelliği hem de gelişmiş bir renk özelliği vardır.
color-mix() Ekran Kaydı
color-mix() Demosu
color-mix(), bir gradyandan belli bir zaman dilimi olarak düşünülebilir. Bir renk geçişi maviden beyaza giden tüm adımları gösterirken, color-mix() yalnızca bir adım gösterir. Renk alanlarını hesaba katmaya ve karıştırılan renk alanının sonuçlardan ne kadar farklı olabileceğini öğrenmeye başladığınızda, işler ileri seviyeye çıkar.
color-mix() hakkında daha fazla bilgi edinin.
Göreli renk söz dizimi
Göreli renk söz dizimi (RCS), renk varyantları oluşturma için color-mix() tamamlayıcı yöntemidir. color-mix() yönteminden biraz daha güçlüdür, ancak aynı zamanda renklerle çalışmak için farklı bir stratejidir. color-mix(), bir rengi açmak için beyaz rengi karıştırabilir. Burada RCS, açıklık kanalına hassas bir şekilde erişim sağlar ve programatik olarak ışığı azaltmak veya artırmak için kanalda calc() özelliğini kullanabilir.
RCS Ekran Kaydı
RCS Canlı Demosu
RCS, bir renk üzerinde göreli ve mutlak işlemler gerçekleştirmenize olanak tanır. Göreceli değişim, mevcut doygunluk veya açıklık değerini alıp calc() ile değiştirdiğiniz bir işlemdir. Mutlak değişim, bir kanal değerini opaklığı %50'ye ayarlamak gibi tamamen yeni bir değerle değiştirdiğiniz durumdur. Bu söz dizimi, tema oluşturma, yalnızca zaman varyantları ve daha pek çok şey için anlamlı araçlar sağlar.
Göreli 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 mümkün kıldı ve bileşen tabanlı yeni bir duyarlı tasarım modeli geliştirdik. Kapsayıcı sorguları ile :has() kombinasyonu, üst öğelerinin boyutuna ve alt öğelerinden herhangi birinin varlığına veya durumuna göre duyarlı ve mantıksal stiline sahip olan bileşenleri destekler. Yani artık sayfa düzeyinde 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ı boyutlandırma
Kapsayıcı sorgular, CSS stillerini uygulamak için görüntü alanının genel boyut bilgilerini kullanmak yerine, sayfa içindeki bir üst öğenin sorgulanmasını destekler. Bu da bileşenlerin birden çok düzende ve birden çok görünümde dinamik bir şekilde biçimlendirilebileceği anlamına gelir. Boyutla ilgili kapsayıcı sorguları bu yıl Sevgililer Günü'nden itibaren (14 Şubat) tüm modern tarayıcılarda istikrarlı hale geldi.
Bu özelliği kullanmak için önce sorguladığınız öğede kapsama ayarlayın. Ardından, bir medya sorgusuna benzer şekilde, stilleri uygulamak için boyut parametreleriyle @container kullanın. Kapsayıcı sorgularıyla birlikte kapsayıcı sorgu boyutları alırsınız. Aşağıdaki demoda, kart başlığını boyutlandırmak için cqi kapsayıcı sorgu boyutu (satır içi kapsayıcının boyutunu temsil eder) kullanılmıştır.
@container Ekran Yayını
@container Demo
Kapsayıcı sorguları kullanma hakkında daha fazla bilgi edinin.
Kapsayıcı sorgularının stilini belirleme
Chrome 111'de kısmi uygulama ile ulaşılan stil sorguları. Şu anda stil sorguları sayesinde, @container style() kullanırken bir üst öğedeki özel özelliklerin değerini sorgulayabilirsiniz. Örneğin, özel bir özellik değerinin var olup olmadığını veya @container style(--rain: true) gibi belirli bir değere ayarlandığını sorgulayın.
Stil sorgusu ekran görüntüsü
Stil sorgusu demosu
Bu, CSS'de sınıf adlarını kullanmaya benzese de stil sorgularının bazı avantajları vardır. Birincisi, stil sorgularıyla, sözde durumlar için gerektiğinde CSS'deki değeri güncelleyebilmenizdir. Ayrıca, uygulamanın gelecekteki sürümlerinde, uygulanan stili (ör. style(60 <= --weather <= 70)) belirlemek için değer aralıklarını ve style(font-style: italic) gibi özellik-değer çiftlerini temel alarak stili sorgulayabileceksiniz.
Stil sorgularını kullanma hakkında daha fazla bilgi edinin.
:has() seçici
Geliştiriciler neredeyse 20 yıldır CSS'de "üst seçici" isteğinde bulundular. Chrome 105 sürümünde kullanıma sunulan :has() seçici ile bu artık mümkün. Örneğin, .card:has(img.hero) kullanıldığında alt öğe olarak hero resim içeren .card öğeleri seçilir.
:has() Demo Ekran Görüntüsü
:has() Canlı Demo
:has() demosu: Resimsiz/resimli kart:has(), bir göreli seçici listesini bağımsız değişkeni olarak 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 kalmayıp yan yana seçimler de yapabilirsiniz. Örneğin li:has(+ li:hover), hâlihazırda fareyle üzerine gelinmiş <li> öğesinden önce gelen <li> öğesini seçer.
:has() Ekran Kaydı
:has() Demosu
:has() demosu: YuvaCSS :has() seçici hakkında daha fazla bilgi edinin.
Medya sorgusunu güncelle
update medya sorgusu, kullanıcı arayüzünü cihazın yenileme hızına uyarlamak için bir yöntem sunar. Bu özellik, farklı cihazların özellikleriyle ilgili olarak fast, slow veya none değerini bildirebilir.
Tasarladığınız cihazların çoğunun hızlı bir yenileme hızına sahip olma olasılığı yüksektir. Masaüstü bilgisayarları ve çoğu mobil cihaz da buna dahildir. Düşük etkili ödeme sistemleri gibi e-Okuyucuların ve cihazların yenileme hızı yavaş olabilir. Cihazın animasyonları veya sık güncellemeleri işleyemediğini bildiğinizde pil kullanımından veya hatalı görüntüleme güncellemelerinden tasarruf edebilirsiniz.
Ekran Kaydı'nı Güncelle
Demoyu Güncelle
@media (update) hakkında daha fazla bilgi edinin.
Komut dosyası medya sorgusu
Komut dosyası medya sorgusu, JavaScript'in kullanılabilir olup olmadığını kontrol etmek için kullanılabilir. Bu, progresif geliştirme için çok kullanışlıdır. Bu medya sorgusundan önce, JavaScript'in kullanılabilir olup olmadığını algılamak için HTML'ye nojs sınıfı eklemek ve bu sınıfı JavaScript kullanarak kaldırmak gerekiyordu. CSS artık JavaScript'i algılayıp buna göre ayarlama yapabildiği için bu komut dosyaları kaldırılabilir.
Chrome Geliştirici Araçları aracılığıyla test yapmak için bir sayfada JavaScript'i nasıl etkinleştireceğinizi ve devre dışı bırakacağınızı buradan öğrenebilirsiniz.
Komut Dosyası Ekran Kaydı
Komut Dosyası Demosu
Bir web sitesinde bir tema geçişi kullanmayı düşünün. JavaScript kullanılabilir olmadığı için, komut dosyası medya sorgusu, geçişin sistem tercihine uygun şekilde çalışmasına yardımcı olabilir. Bir anahtar bileşenini de kullanabilirsiniz. JavaScript kullanılabiliyorsa anahtar, açılıp kapatılmak yerine bir hareketle kaydırılabilir. Komut dosyası kullanılabilir olduğunda, kullanıcı deneyimini geliştirmek ve komut dosyası devre dışı bırakıldığında anlamlı bir temel deneyimi sağlamak için pek çok harika fırsat vardır.
Komut dosyası hakkında daha fazla bilgi edinin.
Az şeffaflıklı medya sorgusu
Opak olmayan arayüzler baş ağrısına neden olabilir veya çeşitli görme bozuklukları türlerinde görsel zorluklara yol açabilir. Bu nedenle Windows, macOS ve iOS, kullanıcı arayüzündeki şeffaflığı azaltabilen veya kaldırabilen sistem tercihlerine sahiptir. prefers-reduced-transparency için bu medya sorgusu, diğer tercih edilen medya sorgularıyla uyumludur. Bu sorgu, kullanıcılara göre ayarlamalar yaparken yaratıcı olmanıza olanak tanır.
Azaltılmış Geçirgen Ekran Video Kaydı
Azaltılmış Şeffaflık Demosu
Bazı durumlarda, başka içerikle yer paylaşımlı içeriğin bulunmadığı alternatif bir düzen sağlayabilirsiniz. Diğer durumlarda, bir rengin opaklığı opak veya neredeyse opak olacak şekilde ayarlanabilir. Aşağıdaki blog gönderisinde, kullanıcı tercihine göre uyarlanan daha fazla ilham verici demo bulabilirsiniz. Bu medya sorgusunun önemli olduğu zamanları 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şlarından biridir. Kullanıcıların neyi tıkladıkları ve sanal bir alanda nerede olduklarıyla ilgili geri bildirim almalarına yardımcı olur. Bu yıl, etkileşimlerin oluşturulmasını ve uygulanmasını kolaylaştıran, daha sorunsuz bir kullanıcı yolculuğu ve daha gelişmiş bir web deneyimi sağlayan birçok heyecan verici özellik kullanıma sunuldu.
Geçiş işlemlerini görüntüleme
Görüntüleme geçişlerinin, bir sayfanın kullanıcı deneyimi üzerinde büyük bir etkisi vardır. View Transitions API 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 sayfada yeni bir öğeyi listeye ekleme ya da kaldırma gibi küçük işlemler olabilir.
View Transitions API'nin temelinde document.startViewTranstion işlevi yer alır. DOM'u yeni duruma güncelleyen bir işlev aktarın. API sizin için her şeyi halleder. Bunu, öncesi ve sonrası görüntülerini alıp ikisi arasında geçiş yaparak yapar. CSS kullanarak nelerin yakalanacağını kontrol edebilir ve isteğe bağlı olarak bu anlık görüntülere animasyon ekleme şeklini özelleştirebilirsiniz.
VT Ekran Kaydı
VT Demosu
Chrome 111 sürümünde kullanıma sunulan Tek Sayfalık Uygulamalar için View Transitions API. Geçişleri görüntüleme 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ı sizi aldatmasın. linear() işlevi (linearanahtar kelime ile karıştırılmamalıdır), hassasiyetten ödün vermeden karmaşık yumuşak geçiş işlevlerini basit bir şekilde oluşturmanıza olanak tanır.
Chrome 113'te kullanıma sunulan linear() öncesinde CSS'de hemen çıkma veya ilkbahar efektleri oluşturmak mümkün değildi. linear() sayesinde, bu yumuşatmaları bir dizi noktaya indirgeyip bu noktalar arasında doğrusal olarak interpolasyon yaparak tahmin etmek mümkündür.
linear() işlevi, bu noktaları kullanır ve bunların aralarındaki ilişkiyi doğrusal olarak hesaplar.Doğrusal yumuşak geçiş Ekran Kaydı
Doğrusal yumuşak geçiş demosu
linear() demosu.linear() hakkında daha fazla bilgi edinin. linear() eğrileri oluşturmak için doğrusal yumuşak geçiş oluşturucuyu kullanın.
Kaydırma Sonu
Birçok arayüz kaydırma etkileşimleri içerir ve bazen arayüzün geçerli kaydırma konumuyla ilgili bilgileri senkronize etmesi veya verileri geçerli duruma göre 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 sayesinde, kullanıcının hareketin ortasında olup olmadığını anlayan mükemmel bir şekilde zamanlanmış bir scrollend etkinliğiniz olur.
Scrollend Ekran Kaydı
Scrollend Demosu
JavaScript, kaydırma sırasında parmakların varlığını izleyemediğinden bu bilgi, tarayıcının sahip olması açısından önemliydi. Hatalı kaydırma sonu deneme kodu yığınları artık silinip tarayıcıya ait yüksek hassasiyetli bir etkinlikle değiştirilebilir.
Kaydırma hakkında daha fazla bilgi edinin.
Kaydırma odaklı animasyonlar
Chrome 115 sürümünde kaydırmaya dayalı animasyonlar kullanıma sunulan heyecan verici bir özelliktir. Bunlar, mevcut bir CSS animasyonunu veya Web Animasyonları API'si ile oluşturulmuş bir animasyonu alıp bir kaydırma çubuğunun kaydırma ofsetiyle eşleştirmenize olanak tanır. Bir yatay kaydırıcıda yukarı ve aşağı kaydırdığınızda (yatay kaydırıcıda sola ve sağa) bağlı animasyon, doğrudan tepki olarak ileriye ve geriye ilerler.
ScrollTimeline ile, aşağıdaki demoda gösterildiği gibi bir kaydırıcının genel ilerlemesini izleyebilirsiniz. Sayfanın sonuna doğru ilerledikçe metin kendini karakter karakter gösterir.
SDA Ekran Kaydı
SDA Demosu
ViewTimeline ile kaydırma alanını aşan bir öğeyi izleyebilirsiniz. Bu, IntersectionObserver'ın bir öğeyi izlemesine benzer şekilde çalışır. Aşağıdaki demoda, her bir resim, kaydırma alanına girdiği andan ortaya çıkana kadar kendini gösterir.
SDA Demo Ekran Kaydı
SDA Canlı Demosu
Kaydırma odaklı animasyonlar, CSS animasyonları ve Web Animasyonları API'si ile çalıştığından bu API'lerin sunduğu tüm avantajlardan yararlanabilirsiniz. Bu, bu animasyonların ana iş parçacığının dışında tutulmasını sağlayabilmeyi de içerir. Artık sadece birkaç satır ekstra kodla ana iş parçacığında kaydırma yaparak devam eden sorunsuz animasyonlara sahip olabilirsiniz. Hoşunuza gitmeyen ne?
Kaydırmayla çalışan 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 bölümünü ziyaret edin.
Ertelenen zaman çizelgesi eki
CSS üzerinden kaydırmaya dayalı bir animasyon uygulanırken, denetleyici kaydırıcıyı bulmak için kullanılan arama mekanizması her zaman DOM ağacında yukarıya doğru yürür ve bunu yalnızca üst kaydırma ile sınırlandırır. Yine de, animasyon uygulanması gereken öğe, genellikle kaydırma çubuğunun alt öğesi değil, tamamen farklı bir alt ağacın içinde yer alan bir öğedir.
Animasyonlu öğenin, üst olmayan bir öğeye ait adlandırılmış kaydırma zaman çizgisini bulmasına izin vermek için paylaşılan bir üst öğede timeline-scope özelliğini kullanın. Böylece, bu ada sahip tanımlı scroll-timeline veya view-timeline, öğeye eklenebilir ve daha geniş bir kapsam elde edilebilir. Bu ayar etkinleştirildiğinde, paylaşılan bu ebeveynin tüm alt öğeleri zaman çizelgesini bu adla kullanabilir.
timeline-scope paylaşılan üst öğede bildirildiğinde, kaydırma çubuğunda bildirilen scroll-timeline, onu animation-timeline olarak kullanan öğe tarafından bulunabilirDemo Ekran Kaydı
Canlı Demo
timeline-scope hakkında daha fazla bilgi edinin.
Ayrı özellik animasyonları
2023'te kullanıma sunulan bir diğer yeni özellik ise display: none'e ve display: none'den gelen animasyonlar gibi ayrı animasyonlara animasyon ekleme özelliğidir. Chrome 116'da animasyon karesi kurallarında display ve content-visibility kullanabilirsiniz. Ayrı bir özelliğin geçişini% 0 yerine% 50 noktasında da yapabilirsiniz. Bu, transition-behavior özelliği allow-discrete anahtar kelimesi kullanılarak veya kısa yol olarak transition özelliği ile gerçekleştirilir.
Ayrık Animasyon. Ekran video kaydı
Ayrık Animasyon. Demo
Ayrı animasyonların geçişi hakkında daha fazla bilgi edinin.
@başlangıç-tarzı
@starting-style CSS kuralı, display: none konumuna gelen animasyonlar için yeni web özellikleri temel alır. Bu kural, bir öğeye, öğe sayfada açılmadan önce tarayıcının bakabileceği bir "açılmadan önce" stili vermek için bir yol sağlar. Bu, giriş animasyonlarının yanı sıra pop-up veya iletişim kutusu gibi öğelerde animasyon oluşturmak için çok kullanışlıdır. Ayrıca, bir öğe oluştururken veya öğeye animasyon ekleme özelliği vermek istediğinizde de yararlı olabilir. Bir popover özelliğini (sonraki bölüme bakın) canlandıran aşağıdaki örneği, görüntü alanının dışından sorunsuz bir şekilde görünüme ve üst katmana taşıyın.
@başlangıç-style Ekran Kaydı
@starting-style Demo
@starting-style ve diğer giriş animasyonları hakkında daha fazla bilgi edinin.
Yer paylaşımı
popover ve dialog gibi üst katman stillerine sahip öğelerin, üst katmandan yumuşak bir şekilde canlandırmasını sağlamak için geçişinize yeni CSS overlay özelliği eklenebilir. Yer paylaşımı yapmazsanız öğeniz hemen kırpılmaya, dönüştürülmeye ve örtülmeye devam eder ve geçişi görmezsiniz. Benzer şekilde overlay, bir üst katman öğesine eklendiğinde ::backdrop öğesinin yumuşak bir şekilde canlanması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 ile HTML bileşenlerinin kesişimi için önemli bir yıldı. popover açılış sayfasının yanı sıra çapa konumlandırması ve stil açılır menülerinin geleceği konusunda birçok çalışma yapıldı. Bu bileşenler, her seferinde ek kitaplıklara veya kendi durum yönetim sistemlerinizi en baştan oluşturmaya gerek kalmadan genel kullanıcı arayüzü kalıpları oluşturmayı kolaylaştırır.
Pop-up
Popover API'si, sayfanın geri kalanının en üstünde yer alan öğeler oluşturmanıza yardımcı olur. Bunlar menüleri, seçimleri ve ipuçlarını içerebilir. Açılan öğeye popover ve id ekleyerek ve popovertarget="my-popover" ile çağırma düğmesine id özelliğini bağlayarak basit bir pop-up oluşturabilirsiniz. Popover API'si şunları destekler:
- Üst katmana yükseltme. Pop-up'lar sayfanın geri kalanının üzerinde ayrı bir katmanda görüneceği için Z-endeksiyle oynamanız gerekmez.
- Işık kapatma işlevi. Pop-up alanının dışını tıkladığınızda pop-up penceresi kapatılır ve odak tekrar gösterilir.
- Varsayılan odak yönetimi. Pop-up'ı açtığınızda bir sonraki sekme pop-up içinde durur.
- Erişilebilir klavye bağlamaları.
esctuşuna bastığınızda veya çift geçiş yaptığınızda, pop-up pencere kapatılır ve odak noktası geri gelir. - Erişilebilir bileşen bağlamaları. Popover öğesini anlamsal olarak popover tetikleyicisine bağlama.
Popover Ekran Kaydı
Canlı Popover Demosu
Belirli yatay kurallar
HTML'de bu yıl Chrome ve Safari'de yapılan 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 kural öğeleri (<hr> etiketler) ekleyebilme olanağıdır. Önceden, bir seçime <hr> etiketi yerleştirmek oluşturulmuyordu. Ancak bu yıl bu özelliği hem Safari hem de Chrome desteklemektedir. Böylece <select> öğelerindeki içerikler daha iyi ayrılabilir.
Ekran Görüntüsü Seç
Canlı Demo Seç
Seçili bölümde saat kullanma hakkında daha fazla bilgi edinin
:kullanıcı tarafından geçerli ve geçersiz sözde sınıflar
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ünü yalnızca kullanıcı girişle önemli ölçüde etkileşimde bulunduktan sonra eşleştirir. Kullanıcı sayfayla etkileşimde bulunmaya başlamamış olsa bile, zorunlu ve boş bir form denetimi :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çiciler sayesinde, kullanıcının değiştirdiği girişleri takip etmek için durum bilgili kod yazmaya gerek kalmıyor.
:user-* Ekran video kaydı
:user-* Canlı Demo
Kullanıcı* form doğrulaması sözde öğelerini kullanma hakkında daha fazla bilgi edinin.
Özel akordeon
Tarayıcı Desteği
- 120
- 120
- x
- 17,2
Web'de yaygın olarak kullanılan bir kullanıcı arayüzü kalıbı akordeon bileşenidir. Bu kalıbı uygulamak için birkaç <details> öğesini birleştirip genellikle birbirlerine ait olduklarını belirtmek üzere görsel olarak gruplandırıyorsunuz.
Chrome 120'deki bir yenilik, <details> öğelerinde name özelliği desteğidir. Bu özellik kullanıldığında, aynı name değerine sahip birden fazla <details> öğesi anlamsal bir grup oluşturur. Gruptaki en fazla bir öğe aynı anda açık olabilir: Gruptaki <details> öğelerinden birini açtığınızda, daha önce açılmış olan öğe otomatik olarak kapanır. Bu akordeon türüne özel akordeon adı verilir.
Özel bir akordeonun parçası olan <details> öğelerinin kardeş olmaları gerekmez. Bu öğeler doküman genelinde dağılmış olabilir.
CSS son birkaç yılda, özellikle de 2023'te büyük bir rönesans yaşadı. CSS'de yeniyseniz veya temel bilgilerinizi tazelemek istiyorsanız web.dev adresinde sunulan diğer ücretsiz kursların yanı sıra ücretsiz CSS Öğrenin kursumuza da göz atın.
Yeni yılınızı kutlarız. Umarız yakında bu yeni CSS ve kullanıcı arayüzü özelliklerinden bazılarını çalışmalarınızda kullanma fırsatı elde edersiniz.
⇾ Chrome UI DevRel Ekibi,
