Śródroczna aktualizacja Interoperacyjności z 2024 r.

Rachel Andrew

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.

.

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.