Trigonometrik fonksiyonlar

Chrome 111'de sin(), cos(), tan(), asin(), acos(), atan() ve atan2() trigonometrik işlevleri için destek eklendi. Bu işlevler artık tüm büyük motorlarda kullanılabilir. Bu işlevler, animasyon ve düzen için çok kullanışlıdır. Örneğin, öğeleri seçili bir merkez etrafında bir daire içinde düzenlemek artık çok daha kolay.

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

Karmaşık n.* seçimi

:nth-child() sözde sınıf seçicisiyle DOM'daki öğeleri dizinlerine göre seçebilirsiniz. An+B mikro söz dizimini kullanarak hangi öğeleri seçmek istediğiniz üzerinde ayrıntılı kontrol sahibi olursunuz.

Varsayılan olarak :nth-*() sözde öğeleri tüm alt öğeleri hesaba katar. Chrome 111'den itibaren isteğe bağlı olarak :nth-child() ve :nth-last-child()'ye bir seçici listesi iletebilirsiniz. Böylece, An+B işlemini yapmadan önce çocuk listesini önceden filtreleyebilirsiniz.

Aşağıdaki demoda, 3n+1 mantığı of .small kullanılarak önceden filtrelenerek yalnızca küçük bebeklere uygulanır. Kullanılan seçiciyi dinamik olarak değiştirmek için açılır menüleri kullanın.

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

Kapsam

Chrome 118, seçici eşleştirme kapsamını dokümanın belirli bir alt ağacıyla sınırlandırmanıza olanak tanıyan bir at-kuralı olan @scope için destek ekledi. Kapsamlı stil sayesinde, çok özel seçiciler yazmak veya bunları DOM yapısına sıkıca bağlamak zorunda kalmadan hangi öğeleri seçeceğiniz konusunda çok net olabilirsiniz.

Kapsamlı alt ağaç, bir kapsamlama kökü (üst sınır) ve isteğe bağlı bir kapsamlama sınırı (alt sınır) ile tanımlanır.

@scope (.card) { … } /* scoping root */
@scope (.card) to (.card__content) { … } /* scoping root + scoping limit*/

Bir kapsam bloğuna yerleştirilen stil kuralları yalnızca ayrılmış alt ağaçtaki öğeleri hedefler. Örneğin, aşağıdaki kapsamlı stil kuralı yalnızca .card öğesi ile [data-component] seçicisiyle eşleşen iç içe yerleştirilmiş bileşen arasında bulunan <img> öğelerini hedefler.

@scope (.card) to ([data-component]) {
  img { … }
}

Aşağıdaki demoda, uygulanan kapsam sınırı nedeniyle bant bileşenindeki <img> öğeleri eşleşmez.

Kapsam Demo Ekran Görüntüsü

Scope Canlı Demo

@scope hakkında daha fazla bilgiyi "@scope'ü seçicilerinizin erişimini sınırlamak için kullanma" başlıklı makalede bulabilirsiniz. Bu makalede :scope seçici, özgüllüğün nasıl ele alındığı, ön ek içermeyen kapsamlar ve @scope'nin basamak etkisi hakkında bilgi edineceksiniz.

İç içe yerleştirme

İç içe yerleştirmeden önce her seçicinin birbirinden ayrı olarak açıkça tanımlanması gerekiyordu. Bu da tekrarlara, stiller dosyasının hacminin artmasına ve dağınık bir içerik üretme deneyimine yol açar. Artık seçicilere, gruplandırılmış ilgili stil kurallarıyla devam edilebilir.

dl {
  /* dt styles */
  
  dt {
    /* dl dt styles */
  }

  dd {
    /* dl dd styles */
  }
}

/* same as */
dt {
  /* dt styles */
}

dl dt {
  /* dl dt styles */
}

dl dd {
  /* dl dd styles */
}

İç içe yerleştirme, stil sayfasının ağırlığını azaltabilir, tekrarlanan seçicilerden kaynaklanan yükü azaltabilir ve bileşen stillerini merkezileştirebilir. İlk olarak çeşitli yerlerde & kullanılması gereken bir sınırlamayla yayınlanan söz dizimi, iç içe yerleştirme için gevşek söz dizimi güncellemesiyle kaldırıldı.

İç içe yerleştirme hakkında daha fazla bilgi edinin.

Alt ızgara

CSS subgrid, alt düzenler arasında daha iyi bir hizalamayla daha karmaşık ızgaralar oluşturmanıza olanak tanır. Başka bir ızgaranın içindeki bir ızgaranın, ızgara satırları veya sütunları için değer olarak subgrid'ü kullanarak dış ızgaranın satırlarını ve sütunlarını kendi satırları ve sütunları olarak benimsemesine olanak tanır.

