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.
![Skorları gösteren kontrol paneli: 65, İncelemeler: 0, Chrome Canary: 83, Edge Dev: 82, Firefox Gece: 80, Safari Teknoloji Önizlemesi: 79.](https://web.dev/static/blog/interop-2024-midyear/image/interop-feb.png?hl=tr)
![Puan sistemi: 75, İncelemeler: 5, Chrome Canary: 90, Edge Dev: 89, Firefox Gece: 87, Safari Teknoloji Önizlemesi: 88.](https://web.dev/static/blog/interop-2024-midyear/image/interop-june.png?hl=tr)
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>
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.
@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.
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.
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.