Na konferencji Google I/O przedstawiłem zmiany w programie Baseline od czasu ogłoszenia na konferencji I/O w zeszłym roku. Zapowiedzieliśmy też panel Web Platform, integracje z archiwum RUM Archive oraz nadchodzącą integrację z RUMvision. W tym poście zebraliśmy wszystkie materiały z prezentacji w jednym miejscu.
Panel Web Platform to nowy, ekscytujący sposób wglądu w całą platformę internetową oraz drogi poszczególnych funkcji do współdziałania i stają się częścią programu Baseline. Więcej informacji znajdziesz w artykule ogłoszenie panelu platformy internetowej.
Integrację pakietu Baseline z narzędziami, których używasz na co dzień, zawsze było częścią wizji tego projektu. Zależy nam, aby kwestie zgodności przeglądarek były jak najprostsze. Dowiedz się więcej o integracji z archiwum RUM i oglądaj tu wiadomości o kolejnych dostawcach narzędzi.
Nowy wskaźnik bazowy
Na konferencji I/O przedstawiłam 12 funkcji platformy internetowej, które ostatnio stały się częścią nowej wersji Baseline. Funkcje te są teraz dostępne w Chrome, Edge, Firefox i Safari. Ich liczba obejmuje zarówno niewielkie dodatki, które usprawniają programowanie, jak i najbardziej przydatne funkcje dla programistów, takie jak zapytania o kontenery i :has().
Rozmiar zapytań dotyczących kontenerów
Zapytania dotyczące kontenera rozmiaru pozwalają zmienić projekt na podstawie szerokości lub rozmiaru wbudowanego kontenera, zamiast korzystać tylko z zapytań o multimedia, które umożliwiają kierowanie reklam na rozmiar widocznego obszaru. Dzięki temu można korzystać z większej liczby komponentów wielokrotnego użytku, które mogą się zmieniać zależnie od dostępnego miejsca w układzie. Są na liście najbardziej poszukiwanych funkcji prawie tak długo, jak istnieje koncepcja projektowania responsywnego.
- Nowość: od lutego 2023 r.
- Powszechnie dostępne od sierpnia 2025 r.
Więcej informacji o zapytaniach dotyczących kontenerów w MDN znajdziesz w artykule Zapytania o kontenery trafiają do stabilnych przeglądarek. Zapoznaj się też ze studiami przypadków dotyczących zapytań o kontenery, aby dowiedzieć się, jakie korzyści mogą z nich korzystać inne zespoły programistów.
Selektor na stronie :has()
Selektor :has() to funkcja, o którą od wielu lat najczęściej proszą deweloperzy – selektor nadrzędny, czyli możliwość wybierania elementu na podstawie jego zawartości. chociaż :has() może być czymś więcej.
Podobnie jak w przypadku zapytań dotyczących kontenerów, jest to niezwykle przydatne przy tworzeniu komponentów wielokrotnego użytku, ponieważ umożliwia utworzenie jednego komponentu, który można dostosować do jego zawartości.
- Nowość: od grudnia 2023 r.
- Platforma ta będzie ogólnie dostępna w czerwcu 2026 r.
Dowiedz się więcej o :has() w MDN, w selektorze rodziny :has()
i w studiach przypadków :has().
Siatka podrzędna układu siatki CSS
Podsiatka umożliwia dziedziczenie ścieżek z elementu nadrzędnego zagnieżdżonego układu siatki. Umożliwia lepsze wyrównanie elementów w zagnieżdżonych siatkach.
- Nowość: od grudnia 2023 r.
- Platforma ta będzie ogólnie dostępna w czerwcu 2026 r.
Dowiedz się więcej o podsieci w MDN i o siatce podrzędnej CSS, która zawiera linki do dużej liczby innych zasobów.
Zagnieżdżanie CSS
W ostatnich latach usługi porównywania cen czerpały inspirację z funkcji używanych przez deweloperów rozwiązań do przetwarzania danych, takich jak Sass. Na przykład właściwości niestandardowe CSS, często nazywane zmiennymi CSS, to powszechnie dostępna funkcja, która umożliwia takie zmienne jak kolory ustawiane w jednym miejscu i używane w całym kodzie CSS. Wcześniej były one dostępne tylko przy użyciu wstępnego procesora danych.
Kolejną cechą preprocesorów jest zagnieżdżanie. Zagnieżdżanie pomaga uniknąć powtarzania selektorów i ułatwia czytelność CSS, ponieważ powiązane elementy można łatwiej pogrupować.
- Ponownie dostępne w sierpniu 2023 r.
- powszechnie dostępne w lutym 2026 r.
Dowiedz się więcej o zagnieżdżaniu usług porównywania cen w MDN i o zagnieżdżaniu arkuszy CSS.
Element HTML <search>
Wyszukiwarka to coś, co pojawia się w wielu witrynach i aplikacjach, jednak do niedawna nie było elementu umożliwiającego oznaczanie wyników wyszukiwania lub filtrowania na stronie. W tym celu zaprojektowano element <search>. Jest to element, w którym umieszcza się
formularz wyszukiwania lub inne elementy używane do filtrowania wyników.
- Ponownie dostępne w październiku 2023 r.
- Powszechnie dostępne od kwietnia 2026 r.
Dowiedz się więcej o elemencie <search> w MDN.
Elastyczne reklamy wideo
Ta funkcja odnosi się do wykorzystania elementu <source> w elemencie <video> do wyświetlania filmów w odpowiednim rozmiarze na różnych urządzeniach w taki sam sposób, w jaki można wyświetlać obrazy o różnych rozmiarach.
- Ponownie dostępne w listopadzie 2023 r.
- Powszechnie dostępne w maju 2026 r.
Więcej informacji o MDN znajdziesz w artykule o elemencie Media or Image Source (Multimedia lub źródło obrazu) oraz artykule Jak używać elastycznych reklam wideo.
Atrybut inert
Jeśli element jest bezwładny, nie można go wchodzić w interakcje. Na przykład podczas otwierania okna dialogowego nie można kliknąć ani przejść do elementów na stronie za oknem. Atrybut inert pozwala kontrolować bezwładność w dowolnej części interfejsu.
Gdy do elementu zostanie zastosowany atrybut inert, zdarzenia kliknięcia nie będą uruchamiane po kliknięciu elementu, nie będzie można go zaznaczyć, a jego treść zostanie ukryta przed technologiami wspomagającymi, ponieważ jest wykluczony z drzewa ułatwień dostępu.
- Ponownie dostępne w kwietniu 2023 r.
- powszechnie dostępne od października 2025 r.
Dowiedz się więcej o inertowaniu w MDN i o atrybucie inert.
Funkcja color-mix()
Funkcja color-mix() umożliwia mieszanie jednego koloru z innym w dowolnej dostępnej przestrzeni kolorów. Obejmuje to wszystkie nowe modele kolorów – LCH, Lab, OKLCH i OKLab – które niedawno zostały uwzględnione w programie Baseline Newly available.
- Ponownie dostępne w kwietniu 2023 r.
- powszechnie dostępne od października 2025 r.
Dowiedz się więcej o color-mix() w MDN
i o funkcji CSS color-mix().
Przygotowaliśmy też obszerny przewodnik po kolorach CSS w wysokiej rozdzielczości, który obejmuje wszystkie nowe modele kolorów dostępne w usługach porównywania cen. Wypróbuj także gradient.style, by poeksperymentować z nowymi kolorami i utworzyć piękne gradienty.
:user-valid i :user-invalid
Pseudoklasy :valid i :invalid są powszechnie dostępne w przeglądarkach i wskazują, czy dany element formularza jest obecnie prawidłowy zgodnie z umieszczonymi w nim regułami ograniczeń, czy też nieprawidłowy. Jeśli więc masz pole z typem e-maila, które zawiera nazwę, wybiera ją pseudoklasa :invalid. Możesz dodać kolor lub ikonę, aby pokazać, że to pole wymaga korekty.
Problem z pseudoklasami :valid i :invalid polega na tym, że są one stosowane, zanim użytkownik wejdzie w interakcję z formularzem. Dlatego jeśli element formularza jest wymagany, a użytkownik jeszcze go nie wypełnił, pojawi się nieprawidłowy styl. Nieprawidłowy styl ma być zwykle wyświetlany tylko wtedy, gdy użytkownik wpisze jakąś nieprawidłowość lub pominie dane w polu i pozostaw puste.
Aby zwiększyć wygodę użytkowników w tej sytuacji, użyj pseudoklas :user-valid i :user-invalid. Działają one prawie tak samo, z tą różnicą, że są dopasowywane tylko wtedy, gdy użytkownik wejdzie w interakcję z polem. W przykładzie wymaganego pola użytkownik musi więc otworzyć pole lub przejść do niego za pomocą klawisza Tab, a następnie opuścić pole bez uzupełnienia go, aby pojawiło się nieprawidłowe pole.
- Ponownie dostępne w październiku 2023 r.
- Powszechnie dostępne od kwietnia 2026 r.
Dowiedz się więcej o :user-valid i :user-invalid w MDN.
Strumienie kompresji
Wiele aplikacji internetowych musi udostępniać użytkownikowi pliki do pobrania w formacie skompresowanym, np. w postaci pliku ZIP. W przeszłości aplikacja zawierała bibliotekę kompresji, czyli kod, który zwiększył rozmiar aplikacji dla wszystkich użytkowników. Kompresja Streams API zapewnia wbudowany sposób kompresowania strumienia danych.
- Ponownie dostępne w maju 2023 r.
- powszechnie dostępne od listopada 2025 r.
Dowiedz się więcej o kompresji Streams API w MDN i strumieniach kompresji są teraz obsługiwane we wszystkich przeglądarkach.
Deklarowany DOM cienia
Deklarowany DOM cienia to nowy sposób tworzenia drzewa cieni na podstawie kodu HTML. Wcześniej można było utworzyć drzewo cieni w języku JavaScript za pomocą funkcji attachShadow(). Jest to szczególnie przydatne w środowiskach, w których JavaScript może nie działać, takich jak klient poczty e-mail. Jest też ważna w przypadku komponentów sieciowych renderowanych po stronie serwera.
- Ponownie dostępne w lutym 2024 r.
- Powszechnie dostępne w sierpniu 2026 r.
Dowiedz się więcej o deklaratywnym modelu cienia DOM.
Popover API
Wyskakujące okienka służą do wielu różnych zadań w naszych aplikacjach internetowych. np. menu, niestandardowe powiadomienia toastowe czy selektory treści. Dostępna jest teraz wbudowana metoda tworzenia tych wyskakujących okienek w sposób ozdobny za pomocą interfejsu The Popover API.
- Ponownie dostępne w kwietniu 2024 r.
- powszechnie dostępne od października 2026 r.
Dowiedz się więcej o interfejsie Popover API w MDN, interfejsie Popover API trafia do Baseline oraz ze studiów przypadków Popover.
Te 12 funkcji to tylko niektóre z funkcji, które stały się częścią wersji Baseline Newly available. Więcej możesz dowiedzieć się w tej witrynie. Poznaj wszystkie funkcje, które zostały uwzględnione w Baseline 2023, oraz coraz więcej funkcji dostępnych w Baseline 2024.