Pod koniec zeszłego roku zakończyło się podsumowanie 2023 r. Celem przedsiębiorców i innych podmiotów jest stworzenie bardziej interoperacyjności z internetem przy mniejszej różnicy między przeglądarkami. W tym poście przedstawiamy ostateczne wyniki, a także informacje o ulubionych funkcjach zespołu Chrome.
Wyniki końcowe
To wspaniale widzieć tyle zielonego koloru. Porównajmy to z wynikami na początku 2023 roku. Przeszliśmy długą drogę, a każda przeglądarka odnotowała ogromny wzrost wyniku.
Co nas cieszy?
Pełną listę obszarów, na których należy się skupić w 2023 roku, znajdziesz w panelu Interop 2023. Niektóre najważniejsze obszary, takie jak :has(), zapytania dotyczące kontenerów i atrybut inert, obejmowały całą funkcję. W innych, na przykład praca nad Flexbox, występowały drobne błędy testowe dotyczące istniejącej funkcji działającej w różnych przeglądarkach.
:has()
„Na koniec mamy selektor nadrzędny dla CSS. O to prosiliśmy niemal od samego początku. Na koniec wprowadzenie tej funkcji we wszystkich przeglądarkach to fantastyczny pomysł, który oznacza, że programiści muszą używać mniej kodu JavaScript, aby emulować ten selektor” – Thomas Steiner, inżynier ds. relacji z deweloperami w Chrome.
Funkcjonalna pseudoklasa :has() wzbudziła ogromny zainteresowanie, ponieważ na platformie pojawiło się ważne żądanie deweloperów. Daje selektor nadrzędny – możesz wybrać element na podstawie tego, co jest w nim. Można go jednak używać znacznie częściej. Jak wyjaśniliśmy w sekcji Opakowanie CSS, możesz wybrać znacznie więcej niż element nadrzędny, a nawet wybrać obrócone elementy.
:has(): stacja dokującaUna Kravets, inżynier ds. współpracy z deweloperami z zespołu Chrome, wyjaśnia:
„Selektor :has() to jedna z najbardziej elastycznych i zaawansowanych funkcji CSS. Dzięki niemu możesz zmienić styl dowolnego elementu nadrzędnego na podstawie obecności, stanu, a nawet liczby elementów podrzędnych. Co więcej, możesz łączyć je z innymi kombinatorami, aby nadać własny styl elementom równorzędnym, co zapewnia nowy poziom kontroli nad stylem w interfejsie. To bardzo elastyczna funkcja. Widziałem już mnóstwo fajnych wersji demonstracyjnych, w których dzięki funkcji :has() nie trzeba pisać dodatkowych skryptów”.
Philip Jägenstedt, inżynier oprogramowania w Chrome, przypomniał mi, że :has() to najczęściej używana funkcja, z którą deweloperzy borykali się z powodu braku wsparcia w ankiecie o stanie usług porównywania cen przeprowadzonej w 2023 roku.
Nie jesteśmy jedyną firmą, która cieszy się taką możliwość.
Możesz posłuchać Uny razem z Adamem Argyle'em i porozmawiać o has() w podcaście CSS, a potem dowiedzieć się więcej o :has() z postów od społeczności internetowej.
- Selektor arkusza CSS
:has()na podstawie przykładów - Blokowanie przewijania za pomocą
:has() - Przypadek użycia dotyczący CSS
:has()
Zapytania dotyczące kontenerów
Rok 2023 okazał się wspaniałym rokiem dla rzeczy, które kiedyś uważano za niemożliwe. Oprócz :has() platforma internetowa uzyskała obsługę zapytań dotyczących kontenerów w różnych przeglądarkach. Zapotrzebowanie na zapytania dotyczące kontenerów (lub elementów) zachodziło już w 2011 r., zaledwie rok po wprowadzeniu koncepcji elastycznego projektowania. Jest on już dostępny we wszystkich głównych silnikach przeglądarek.
Una i Adam omówili zapytania dotyczące kontenerów w podcaście CSS, a Una przedstawiła je w odcinku programu Designing in the Browser. Społeczność dzieli się również wieloma wskazówkami i pomysłami.
Podsiatka
Subgrid to jedna z moich ulubionych funkcji w internecie w 2023 roku. Pozwala zdefiniować siatkę w elemencie nadrzędnym, a potem używać zdefiniowanych w nim rozmiarów ścieżek w siatkach zagnieżdżonych w tej głównej siatce. Dzięki pracy inżynierów platformy internetowej Microsoft Edge w 2023 roku udostępniliśmy ją we wszystkich głównych silnikach przeglądarek, aby poprawić wynik Chrome i udostępnić tę funkcję wszystkim użytkownikom.
Adriana Jara, inżynier ds. relacji z deweloperami Chrome, powiedziała mi, jak siatka i siatka podrzędna ułatwiły tworzenie interfejsu.
„Obrazy i układy, utrzymanie spójnego wyglądu i dostosowanie się do ekranów są dla mnie straszne. Dzięki siatce i siatce podrzędnej w jakiś sposób można stworzyć projekt, który będzie działał na wielu ekranach i automatycznie dopasowuje się do treści. Bardzo mi się podoba, bo zaspokaja podstawową potrzebę stworzenia witryny, która wygoda użytkowników i nie wymaga ogromnej wiedzy specjalistycznej”.
W artykule na temat 12 Days of Web przedstawiliśmy kilka przypadków użycia tej funkcji. Podobnie jak w przypadku innych funkcji w tym poście, możesz przesłuchać odcinek podcastu CSS na jego temat. Jest też wiele zasobów w internecie.
- Podrzędna siatka CSS
- Wideo: łatwe i spójniejsze układy z podsiatką
- Umieszczanie treści za pomocą siatki i podrzędnej arkusza CSS
Przestrzenie i funkcje kolorów
Nie było zaskoczeniem, gdy Adam Argyle, programista Chrome CSS, powiedział mi, że jego ulubionymi funkcjami są przestrzenie i funkcje kolorów,
„Pożegnaj się z niezrozumiałymi matematyką na temat wartości kanału HSL. Wstawiaj jednowierszowe wersje kolorystyczne w sam raz na czas. Nowe przestrzenie i funkcje kolorów nie tylko rozwiązują problemy z przebiegiem pracy kolorów, ale zapewniają też dostęp do bardziej zaawansowanych, niezawodnych i żywych kolorów oraz gradientów. Nie podoba mi się to, że odblokowujesz pewne umiejętności, a jednocześnie ułatwiasz sobie życie. Dołóż do niego przyprawę, a to danie będzie kolorowo zachwycające”.
Przygotował on niesamowite treści, które pomagają zrozumieć te nowe funkcje, np. Przewodnik po kolorach CSS w wysokiej rozdzielczości i gradient.style oraz omawiał funkcje kolorów w podcaście CSS.
Dostępność tych funkcji we wszystkich głównych silnikach przeglądarek jest bardzo ekscytująca. Więcej informacji znajdziesz w tych wspaniałych artykułach.
Co nowego w internecie w 2024 roku?
Gdy funkcje staną się interoperacyjnością, staną się one częścią systemu Baseline, który jest już dostępny. Cieszy nas, że liczba nowych funkcji, które pojawiły się w tej grupie w 2023 roku, jest niewątpliwie wynikiem pracy wszystkich użytkowników korzystających z interoperacyjności w 2023 roku. Już wkrótce ogłosimy obszary, na których skupimy się na 2024 r., i już nie możemy doczekać się, aż w tym roku uda nam się jeszcze bardziej ulepszyć platformę internetową.