Alt ızgara, özellikle kardeşleri birbirlerinin dinamik içerikleriyle hizalamak için yararlıdır. Bu sayede metin yazarları, kullanıcı deneyimi yazarları ve çevirmenler, sayfa düzenine "uyan" proje metni oluşturmaya çalışmaktan kurtulur. Alt ızgara sayesinde düzen, içeriğe uyacak şekilde ayarlanabilir.

Alt ızgara hakkında daha fazla bilgi edinin.

Initial-letter

Yılın başında Chrome 110'da kullanıma sunulan initial-letter mülkü, ilk harflerin yerleştirilmesi için stili belirleyen küçük ancak güçlü bir CSS özelliğidir. Harfleri alçaltılmış veya yükseltilmiş olarak konumlandırabilirsiniz. Özellik iki bağımsız değişken kabul eder: Birincisi, harfin ilgili paragrafa ne kadar derin yerleştirileceğini, ikincisi ise harfin ne kadar yukarı kaldırılacağını belirtir. Hatta aşağıdaki demoda gösterildiği gibi ikisini birden kullanabilirsiniz.

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

Baş harfi demo

initial-letter hakkında daha fazla bilgi edinin.

text-wrap: balance and pretty

Geliştirici olarak, bir başlığın veya paragrafın nihai boyutunu, yazı tipi boyutunu ve hatta dilini bilmiyorsunuzdur. Metin kaydırma işleminin etkili ve estetik bir şekilde yapılması için gereken tüm değişkenler tarayıcıda bulunur. Tarayıcılar yazı tipi boyutu, dil ve ayrılan alan gibi tüm faktörleri bildiğinden gelişmiş ve yüksek kaliteli metin düzenini işlemek için mükemmel bir adaydır.

Bu noktada, biri balance, diğeri pretty adlı iki yeni metin kaydırma tekniği devreye girer. balance değeri, uyumlu bir metin bloğu oluşturmayı amaçlarken pretty, metnin tek satırda bitmesini önlemeyi ve satır ayırma işleminin düzgün olmasını sağlamayı amaçlar. Bu iki görev de geleneksel olarak manuel olarak yapılıyordu. Bu görevi tarayıcıya verip çevrilen tüm diller için çalışmasını sağlamak harika bir şey.

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

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örebildiği kadar iyi göstermesi çok fazla iş gerektirebilir. 2023'te yeni renkler, daha fazla renk, yeni renk alanları, renk işlevleri ve yeni özellikler sunuyoruz.

CSS ve renk artık şunları yapabilir: - Kullanıcının ekran donanımının geniş gam HDR renkleri destekleyip desteklemediğini 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. - HDR renkleri Oklab, Oklch, HWB, Display P3, Rec.2020, XYZ ve daha fazlasında belirtin. - HDR renklerle gradyanlar oluşturma, - Alternatif renk alanlarında gradyanların ara değerlerini hesaplama. - color-mix() ile renkleri karıştırın. - Göreli renk söz dizimini kullanarak 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 ekleyebilirsiniz. Tüm bunları istediğiniz renk alanında yapabilirsiniz. Bu, hem temel bir renk özelliği hem de gelişmiş bir renk özelliğidir.

color-mix() değerini, gradyanda bir an olarak düşünebilirsiniz. Gradyan, maviden beyaza geçiş için gereken tüm adımları gösterirken color-mix() yalnızca bir adımı gösterir. Renk alanlarını dikkate almaya başladığınızda ve renk alanı karıştırmanın sonuçlara ne kadar farklı etki edebileceğini öğrendiğinizde işler biraz daha karmaşık hale gelir.

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

Göreli renk söz dizimi

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

