CSS'nin kullanıma sunulması: 2023
İçeriğe atla:
- Duyarlı tasarım
- Kapsayıcı sorguları
- Stil sorguları
- :seçicisi var
- Medya sorgusunu güncelleme
- Medya sorgusu komut dosyası oluşturma
- Şeffaflık medya sorgusu
İnanılmaz! 2023, CSS için çok önemli bir yıl oldu.
#Interop2023'ten CSS ve kullanıcı arayüzü alanında, geliştiricilerin bir zamanlar web platformunda imkansız bulduğu özellikleri etkinleştiren pek ç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 desteklemektedir. Chrome'da yalnızca CSS'ye dayalı kaydırmaya dayalı animasyonlar ve görünüm geçişleriyle web görünümleri arasında sorunsuz bir şekilde animasyon oluşturmak için destek sunuyoruz. Hepsinden önemlisi, CSS iç içe yerleştirme ve kapsamlı stiller gibi daha iyi geliştirici deneyimleri sunan çok sayıda yeni temel öğe bulunuyor.
Ne güzel bir yıl oldu! Bu nedenle, tüm bunları mümkün kılan tarayıcı geliştiricilerinin ve web topluluğunun tüm emeğini kutlayıp teşekkür ederek bu dönüm noktasını bitirmek istiyoruz.
Mimari temeller
Temel CSS dili ve özelliklerindeki 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'de sin(), cos(), tan(), asin(), acos(), atan() ve atan2() trigonometrik fonksiyonlar için destek eklendi ve bu fonksiyonlar tüm büyük motorlarda kullanılabilir hale geldi. Bu işlevler, animasyon ve düzen açısından çok kullanışlıdır. Örneğin, öğeleri seçilen bir merkezin etrafında bir daireye yerleştirmek artık çok daha kolay.
CSS'deki trigonometrik fonksiyonlar hakkında daha fazla bilgi edinin.
Karmaşık nth-* seçim
Tarayıcı Desteği
- 111
- 111
- 113
- 9
:nth-child() sözde sınıf seçicisi ile DOM'deki öğeleri dizinlerine göre seçebilirsiniz. An+B mikro söz dizimini kullanarak seçmek istediğiniz öğeleri ayrıntılı bir şekilde kontrol edebilirsiniz.
Varsayılan olarak :nth-*() sözde öğeleri 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() için bir seçici listesi iletebilirsiniz. Bu şekilde, An+B işlemini gerçekleştirmeden önce alt öğelerin listesini önceden 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 listeleri kullanın.
Karmaşık nth-* seçimleri hakkında daha fazla bilgi edinin.
Kapsam
Chrome 118 sürümünde, dokümanın belirli bir alt ağacıyla eşleşen kapsam seçiciye olanak tanıyan bir kural olan @scope desteği eklendi. Kapsamlı stil sayesinde, aşırı spesifik seçiciler yazmak veya bunları DOM yapısıyla sıkıca birleştirmek zorunda kalmadan hangi öğeleri seçeceğinize tam olarak karar verebilirsiniz.
Kapsamlı bir alt ağaç, bir kapsam kökü (üst sınır) ve isteğe bağlı bir kapsam belirleme sınırıyla (alt sınır) 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 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çiciyle eşleşen iç içe yerleştirilmiş bileşenler arasında bulunan <img> öğelerini hedefler.
@scope (.card) to ([data-component]) {
img { … }
}
Aşağıdaki demoda, bant bileşenindeki <img> öğeleri, uygulanan kapsam sınırı nedeniyle eşleşmiyor.
Kapsam Demosu Ekran Görüntüsü
Kapsam Canlı Demosu
@scope demosu@scope hakkında daha fazla bilgi edinmek için "Seçicilerinizin erişimini sınırlamak için @scope özelliğini kullanma" başlıklı makaleyi inceleyin. Bu makalede, :scope seçici, belirginliğin nasıl işlendiği, başlangıcı olmayan kapsamlar ve şelalenin @scope ayarından 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 sayfası toplu olmasına ve dağınık bir yazma deneyimine yol açar. Seçiciler, artık gruplanan 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 */
}
İç İçe Ekran Kaydı
İç İç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. 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
CSS subgrid, alt düzenler arasında daha iyi hizalamaya sahip daha karmaşık ızgaralar oluşturabilmenizi sağlar. Izgara satırları veya sütunları için subgrid değerini kullanarak, başka bir ızgaranın içindeki bir ızgaranın, dış ızgaradaki satır ve sütunları kendi olarak almasını sağlar.
Subgrid Ekran Kaydı
Subgrid Canlı Demosu
Alt ızgara özellikle kardeş öğeleri birbirlerinin dinamik içeriklerine uygun hale getirmek için kullanışlıdır. Böylece metin yazarları, kullanıcı deneyimi yazarları ve çevirmenler "uygun" proje metinleri oluşturmaya çalışmak zorunda kalmaz içine yerleştirmenize olanak sağlar. Alt ızgara ile 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ı. text-wrap özelliği, özellikle ilerlemeye yönelik güzel bir geliştirmedir. Bu özellik, ek komut dosyası gerektirmeden tarayıcıda oluşturulan tipografik düzen ayarlamasını etkinleştirir. Garip çizgi uzunluklarına veda edin, daha öngörülebilir tipografiyle tanışın.
İlk harf
Yılın başında Chrome 110'da kullanıma sunulan initial-letter özelliği, küçük ama güçlü bir CSS özelliğidir. Bu özellik, ilk harflerin yerleşimi için stil belirler. Harfleri düşürülmüş veya yükseltilmiş durumda 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 öne çıkarılacağını belirtir. Aşağıdaki demoda olduğu gibi bu ikisinin bir kombinasyonunu bile yapabilirsiniz.
İlk harfin ekran görüntüsü
İlk Harf Demosu
::first-letter yapay öğesinin kaymasını izlemek için öğenin initial-letter değerlerini değiştirin.İlk harf 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, hatta dilini bile bilmezsiniz. Metin sarmalamanın etkili ve estetik kullanımı için gereken tüm değişkenler tarayıcıdadır. Tarayıcı; yazı tipi boyutu, dil ve ayrılan alan gibi tüm faktörleri bildiğinde, gelişmiş ve yüksek kaliteli metin düzenini işlemek için mükemmel bir aday haline gelir.
Bu noktada biri balance ve diğeri pretty olarak adlandırılan 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 görevlerin her ikisi de geleneksel olarak elle gerçekleştiriliyordu. Bu işi tarayıcıya vermek ve çevrilmiş her dilde çalışmasını sağlamak harika bir şey.
Metin Kaydırma Ekran Kaydı
Metin Kaydırma Canlı Demosu
balance ve pretty öğelerinin başlık ve paragraf üzerindeki etkilerini karşılaştırabilirsiniz. Demoyu başka bir dile çevirmeyi deneyin.text-Wrap: Bakiye hakkında daha fazla bilgi edinin.
Renk
2023, web platformunun renk yılı oldu. Yeni renk alanları ve dinamik renk teması sağlayan işlevler sayesinde, kullanıcılarınızın hak ettiği canlı ve canlı temaları özelleştirip özelleştirilebilir hale de getirebilirsiniz.
HD Renk Alanları (4. Renk Düzeyi)
Donanımdan yazılıma, CSS'ye ve yanıp sönen ışıklara; bilgisayarlarımızın renkleri insan gözlerimizin görebildiği 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 kullanıma sunulacak.
CSS ve renk artık şunları yapabilir:
- 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 renk geçişleri oluşturabilirsiniz,
- Renk geçişlerini alternatif renk alanlarında interpolleyebilirsiniz.
- color-mix() ile renkleri karıştırın.
- Göreli renk söz dizimine sahip renk varyantları oluşturun.
Renk 4 Ekran Kaydı
Renk 4 Demosu
Renk 4 ve renk alanları hakkında daha fazla bilgi edinin.
renk karması işlevi
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ığı da kullanabilir ve tüm bunları seçtiğiniz herhangi bir renk alanında yapabilirsiniz. Aynı anda hem temel bir renk özelliği hem de gelişmiş bir renk özelliğidir.
color-mix() Ekran Kaydı
color-mix() Demosu
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şlayıp renk karıştırma alanının sonuçlarda ne kadar farklı olabileceğini öğrendiğinizde işler ilerler.
color-mix() hakkında daha fazla bilgi edinin.
Göreli renk söz dizimi
Göreli renk söz dizimi (RCS), color-mix() renk varyantları oluşturmak için tamamlayıcı bir yöntemdir. color-mix() işlevinden biraz daha güçlü olmasının yanı sıra renklerle çalışmak için farklı bir stratejidir. color-mix(), rengin açıklanması için beyaz renkle karıştırılabilir. RCS'de, açıklık kanalına hassas erişim sağlanabilir. Ayrıca, ışığı programatik olarak azaltmak veya artırmak için kanalda calc() özelliğini kullanma imkanı da sunulur.
RCS Ekran Kaydı
RCS Canlı Demosu
RCS, bir renk üzerinde göreli ve mutlak değişiklikler yapmanıza olanak tanır. Göreli değişiklik, mevcut doygunluk veya açıklık 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 (ör. opaklığı %50'ye ayarlamak) değiştirdiğinizde ortaya çıkar. Bu söz dizimi, yalnızca zaman varyantları için ve daha birçok alanda tema oluşturma gibi anlamlı araçlar sunar.
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 özellikler sağladı ve bileşen tabanlı yeni bir duyarlı tasarım modelini ortaya çıkardı. 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. Bu, artık sayfa düzeyinde düzeni bileşen düzeyindeki düzenden ayırabileceğiniz ve bileşeninizi her yerde kullanmak için mantığı bir kez yazabileceğiniz anlamına gelir.
Kapsayıcı sorgularının boyutu
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, bileşenlerin birden çok düzen ve görünümde dinamik bir şekilde biçimlendirilebileceği anlamına gelir. Boyuta yönelik kapsayıcı sorguları bu yılın Sevgililer Günü'nde (14 Şubat) tüm modern tarayıcılarda sabit hale geldi.
Bu özelliği kullanmak için önce sorguladığınız öğede kapsayıcıyı ayarlayın, ardından stilleri uygulamak üzere bir medya sorgusuna benzer şekilde boyut parametreleriyle @container kullanın. Kapsayıcı sorgularının yanı sıra kapsayıcı sorgu boyutları da alırsınız. Aşağıdaki demoda, kart başlığını boyutlandırmak için kapsayıcı sorgu boyutu cqi (satır içi kapsayıcının boyutunu temsil eder) kullanılmıştır.
@container Ekran Kaydı
@container Demo
Kapsayıcı sorguları kullanma hakkında daha fazla bilgi edinin.
Stil kapsayıcı sorguları
Chrome 111'de stil sorguları kısmi uygulama sonucuna ulaştırıldı. Şu anda stil sorgularıyla, @container style() kullanırken bir üst öğedeki özel özelliklerin değerini sorgulayabilirsiniz. Örneğin, özel bir özellik değeri varsa veya @container style(--rain: true) gibi belirli bir değere ayarlanmışsa sorgulayabilirsiniz.
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. İlki, stil sorgularıyla CSS'deki değeri sözde durumlar için gereken şekilde 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 çiftlerine dayalı stili sorgulayabileceksiniz.
Stil sorguları kullanma hakkında daha fazla bilgi edinin.
:has() seçici
Geliştiriciler yaklaşık 20 yıldır "ebeveyn seçici" isteğinde bulundu kullanabilirsiniz. Chrome 105'te gönderilen :has() seçici sayesinde artık bunu yapabilirsiniz. Örneğin, .card:has(img.hero) kullanıldığında, hero resim alt öğesi olan .card öğeleri seçilir.
:has() Demo Ekran Görüntüsü
:has() Canlı Demosu
:has() demosu: Resimsiz/resimli kart:has() göreli seçici listesini bağımsız değişkeni olarak kabul ettiği için ü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), fareyle üzerine gelindiğinde görünen <li> öğesinden önceki <li> öğesini seçer.
:has() Ekran Kaydı
:has() Demosu
:has() demosu: YuvaCSS :has() seçici hakkında daha fazla bilgi edinin.
Medya sorgusunu güncelleme
update medya sorgusu, kullanıcı arayüzünü bir cihazın yenileme hızına uyarlamanız için bir yöntem sunar. Özellik, farklı cihazların özellikleriyle ilgili olarak fast, slow veya none değerini bildirebilir.
Tasarladığınız cihazların çoğu yüksek bir yenileme hızına sahip olabilir. 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 animasyon veya sık güncellemeleri işleyemeyeceğini bilirseniz pil kullanımından veya hatalı görünüm güncellemelerinden tasarruf edebilirsiniz.
Ekran Kaydı'nı Güncelle
Demoyu Güncelle
@media (update) hakkında daha fazla bilgi edinin.
Medya sorgusu komut dosyası oluşturma
JavaScript'in kullanılabilir olup olmadığını kontrol etmek için komut dosyası medya sorgusu kullanılabilir. Bu, aşamalı geliştirme için çok kullanışlıdır. 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 test etmek 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 sitesindeki bir tema anahtarını düşünün. Komut dosyası yazma medya sorgusu, JavaScript kullanılamadığından geçişin sistem tercihine göre çalışmasına yardımcı olabilir. Alternatif olarak bir anahtar bileşeni kullanmayı da düşünebilirsiniz. JavaScript mevcutsa anahtar, açılıp kapatılmak yerine bir hareketle kaydırılabilir. Komut dosyası varsa kullanıcı deneyimini iyileştirmek için çok sayıda muhteşem fırsat sunar. Ayrıca, komut dosyası devre dışıysa anlamlı bir temel deneyimi de sağlar.
Komut dosyası hakkında daha fazla bilgi edinin.
Azaltılmış şeffaflık medya sorgusu
Opak olmayan arayüzler, baş ağrısına veya görme bozukluklarında görsel zorlanmaya neden 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, kullanıcılar için ayarlama yaparken yaratıcı olmanıza olanak tanıyan diğer tercih edilen medya sorgularına uygundur.
Şeffaflık azaltılmış ekran video kaydı
Şeffaflık Azaltılmış Demo
Bazı durumlarda, içeriğin başka içerikle yer paylaşımlı 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ıların tercihine uyarlanan daha ilham verici demolar bulunuyor. Bu medya sorgusunun hangi zamanlarda değerli olduğunu merak ediyorsanız onlara bir 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 neyi tıkladıkları ve sanal bir alanda nerede oldukları ile ilgili geri bildirim almalarına yardımcı olur. Bu yıl, etkileşimlerin oluşturulmasını ve uygulanmasını kolaylaştıran, kullanıcı yolculuklarının sorunsuz olmasını ve daha iyi bir web deneyimi sağlayan birçok heyecan verici özellik kullanıma sunuldu.
Geçişleri görüntüleme
Görüntüleme geçişlerinin, sayfadaki kullanıcı deneyimi üzerinde büyük bir etkisi vardır. View Transitions API ile Tek Sayfa 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.
View Transitions API'nin temelinde document.startViewTranstion işlevi bulunur. DOM'yi yeni duruma güncelleyen bir işlev sağladığınızda, API sizin için her şeyi halleder. Bunu, "öncesi" ve "sonrası" anlık görüntüsünü 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 canlandırılacağını özelleştirebilirsiniz.
VT Ekran Kaydı
VT Demosu
Tek Sayfalık Uygulamalar için View Transitions API, Chrome 111'de kullanıma sunuldu. 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ı sizi aldatmasın. linear() işlevi (linearanahtar kelime ile karıştırılmamalıdır), yalnızca bir miktar hassasiyet kaybı olmadan basit şekilde karmaşık yumuşak geçiş işlevleri 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şatmaların bir dizi noktaya indirilerek basitleştirilmesi ve ardından bu noktalar arasında doğrusal olarak interpolasyon yapılması mümkündür.
linear() işlevi, bu noktaları kullanarak bunların arasında doğrusal olarak interpolasyon yapar.Doğrusal yumuşak ekran video 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şturma aracını 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 geçerli duruma göre verileri getirmesi gerekir. scrollend etkinliğinden önce, kullanıcının parmağı hâlâ ekrandayken tetiklenebilecek yanlış bir zaman aşımı yöntemi kullanmanız gerekiyordu. scrollend etkinliğiyle, kullanıcının hâlâ hareketin ortasında olup olmadığını anlayan mükemmel şekilde zamanlanmış bir kaydırma sonu etkinliğiniz olur.
Scrollend Ekran Kaydı
Scrollend Demosu
JavaScript, kaydırma sırasında ekrandaki parmakların varlığını izleyemediğinden, söz konusu bilgilerin mevcut olmaması nedeniyle bu, tarayıcının sahip olması açısından önemliydi. Kodlama girişiminde bulunan hatalı kaydırma sonu yığınları artık silinebilir ve tarayıcıya ait yüksek hassasiyetli bir etkinlikle değiştirilebilir.
Kaydırma hakkında daha fazla bilgi edinin.
Kaydırmaya dayalı animasyonlar
Kaydırma odaklı animasyonlar, Chrome 115'te sunulan heyecan verici bir özelliktir. Bunlar, mevcut bir CSS animasyonunu veya Web Animations API ile oluşturulmuş bir animasyonu alıp bunu bir kaydırma çubuğunun kaydırma ofsetiyle eşleştirmenize olanak tanır. Yatay kaydırma aracında yukarı veya aşağı veya sola ya da sağa kaydırdığınızda bağlı animasyon, doğrudan yanıtta ileri veya geri sarar.
ScrollTimeline ile aşağıdaki demoda gösterildiği gibi bir kaydırma çubuğunun genel ilerleme durumunu izleyebilirsiniz. Sayfanın sonuna doğru ilerledikçe metin kendisini karakter bazında ortaya çıkarır.
SDA Ekran Kaydı
SDA Demosu
ViewTimeline ile bir öğeyi kaydırma alanından geçerken izleyebilirsiniz. Bu, IntersectionObserver'ın bir öğeyi izlemesine benzer şekilde çalışır. Aşağıdaki demoda her resim, kaydırma noktasına girdiği andan ortaya gelene kadar kendisini ortaya çıkarmaktadır.
SDA Demo Ekran Kaydı
SDA Canlı Demosu
Kaydırma odaklı animasyonlar CSS animasyonları ve Web Animasyonları API'siyle çalıştığından bu API'lerin sağladığı tüm avantajlardan yararlanabilirsiniz. Bu, bu animasyonların ana iş parçacığında çalıştırılmasını da içerir. 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ı animasyonlara sahip olabilirsiniz. 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
CSS üzerinden kaydırmaya dayalı animasyon uygulanırken, kontrol eden kaydırıcıyı bulmak için kullanılan arama mekanizması her zaman DOM ağacında yukarı doğru ilerler. Böylece, bunu yalnızca üst öğelerin kaydırılmasıyla sınırlandırılır. Bununla birlikte, animasyon eklenmesi gereken öğe genellikle kaydırıcının 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. Böylece, tanımlanan scroll-timeline veya view-timeline bu ada eklenerek daha geniş bir kapsam sağlar. Böylece, ortak bir ebeveynin tüm alt öğeleri zaman çizelgesini bu adla kullanabilir.
timeline-scope tanımlandığında, kaydırıcıda bildirilen scroll-timeline öğesi, 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'teki yeni özelliklerden biri de ayrı animasyonlara animasyon ekleme (ör. display: none ile display: none arasında animasyon ekleme). Chrome 116'dan itibaren animasyon karesi kurallarında display ve content-visibility kullanabilirsiniz. Ayrıca, herhangi bir müstakil mülkleri% 0 noktası yerine% 50 noktasında taşıyabilirsiniz. Bu işlem, transition-behavior özelliği kullanılarak allow-discrete anahtar kelimesi kullanılarak veya kısaltma olarak transition özelliği ile gerçekleştirilir.
Ayrık Anim. Ekran video kaydı
Ayrık Anim. Demo
Ayrık animasyonların geçişi hakkında daha fazla bilgi edinin.
@starting-style
@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 "açılış öncesi" atama yöntemi sağlar tarayıcı, öğe sayfada açılmadan önce arayabileceği bir stil kullanabilir. Bu, giriş animasyonları ve pop-up veya iletişim kutusu gibi öğelerde animasyon için çok yararlıdır. Ayrıca, bir öğe oluşturduğunuz ve ona animasyon ekleme özelliği vermek istediğiniz durumlar için de yararlı olabilir. Bir popover özelliğini (sonraki bölüme bakın) görüntü alanının dışından sorunsuz bir şekilde üst katmana gösteren aşağıdaki örneği ele alalım.
@starting-style Ekran Kaydı
@starting-style Demo
@starting-style ve diğer giriş animasyonları hakkında daha fazla bilgi edinin.
Yer paylaşımlı
popover ve dialog gibi üst katman stillerine sahip öğelerin üst katmandan sorunsuzca geçiş yapmasını sağlamak için geçişinize yeni CSS overlay özelliği 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 örtebilir. Ayrıca geçiş gerçekleşmez. Benzer şekilde, overlay, bir üst katman öğesine eklendiğinde ::backdrop animasyonunun düzgün şekilde gösterilmesini 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 açısından büyük bir yıl oldu. popover açılış sayfasının yanı sıra çapa konumlandırma ve stil açılır listelerinin geleceği konusunda birçok iş yapılmıştır. Bu bileşenler, ek kitaplıklara ihtiyaç duymadan veya her seferinde sıfırdan kendi eyalet yönetim sistemlerinizi oluşturmaya gerek kalmadan ortak kullanıcı arayüzü kalıpları oluşturmayı kolaylaştırır.
Pop-up
Popover API'sı, sayfanın geri kalanının üzerinde duran öğeler oluşturmanıza yardımcı olur. Bunlar menüler, seçimler ve ipuçları içerebilir. Açılan öğeye popover özelliği ve id ekleyip id özelliğini popovertarget="my-popover" kullanarak bir çağrı düğmesine bağlayarak basit bir pop-up oluşturabilirsiniz. Popover API'si şunları destekler:
- En üst katmana tanıtım. Pop-up'lar sayfanın geri kalanının üzerinde ayrı bir katmanda görüneceğinden Z-endeksiyle oynamanız gerekmez.
- Işık kapatma işlevi. Pop-up'ın dışını tıkladığınızda pop-up kapatılacaktır ve tekrar odaklanılacaktır.
- Varsayılan odak yönetimi. Pop-up'ın açılması, sonraki sekmenin pop-up'ın içinde durmasına neden olur.
- Erişilebilir klavye bağlamaları.
esctuş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 öğesinin, pop-up tetikleyicisine anlamsal olarak bağlanması.
Pop-up Ekran Kaydı
Popover Canlı Demosu
Bazı yatay kurallar
Bu yıl Chrome ve Safari'de HTML'de yapılan bir diğer küçük değişiklik de içeriğinizin görsel olarak bölünmesine yardımcı olmak için <select> öğelerine yatay kural öğeleri (<hr> etiketleri) ekleyebilme olanağı. Önceden, bir <hr> etiketi bir seçime yerleştirildiğinde oluşturulmuyordu. Ancak bu yıl hem Safari hem de Chrome bu özelliği desteklediği için <select> öğelerindeki içeriklerin daha iyi ayrılması sağlıyor.
Ekran Görüntüsü Seçin
Canlı Demoyu Seçin
Seçimde saat özelliğini kullanma hakkında daha fazla bilgi
:kullanıcı için 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 yalnızca kullanıcı girişle önemli ölçüde etkileşimde bulunduktan sonra bir form denetimiyle eşleşir. Zorunlu ve boş bir form denetimi, kullanıcı sayfayla etkileşime başlamamış olsa bile :invalid ile eşleşir. Aynı kontrol, kullanıcı girişi değiştirip geçersiz bir durumda bırakana kadar :user-invalid ile eşleşmez.
Bu yeni seçiciler sayesinde artık kullanıcının değiştirdiği girişleri takip etmek için durum bilgili kod yazmak gerekmiyor.
:user-* Ekran Kaydı
:user-* Canlı Demo
User-* form doğrulaması yapay öğ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ştirir ve genellikle birbirlerine ait olduklarını belirtecek şekilde görsel olarak gruplandırırsınız.
Chrome 120'deki yeni bir özellik, <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. Aynı anda gruptaki en fazla bir öğe açık olabilir: Gruptaki <details> öğelerinden birini açtığınızda önceden açık olan öğe otomatik olarak kapanır. Bu akordeon türüne özel akordeon adı verilir.
Özel bir akordeonun parçası olan <details> öğelerinin kardeş olması gerekmez. Bunlar belgede dağınık hâlde bulunabilir.
CSS son birkaç yılda, özellikle de 2023'te böyle bir rönesans yaşadı. CSS'yi kullanmaya yeni başladıysanız veya temel bilgileri tazelemek istiyorsanız ücretsiz CSS öğrenme kursumuza ve web.dev'de sunulan diğer ücretsiz kurslara göz atın.
Mutlu yıllar dileriz. Bu göz alıcı yeni CSS ve Kullanıcı Arayüzü özelliklerinden bazılarını en kısa zamanda işlerinizde kullanma fırsatı bulacağınızı umuyoruz.
⇾ Chrome Kullanıcı Arayüzü DevRel Ekibi,
