Zwiększ interoperacyjność internetu dzięki Interop 2023

Pod koniec ubiegłego roku usługa Interop 2023 zakończyła się. Te działania z poziomu przeglądarki dostawców i innych partnerów chcą zapewnić lepszą współpracę przy mniejszej różnice między przeglądarkami i uniemożliwiać działanie. Ostateczne wyniki znajdziesz w tym poście. a także niektóre z ulubionych funkcji zespołu Chrome.

Zrzut ekranu z wynikami w eksperymentalnej przeglądarce. Ogólne działania: 95. Zbadania sprawy: 85. Chrome/Edge: 99. Firefox: 98. Safari: 97.
Ostateczne wyniki dotyczące eksperymentalnych wersji przeglądarek obowiązujące 31 stycznia 2024 r. Zobacz wpt.fyi/interop-2023

Cieszymy się, że jest tak dużo zieleni, porównując te wyniki z wynikami z początku 2023 roku. Udało nam się wiele osiągnąć, przeglądarka odnotowała ogromny wzrost wyniku.

Co nas ciekawi?

Pełną listę obszarów, na których warto się skupić na 2023 rok, znajdziesz w panelu Interop 2023. Niektóre obszary, na których należy się skupić, takie jak :has(), zapytań kontenera i atrybutu inert objęło całą funkcję. Inne, na przykład podczas pracy nad Flexbox dotyczyła kilku niewielkich błędów istniejącej funkcji różnych przeglądarek.

:has()

Obsługa przeglądarek

  • 105
  • 105
  • 121
  • 15,4

Źródło

"Nareszcie selektor nadrzędny dla CSS! Zaczęliśmy prosić o to prawie od samego początku, a wreszcie wprowadzenie go we wszystkich przeglądarkach jest fantastyczne – programiści muszą uruchamiać mniej JavaScriptu, aby emulować ten selektor” – Thomas Steiner, Developer Relations Engineer w Chrome.

Pseudoklasa funkcjonalna wzbudza ogromne zainteresowanie :has(), ponieważ w związku z tym na platformie pojawiła się kluczowa prośba deweloperów. it daje selektor nadrzędny – możesz wybrać element na podstawie elementów, które są w środku. Może jednak mieć wiele innych zastosowań. Jak wyjaśniliśmy w sekcji Opakowanie CSS, możesz wybrać niż element nadrzędny, a nawet zaznaczać bok.

Prezentacja CSS :has(): Dock

Una Kravets, inżynier ds. relacji z deweloperami w zespole Chrome wyjaśnia:

„Selektor :has() to jedna z najbardziej elastycznych i wydajnych, nowych dostępnych funkcji CSS. Dzięki niemu możesz określić styl dowolnego elementu nadrzędnego na podstawie obecności, stanu, a nawet liczby elementów podrzędnych. Co więcej, można je połączyć z innymi kombinacjami, aby określić styl elementów podobnych do siebie i zyskać nowy poziom kontroli nad interfejsem użytkownika. To bardzo elastyczna funkcja. Widziałem już wiele fajnych demonstracji, które dzięki możliwościom funkcji :has() nie wymagają dodatkowego skryptu”.

Gdy Philip Jägenstedt, inżynier oprogramowania Chrome przypomniał mi, że :has() to Główna funkcja, z którą deweloperzy mieli problemy z powodu braku wsparcia w ramach ankiety State of CSS in 2023 (Stan usług porównywania cen). Dlatego nie tylko my cieszymy się z udostępnienia tej funkcji.

Możesz posłuchać Uny wraz z Adamem Argyle'em opowiadaj o has() w podcaście CSS, a potem dowiedz się więcej na temat: :has() pochodzące z tych postów z całej społeczności internetowej.

Zapytania dotyczące kontenera

Obsługa przeglądarek

  • 105
  • 105
  • 110
  • 16

Źródło