RCS, bir renk üzerinde göreceli ve mutlak işlemler yapmanıza olanak tanır. Göreceli değişiklik, doygunluk veya açıklığın mevcut değerini alıp calc() ile değiştirdiğiniz bir değişikliktir. Mutlak değişiklik, bir kanal değerini tamamen yeni bir değerle değiştirdiğiniz değişikliktir (ör. opaklığı %50'ye ayarlama). Bu söz dizimi, tema oluşturma, tam zamanında varyantlar ve daha fazlası için anlamlı araçlar sağlar.

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

Boyut kapsayıcı sorguları

CSS stilleri uygulamak için görüntü alanının genel boyut bilgilerini kullanmak yerine kapsayıcı sorguları, sayfadaki bir üst öğenin sorgulanmasını destekler. Bu, bileşenlerin birden fazla düzende ve birden fazla görünümde dinamik bir şekilde biçimlendirilebileceği anlamına gelir. Boyut için konteyner sorguları bu yı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 kapsayıcıyı ayarlayın ve ardından, medya sorgusuna benzer şekilde, stilleri uygulamak için boyut parametreleriyle birlikte @container kullanın. Kapsayıcı sorgularının yanı sıra kapsayıcı sorgu boyutlarını da alırsınız. Aşağıdaki demoda, kart başlığının boyutunu belirlemek için kapsayıcı sorgu boyutu cqi (satır içi kapsayıcının boyutunu temsil eder) kullanılır.

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

Stil kapsayıcı sorguları

Stil sorguları, Chrome 111'de kısmi olarak kullanıma sunuldu. Şu anda stil sorgularında, @container style() kullanırken bir üst öğedeki özel özelliklerin değerini sorgulayabilirsiniz. Örneğin, özel bir mülk değerinin olup olmadığını veya @container style(--rain: true) gibi belirli bir değere ayarlanıp ayarlanmadığını sorgulayabilirsiniz.

Stil sorgusunun ekran görüntüsü

Stil sorgusu demosu

Bu, CSS'de sınıf adlarını kullanmaya benzer olsa da stil sorgularının bazı avantajları vardır. Bunlardan ilki, stil sorgularıyla CSS'deki değeri, sözde durumlar için gerektiği gibi güncelleyebilmenizdir. Ayrıca, uygulamanın gelecekteki sürümlerinde, uygulanan stili (ör. style(60 <= --weather <= 70)) ve mülk-değer çiftlerine dayalı stili (ör. style(font-style: italic)) belirlemek için değer aralıklarını sorgulayabileceksiniz.

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

:has() seçici

Geliştiriciler yaklaşık 20 yıldır CSS'de "ana seçici" isteğinde bulunuyordu. Chrome 105'te kullanıma sunulan :has() seçici sayesinde artık bu mümkün. Örneğin, .card:has(img.hero) kullanıldığında alt öğesi olarak hero resmi olan .card öğeleri seçilir.

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

:has() Canlı Demo

:has(), bağımsız değişkeni olarak göreli bir seçici listesi kabul ettiğinden, üst öğeden çok daha fazlasını seçebilirsiniz. Çeşitli CSS birleştiricileri kullanarak yalnızca DOM ağacında yukarı çıkmakla kalmaz, aynı zamanda yatay seçimler de yapabilirsiniz. Örneğin, li:has(+ li:hover), 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ızı sağlar. Bu özellik, farklı cihazların özellikleriyle ilgili fast, slow veya none değerini bildirebilir.

Tasarımını yaptığınız cihazların çoğunun yenileme hızı yüksektir. Masaüstü bilgisayarlar ve çoğu mobil cihaz bu kapsamdadır. E-okuyucular ve düşük güçlü ödeme sistemleri gibi cihazların yenileme hızı yavaş olabilir. Cihazın animasyonu veya sık güncellemeleri kaldıramadığını bilmek, pil kullanımından veya hatalı görüntü güncellemelerinden tasarruf edebileceğiniz anlamına gelir.

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

Medya sorgusu komut dosyası

JavaScript'in kullanılabilir olup olmadığını kontrol etmek için komut dosyası medya sorgusu kullanılabilir. Bu, aşamalı iyileştirme için çok iyidir. Bu medya sorgusundan önce, JavaScript'in kullanılıp kullanılamadığını algılamak için HTML'ye bir nojs sınıfı yerleştirip JavaScript ile kaldırma stratejisi uygulanıyordu. CSS artık JavaScript'i algılayıp buna göre ayarlama yapabileceğinden bu komut dosyaları kaldırılabilir.

Chrome Geliştirici Araçları aracılığıyla bir sayfada JavaScript'i test için etkinleştirmeyi ve devre dışı bırakmayı buradan öğrenebilirsiniz.

Bir web sitesinde tema geçişini düşünün. JavaScript kullanılamadığından komut dosyası medya sorgusu, geçişin sistem tercihine göre yapılmasına yardımcı olabilir. Alternatif olarak bir anahtar bileşeni de kullanabilirsiniz. JavaScript kullanılabilir durumdaysa anahtar, yalnızca açma/kapatma düğmesi olarak değil, hareketle kaydırılarak da kullanılabilir. Komut dosyası kullanılabilir durumdaysa kullanıcı deneyimini iyileştirmek için birçok harika fırsattan yararlanabilir, komut dosyası devre dışıysa anlamlı bir temel deneyim sunabilirsiniz.

Komut dosyası hakkında daha fazla bilgi edinin.

Düşük şeffaflık medya sorgusu