W drugiej połowie roku warto zastanowić się, jak W tym roku narzędzie Interop 2024 usprawniło interoperacyjność stron internetowych.
Od czego zacząć
Na początku roku Eksperymentalna ocena obsługi przeglądarki Chrome wyniosła 83.
![Panel z wynikami: interpunkcja: 65, Analiza zagrożeń: 0, Chrome Canary: 83, Edge Dev: 82, Firefox Nightly: 80, Safari Technology Preview: 79.](https://web.dev/static/blog/interop-2024-midyear/image/interop-feb.png?hl=pl)
![Panel z wynikami: interwał 75, Analiza zagrożeń: 5, Chrome Canary: 90, Edge Dev: 89, Firefox Nightly: 87, Safari Technology Preview: 88.](https://web.dev/static/blog/interop-2024-midyear/image/interop-june.png?hl=pl)
Dziś wynik to 90, a wynik dla stabilnych przeglądarek to 85 według Chrome 126 w czerwcu. Ogólny wynik interoperacyjności eksperymentalnej wzrósł 10 punktów. Ten post przedstawia niektóre funkcje, które przyczyniły się taki wynik.
Wyskakujące okienko
W kwietniu 2024 r. platforma Popover stała się częścią usługi Baseline z nowością dostępną w kwietniu 2024 r. Wyskakujące okienko:
ponieważ jest wiele funkcji interfejsu, które trzeba opracować, na przykład
np. menu, etykietki, nakładki do wybierania opcji czy interfejsy nauczania.
. Przed pojawieniem się wyskakującego okienka, utworzenie którejkolwiek z tych funkcji wymagało wykonania wielu
w kodzie. Kod, aby zagwarantować, że nie było jednocześnie otwartych wielu elementów, lub włączyć
zamknięcie, gdy użytkownik kliknie poza elementem. Możesz też mieć
z problemami z z-index
, aby mieć pewność, że jeden element interfejsu będzie się wyświetlać nad pozostałą częścią
do interfejsu.
Wszystkie te i inne funkcje są uwzględnione w Popover API oszczędność czasu programowania, oraz w tworzeniu wydajniejszych i bardziej przystępnych interfejsów. Dla: na przykład poniższy kod tworzy okno podręczne z oświetleniem, które pozwala automatycznie zamykaj inne wyskakujące okienka po ich otwarciu.
<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>
Więcej informacji znajdziesz w artykule Popover API trafia do punktu odniesienia. Wiele Aplikacje już dostrzegają zalety Popovera. Tokopedii udało się znacznie zmniejszyć ilość kodu React. korzystając z tej funkcji i używając kodu polyfill w nieobsługiwanych przeglądarkach.
Zaawansowane właściwości niestandardowe z funkcją @property
Reguła CSS @property
umożliwia tworzenie zaawansowanych właściwości niestandardowych,
więcej szczegółów niż nazwa i wartość dostępne w standardowych właściwościach niestandardowych.
Ustaw dozwoloną składnię, aby określić typ danych przechowywanych przez tę usługę –
np. kolor, liczba lub długość. Następnie określ, czy właściwość
oraz wartość początkową.
@property --myColor {
syntax: '<color>';
inherits: false;
initial-value: hotpink;
}
Reguła @property
poprawia obecnie wynik eksperymentu dla przeglądarki Firefox,
poprawiając wynik stabilny, gdy Firefox 128 zostanie wysłany pod koniec tego miesiąca. Dołącza też
Punkt odniesienia – nowy.
Więcej informacji znajdziesz w artykule @property: supermoce zmiennych CSS.
Właściwość font-size-adjust
Właściwość CSS font-size-adjust
umożliwia zmianę rozmiaru małych liter
w odniesieniu do wielkości wielkich liter. Jest to przydatne w sytuacjach,
gdzie może pojawić się kreacja zastępcza.
Pomaga to zagwarantować, że czcionka zastępcza będzie wciąż
być czytelne, zwłaszcza przy małym rozmiarze czcionki.
Właściwość font-size-adjust
jest obecnie uwzględniona w wyniku eksperymentu
dla Chrome, ale poprawi on wynik stabilny po udostępnieniu
Chrome 127 w tym miesiącu. Dołącza też do grupy bazowej z nowością dostępną.
text-wrap: saldo
Użycie text-wrap: balance
informuje przeglądarkę, że ma określić najlepszy zrównoważony
zawijanie wierszy w tekście. Jest to szczególnie przydatne w przypadku nagłówków,
np. zawijanie nagłówka do pojedynczego słowa w drugim wierszu.
Ta funkcja jest obecnie obsługiwana w Safari, a inne przeglądarki pracują nad rozwiązaniem tego problemu niezakończonych testów, które pozwolą upewnić się, że ta funkcja działa dobrze we wszystkich przeglądarkach.
Oprócz tych głównych funkcji współdziałają one także wprowadzono ulepszenia. Każdy zaliczony test oznacza którego nie napotkasz. Cieszymy się, że udało nam się może osiągnąć 100-procentowy wynik przed końcem roku.