Trigonometrik fonksiyonlar

Chrome 111, sin(), cos(), tan(), asin(), acos(), atan() ve atan2() trigonometrik fonksiyonları için destek ekleyerek bu fonksiyonları tüm büyük motorlarda kullanılabilir hale getirdi. Bu işlevler, animasyon ve düzen amaçları için çok kullanışlıdır. Örneğin, öğeleri seçilen bir merkezin etrafındaki daireye yerleştirmek artık çok daha kolay.

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

Karmaşık nth-* seçimi

:nth-child() sözde sınıf seçicisi ile DOM'daki öğeleri dizinlerine göre seçmek mümkündür. An+B microsyntax'ı kullanarak hangi öğeleri seçmek istediğiniz üzerinde hassas kontrol sahibi olursunuz.

Varsayılan olarak :nth-*() sözde sınıfları tüm alt öğeleri dikkate alır. Chrome 111'den itibaren, isteğe bağlı olarak :nth-child() ve :nth-last-child() işlevlerine bir seçici listesi iletebilirsiniz. Bu sayede, An+B işlemi yapmadan önce çocukların listesini önceden filtreleyebilirsiniz.

Aşağıdaki demoda, 3n+1 mantığı yalnızca küçük bebeklere uygulanır. Bu bebekler, of .small kullanılarak önceden filtrelenir. 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'de, seçici eşleşmesini dokümanın belirli bir alt ağacıyla sınırlamanıza olanak tanıyan bir @kuralı olan @scope için destek eklendi. Kapsamlı stil oluşturma sayesinde, aşırı derecede belirli seçiciler yazmak veya bunları DOM yapısıyla sıkı bir şekilde bağlamak zorunda kalmadan hangi öğeleri seçeceğiniz konusunda çok net olabilirsiniz.

Kapsamlı bir alt ağaç, bir kapsam kökü (üst sınır) ve isteğe bağlı bir kapsam 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ğunun içine yerleştirilen stil kuralları yalnızca oyulmuş alt ağaçtaki öğeleri hedefler. Örneğin, aşağıdaki kapsamlı stil kuralı yalnızca .card öğesi ile [data-component] seçicisi tarafından eşleştirilen herhangi bir 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 carousel bileşenindeki <img> öğeleri eşleştirilmiyor.

Kapsam Demosu Ekran Görüntüsü

Scope Live Demosu

@scope hakkında daha fazla bilgiyi "Seçicilerinizin erişimini sınırlamak için @scope nasıl kullanılır?" başlıklı makalede bulabilirsiniz. Bu makalede, :scope seçicisi, özgüllüğün nasıl ele alındığı, önsüz kapsamlar ve basamaklandırmanın nasıl etkilendiği hakkında bilgi edineceksiniz.@scope

İç içe yerleştirme

İç içe yerleştirmeden önce her seçicinin birbirinden ayrı olarak açıkça bildirilmesi gerekiyordu. Bu durum, tekrar, stil sayfası hacmi ve dağınık bir yazma deneyimine yol açıyordu. Artık seçiciler, ilgili stil kuralları gruplandırılmış şekilde devam ettirilebiliyor.

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 */
}

İç içe yerleştirme, stil sayfasının ağırlığını azaltabilir, tekrarlanan seçicilerin ek yükünü azaltabilir ve bileşen stillerini merkezileştirebilir. İlk olarak, çeşitli yerlerde & kullanılması zorunluluğu getiren bir sınırlamayla yayınlanan söz dizimi, iç içe yerleştirme söz dizimini gevşeten bir güncelleme 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 hizalama ile daha karmaşık ızgaralar oluşturmanıza olanak tanır. Başka bir ızgaranın içindeki ızgaranın, ızgara satırları veya sütunları için değer olarak subgrid kullanarak dış ızgaranın satır ve sütunlarını kendi satır ve sütunları olarak benimsemesine olanak tanır.

Alt ızgara, kardeş öğeleri birbirlerinin dinamik içerikleriyle hizalamak için özellikle yararlıdır. Bu sayede metin yazarları, kullanıcı deneyimi yazarları ve çevirmenler, düzene "uygun" proje metinleri oluşturmaya çalışmak zorunda kalmaz. Alt ızgara ile düzen, içeriğe uyacak şekilde ayarlanabilir.

Alt ızgara hakkında daha fazla bilgi edinin.

Initial-letter