2023 rok był świetnym rokiem dla rzeczy, które kiedyś wydawały się niemożliwe. W Oprócz :has() platforma internetowa wreszcie uzyskała obsługę w wielu przeglądarkach zapytań w kontenerach. Pytałaś o zapytania dotyczące kontenerów (lub elementów) od 2011 r., zaledwie rok po wprowadzeniu koncepcji elastycznego projektowania stron. Teraz, jest dostępny i dostępne w najważniejszych przeglądarkach.

Una i Adam omówili zapytania dotyczące kontenerów w podcaście CSS, i Una przedstawili ich w odcinku Projektowanie w przeglądarce. Społeczność podzieliła się też wieloma wskazówkami pomysły.

Podsiatka

Obsługa przeglądarek

  • 117
  • 117
  • 71
  • 16

Źródło

Subgrid to mój ulubiony interfejs Interop 2023. Pozwala zdefiniować siatkę a następnie używać rozmiarów ścieżek zdefiniowanych dla tego elementu nadrzędnego zagnieżdżonych wewnątrz niej. Dzięki możliwości internetowej przeglądarki Microsoft Edge dla inżynierów platformy, w 2023 r. opcja subgrid została udostępniona we wszystkich głównych silnikach przeglądarek, aby poprawić wynik Chrome z tej ekscytującej funkcji.

Adriana Jara, inżynier ds. relacji z deweloperami Chrome, opowiedziała mi, w jaki sposób o stworzenie komfortowego interfejsu użytkownika

„Dość mi się nie podoba w grafice, układach, utrzymaniu spójnego wyglądu i dostosowywaniu się do ekranów. Jednak dzięki siatce i podsiatce można stworzyć projekt, który działa na różnych ekranach i automatycznie dostosowuje się do treści. To moja ulubiona witryna, bo spełnia podstawową potrzebę stworzenia witryny, która zapewni użytkownikom dobre wrażenia, a nie wymaga sporej wiedzy”.

Udało mi się przygotować kilka przypadków użycia podsiatki w artykule poświęconym 12 dniom sieci i podobnie jak w przypadku innych funkcji. w tym poście możesz odsłuchać odcinek podcastu CSS na jego temat. Jest też mnóstwo zasobów z internetu.

przestrzenie kolorów i funkcje,

Obsługa przeglądarek

  • 111
  • 111
  • 113
  • 15

Źródło

Nic dziwnego, że programista CSS Chrome, Adam Argyle, powiedział mi, że przestrzenie i funkcje kolorów był jego ulubioną funkcją,

Koniec z niezręcznymi funkcjami matematycznymi o zmiennej wartości kanału HSL. Oto krótkie podsumowanie wersji kolorystycznej. Nowe przestrzenie i funkcje kolorów nie tylko rozwiązują problemy z przepływem pracy, ale zapewniają też dostęp do bardziej zaawansowanych, niezawodnych i żywych kolorów oraz gradientów. Odblokuje pewne umiejętności, a jednocześnie ułatwia Ci życie. Dodaj do niego przyprawę interoperacyjną, która zachwyca barwnym daniem”.

Adam tworzy niesamowite treści, które pomogą Ci zrozumieć takie jak Przewodnik po kolorach CSS w wysokiej rozdzielczości i gradient.style, a także funkcje kolorów w podcaście CSS.

Cieszymy się, że te funkcje są dostępne we wszystkich głównych przeglądarkach. Więcej informacji znajdziesz w tych świetnych artykułach.

Czekamy na współpracę w 2024 r.

Gdy funkcje współdziałają, stają się częścią Punkt odniesienia – już dostępny. To fascynujące, jak wiele nowych funkcje, które trafiły do tej grupy w 2023 r., m.in. ze względu na wszystkich użytkowników zaangażowanych w narzędzia Interop 2023. Wkrótce ogłosimy to na 2024 rok. Nie możemy się doczekać, jeszcze lepsza może być platforma internetowa w tym roku.