Co nowego w wersji internetowej

Rachel Andrew

Data publikacji: 20 maja 2025 r.

Podczas prezentacji „Nowości w internecie” na konferencji Google I/O 2025 ogłosiliśmy wszystkie nowości dotyczące Baseline, a także przedstawiliśmy niektóre funkcje, które w tym roku stały się częścią Baseline. To był niesamowity rok dla internetu i dla Baseline. Ten post to podsumowanie wszystkich wspomnianych w nim tematów wraz z linkami, które pozwolą Ci dowiedzieć się więcej.

Panel platformy internetowej i funkcje internetowe

W 2024 roku ogłosiliśmy wstępne wprowadzenie panelu platformy internetowej, który korzysta z zestawu danych o funkcjach internetowych i umożliwia zapoznanie się ze wszystkimi funkcjami wchodzącymi w skład Baseline.

Dane dotyczące funkcji internetowych są teraz kompletne i zawierają wszystkie funkcje platformy. Co miesiąc do Baseline dodawane są nowe funkcje, a dane są aktualizowane. Wszystkie te informacje są dostępne na panelu.

Narzędzia, które pomogą Ci określić własny cel podstawowy

Zasady dotyczące obsługi przeglądarek możesz opierać na zmieniającym się celu, jakim jest Baseline Widely available, np. na podstawie brytyjskiej agencji Clearleft. Możesz też przyjąć stały cel oparty na roku Baseline. Możesz teraz używać własnych danych o użytkownikach wraz z danymi o funkcjach internetowych, aby określić najlepsze dla siebie wartości docelowe.

W zeszłym roku na konferencji I/O ogłosiliśmy, że firma RUMvision wdroży w swoim produkcie Baseline. Ta integracja jest już dostępna.

Korzysta ona z danych RUM, dzięki czemu pomaga określić, który rok bazowy przyjąć na podstawie tych danych, a nie średniej globalnej. Może też pomóc Ci sprawdzić, czy profil Baseline Widely available jest dla Ciebie odpowiedni.

Możesz też użyć danych Google Analytics, aby dzięki nowemu narzędziu do sprawdzania wartości bazowych w Google Analytics dokładnie określić, jaki odsetek użytkowników obsługuje każdy cel wartości bazowych.

To tylko 2 z coraz większej liczby narzędzi, które pomagają mapować dane rzeczywistych użytkowników na Baseline.

Grupa społeczności Web DX niedawno wprowadziła rozszerzenie do Netlify, które obsługuje różne lata Baseline i jest powszechnie dostępne w Twoich witrynach. Pomaga ono w określaniu, na co należy się skupić w narzędziach do tworzenia. Wkrótce wprowadzimy integrację z usługą Observatory RUM od Cloudflare i Contentsquare.

integrować dane z własnymi narzędziami,

Dane o funkcjach internetowych są otwarte i dostępne do wykorzystania w Twoich integracjach. Staramy się to ułatwić.

Użyj interfejsu Web Platform Dashboard API lub korzystaj z danych o funkcjach internetowych bezpośrednio z pakietu npm.

Możesz teraz mapować wersje przeglądarek na element bazowy za pomocą modułu baseline-browser-mapping z grupy społecznościowej W3C WebDX. Ten moduł może być używany w środowisku JavaScript po stronie serwera lub przez pobieranie plików JSON lub CSV, które są codziennie odświeżane z repozytorium.

Dane te obejmują mapowania nie tylko dla podstawowego zestawu przeglądarek Baseline, ale także dla przeglądarek pochodnych, takich jak Samsung Internet, Opera, UC Browser i Android WebView.

Sprawdzanie, czy funkcje są obsługiwane przez docelową wartość bazową

Informacje o podstawowych funkcjach są teraz dostępne na większości stron MDN i Can I Use, a także na stronie Web Platform Dashboard oraz w artykułach na web.dev i CSS Tricks. Wymaga to jednak wyszukania pomocy. Znacznie bardziej przydatne byłoby wyświetlanie informacji o linii bazowej w środowisku IDE podczas pisania kodu oraz w ramach wszystkich innych używanych narzędzi.

Z przyjemnością informujemy, że wiele kluczowych narzędzi ma teraz wbudowaną obsługę Baseline lub można ją łatwo zintegrować.

browserslist-config-baseline

Wiele narzędzi, takich jak Babel i PostCSS, używa listy przeglądarek do określania, które przeglądarki mają być obsługiwane.

Wspólnie z grupą WebDX CG i członkami społeczności zespół Chrome pomógł w udostępnieniu nowego narzędzia o nazwie browserslist-config-baseline. Dzięki temu możesz skonfigurować listę przeglądarek docelowych w terminach podstawowych, takich jak powszechnie dostępne lub lata podstawowe.

Dzięki temu każde narzędzie, które przyjmuje docelową listę przeglądarek, może być teraz wyrażone w terminach Baseline.