Yılın başında Chrome 110'da kullanıma sunulan initial-letter özelliği, ilk harflerin yerleştirilmesine yönelik stil belirleyen küçük ancak güçlü bir CSS özelliğidir. Harfleri düşürülmüş veya yükseltilmiş durumda konumlandırabilirsiniz. Bu özellik iki bağımsız değişken kabul eder: Birincisi, harfin ilgili paragrafa ne kadar derinlemesine yerleştirileceği, ikincisi ise harfin ne kadar yukarı kaldırılacağı. Hatta aşağıdaki demoda olduğu gibi ikisini birlikte de kullanabilirsiniz.

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

Başlangıç Harfi Demosu

initial-letter hakkında daha fazla bilgi edinin.

text-wrap: balance and pretty

Geliştirici olarak, bir başlığın veya paragrafın son boyutunu, yazı tipi boyutunu, hatta dilini bilemezsiniz. 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ği için 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 olarak adlandırılan iki yeni metin kaydırma tekniği devreye giriyor. balance değeri, uyumlu bir metin bloğu oluşturmayı amaçlarken pretty değeri, tek başına kalan kelimeleri önlemeyi ve sağlıklı bir tireleme sağlamayı amaçlar. Bu görevlerin her ikisi de geleneksel olarak elle yapılırdı. Bu görevi tarayıcıya vermek ve çevrilen tüm dillerde çalışmasını sağlamak harika bir gelişme.

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

