Geçen yılın sonunda, Interop 2023 sona erdi. Tarayıcı tedarikçileri ve diğer tarafların bu çalışması, tarayıcılar arasında size engel olan daha az farkın olduğu, birlikte çalışabilirliği daha yüksek bir web oluşturmayı amaçlamaktadır. Bu yayında, nihai sonuçlarla birlikte Chrome ekibinin favori özelliklerinden bazıları da paylaşılmaktadır.
Son skorlar
Bu kadar fazla yeşil görmek harika. Bunu 2023'ün başlarındaki skorlarla karşılaştırmak çok güzel. Her tarayıcının puanında muazzam bir artış gördüğü halde epey yol katettik.
Sizi neler heyecanlandırıyor?
Interop 2023 Kontrol Paneli'nde 2023'te odaklanılacak alanların tam listesini bulabilirsiniz. :has(), kapsayıcı sorguları ve inert özelliği gibi bazı odak alanları bir özelliğin tamamını kapsıyordu. Diğerlerinde, örneğin Flexbox'taki çalışmada, mevcut bir tarayıcılar arası özellikteki bazı hafif test hataları ele alındı.
:has()
"Sonunda CSS için bir üst seçici. Neredeyse ilk günden bu yana talep edilen bir özellikti, sonunda da bu özelliğin tüm tarayıcılarda bulunması muhteşem bir özellik ve geliştiricilerin bu seçicinin emülasyonu için daha az JavaScript çalıştırması gerektiği anlamına geliyor."—Thomas Steiner, Geliştirici İlişkileri Mühendisi, Chrome.
İşlevsel sanal sınıf :has(), platforma geliştiricilerden önemli bir istek getirdiği için çok heyecanlı oldu. Size bir üst seçici sunar. Öğeleri, içindeki unsurlara göre seçebilirsiniz. Ancak çok daha fazlası için kullanılabilir. CSS tarafından sarmalanmış bölümünde açıklandığı gibi, bir üst öğeden çok daha fazlasını seçebilir, hatta yan yana seçimler bile yapabilirsiniz.
:has() demosu: YuvaChrome ekibinde Geliştirici İlişkileri Mühendisi olan Una Kravets şu açıklamaları yapıyor:
":has() seçici, yeni sunulan en esnek ve en güçlü CSS özelliklerinden biridir. Bununla, varlığına, durumuna ve hatta alt öğelerin sayısına göre herhangi bir üst öğenin stilini belirleyebilirsiniz. Ancak dahası, bu öğeleri diğer kombinasyonlarla bir araya getirerek kardeş öğelerin stilini belirleyebilir ve kullanıcı arayüzünüz üzerinde gerçekten yeni bir stil kontrolü elde edebilirsiniz. Bu çok esnek bir özelliktir. Şimdiye kadar :has() gücünden yararlanırken ek komut dosyası çalıştırma ihtiyacını azaltan harika demolar gördüm."
Chrome'da yazılım mühendisi Philip Jägenstedt'in hatırlattığı gibi, 2023'te CSS'nin Durumu anketinde geliştiricilerin destek eksikliği nedeniyle en çok uğraştığı özellik :has() oldu.
Dolayısıyla, bunu kullanıma sunmaktan heyecan duyan tek kişi biz değiliz.
Una'yı Adam Argyle ile birlikte dinleyebilir, The CSS Podcast'te has() hakkında konuşabilir ve web topluluğundaki bu yayınlara göz atarak :has() hakkında daha fazla bilgi edinebilirsiniz.
- Örneklere göre CSS
:has()seçiciyi öğrenin - Kaydırmayı
:has()ile kilitleme - CSS
:has()için kullanım alanı
Kapsayıcı sorguları
2023, bir zamanlar imkansız olarak görülen şeyler için harika bir yıl oldu. Web platformu, :has() özelliğine ek olarak sonunda container sorguları için tarayıcılar arası destek de kazandı. Duyarlı tasarım kavramının ortaya çıkmasından yalnızca bir yıl sonra, 2011 yılından beri kapsayıcı (veya öğe) sorguları talep ediyorsunuz. Artık bu tarayıcı ve tüm önde gelen tarayıcı motorlarında kullanılabilir.
Una ve Adam CSS Podcast'te kapsayıcı sorguları üzerine konuştular ve Una bu sorguları, Tarayıcıda Tasarım'ın bir bölümünde tanıttı. Topluluk da birçok ipucu ve fikir paylaşıyor.
Alt ızgara
Interop 2023'te en çok Subgrid'i kullanmayı seviyorum. Bu özellik, bir üst öğede ızgara tanımlayabilmenizi ve ardından bu ana tablonun içine yerleştirilmiş ızgaralarda bu üst öğede tanımlanan kanal boyutlarını kullanabilmenizi sağlar. Microsoft Edge'in web platformu mühendislerinin çalışmaları sayesinde subgrid 2023 yılında tüm büyük tarayıcı motorlarında kullanıma sunuldu. Böylece Chrome'un puanını artırabilirsiniz ve bu heyecan verici özelliği herkesin kullanımına sunduk.
Chrome Geliştirici İlişkileri Mühendisi Adriana Jara, ızgara ve alt ızgaranın mükemmel bir kullanıcı arayüzü oluşturmayı nasıl kolaylaştırdığını anlattı.
"Görseller, sayfa düzenleri, tutarlı görünüm ve ekranlara uyum sağlama konusunda çok kötüyüm. Ancak ızgara ve alt ızgara sayesinde, birden fazla ekran boyutunda çalışan ve içeriğe otomatik olarak uyum sağlayan bir tasarım oluşturmak mümkün. Benim favorim çünkü çok fazla uzmanlığa gerek olmadan kullanıcılara iyi bir deneyim sunan bir web sitesi oluşturma gibi temel bir ihtiyacı ele alıyor."
12 Days of Web ile ilgili bir makalede alt ızgarayla ilgili bazı kullanım alanları yazdım. Bu yayındaki diğer özelliklerde olduğu gibi, CSS podcast bölümlerini dinlemenizi öneririz. Ayrıca web'de pek çok kaynak bulabilirsiniz.
- CSS alt ızgarasını öğrenin
- Video: Alt ızgarayla kolay ve daha tutarlı düzenler
- CSS tablosu ve alt ızgarayla içerik yerleştirme
Renk alanları ve işlevler
Chrome CSS geliştiricisi Adam Argyle'ın renk alanları ve işlevlerin en sevdiği özellik olduğunu söylemesi şaşırtıcı değildi.
"Elveda garip HSL kanal değeri değişkeni matematik. Merhaba tam zamanında renk varyantı tek satırlı kalemleri. Yeni renk alanları ve işlevleri renk iş akışı sorunlarını çözmenin yanı sıra daha gelişmiş, güvenilir ve canlı renklere ve renk geçişlerine erişim sağlar. Bazı yeteneklerin kilidini açarken aynı zamanda hayatınızı kolaylaştırırken hoşunuza gitmeyecek bir şey var. Birlikte çalışacağı bu baharatla lezzetlendirdiğinizde bu yemek rengarenk bir tattır."
Adam, Yüksek Çözünürlüklü CSS Renk Rehberi ve gradient.style gibi yeni özellikleri anlamanıza yardımcı olacak muhteşem içerikler oluşturuyor ve CSS Podcast'indeki renk işlevlerinden bahsediyor.
Bu özelliklerin önde gelen tüm tarayıcı motorlarında kullanılabilmesi heyecan vericidir. Daha fazla bilgiyi bu harika makalelerde bulabilirsiniz.
Interop 2024'ü sabırsızlıkla bekliyorum
Özellikler birlikte çalışabilir hale geldikten sonra, yeni kullanıma sunulan Referans Değer'in bir parçası haline gelirler. Interop 2023'te yer alan herkesin büyük çabaları nedeniyle 2023'te bu gruba giren yeni özelliklerin sayısını görmek heyecan verici. 2024 için seçilen odak alanlarını çok yakında duyuracağız ve web platformunun bu yıl ne kadar daha iyi hale geleceğini görmek için sabırsızlanıyoruz.