Yılın ikinci yarısına yaklaşırken Interop 2024'ün bu yıl web birlikte çalışabilirliğini nasıl iyileştirdiğini incelemenin tam zamanı.
Başladığımız yer
Yılın başında Chrome'un deneysel tarayıcı desteği puanı 83 idi.
Bugün bu puan 90'a yükseldi. Haziran ayında Chrome 126'nın kullanıma sunulmasıyla birlikte kararlı tarayıcılar için puan 85 oldu. Deneysel birlikte çalışabilirlik puanı 10 puan arttı. Bu gönderide, bu puana katkıda bulunan özelliklerden bazıları paylaşılmaktadır.
Pop-up
Popover, Nisan 2024'te Baseline Yeni Kullanıma Sunulanlar'ın bir parçası oldu. Popover'lar, oluşturmanız gereken kullanıcı arayüzü özelliklerinin çoğu (ör. menüler, ipuçları, seçim yapmanızı sağlayan yer paylaşımları ve eğitim amaçlı kullanıcı arayüzleri) popover türleri olduğu için heyecan vericidir. Popover'dan önce bu özelliklerden herhangi birini oluşturmak çok fazla özel kod gerektiriyordu. Birden fazla öğenin aynı anda açık olmadığından emin olmak veya kullanıcı öğenin dışında bir yeri tıkladığında ışığı kapatmayı etkinleştirmek için kullanılan kod. Bir kullanıcı arayüzü öğesinin arayüzün geri kalanının üzerinde kalmasını sağlamak için z-index
ile de uğraşmış olabilirsiniz.
Bu özelliklerin tümü ve daha fazlası Pop-up API'ye dahildir. Bu API, geliştirme süresini kısaltarak daha yüksek performanslı ve erişilebilir arayüzler oluşturmanıza yardımcı olur. Örneğin, aşağıdaki kod, hafif kapatma özelliğine sahip bir pop-up oluşturur. Bu pop-up, açıldığında diğer pop-up'ları otomatik olarak kapatır.
<button popovertarget="my-popover">Open Popover</button>
<div id="my-popover" popover>
<p>I am a popover with more information. Hit <kbd>esc</kbd> or click away to close me.</p>
</div>
Daha fazla bilgi için Pop-up API, Temel'e eklendi başlıklı makaleyi inceleyin. Birçok uygulama, Popover'ın avantajlarından yararlanmaya başladı. Tokopedia, bu özellikten yararlanarak ve desteklemeyen tarayıcılar için çoklu doldurma kullanarak React kod miktarını önemli ölçüde azaltmayı başardı.
@property
ile gelişmiş özel mülkler
@property
CSS kuralı, standart özel mülklerde bulunan ad ve değerden çok daha fazla ayrıntı içeren gelişmiş özel mülkler oluşturmanıza olanak tanır.
Bu mülkün ne tür verileri (ör. renk, sayı veya uzunluk) içerdiğini tanımlamak için izin verilen söz dizimini ayarlayın. Ardından, özelliğin devralınıp devralınmayacağını ve başlangıç değerini ayarlayın.
@property --myColor {
syntax: '<color>';
inherits: false;
initial-value: hotpink;
}
@property
kuralı şu anda Firefox'un deneysel puanını iyileştiriyor. Bu sayede, Firefox 128 bu ayın ilerleyen günlerinde kullanıma sunulduğunda kararlı puan da yükselecek. Ayrıca, yeni kullanıma sunulan temel modele de katılır.
Daha fazla bilgi için @property: CSS değişkenlerine süper güçler verme başlıklı makaleyi inceleyin.
font-size-adjust
mülkü
CSS font-size-adjust
mülkü, küçük harflerin boyutunu büyük harflerin boyutuna göre değiştirmenize olanak tanır. Bu, yazı tipi yedeği kullanılabilecek durumlarda yedek yazı tipinin özellikle küçük yazı tipi boyutlarında okunaklı kalmasını sağlar.
font-size-adjust
mülkü şu anda Chrome için deneysel puana dahildir ancak bu ay Chrome 127 ile birlikte yayınlandığında kararlı puanı artıracaktır. Ayrıca, yeni kullanıma sunulan temel modele de eklenir.
text-wrap: balance
text-wrap: balance
kullanıldığında tarayıcı, metin için en dengeli satır sarma işlemini belirler. Özellikle başlıklar için yararlıdır. Örneğin, başlığın ikinci satırda tek bir kelimeye sarmalanması önlenir.
Bu özellik yakın zamanda Safari tarafından desteklenmeye başladı. Diğer tarayıcılar da bu özelliğin tüm tarayıcılarda sorunsuz çalışması için başarısız testleri düzeltmeye çalışıyor.
Bu önemli özelliklerin birlikte çalışabilir hale getirilmesinin yanı sıra birçok iyileştirme de yapıldı. Geçen her test, karşılaşmayacağınız bir birlikte çalışabilirlik sorununu temsil eder. Yıl sonuna kadar% 100'e ne kadar yaklaşabileceğimizi görmek için sabırsızlanıyoruz.