HD Renk Uzayları (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ümüzün görebildiği kadar iyi şekilde temsil etmesi için çok fazla çalışma yapması gerekebilir. 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ş gamut HDR renklerini destekleyip desteklemediğini kontrol edebilir. - 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 daha fazlasında HDR renkleri belirtin. - HDR renkleriyle gradyanlar oluşturma, - Alternatif renk alanlarında gradyanları enterpolasyon yapma. - Renkleri color-mix() ile karıştırın. - Göreceli renk söz dizimiyle renk varyantları oluşturun.

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

color-mix işlevi

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

color-mix(), bir gradyendeki anlardan biri olarak düşünülebilir. Gradyen, maviden beyaza geçiş için gereken tüm adımları gösterirken color-mix() yalnızca bir adımı gösterir. Renk uzaylarını hesaba katmaya başladığınızda ve karıştırma renk uzayının sonuçlardan ne kadar farklı olabileceğini öğrendiğinizde işler daha karmaşık hale gelir.

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

Göreceli renk söz dizimi

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

RCS, bir renkte göreceli ve mutlak değişiklikler yapmanıza olanak tanır. Bağıl değişiklik, doygunluk veya parlaklığı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ştirmenizdir (ör. opaklığı %50 olarak ayarlama). Bu söz dizimi, temalandırma, tam zamanında varyantlar ve daha fazlası için anlamlı araçlar sunar.

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

Boyut kapsayıcı sorguları

Kapsayıcı sorguları, CSS stillerini uygulamak için görünüm alanının genel boyut bilgilerini kullanmak yerine sayfadaki bir üst öğenin sorgulanmasını destekler. Bu sayede bileşenler, birden fazla düzende ve görünümde dinamik olarak stillendirilebilir. Boyutla ilgili kapsayıcı sorguları, bu yıl 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 kapsama oluşturun, ardından stilleri uygulamak üzere boyut parametreleriyle birlikte @container kullanın. Bu işlem, medya sorgusuna benzer. Kapsayıcı sorgularıyla birlikte kapsayıcı sorgu boyutlarını da alırsınız. Aşağıdaki demoda, kart başlığını boyutlandırmak için kapsayıcı sorgusu boyutu cqi (satır içi kapsayıcının boyutunu temsil eder) kullanılır.

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

Stil kapsayıcı sorguları

Stil sorguları, Chrome 111'de kısmi uygulamayla kullanıma sunuldu. Stil sorgularıyla şu anda @container style() kullanırken bir üst öğedeki özel özelliklerin değerini sorgulayabilirsiniz. Örneğin, özel bir özellik değerinin mevcut olup olmadığını veya belirli bir değere (ör. @container style(--rain: true)) ayarlanıp ayarlanmadığını 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. İlk olarak, stil sorgularıyla CSS'deki değeri gerektiğinde sözde durumlar için güncelleyebilirsiniz. Ayrıca, uygulamanın gelecekteki sürümlerinde, uygulanan stili belirlemek için değer aralıklarını (ör. style(60 <= --weather <= 70)) ve özellik-değer çiftlerine (ör. style(font-style: italic)) göre stili sorgulayabileceksiniz.

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

:has() seçicisi

Geliştiriciler, CSS'de yaklaşık 20 yıldır "üst seçici" istiyordu. Chrome 105'te kullanıma sunulan :has() seçiciyle bu artık mümkün. Örneğin, .card:has(img.hero) kullanıldığında alt öğe olarak banner resmi içeren .card öğeleri seçilir.

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

:has() Canlı Demosu

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

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

Medya sorgusunu güncelleme

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

Tasarım yaptığınız cihazların çoğunda yüksek yenileme hızı bulunur. Masaüstü bilgisayarlar ve çoğu mobil cihaz buna dahildir. E-okuyucular ve düşük güçle çalışan ödeme sistemleri gibi cihazların yenileme hızı yavaş olabilir. Cihazın animasyonu veya sık güncellemeleri işleyemeyeceğini bilmek, pil kullanımından tasarruf etmenizi veya hatalı görünüm güncellemelerini önlemenizi sağlar.

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

Komut dosyası oluşturma medya sorgusu

JavaScript'in kullanılabilir olup olmadığını kontrol etmek için scripting medya sorgusu kullanılabilir. Bu, progresif geliştirme için çok kullanışlıdır. Bu medya sorgusundan önce, JavaScript'in kullanılabilir olup olmadığını tespit etmek için HTML'ye bir nojs sınıfı yerleştirilir ve bu sınıf JavaScript ile kaldırılırdı. CSS artık JavaScript'i tespit edip buna göre ayarlama yapabildiğinden bu komut dosyaları kaldırılabilir.

Chrome Geliştirici Araçları ile test için bir sayfada JavaScript'i nasıl etkinleştireceğinizi ve devre dışı bırakacağınızı buradan öğrenebilirsiniz.

Bir web sitesindeki tema anahtarını ele alalım. JavaScript kullanılamadığından, komut dosyası oluşturma medya sorgusu, sistem tercihiyle çalışacak şekilde geçiş yapmaya yardımcı olabilir. Veya bir anahtar bileşenini ele alalım. JavaScript kullanılabiliyorsa anahtar, yalnızca açılıp kapatılmak yerine bir hareketle kaydırılabilir. Komut dosyası oluşturma kullanılabiliyorsa kullanıcı deneyimini yükseltmek için birçok fırsat vardır. Komut dosyası oluşturma devre dışı bırakılırsa anlamlı bir temel deneyim sunulur.

Senaryo hakkında daha fazla bilgi edinin.

Şeffaflığı azaltılmış medya sorgusu

Opak olmayan arayüzler, çeşitli görme bozuklukları için baş ağrısına neden olabilir veya görsel olarak zorlayıcı olabilir. Bu nedenle Windows, macOS ve iOS'te kullanıcı arayüzündeki şeffaflığı azaltabilen veya kaldırabilen sistem tercihleri bulunur. prefers-reduced-transparency için bu medya sorgusu, diğer tercih medya sorgularıyla iyi uyum sağlar. Bu sorgular, kullanıcılar için ayarlama yaparken yaratıcı olmanıza olanak tanır.

Bazı durumlarda, içeriklerin diğer içeriklerin üzerine gelmediği alternatif bir düzen sağlayabilirsiniz. Diğer durumlarda ise bir rengin opaklığı, opak veya neredeyse opak olacak şekilde ayarlanabilir. Bu medya sorgusunun değerli olduğu zamanları merak ediyorsanız aşağıdaki blog yayınında, kullanıcı tercihlerine uyum sağlayan daha fazla ilham verici demo bulabilirsiniz.

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

Görünüm geçişleri

Görünüm geçişleri, bir sayfanın kullanıcı deneyimini büyük ölçüde etkiler. 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 sayfadaki daha küçük öğeler (ör. listeye yeni bir öğe ekleme ya da listeden öğe kaldırma) olabilir.

View Transitions API'nin temelinde document.startViewTranstion işlevi yer alır. DOM'u yeni duruma güncelleyen bir işlev iletin. API, sizin için her şeyi halleder. Bu efekt, önce ve sonra olmak üzere iki anlık görüntü alıp bunlar arasında geçiş yaparak çalışır. CSS kullanarak nelerin yakalanacağını kontrol edebilir ve isteğe bağlı olarak bu anlık görüntülerin nasıl animasyonlandırılacağını özelleştirebilirsiniz.

Tek Sayfalı Uygulamalar için Görünüm Geçişleri API'si Chrome 111'de kullanıma sunuldu. Görünüm Geçişleri hakkında daha fazla bilgi edinin.

Doğrusal yumuşatma işlevi

Bu işlevin adına aldanmayın. linear() işlevi (linearanahtar kelimesiyle karıştırılmamalıdır), biraz hassasiyet kaybı pahasına 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 sıçrama veya yaylanma efektleri oluşturmak mümkün değildi. linear() sayesinde bu yumuşatma efektlerini bir dizi noktaya basitleştirip bu noktalar arasında doğrusal olarak enterpolasyon yaparak yaklaşık olarak elde etmek mümkün.

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üzde kaydırma etkileşimleri bulunur. 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ğı ekrandayken tetiklenebilen yanlış bir zaman aşımı yöntemi kullanmanız gerekiyordu. scrollend etkinliğiyle birlikte, kullanıcının hareketi tamamlayıp tamamlamadığını anlayan, mükemmel zamanlanmış bir scrollend etkinliğine sahip olursunuz.

JavaScript, kaydırma sırasında parmağın ekrandaki varlığını izleyemediği için bu, tarayıcının sahip olması gereken önemli bir özellikti. Bu bilgi, basitçe kullanılamaz. Artık yanlış kaydırma sonu deneme kodu parçaları silinebilir ve tarayıcıya ait yüksek hassasiyetli bir etkinlikle değiştirilebilir.

scrollend hakkında daha fazla bilgi edinin.

Kaydırmaya dayalı animasyonlar

Kaydırmaya dayalı animasyonlar, Chrome 115'ten itibaren kullanılabilen heyecan verici bir özelliktir. Bu özellikler, mevcut bir CSS animasyonunu veya Web Animasyonları API'si ile oluşturulmuş bir animasyonu alıp kaydırılabilir alanın kaydırma uzaklığıyla eşleştirmenize olanak tanır. Yukarı ve aşağı ya da yatay kaydırma çubuğunda sola ve sağa kaydırdığınızda, bağlı animasyon doğrudan yanıt olarak ileri ve geri sarılır.

ScrollTimeline ile, aşağıdaki demoda gösterildiği gibi kaydırılabilir alanın genel ilerleme durumunu takip edebilirsiniz. Sayfanın sonuna doğru kaydırdıkça metin karakter karakter görünür.

ViewTimeline ile bir öğeyi kaydırma bağlantı noktasını geçerken izleyebilirsiniz. Bu işlev, IntersectionObserver'ın bir öğeyi izlemesine benzer şekilde çalışır. Aşağıdaki demoda, her resim kaydırma alanına girdiği andan itibaren ortaya çıkmaya başlar ve merkeze gelene kadar görünür olmaya devam eder.

Kaydırmaya dayalı animasyonlar, CSS animasyonları ve Web Animations API ile çalıştığından bu API'lerin tüm avantajlarından yararlanabilirsiniz. Bu animasyonların ana iş parçacığı dışında çalıştırılması da bu kapsamdadır. Artık yalnızca birkaç satır ek kodla ana iş parçacığının dışında çalışan, kaydırma tabanlı ve akıcı animasyonlar oluşturabilirsiniz.

Kaydırmaya dayalı animasyonlar hakkında daha fazla bilgi edinmek için tüm ayrıntıların yer aldığı bu makaleyi inceleyin veya scroll-driven-animations.style adresini ziyaret edin. Bu adreste birçok demo yer almaktadır.

Ertelenen zaman çizelgesi eki

CSS aracılığıyla kaydırmaya dayalı bir animasyon uygularken, kontrol eden kaydırıcıyı bulmak için kullanılan arama mekanizması her zaman DOM ağacında yukarı doğru ilerler. Bu nedenle, yalnızca kaydırma üst öğeleriyle sınırlıdır. Ancak çoğu zaman, animasyon uygulanması gereken öğe, 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 öğenin 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, tanımlanan scroll-timeline veya view-timeline'nin bu ada eklenmesine olanak tanıyarak daha geniş bir kapsam sağlar. Bu ayar etkinleştirildiğinde, paylaşılan üst öğenin tüm alt öğeleri bu adla zaman çizelgesini kullanabilir.

timeline-scope hakkında daha fazla bilgi edinin.

Ayrı özellik animasyonları

2023'teki bir diğer yeni özellik ise display: none'ya ve display: none'dan animasyon oluşturma gibi ayrı animasyonlar oluşturabilme özelliğidir. Chrome 116'dan itibaren, anahtar kare kurallarında display ve content-visibility kullanabilirsiniz. Ayrıca, herhangi bir ayrı özelliği% 0 noktasında değil% 50 noktasında da geçirebilirsiniz. Bu, allow-discrete anahtar kelimesinin kullanıldığı transition-behavior özelliğiyle veya transition özelliğinde kısaltma olarak elde edilir.

Ayrı animasyonlara geçiş hakkında daha fazla bilgi edinin.

@starting-style

@starting-style CSS kuralı, display: none öğesine ve bu öğeden animasyon oluşturmak için yeni web özelliklerini temel alır. Bu kural, bir öğeye tarayıcının öğe sayfada açılmadan önce arayabileceği bir "açılmadan önceki" stil verme olanağı sunar. Bu, giriş animasyonları ve popover veya iletişim kutusu gibi öğelerde animasyon oluşturmak için çok kullanışlıdır. Ayrıca, bir öğe oluşturduğunuz ve bu öğeye animasyon oluşturma özelliği vermek istediğiniz her durumda da yararlı olabilir. Aşağıdaki örneği inceleyin. Bu örnekte, bir popover özelliği (sonraki bölüme bakın) görünüm alanının dışından görünüm alanına ve en üst katmana sorunsuz bir şekilde animasyonla getiriliyor.

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

Yer paylaşımı

Yeni CSS overlay özelliği, geçişinize eklenerek popover ve dialog gibi üst katman stillerine sahip öğelerin üst katmandan sorunsuz bir şekilde çıkmasını sağlayabilir. Yerleşimi geçiş yapmazsanız öğeniz hemen kırpılmış, dönüştürülmüş ve örtülmüş duruma geri döner ve geçişin gerçekleştiğini görmezsiniz. Benzer şekilde, overlay özelliği, üst katman öğesine eklendiğinde ::backdrop öğesinin sorunsuz bir şekilde çıkmasını sağlar.

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

Popover

Popover API, sayfanın geri kalanının üzerinde yer alan öğeler oluşturmanıza yardımcı olur. Menüler, seçim ve ipuçları bu kapsamda yer alabilir. Açılan öğeye popover özelliğini ve id ekleyip id özelliğini popovertarget="my-popover" kullanarak çağırma düğmesine bağlayarak basit bir popover oluşturabilirsiniz. Popover API şunları destekler:

• En üst katmana yükseltme Pop-up'lar, sayfanın geri kalanının üzerinde ayrı bir katmanda görüneceğinden Z-endeksiyle uğraşmanız gerekmez.
• Hafifçe kapatma işlevi Pop-over alanının dışını tıkladığınızda pop-over kapatılır ve odak geri döner.
• Varsayılan odak yönetimi Pop-over'ı açtığınızda bir sonraki sekme durağı pop-over'ın içinde olur.
• Erişilebilir klavye bağlamaları esc tuşuna basmak veya iki kez geçiş yapmak, popover'ı kapatıp odağı geri döndürür.
• Erişilebilir bileşen bağlamaları. Bir popover öğesini popover tetikleyicisine anlamsal olarak bağlama.

Seçili alanda yatay çizgiler

Bu yıl Chrome ve Safari'de kullanıma sunulan HTML'deki bir diğer küçük değişiklik ise içeriğinizi görsel olarak ayırmaya yardımcı olmak için <select> öğelerine yatay çizgi öğeleri (<hr> etiketleri) ekleme olanağıdır. Daha önce, bir seçeneğe <hr> etiketi yerleştirmek, seçeneğin oluşturulmamasına neden oluyordu. Ancak bu yıl hem Safari hem de Chrome bu özelliği destekleyerek <select> öğelerindeki içeriklerin daha iyi ayrılmasını sağlıyor.

Ekran görüntüsü seçin

Canlı Demoyu seçin.

using hr in select kullanma hakkında daha fazla bilgi edinin.

:user-valid ve invalid 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 kontrolüyle eşleşir. Gerekli olan ve boş olan bir form kontrolü, 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 durumda bırakana kadar :user-invalid ile eşleşmez.

Bu yeni seçicilerle, kullanıcının değiştirdiği girişi takip etmek için artık durum bilgisi olan kod yazmaya gerek kalmıyor.

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

Özel akordeon

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

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

Özel bir akordeonun parçası olan <details> öğelerinin kardeş öğeler olması gerekmez. Bunlar dokümana dağılmış olabilir.