Interop 2024 yıl ortası güncellemesi

Rachel Andrew

Yılın ikinci yarısına yaklaşırken, satış ve pazarlama Interop 2024 bu yıl web birlikte çalışabilirliğini iyileştirdi.

Nereden başladık?

Yılın başında, Chrome'un deneysel tarayıcı destek puanı 83'tür.

Şubat 2024'teki Interop 2024 Kontrol Paneli.

ziyaret edin.

Haziran 2024'ün sonundaki 2024 birlikte çalışabilirlik kontrol paneli.

Bugün bu puan 90 ve en son . Deneysel birlikte çalışabilirlik puanı genel olarak arttı 10 puan verebilirsiniz. Bu yayında, katkıda bulunan özelliklerden bazıları o puandır.

Pop-up

Popover, Nisan 2024'te Temel Yeni Kullanılabilir'in bir parçası oldu. Pop-up pencere çünkü oluşturmanız gereken çok sayıda kullanıcı arayüzü özelliği (örneğin, menüler, ipuçları, seçim yapmak için yer paylaşımları ve eğitim kullanıcı arayüzleri, pop-up'ı tıklayın. Pop-over'dan önce, bu özelliklerden herhangi birini oluşturmak pek çok özel girin. Birden fazla öğenin aynı anda açık olmadığından emin olmak veya kullanıcı öğenin dışına tıkladığında ışık kapanması. Ayrıca z-index ile zorlandık. Bu sayede, bir kullanıcı arayüzü öğesinin hoşuma gidiyor.

Tüm bu özellikler ve daha fazlası, Popover API, zamandan tasarruf ederek ve daha iyi performans gösteren erişilebilir arayüzler oluşturulmasına yardımcı olmak. Örneğin, aşağıdaki kod ışıklı bir pop-up oluşturur, bu da açıldığında diğer pop-up'ları otomatik olarak kapat.

<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>

Tarayıcı Desteği

• . 114
• . 114
• . 125
• . 17

Kaynak

Popover API alanları Baseline bölümünden daha fazla bilgi edinebilirsiniz. Birçok başvurular şimdiden Popover'ın avantajlarını görmeye başladı. Tokopedia, React kodu miktarını önemli ölçüde azaltmayı başardı ve desteklenmeyen tarayıcılar için bir çoklu dolgu kullanarak özellikten yararlanın.

@property ile gelişmiş özel özellikler

@property CSS kuralı, aşağıdakileri içeren gelişmiş özel özellikler oluşturmanıza olanak tanır: daha fazla ayrıntı içerir. Bu mülkün ne tür veriler barındırdığını tanımlamak için izin verilen söz dizimini belirleyin. örnek renk, sayı veya uzunluk olabilir. Ardından, mülkün bir başlangıç değeri ekleyin.

@property --myColor {
  syntax: '<color>';
  inherits: false;
  initial-value: hotpink;
}

@property kuralı şu anda Firefox için deneysel puanı iyileştiriyor. bu ayın sonlarına doğru Firefox 128 kullanıma sunulduğunda istikrarlı puanı artırdık. Ayrıca Referans Değer Yeni Kullanıma Sunuldu.

Tarayıcı Desteği

• . 85
• . 85
• . 128)
• . 16,4

Kaynak

@property: CSS değişkenlerine süper güçler verme bölümünden daha fazla bilgi edinebilirsiniz.

font-size-adjust mülkü

CSS font-size-adjust özelliği, küçük resimlerin boyutunu değiştirmenize olanak tanır. büyük harf boyutuna göre değişir. Bu, bazı durumlarda Böylece, yedek yazı tipinin hâlâ bozulmadığından emin olarak yazı tipi boyutuyla okunabilir hale getirebilirsiniz.

font-size-adjust özelliği şu anda deneysel puana dahil yeni bir sürüm çıktığında kararlı skoru yükseltecektir. hakkında daha fazla bilgi edinin. Ayrıca, Baseline Yeni Kullanılabilir'e de katılıyor.

Tarayıcı Desteği

• . 127
• . 127
• . 3
• . 16,4

Kaynak

text-shift: "denge"

text-wrap: balance kullanmak, tarayıcıya en iyi dengeliyi seçmesi için talimat verir metin için satır kaydırma. Özellikle başlıkların, belirli bir örneğin ikinci satırda tek bir kelimeye sarmalama.

Bu sorun yakın zamanda Safari tarafından desteklenmeye başladı ve diğer tarayıcılar bu sorunu düzeltmek için çalışıyor bu özelliğin tüm tarayıcılarda sorunsuz çalışmasını sağlamak için başarısız testler gerçekleştirin.

Tarayıcı Desteği

• . 114
• . 114
• . 121
• . 17,5

Kaynak

---

Bu temel özelliklerin birlikte çalışabilir hale gelmesine ek olarak, iyileştirme yapıldı. Başarılı olan her test bir durumu, sorun. Projenin hedefine ne kadar yıl sonuna kadar% 100 olan puana ulaşabiliriz.