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
• İlk harf
• Metin kaydırma dengesi/güzel

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

• 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

• Etkileşim
• Geçişleri görüntüleme
• Doğrusal yumuşak geçiş işlevi
• Kaydırma Sonu
• Kaydırmaya dayalı animasyonlar
• Ertelenen zaman çizelgesi eki
• Ayrı mülk geçişleri
• Başlangıç stili kuralı
• Yer paylaşımlı animasyon

• Bileşenler
• Pop-up
• Seçmede saat
• Kullanıcı için geçerli/geçersiz sözde sınıflar
• Özel akordeon

İ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.

Özellik başlıklarının yanındaki yeni Temel rozetlere dikkat edin. Buradan daha fazla bilgi edinebilirsiniz.

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

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

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

Tarayıcı Desteği

• . 111
• . 111
• . 108
• . 15,4

Kaynak

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 çevresinde bir daireye yerleştirmek artık çok daha kolay.

Trigonometrik fonksiyonlar demosu

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çim demosu

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

Kapsam

Tarayıcı Desteği

• . 118
• . 118
• 
• . 17,4

Kaynak

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

CSS @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

Tarayıcı Desteği

• . 120)
• . 120)
• . 117
• . 17,2

Kaynak

İç 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

Yarışı kazananı belirlemek için rahat iç içe yerleştirme seçiciyi değiştirin

İç 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 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

Üstbilgi, gövde ve altbilgiler eşdüzeylerinin dinamik boyutlarına uyum sağlar.

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

Tarayıcı Desteği

• . 110
• . 110
• . kat
• . 9

Kaynak

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

Aşağıdaki demoda kaydırma çubuğunu sürükleyerek 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)

Tarayıcı Desteği

• . 111
• . 111
• . 113
• . 15

Kaynak

Tarayıcı Desteği

• . 111
• . 111
• . 113
• . 15

Kaynak

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

Aşağıdaki demoda kaydırma çubuğunu sürükleyerek, "denge" ve "pretty" öğelerinin 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.

renk karması 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ığı 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

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ş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

Rengi değiştirin, sahneleri değiştirin. Bunların her birinde, temel renkten varyantlar oluşturmak için göreli renk söz dizimi kullanılır.

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

Tarayıcı Desteği

• . 105
• . 105
• . 110
• . 16

Kaynak

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ı

Tarayıcı Desteği

• . 111
• . 111
• . kat
• . 18

Kaynak

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

Rengi değiştirin, sahneleri değiştirin. Bunların her birinde, temel renkten varyantlar oluşturmak için göreli renk söz dizimi kullanılır.

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

Tarayıcı Desteği

• . 105
• . 105
• . 121
• . 15,4

Kaynak

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

CSS :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

CSS :has() demosu: Yuva

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

Medya sorgusunu güncelleme

Tarayıcı Desteği

• . 113
• . 113
• . giriş
• . 17

Kaynak

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

Güncelleme hızı değerini simüle edin (bir radyo seçeneği belirleyerek) ve ördeği nasıl etkilediğine bakalım.

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

Medya sorgusu komut dosyası oluşturma

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ı 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

Tarayıcı Desteği

• . 118
• . 118
• 
• . kat

Kaynak

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

Tarayıcı Desteği

• . 111
• . 111
• . kat
• . 18

Kaynak

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

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

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.

Mavi renkli orijinal hemen çıkma eğrisi, yeşil renkte gösterilen bir dizi temel noktayla basitleştirilmiştir. 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

CSS 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

Tarayıcı Desteği

• . 114
• . 114
• . 109
• . kat

Kaynak

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

Tarayıcı Desteği

• . 115
• . 115
• 
• . kat

Kaynak

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

CSS kaydırmaya dayalı animasyonlar demosu: Kaydırma zaman çizelgesi

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

CSS kaydırmaya dayalı animasyonlar demosu: zaman çizelgesini görüntüleyin

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

Tarayıcı Desteği

• . 116
• . 116
• . kat
• . kat

Kaynak

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.

Paylaşılan üst öğede timeline-scope tanımlandığında, kaydırıcıda bildirilen scroll-timeline öğesi, onu 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.

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

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 "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ı

Tarayıcı Desteği

• . 117
• . 117
• . kat
• . kat

Kaynak

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

Tarayıcı Desteği

• . 114
• . 114
• . 125
• . 17

Kaynak

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ı. 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 öğ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, <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

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 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ğ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 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 akordeon demosu

Özel bir akordeonun parçası olan <details> öğelerinin kardeş olması gerekmez. Bunlar belgede dağınık hâlde bulunabilir.

Sonuç

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,

Una Kravets

Bramus

Adam Argyle