Więcej informacji znajdziesz w artykule Używanie Baseline z browserslist.

Wartość podstawowa w narzędziach do sprawdzania kodu – ESLint i Stylelint

Korzystanie z Baseline w przypadku narzędzi do sprawdzania kodu stało się ostatnio możliwe dzięki kilku nowym narzędziom w tej dziedzinie, począwszy od ESLint dla CSS.

Podstawowa konfiguracja ESLint ma regułę use-baseline. Możesz ustawić preferowany poziom bazowy i otrzymywać ostrzeżenia, gdy używasz funkcji nowszych niż wybrany poziom. Możesz wybrać sposób rozwiązania tych problemów: zastąpić tę funkcję elementami podstawowymi lub pominąć ostrzeżenie narzędzia do sprawdzania kodu. Jest to w pełni prawidłowe rozwiązanie, jeśli wiesz, że bezpiecznie używasz najnowszej funkcji, np. w przypadku ulepszenia progresywnego.

Domyślnie ESLint nie ostrzega, jeśli w blokach @supportsużywane są nowsze funkcje, ponieważ nieobsługiwane przeglądarki i tak ich nie ocenią.

Do sprawdzania poprawności kodu HTML możesz też użyć wtyczki społecznościowej o nazwie html-eslint.

Stylelint oficjalnie obsługuje wtyczkę o nazwie stylelint-plugin-use-baseline. Ta reguła działa tak samo jak reguła ESLint dla CSS, ale jest uruchamiana w Stylelint.

Wiele programów do sprawdzania kodu ma też wtyczki do IDE, dzięki czemu podczas pisania kodu możesz od razu otrzymywać informacje o stanie linii bazowej w postaci falistych podkreśleń.

Linia bazowa w VS Code i JetBrains WebStorm

Wiele środowisk IDE od dawna obsługuje funkcję najeżdżania kursorem na funkcję w edytorze i wyświetlania listy obsługiwanych wersji przeglądarek.

Może być jednak trudno stwierdzić, czy dana funkcja jest bezpieczna w użyciu – musisz sprawdzić, czy na liście brakuje jakichś głównych przeglądarek i jak nowa jest dana wersja przeglądarki.

Aby rozwiązać ten problem, nawiązaliśmy współpracę z najpopularniejszym środowiskiem IDE używanym przez miliony programistów internetowych – VS Code – i zintegrowaliśmy dane Baseline bezpośrednio z tymi kartami.

Teraz możesz najechać kursorem na funkcję i sprawdzić, czy jest ona uznawana za podstawową i jak długo, lub czy są jakieś główne przeglądarki, które nie wdrożyły jej jeszcze w pełni.

Obsługiwane funkcje obejmują właściwości CSS, elementy HTML i atrybuty HTML. Więcej informacji znajdziesz w artykule Visual Studio Code now supports Baseline (Visual Studio Code obsługuje teraz Baseline).

Dzięki tej integracji wszystkie środowiska IDE oparte na VS Code będą też korzystać z tych kart.

Możemy też ogłosić, że firma JetBrains wdraża karty najazdowe w swoim środowisku IDE WebStorm JavaScript i TypeScript.

Internet rozwija się szybciej niż kiedykolwiek

Mamy nadzieję, że Baseline pomoże Ci wykorzystać fakt, że interoperacyjność internetu poprawia się szybciej niż kiedykolwiek.

W panelu platformy internetowej możesz zobaczyć wszystkie funkcje, które w ciągu ostatnich 12 miesięcy, czyli od konferencji Google I/O 2024, stały się dostępne w ramach Baseline Newly Available.

Wiele funkcji będzie dostępnych wkrótce, ponieważ są one uwzględnione w projekcie Interop 2025. Wszystkie funkcje znajdziesz w artykule Interop 2025: kolejny rok ulepszeń platformy internetowej.

Tryby pisania na boku

Jedna z funkcji stała się już dostępna w ramach Baseline Newly available. Są to wartości sideways-rl i sideways-lr dla właściwości CSS writing-mode. Jeśli używasz trybu pisania pionowego wyłącznie na potrzeby układu, prawdopodobnie będziesz potrzebować wartości „sideways”.

h1 {
  writing-mode: sideways-rl;
}

h2 {
  writing-mode: sideways-lr;
}

Pozycjonowanie kotwicy

Pozycjonowanie kotwicy zostało wprowadzone w Chrome 125. Umożliwia powiązanie pozycji elementu z punktem zakotwiczenia, np. podczas otwierania etykietki z przyciskiem.

Jest on teraz uwzględniony w Interop 2025, więc w tym roku powinien dołączyć do Baseline.

Podstawowe wskaźniki internetowe: LCP i INP

LCP API

Event Timing API (w przypadku INP)

