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

Wkraczamy w drugą połowę roku, więc to dobry moment, aby przyjrzeć się temu, jak Interop 2024 w tym roku poprawił interoperacyjność w internecie.

Na początku roku przeglądarka Chrome miała wynik 83 punktów w eksperymentalnej ocenie obsługi przeglądarki.

Panel z oceny: Interop: 65, Investigations: 0, Chrome Canary: 83, Edge Dev: 82, Firefox Nightly: 80, Safari Technology Preview: 79.
Panel Interop 2024 w lutym 2024 r.
Panel z ocenami: Interop: 75, Investigations: 5, Chrome Canary: 90, Edge Dev: 89, Firefox Nightly: 87, Safari Technology Preview: 88.
Panel interoperacyjności 2024 pod koniec czerwca 2024 r.

Obecnie jest to 90, a w przypadku przeglądarek stabilnych – 85 (stan na czerwiec 2021 r., w którym wydano Chrome 126). Ogólna eksperymentalna ocena interoperacyjności wzrosła o 10 punktów. W tym poście znajdziesz informacje o niektórych funkcjach, które przyczyniły się do tej oceny.

Wyskakujące okienko

W kwietniu 2024 r. okienka zostały włączone w ramach punktu odniesienia „Nowo dostępne”. Popover jest ekscytujący, ponieważ wiele funkcji interfejsu, które musisz tworzyć, takich jak menu, etykiety narzędzia, nakładki do dokonywania wyborów czy interfejsy do nauki, to rodzaje popoverów. Zanim pojawiły się wyskakujące okienka, tworzenie tych funkcji wymagało użycia dużej ilości kodu niestandardowego. Kod, który sprawdza, czy nie otwiera się jednocześnie wiele elementów, lub umożliwia wyłączenie powiadomienia, gdy użytkownik kliknie poza elementem. Możesz też mieć problemy z z-index, aby mieć pewność, że element interfejsu pozostanie na wierzchu reszty interfejsu.

Wszystkie te funkcje i wiele innych są dostępne w interfejsie Popup API, co pozwala zaoszczędzić czas poświęcany na programowanie i tworzyć wydajniejsze oraz bardziej dostępne interfejsy. Na przykład ten kod tworzy wyskakujące okienko z łatwym zamknięciem, które automatycznie zamyka inne wyskakujące okienka po 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>

Browser Support

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 125.
  • Safari: 17.

Source

Więcej informacji znajdziesz w artykule Interfejs Popup API dostępny w wersji podstawowej. Wiele aplikacji już korzysta z zalet okna wyskakującego. Firma Tokopedia była w stanie znacznie zmniejszyć ilość kodu React, korzystając z tej funkcji i używając polyfilla w przypadku przeglądarek, które jej nie obsługują.

Zaawansowane właściwości niestandardowe z użyciem @property

Reguła @property w CSS umożliwia tworzenie zaawansowanych właściwości niestandardowych, które zawierają znacznie więcej szczegółów niż nazwa i wartość dostępne w przypadku standardowych właściwości niestandardowych. Ustaw dozwoloną składnię, aby określić, jakiego typu dane zawiera ta usługa, np. kolor, liczbę lub długość. Następnie określ, czy ta właściwość ma być dziedziczona, oraz jej wartość początkową.

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

Reguła @property poprawia obecnie wynik eksperymentalny dla Firefoksa, zwiększając wynik stabilny, gdy Firefox 128 zostanie wydany pod koniec tego miesiąca. Dołączyła ona też do grupy „Nowo dostępne dane wyjściowe”.

Browser Support

  • Chrome: 85.
  • Edge: 85.
  • Firefox: 128.
  • Safari: 16.4.

Source

Więcej informacji znajdziesz w artykule @property: nadawanie supermocy zmiennym CSS.

Właściwość font-size-adjust

Właściwość CSS font-size-adjust pozwala zmienić rozmiar mniejszych liter w stosunku do rozmiaru liter wielkich. Jest to przydatne w sytuacjach, gdy może wystąpić użycie czcionki zastępczej, ponieważ pomaga to zapewnić czytelność czcionki zastępczej, zwłaszcza w przypadku małych rozmiarów czcionki.

Właściwość font-size-adjust jest obecnie uwzględniana w wyniku eksperymentalnym Chrome, ale zwiększy wynik stabilnej wersji, gdy zostanie wydana w ramach Chrome 127 w tym miesiącu. Dołączyła też do grupy „Nowo dostępne”.

Browser Support

  • Chrome: 127.
  • Edge: 127.
  • Firefox: 3.
  • Safari: 16.4.

Source

text-wrap: balance

Użycie text-wrap: balance powoduje, że przeglądarka określa najlepszy sposób przełamania wiersza dla tekstu. Jest to szczególnie przydatne w przypadku nagłówków, ponieważ zapobiega zawijaniu nagłówka do jednego słowa na 2. wierszu.

Niedawno Safari zaczęło obsługiwać tę funkcję, a inne przeglądarki pracują nad naprawieniem testów, aby mieć pewność, że ta funkcja działa prawidłowo we wszystkich przeglądarkach.

Browser Support

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 121.
  • Safari: 17.5.

Source


Oprócz tego, że te główne funkcje stały się interoperacyjne, wprowadziliśmy też wiele innych ulepszeń. Każdy test, który przeszedł, reprezentuje problem z interoperacyjnością, którego nie będziesz mieć. Jesteśmy ciekawi, jak bardzo zbliżymy się do wyniku 100% do końca roku.