Google I/O'da, geçen yıl I/O'da yaptığımız duyurudan bu yana Baseline'ın nasıl değiştiğiyle ilgili haberler paylaştım. Ayrıca Web Platformu Kontrol Paneli'ni, RUM Arşivi ile entegrasyonları ve yakında RUMvision ile olan entegrasyonu da duyurdum. Bu gönderide, konuşmadaki tüm kaynakları tek bir yerde bulabilirsiniz.
Web Platformu Kontrol Paneli, web platformunun tamamını ve her bir özelliğin birlikte çalışabilirliğe ve Temel'in bir parçası olmaya giden yolculuğunu görmenin heyecan verici yeni bir yoludur. Web Platformu Kontrol Paneli Duyurusu bölümünde bu konu hakkında daha fazla bilgi edinebilirsiniz.
Baseline'ı her gün kullandığınız araçlarla entegre etmek bu projenin vizyonunun daima bir parçası olmuştur. Tarayıcı uyumluluğuyla ilgilenmek, üzerinde çok fazla düşünmek zorunda kalmayacağınız bir şey yapmak istiyoruz. RUM Arşivi entegrasyonu hakkında daha fazla bilgi edinin ve yakında daha fazla araç sağlayıcısıyla ilgili haberler için bu sayfayı takip edin.
Referans Değerde Yeni
I/O'da, yakın zamanda Temel Yeni Kullanıma Sunulabilir programının bir parçası haline gelen 12 web platformu özelliğini paylaştım. Bu özellikler artık Chrome, Edge, Firefox ve Safari'de kullanılabilir ve geliştirme sürecini kolaylaştırabilecek küçük eklemelerden container sorguları ve :has() gibi geliştiricilerin en çok istediği özelliklere kadar çeşitlilik gösterir.
Boyut kapsayıcı sorguları
Boyut kapsayıcı sorguları, yalnızca medya sorgularıyla görüntü alanının boyutunu hedeflemek yerine, tasarımınızı bir kapsayıcının genişliğine veya satır içi boyutuna göre değiştirmenize olanak tanır. Böylece, bir düzene yerleştirildiklerinde kendilerini kullanılabilir alana göre değiştirebilen daha fazla yeniden kullanılabilir bileşen sağlanır. Duyarlı tasarım kavramı var olduğu sürece bu uygulamalar en çok aranan özellikler listesinin en başında yer alıyordu.
- Bu özellik Şubat 2023'te kullanıma sunulacaktır.
- Ağustos 2025'te yaygın olarak kullanıma sunulacaktır.
Kapsayıcı sorguları kararlı tarayıcılara ulaşır bölümünde MDN'deki container sorguları hakkında daha fazla bilgi edinin ve container sorguları örnek olaylarını inceleyerek diğer geliştirme ekiplerinin bunlardan nasıl yararlandığını keşfedin.
:has() seçici
:has() seçici, geliştiricilerin yıllardır en çok istekte bulunduğu bir özelliği bize sunuyor. Üst seçici, içinde ne olduğuna göre bir öğeyi seçmenin bir yolu olarak karşımıza çıkıyor. Fakat :has() sadece bundan çok daha fazlasını ifade eder.
Kapsayıcı sorgularında olduğu gibi, bu yöntem, yeniden kullanılabilir bileşenler oluştururken sunduğu içeriğe uyum sağlayabilen tek bir bileşen oluşturabileceğiniz için son derece faydalıdır.
- Bu yeni özellik, Aralık 2023'te kullanıma sunulmuştur.
- Haziran 2026'da yaygın olarak kullanıma sunulacaktır.
:has() MDN hakkında daha fazla bilgiyi :has() aile seçici bölümünde ve :has() örnek olay bölümünde bulabilirsiniz.
CSS ızgara düzeni alt ızgarası
Alt ızgara, iç içe yerleştirilmiş ızgara düzeninin kanalları üst öğesinden devralabilmesini sağlar. İç içe yerleştirilmiş ızgaralardaki öğelerin daha iyi hizalanmasını sağlar.
- Bu yeni özellik, Aralık 2023'te kullanıma sunulmuştur.
- Haziran 2026'da yaygın olarak kullanıma sunulacaktır.
MDN'deki alt ızgara ve çok sayıda başka kaynağa bağlanan CSS alt ızgarası hakkında daha fazla bilgi edinin.
CSS İç İçe Yerleştirme
Son yıllarda CSS, geliştiricilerin Sass gibi ön işlemcilerde kullandıkları özelliklerden ilham almıştır. Örneğin, genellikle CSS değişkenleri olarak bilinen CSS Özel Özellikleri, renkler gibi değişkenlerin tek bir yerde ayarlanmasına ve CSS'nizin tamamında kullanılmasına olanak tanıyan ve daha önce yalnızca bir ön işlemci kullanılırken kullanılabilen bir özellik.
Ön işlemcilerin bir başka özelliği de İç İçe Yerleştirme'dir. İç içe yerleştirmek, seçicilerin tekrarlanmasını önler ve CSS'nin okunabilirliğine yardımcı olur, çünkü ilgili öğeler birlikte daha kolay gruplandırılabilir.
- Ağustos 2023'te kullanıma sunulacak
- Şubat 2026'da yaygın olarak kullanıma sunulacak
MDN'de CSS İç İçe Yerleştirme ve CSS İç İçe Yerleştirme hakkında daha fazla bilgi edinin.
HTML <search> öğesi
Arama, birçok sitede ve uygulamada görülen bir şeydir. Ancak yakın zamana kadar bir sayfada arama veya filtreleme yapmak için kullanılan işaretleme işlevi yoktu. <search> öğesi bu amaçla tasarlanmıştır. Bu, içine bir arama formu veya sonuçları filtrelemek için kullanılan başka öğeler yerleştirebileceğiniz bir öğe olarak bulunur.
- Ekim 2023'te kullanıma sunulacak
- Nisan 2026'da yaygın olarak kullanıma sunulacak
MDN'deki <search> öğesi hakkında daha fazla bilgi edinin.
Duyarlı video
Bu özellik, farklı boyutlarda resimler sunabileceğiniz şekilde farklı cihazlara uygun boyutlu videolar sunmak için bir <video> öğesinin içinde <source> öğesini kullanma olanağını ifade eder.
- Kasım 2023'te kullanıma sunulacak
- Mayıs 2026'da yaygın olarak kullanıma sunulacak
MDN hakkında daha fazla bilgiyi Medya veya Resim Kaynağı öğesi ve Duyarlı video nasıl kullanılır? bölümlerinden edinebilirsiniz.
inert özelliği
Bir öğe durağan olduğunda onunla etkileşime geçilemez. Örneğin, bir iletişim kutusu penceresi açılırken iletişim kutusunun arkasındaki sayfada bulunan öğeler tıklanamaz veya sekmeye yerleştirilemez. Asal özelliği, kullanıcı arayüzünüzün herhangi bir bölümündeki hareketsizliği kontrol edebilmenizi sağlar.
Bir öğeye inert özelliği uygulandığında, öğe tıklanırsa öğe odaklanamazsa tıklama etkinlikleri tetiklenmez. Öğe ve içeriği, erişilebilirlik ağacından hariç tutulduğu için yardımcı teknolojilerden gizlenir.
- Nisan 2023'te kullanıma sunulacak
- Ekim 2025'te yaygın olarak kullanıma sunulacak
MDN'de inert ve ayrıca The inert özelliği hakkında daha fazla bilgi edinin.
color-mix() işlevi
color-mix() işlevi, mevcut herhangi bir renk alanında bir rengin başka bir renkle karıştırılabilmesini sağlar. Buna, yakın zamanda Baseline Yeni Kullanılabilirlik kapsamına giren tüm yeni renk modelleri (LCH, Lab, OKLCH ve OKLab) dahildir.
- Nisan 2023'te kullanıma sunulacak
- Ekim 2025'te yaygın olarak kullanıma sunulacak
MDN'de color-mix() ve CSS renk-mix() işlevi hakkında daha fazla bilgi edinin.
Ayrıca, CSS'de sunulan tüm yeni renk modellerini içeren çok büyük bir Yüksek tanımlı CSS renk rehberimiz de bulunmaktadır. Ayrıca, bu yeni renklerle oynamak ve güzel renk geçişleri oluşturmak için gradient.style'a göz atın.
:user-valid ve :user-invalid
:valid ve :invalid sözde sınıfları, tarayıcılarda yaygın bir şekilde kullanılabilir ve bir form öğesinin içine yerleştirilmiş herhangi bir kısıtlama kuralına göre geçerli olup olmadığını veya geçersiz olup olmadığını belirtir. Bu nedenle, e-posta türünde bir alanınız varsa ve bir ad içeriyorsa :invalid sözde sınıfı bu alanı seçer ve düzeltilmesi gerektiğini göstermek için bir renk veya simge ekleyebilirsiniz.
:valid ve :invalid sözde sınıflarıyla ilgili sorun, bu sınıfların kullanıcı bir formla etkileşime geçmeden önce uygulanmasıdır. Bu nedenle, bir form öğesi gerekliyse ve kullanıcı bu öğeyi henüz tamamlamamışsa geçersiz stiliniz gösterilir. Genellikle geçersiz stillerin yalnızca bir kullanıcı yanlış bir şey girdikten veya bir alanı atlayıp boş bıraktığında göstermek istersiniz.
Bu durumda kullanıcı deneyimini iyileştirmek için :user-valid ve :user-invalid sanal sınıflarını kullanın. Bunlar, yalnızca bir kullanıcı alanla etkileşimde bulunduktan sonra
eşleşmeleri dışında, hemen hemen aynı şekilde davranırlar. Dolayısıyla, zorunlu alan örneğinde, alanda geçersiz durumun gösterilmesi için, kullanıcının sekmeyle giriş yapmış olması veya alanı tıklamış olması ve ardından, tamamlamadan uzaklaşması gerekir.
- Ekim 2023'te kullanıma sunulacak
- Nisan 2026'da yaygın olarak kullanıma sunulacak
MDN'de :user-valid ve :user-invalid hakkında daha fazla bilgi edinin.
Sıkıştırma Akışları
Birçok web uygulamasının, kullanıcıya zip dosyası gibi sıkıştırılmış bir biçimde indirme sağlaması gerekir. Eskiden bu, uygulamanın bir sıkıştırma kitaplığı içermesini gerektiriyordu. Bu kitaplık, uygulamanın tüm kullanıcılar için boyutunu büyüten bir koddu. Compion Streams API, bir veri akışını sıkıştırmak için size yerleşik bir yol sunar.
- Mayıs 2023'te kullanıma sunulacak
- Kasım 2025'te yaygın olarak kullanıma sunulacak
MDN'de Sıkıştırma Akışları API'si ve Sıkıştırma Akışları artık tüm tarayıcılarda destekleniyor konularında daha fazla bilgi edinin.
Bildirim Temelli Gölge DOM
Bildirim Temelli Gölge DOM, HTML'den gölge ağaç oluşturmanın yeni bir yoludur. Eskiden yalnızca attachShadow() kullanarak JavaScript'ten bir gölge ağacı oluşturabiliyordunuz. Bu işlemi HTML'den yapabilmek, e-posta istemcisi gibi JavaScript'in çalışmayabileceği ortamlarda özellikle faydalıdır. Bu, sunucu tarafında oluşturulan web bileşenleri için de önemlidir.
- Şubat 2024'te kullanıma sunulacak
- Ağustos 2026'da yaygın olarak kullanıma sunulacak
Bildirimsel Gölge DOM hakkında daha fazla bilgi edinin.
Popover API'si
Pop-up'lar web uygulamalarımızda birçok farklı görev için kullanılmaktadır. Örneğin, menüler, özel durum mesajı bildirimleri ve içerik seçiciler. The Popover API ile bu pop-up'ları dekoratif bir şekilde oluşturmanın yerleşik bir yolu var.
- Nisan 2024'te kullanıma sunulacak
- Ekim 2026'da yaygın olarak kullanıma sunulacak
MDN'de Popover API, Popover API'nin Baseline'a gelmesi ve Popover örnek olayları hakkında daha fazla bilgi edinin.
Bu 12 özellik, Temel Yeni Kullanılabilirlik'te yer alan özelliklerden yalnızca birkaçıdır. Bu sitede daha fazlasını keşfedebilirsiniz. Temel 2023'te yer alan tüm özellikleri ve Referans 2024'te yer alan ve giderek büyüyen özellik koleksiyonunu keşfedin.