HTML ve CSS'de eksik olan nedir?

Chrome Ekibi, bu yıl CSS Day konferansında büyük bir yer aldı. Katılımcıların sorularını yanıtladığımız CSS Yardım Masası'nı kurduk. Ayrıca, CSS'de eksik olduğunu düşündükleri şeyleri sorduğumuz bir beyaz tahtamız da vardı. Bu yayında, bu soruyu sormanın sonuçlarını paylaşacağım. Ayrıca, bu kısa anketi doldurarak HTML ve CSS'de eksik olduğunu düşündüğünüz şeyleri bizimle paylaşmanızı rica edeceğim. CSS Day katılımcılarıyla aynı fikirde misiniz?

Yapışkan notlarla kaplı bir beyaz tahta.
CSS Day'deki fikir panosu.

En çok istenen on özellik

Katılımcılardan fikirlerini yapışkan notlara yazıp tahtaya eklemeleri istendi. Kullanıcılar, çıkartma ekleyerek fikirler için oy da verebilir. En çok kullanılan on özellik aşağıda verilmiştir.

Stil girişleri için destek

Bu özellik, 21 oyla en çok istenen özellik oldu. Bu yaygın kullanıcı arayüzü öğelerini tutarlı bir şekilde stilize etmek istiyorsanız.

Chrome olarak, geliştiricilerin en büyük sorunlarından biri olan bu alanın farkındayız ve geliştiriciler için daha iyi çözümler oluşturmak üzere çalışmalarımızı sürdürüyoruz. Örneğin, özelleştirilebilir seçme öğeleri, yeni stil davranışını etkinleştirmenin bir yolunu sunmayı amaçlar. Ardından, resim ekleme veya seçeneklere daha ayrıntılı stil verme gibi işlemler yapabilirsiniz. Bu yaklaşımın avantajı, normal bir seçim menüsüne geri dönerek aşamalı iyileştirme yapılmasına olanak tanımasıdır.

Görsel olarak gizli

CSS Day'de 19 oy alan bu istek, en popüler ikinci istek oldu. İstek, yalnızca ekran okuyucular tarafından kullanılan içerik ekleme yöntemiyle ilgilidir. Bu, içeriğin görüntülenmediği ve yalnızca ekran okuyucu tarafından okunduğu bir HTML öğesi olabilir.

Kullanıcılar genellikle bu durumu, içeriği gizlemek ancak ekran okuyucular tarafından erişilebilir kılmak için .visually-hidden sınıfı oluşturarak çözer.

Bu özellik çok isteniyor olsa da uygulanmaması gerektiğini düşünen kullanıcılar var. Ayrıntılı bilgi için Visually hidden content is a hack that needs to be resolved, not enshrined (Görsel olarak gizlenen içerik, kutsallaştırılması değil çözülmesi gereken bir hack'tir) ve CSS WG issue 560 (CSS WG sorunu 560) hakkındaki tartışmayı inceleyin.

position: sticky inside overflow:hidden

Bu istek 16 oy aldı. Şu anda position: sticky yalnızca tüm üst öğeler overflow: visible olduğunda çalışır.

2017'den beri bu özelliği isteyen açık bir sorun var. Başlangıçta, kayan sayıları temizlemek için overflow: hidden kullanımını etkinleştirme kullanım alanı bugün daha az gerekli olsa da iş parçacığında ayrıntılı olarak açıklanan birçok başka senaryo var.

height: auto için animasyon ekle

12 oy alan height: auto animasyonunu birçok katılımcı istedi. Bu özelliğin, CSS interpolate-size özelliği ve calc-size() işleviyle web platformuna geleceğini duyurmaktan mutluluk duyuyoruz. Bu özellikler Chrome 129'dan itibaren kullanılabilecek. Bu özellikler hakkında daha fazla bilgi içeren bir gönderi yayınlayacağız.

Ek giriş türleri

HTML5, <input> öğesi için birçok farklı type="email" türü sunar. Örneğin, e-posta adresi için type="email" veya aralık kaydırıcı için type="range". CSS Day'de, bu türlerden daha fazla olması için 10 oy aldık. Örneğin, çift aralık veya özel veri listesiyle otomatik tamamlama.

CSS'de gerçek rastgele sayılar

10 oy alan bir diğer istek ise CSS'de gerçek rastgele sayılar kullanılmasıydı. Bu, geçmişte rastgele bir animation-duration için istenmiş ve geçici bir çözüm bulunmuştu.

Mixin stil sınıfları

CSS, daha önce CSS ön işlemcilerinde görülen bir dizi özellik ekledi: özel özelliklere sahip değişkenler ve artık CSS iç içe yerleştirme. Ancak yeniden kullanılabilir mixin'ler henüz dilin bir parçası olmamıştır. CSS Day katılımcılarından yedisi bu özelliği görmek istiyordu.

Bu özellik için bir spesifikasyon üzerinde çalışmaya başlamak üzere CSS Çalışma Grubu kararı alındı. Bu konudaki düşüncelerinizi ve kullanım alanlarınızı ilgili tartışmaya ekleyebilirsiniz.

Gölge DOM'daki genel stiller

Kullanım alanlarıyla ilgili büyük bir tartışma dizisine sahip olan bir diğer sorun da genel CSS stillerinin bir gölge DOM'da uygulanmasına izin verilmesi isteğidir. CSS Day'de altı kişi bu isteği dile getirdi. Bu özellik, genel sıfırlama stillerinin web bileşenlerinde de uygulanmasına ve tek CSS dosyalarının bir sitenin tüm bileşenlerinde çalışmasına olanak tanır. Bu kullanım alanları özetine göz atın ve bu özelliği kullanmak isteyip istemediğinizi bize bildirin.

Farklı birimleri bölme

Interop 2024 için bir öneri sunuldu. Bu öneride, calc(100vw / 1px) gibi karışık birimlere bölme özelliği isteniyordu. Bu özellik, Interop 2024 için çok kapsamlı olarak değerlendirildi ancak CSS Day'deki altı kişi de dahil olmak üzere birçok geliştirici bu özelliğin uygulanmasını istiyor.

nth-letter

CSS'de, içeriğin bir bölümünü span ile sarmışsınız gibi davranan bir dizi sözde öğe vardır. Örneğin, ::first-letter sözde öğesi, uygulandığı blok kapsayıcının ilk satırının ilk harfini hedefler.

Bu listede ::nth-letter eksik. Yaklaşık yirmi yıldır ::nth-letter özelliğini istediğinizi biliyoruz. Bu nedenle, web geliştiricilerin uzun süredir talep ettiği bir özellik olduğunu biliyoruz. CSS Day'de altı kişi bu özelliği istedi ve bu özellik, en çok istenen on özellikten sonuncusu oldu.

CSS Day'in ilk on listesine katılıyor musunuz?

Bu sorunlar hakkında daha geniş bir kitleye danışmak istiyoruz. Bu sorunlardan herhangi biri sizin için ilk on arasında yer alıyor mu? Yoksa CSS ve HTML'de görmek istediğiniz başka bir şey var mı? Bu kısa formu doldurarak bize bildirin. Yanıtları başka bir yayında özetleyeceğiz.