Wskaźniki internetowe pomogą Ci ocenić wygodę korzystania z Twojej witryny i ustalić, co jeszcze możesz w niej poprawić. Inicjatywa Web Vitals ma na celu uproszczenie tego zagadnienia i pomoc witrynom w skupieniu się na najważniejszych danych, czyli podstawowych wskaźnikach internetowych.

Interop 2025 obejmuje wskaźniki największego wyrenderowania treści (LCP) i interakcji do kolejnego wyrenderowania (INP) przez wdrożenie interfejsu LargestContentfulPaint API i interfejsu Event Timing API w różnych przeglądarkach.

Ulepszenia elementu <details>

Sam element <details> jest już dostępny w wersji podstawowej. Został on uwzględniony w Interop 2025, ponieważ istnieje wiele funkcji, które sprawiają, że widżety ujawniania informacji z <details> są bardziej przydatne.

Element <details> zawiera element <summary>, który jest częścią widoczną na stronie, gdy element <details> jest zwinięty. Poza elementem <summary> znajduje się treść elementu <details>, która jest ukryta, dopóki użytkownik nie kliknie podsumowania.

Jednym z elementów, które zostaną objęte interoperacyjnością w ramach Interop 2025, jest ukrywanie treści za pomocą atrybutu content-visibility zamiast display. Oznacza to, że jeśli treść nie zostanie rozwinięta, nie będzie w ogóle renderowana.

Częścią prac nad Interop 2025 jest też pseudo-element ::marker. Pseudoelement ::marker umożliwia zmianę stylu trójkąta ujawniania elementu <summary>.

summary::marker {
  content: "+ ";
  font-family: monospace;
  color: red;
  font-weight: bold;
}

Następnie kolejny pseudoelement – ::details-content.

::details-content reprezentuje treść, czyli część elementu details, która rozwija się i zwija, i którą możesz stylizować.

[open]::details-content {
  border: 5px dashed hotpink;
}

Wprowadziliśmy też kilka przydatnych ulepszeń, takich jak automatyczne rozwijanie elementu <details> w przypadku dopasowań w funkcji „Znajdź na stronie” oraz przeniesienie wartości until-found atrybutu HTML hidden do sekcji „Nowo dostępne” w wersji podstawowej. Ukrywa element, dopóki nie zostanie znaleziony za pomocą funkcji wyszukiwania na stronie w przeglądarce lub nie zostanie otwarty bezpośrednio przez fragment adresu URL.

CSS @scope

Reguła @scope umożliwia ograniczenie zasięgu selektorów. Ustawiając katalog główny zakresu za pomocą @scope, możesz sprawić, że wszystkie reguły stylu zagnieżdżone w regule @ będą miały zastosowanie tylko do tego drzewa DOM.

Jeśli na przykład chcesz kierować reklamy tylko na elementy <img> w elemencie z klasą .card, to element .card stanie się korzeniem zakresu.

@scope (.card) {
    img {
        border-color: green;
    }
}

Więcej informacji znajdziesz w artykule Ograniczanie zasięgu selektorów za pomocą reguły @scope w CSS.

scrollend

Kolejną funkcją, która zmniejsza złożoność i poprawia interfejsy przewijania, jest scrollend. Bez zdarzenia scrollend nie ma wiarygodnego sposobu na wykrycie, że przewijanie zostało zakończone.

// before scrollend
document.onscroll = event => {
  clearTimeout(window.scrollEndTimer)
  window.scrollEndTimer = setTimeout(callback, 100)
}

W przypadku zdarzenia scrollend przeglądarka wykonuje za Ciebie wszystkie te trudne obliczenia.

document.onscrollend = event => {…}

Więcej przykładów znajdziesz w artykule Scrollend, a new JavaScript event (Scrollend, nowe zdarzenie JavaScript).

Przejścia między widokami w tym samym dokumencie

Na koniec warto wspomnieć, że przejścia widoku są częścią Interop 2025. Praca obejmuje przejścia widoku w tym samym dokumencie, więc dotyczy aplikacji jednostronicowych, a także klas przejść widoku.

Śledź postępy projektu na pulpicie Interop 2025.

Funkcje uwzględnione w Interop 2025 nie będą jedynymi, które w tym roku staną się częścią Baseline, ale ich uwzględnienie w projektach daje nam dość dobry znak, że są one traktowane priorytetowo i wkrótce zostaną wprowadzone.

Właśnie zaczynamy

To był ekscytujący rok dla Baseline. Od naszych zeszłorocznych ogłoszeń zrobiliśmy ogromny postęp. Uzupełnianie danych o funkcjach internetowych zostało zakończone. Otworzyło to drogę do tworzenia narzędzi dla deweloperów. Dopiero zaczynamy, więc jeśli masz produkt lub narzędzie open source, które mogłoby skorzystać na uwzględnieniu tych danych, skontaktuj się z nami.

Obserwuj web.dev, ponieważ będziemy tam publikować ogłoszenia o nowych narzędziach oraz samouczki, które pomogą Ci w pełni wykorzystać możliwości internetu.