Co nowego w interfejsie internetowym

Bramus
Una Kravets

Opublikowano: 1 lipca 2026 r.

Podczas Google I/O 2026 r. przedstawiliśmy wiele nowości, które pojawią się na platformie interfejsu internetowego. Od respektowania preferencji użytkowników po wdrażanie naturalnych interakcji, ułatwianie nawigacji, ograniczanie bałaganu i dostosowywanie się do różnych formatów – nowoczesna sieć oferuje deweloperom niezwykle zaawansowane narzędzia do tworzenia wysokiej jakości interakcji z użytkownikami.

Oto kompleksowe podsumowanie wszystkich funkcji wymienionych w sesji „Nowości w interfejsie internetowym”, uporządkowane według naszych podstawowych zasad UX.

Część 1. Szanowanie preferencji użytkowników

Personalizacja ma kluczowe znaczenie dla użyteczności internetu. Nowoczesne interfejsy API sieci ułatwiają automatyczne dostosowywanie się do wyborów użytkownika na poziomie systemu. Chociaż te koncepcje wydają się podstawowe i mówimy o nich od lat, istnieje kilka nowych interfejsów API i wzorców, które ułatwiają tworzenie dynamicznej personalizacji.

1. contrast-color()

Funkcja CSS contrast-color() przyjmuje kolor wejściowy i automatycznie zwraca kolor black lub white w zależności od tego, który z nich ma większy kontrast z kolorem wejściowym na podstawie algorytmu minimalnego kontrastu WCAG AA. Zapewnia to czytelność bez konieczności ręcznego utrzymywania par kolorów tekstu i tła.

Browser Support

  • Chrome: 147.
  • Edge: 147.
  • Firefox: 146.
  • Safari: 26.

Source

Więcej informacji o funkcji contrast-color()

2. light-dark()

Funkcja CSS light-dark() umożliwia określenie 2 różnych wartości (kolorów lub obrazów) dla właściwości w ramach jednej deklaracji – jednej dla trybu jasnego i jednej dla trybu ciemnego. Przeglądarka automatycznie wybiera odpowiedni kolor kontrastu na podstawie aktywnego elementu color-scheme (który musi być ustawiony na light, dark lub light dark w elemencie :root lub elemencie nadrzędnym).

Browser Support

  • Chrome: 123.
  • Edge: 123.
  • Firefox: 120.
  • Safari: 17.5.

Source

Nowością w przypadku light-dark() jest to, że nie ogranicza się już tylko do wartości koloru. Od Chrome 150 akceptuje też 2 wartości obrazu.

Browser Support

  • Chrome: behind a flag.
  • Edge: behind a flag.
  • Firefox: 150.
  • Safari: not supported.

3. Niestandardowe funkcje CSS (@function)

Reguła @ @function umożliwia definiowanie niestandardowych funkcji wielokrotnego użytku bezpośrednio w natywnym CSS. Może przyjmować jako argumenty właściwości niestandardowe o lokalnym zakresie, wykonywać obliczenia i zwracać wartości za pomocą deskryptora result, co zmniejsza potrzebę stosowania preprocesorów.

Browser Support

  • Chrome: 139.
  • Edge: 139.
  • Firefox: not supported.
  • Safari: not supported.

Source

W połączeniu z zapytaniami o styl kontenera i funkcją CSS if() możesz utworzyć niestandardową funkcję --light-dark(), która działa z dowolnym typem wartości, jak pokazano w tej wersji demonstracyjnej:

4. Zapytania dotyczące stylu kontenera

Zapytania o style, które są częścią zapytań o kontenery CSS, umożliwiają deweloperom stosowanie stylów do elementów podrzędnych na podstawie obliczonych wartości właściwości niestandardowych kontenera nadrzędnego. Dzięki temu można tworzyć dynamiczne komponenty bez konieczności jawnego określania rozmiaru.

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 151.
  • Safari: 18.

W tej wersji demonstracyjnej zapytania o styl są używane do ustawiania kolorów na podstawie --theme właściwości niestandardowej.

@container style(--theme: primary) {
  .app-card {
    --bg-light: #fdf2f8; 
    --bg-dark: #ff91d3;  
    --neon-glow: #f472b6;
    --btn-light: #be185d; 
    --btn-dark: #fbcfe8;  
    
    --text-on-light: #500732;
    --text-on-dark: #fff1f2;  
  }
}

@container style(--theme: accent) {
  .app-card {
    --bg-light: #f3e8ff;
    --bg-dark: #4c1d95;  
    --neon-glow: #d8b4fe;
    --btn-light: #7e22ce; 
    --btn-dark: #c084fc;  
    
    --text-on-light: #2e1065; 
    --text-on-dark: #faf5ff;  
  }
}

@container style(--theme: success) {
  /* … */
}

Więcej informacji o zapytaniach o styl

5. Funkcja CSS if()

Funkcja CSS if() wprowadza wbudowaną logikę warunkową bezpośrednio do wartości właściwości CSS. Sprawdza serię warunków oddzielonych średnikami (zapytania o style, zapytania o media lub zapytania o funkcje) i umożliwia ustawienie różnych wartości powiązanych z pierwszym spełnionym warunkiem, z opcjonalnym else elementem zastępczym.

Browser Support

  • Chrome: 137.
  • Edge: 137.
  • Firefox: not supported.
  • Safari: not supported.

Source

W poprzedniej wersji demonstracyjnej funkcja if() służy do tworzenia kontrastowego koloru motywu na podstawie wyniku funkcji contrast-color().

--contrast-color: contrast-color(var(--card-bg));
color: if(
    style(--contrast-color: white): var(--text-on-dark);
    else: var(--text-on-light)
);

6. @supports at-rule()

Funkcja CSS at-rule() do użycia z @supports umożliwia programistom wykrywanie funkcji, czyli sprawdzanie, czy przeglądarka rozpoznaje konkretną regułę @, np. @starting-style lub @view-transition.

Aby na przykład sprawdzić obsługę @function, użyj tego wywołania w ten sposób:

@supports at-rule(@function) {
  /* Code for browsers that support @function goes here */
}

Użycie at-rule() pozwala tylko sprawdzić podstawową obsługę samej reguły @ i nie można go używać do testowania konkretnych deskryptorów, wstępów ani pełnych bloków reguł @. Istnieją obejścia, które umożliwiają wykrywanie funkcji takich jak zapytania zakotwiczone czy zapytania o styl.

Więcej informacji o funkcji @supports at-rule

7. <meta name="text-scale">

Tag meta HTML text-scale sprawia, że strona może mieć początkowy rozmiar czcionki elementu głównego <html> skalowany proporcjonalnie do ustawień skali tekstu na poziomie systemu operacyjnego i przeglądarki, co jest szczególnie ważne w przypadku platform mobilnych.

Browser Support

  • Chrome: 146.
  • Edge: 146.
  • Firefox: not supported.
  • Safari: not supported.

Source

Po zastosowaniu tego ustawienia rozmiar czcionki w elemencie html jest określany przez system operacyjny, więc nie musisz ustawiać podstawowego rozmiaru czcionki w elemencie font-size. Jeśli następnie użyjesz długości z jednostkami względnymi, takimi jak em i rem, obliczone wartości pikseli będą oparte na tym podstawowym rozmiarze czcionki.

<meta name="text=scale" value="scale">
<style>
html {
  /* Don't set a base font-size here! */
}
</style>

Na karcie renderowania w Narzędziach deweloperskich możesz emulować preferowany rozmiar czcionki. Aby zmienić wartość, użyj menu.

Więcej informacji o funkcji <meta name=text-scale>

Część 2. Wdrażanie naturalnych interakcji

Intuicyjne ruchy fizyczne i naturalne gesty są kluczowe, aby korzystanie z internetu było tak samo dotykowe jak w przypadku aplikacji natywnych. Nowoczesny CSS ułatwia to zadanie.

8. linear() funkcja wygładzania

Funkcja wygładzania linear() umożliwia tworzenie złożonych, niestandardowych krzywych przejścia (takich jak odbicia, sprężyny lub elastyczne przekroczenia) przez interpolację liniową między nieograniczoną liczbą określonych punktów postępu.

Browser Support

  • Chrome: 113.
  • Edge: 113.
  • Firefox: 112.
  • Safari: 17.2.

Source

W tym przykładzie linear() służy do nadania oknu naturalnego efektu wygładzania podczas wyświetlania lub ukrywania.

Więcej informacji o funkcji linear()

9. @starting-style

Reguła @ @starting-style CSS określa wartości początkowe właściwości elementu, z których chcesz przejść, gdy element jest po raz pierwszy renderowany w DOM lub gdy jego właściwość display zmienia się z none na widoczną wartość, aby umożliwić płynne przejścia wejściowe.

Browser Support

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 129.
  • Safari: 17.5.

Source

W poprzedniej wersji demonstracyjnej służy to do animowania elementu <dialog>, gdy staje się on widoczny.

10. transition-behavior: allow-discrete

Właściwość transition-behavior (często używana jako allow-discrete w skrócie transition) umożliwia przejście między dyskretnymi właściwościami, takimi jak display lub overlay, dzięki czemu elementy pozostają widoczne podczas animacji wyjścia, zanim zostaną ukryte.

Browser Support

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 129.
  • Safari: 17.4.

Source

11. sibling-index() i sibling-count()

Funkcje CSS sibling-index() i sibling-count() zwracają liczby całkowite reprezentujące odpowiednio pozycję elementu w grupie elementów równorzędnych (liczoną od 1) i łączną liczbę elementów równorzędnych. Doskonale nadają się do dynamicznego obliczania opóźnień animacji kaskadowych w CSS bez użycia JavaScriptu.

Browser Support

  • Chrome: 138.
  • Edge: 138.
  • Firefox: not supported.
  • Safari: 26.2.

Source

Browser Support

  • Chrome: 138.
  • Edge: 138.
  • Firefox: not supported.
  • Safari: 26.2.

Source

W tej wersji demonstracyjnej zawartość okna jest rozłożona w czasie za pomocą elementu sibling-index() w elemencie animation-delay.

dialog[open] > * {
  animation:
    content-entry 0.6s var(--spring) forwards;
  
  /* 0.2s delay for the first item, then staggering by 0.05s via sibling-index()
  */
  animation-delay:
    calc(sibling-index() * 0.05s + 0.2s);
}

12. Zamknięcie okna (atrybut closedby)

Atrybut closedby w elemencie <dialog> (o wartości any) umożliwia używanie deklaratywnego zachowania „lekkiego zamykania”, które automatycznie zamyka okna modalne po kliknięciu poza nimi lub naciśnięciu klawisza ESC bez konieczności używania niestandardowego kodu JavaScript.

Browser Support

  • Chrome: 134.
  • Edge: 134.
  • Firefox: 141.
  • Safari: not supported.

Source

Możesz to sprawdzić w poprzedniej wersji demonstracyjnej.

13. corner-shape

Eksperymentalna właściwość skrócona corner-shape umożliwia deweloperom modyfikowanie zaokrąglonych rogów (od border-radius) w celu tworzenia niestandardowych kształtów wizualnych, takich jak bevel, scoop, notch lub squircle (za pomocą superellipse()). Obramowania, cienie i kontury zaznaczenia automatycznie dopasowują się do kształtu.

Browser Support

  • Chrome: 139.
  • Edge: 139.
  • Firefox: not supported.
  • Safari: not supported.

Source

Część 3. Zapewnij nawigację z instrukcjami

Prowadzenie użytkownika przez ścieżkę pomaga zachować kontekst i zrozumieć działanie aplikacji, eliminując dezorientujące ponowne wczytywanie. Możesz to zrobić na kilka sposobów, m.in. za pomocą przejść widoku, które niedawno zostały zaktualizowane.

14. Przejścia między widokami w tym samym dokumencie

Przejścia w tym samym dokumencie, które są częścią interfejsu View Transition API, zapewniają mechanizm animowania przejść między stanami DOM w aplikacjach jednostronicowych (SPA) przez przechwytywanie migawek i przekształcanie ich za pomocą CSS.

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 144.
  • Safari: 18.

Source

Więcej informacji o przejściach między widokami w tym samym dokumencie

15. Przejścia między dokumentami

Rozszerza interfejs View Transition API na aplikacje wielostronicowe (MPA), umożliwiając tworzenie płynnych, animowanych przejść podczas nawigacji między różnymi dokumentami przez dopasowywanie elementów o tym samym atrybucie view-transition-name na stronach.

Browser Support

  • Chrome: 126.
  • Edge: 126.
  • Firefox: not supported.
  • Safari: 18.2.

Source

Więcej informacji o przejściach między widokami w różnych dokumentach

16. Przejścia widoku w zakresie elementu

Wprowadzone w Chrome 147 przejścia widoku w zakresie elementu umożliwiają uruchomienie przejścia widoku tylko w określonym poddrzewie DOM (za pomocą element.startViewTransition()), przy jednoczesnym zachowaniu aktywności i interaktywności pozostałej części strony.

Browser Support

  • Chrome: 147.
  • Edge: 147.
  • Firefox: not supported.
  • Safari: not supported.

Podczas rozpoczynania przejścia widoku w zakresie elementu jest ono wykonywane w izolacji: skanuje tylko to poddrzewo w poszukiwaniu elementów z atrybutem view-transition-name, a pseudoklasa ::view-transition jest wstrzykiwana do samego korzenia zakresu. Izolacja jest możliwa dzięki automatycznemu stosowaniu view-transition-scope: all.

Umożliwia to jednoczesne uruchamianie wielu przejść widoku, a także zagnieżdżanie przejść widoku: podczas gdy elementy na tych listach są tasowane, możesz też zamieniać same listy.

Dodatkowo pseudoklasy grup są automatycznie zagnieżdżane, a przepełnienie pseudoklasy group-children grupy zawierającej jest w razie potrzeby przycinane.

Przejścia widoku o ograniczonym zakresie doskonale sprawdzają się w przypadku mikrointerakcji i przekształceń stanu na stronie, zapewniając użytkownikowi więcej kontekstu, gdy następuje zmiana wizualna. To świetny sposób na zwiększenie użyteczności aplikacji, a także poprawę jej wyglądu i działania. Te drobne rzeczy mają duże znaczenie.

Więcej informacji o przejściach widoku w zakresie elementu

17. Przejścia widoku dwufazowe

Jest to funkcja eksperymentalna, która natychmiast rozpoczyna przejście widoku między dokumentami bez czekania na gotowość nowego DOM. Najpierw następuje przejście do pośredniego ekranu szkieletowego lub interfejsu ładowania, a następnie kontynuowane jest przejście widoku między dokumentami.

Więcej informacji o dwufazowych przejściach widoku

18. Animacje oparte na przewijaniu

Animacje oparte na przewijaniu łączą postęp animacji CSS bezpośrednio z pozycją przewijania kontenera przewijania, co pozwala deweloperom tworzyć interfejsy oparte na przewijaniu, takie jak wydajne efekty paralaksy i wskaźniki przewijania.

Browser Support

  • Chrome: 115.
  • Edge: 115.
  • Firefox: behind a flag.
  • Safari: 26.

Source

19. Animacje wywoływane przewijaniem

Nowością w Chrome są animacje wywoływane przewijaniem. Animacje wywoływane przez przewijanie uruchamiają standardową animację CSS opartą na czasie po przekroczeniu granicy przewijania (do zdefiniowania wyzwalacza używa się timeline-trigger, a do jego odtworzenia – animation-trigger), co stanowi deklaratywną alternatywę dla IntersectionObserver.

Browser Support

  • Chrome: 146.
  • Edge: 146.
  • Firefox: not supported.
  • Safari: not supported.

Podstawowym mechanizmem animacji wywoływanych przez przewijanie są wyzwalacze osi czasu, które są aktywne lub nieaktywne.

.element {
  timeline-trigger:
    --t
    view()
    contain 25% contain 75% / entry 105% exit -5%
  ;
}

Włącz wizualizator w poniższym demo, aby zobaczyć, co się dzieje: pierwszy zakres to zakres aktywacji, który określa, kiedy reguła staje się aktywna. Drugi zakres to zakres aktywny, który określa, jak długo ma pozostać aktywny.

Więcej informacji o animacjach wywoływanych przez przewijanie

20. scroll-target-group: auto

Możesz teraz utworzyć natywny element CSS scroll-spy, który automatycznie wyróżnia linki nawigacyjne na podstawie pozycji przewijania użytkownika. Ustawiając scroll-target-group: auto na liście nawigacyjnej, przeglądarka automatycznie ustawia aria-current="true" i stosuje pseudoklasę :target-current do aktywnego linku. :target-current można następnie użyć do dalszego formatowania aktywnych linków.

Browser Support

  • Chrome: 140.
  • Edge: 140.
  • Firefox: not supported.
  • Safari: not supported.

Source

Browser Support

  • Chrome: 135.
  • Edge: 135.
  • Firefox: not supported.
  • Safari: not supported.

Source

Więcej informacji o funkcji przewijania z podświetlaniem w CSSscroll-target-group

21. Opcja kontenera scrollIntoView()

Metoda scrollIntoView() zyskuje opcję container. Ustawienie target.scrollIntoView({container: 'nearest'}) ogranicza przewijanie do najbliższego elementu przewijanego zamiast przenosić je na samą górę, co zapobiega dezorientującemu przewijaniu na poziomie strony.

Browser Support

  • Chrome: 1.
  • Edge: 79.
  • Firefox: 1.
  • Safari: 3.

Source

W tym przykładzie możesz włączać i wyłączać opcję za pomocą pola wyboru:

Więcej informacji o funkcji container: "nearest"

22. Przewijanie zautomatyzowane z możliwością oczekiwania

Wszystkie metody programowego przewijania (np. scroll(), scrollTo() i scrollIntoView()) zwracają teraz obiekt Promise. Dzięki temu deweloperzy mogą await zakończenie animacji płynnego przewijania przed wykonaniem kolejnej logiki (np. dodaniem efektu wyróżnienia).

Browser Support

  • Chrome: 1.
  • Edge: 79.
  • Firefox: 1.
  • Safari: 3.

Source

Na poniższym filmie demonstracyjnym możesz zobaczyć, jak to działa: element jest najpierw przewijany do widoku, a następnie dodawany jest do niego efekt podświetlenia.

Część 4. Maksymalizowanie treści, redukcja szumów

Jednym z najbardziej frustrujących doświadczeń w internecie jest oczekiwanie na wyświetlenie treści, a następnie zablokowanie dostępu do nich przez natrętne wyskakujące okienka lub banery. Zwiększ obszar treści, eliminując niepotrzebne elementy wizualne i obramowania aplikacji oraz przenosząc działania dodatkowe za warstwowy interfejs.

23. Zapytania dotyczące stanu przewijania (scrolled)

Część zapytań o kontenery CSS, scroll-state, umożliwia określanie stylu elementów podrzędnych na podstawie stanu przewijania kontenera (za pomocą container-type: scroll-state). Zapytanie scrolled (np. scroll-state(scrolled: bottom)) wykrywa kierunek ostatniego względnego przewijania, co umożliwia stosowanie wzorców takich jak „Hidey Bar”.

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: not supported.
  • Safari: not supported.

Więcej informacji o wzorcu „Hidey Bar”

24. Zapytania o kontener zakotwiczony

Pozycjonowanie elementów zakotwiczonych w CSS obejmuje zapytania o zakotwiczony kontener, które umożliwiają sprawdzanie, która pozycja rezerwowa (np. fallback: bottom lub fallback: flip-block) jest obecnie aktywna w elemencie zakotwiczonym, co pozwala na dynamiczne aktualizowanie stylu elementu zakotwiczonego (np. strzałek etykietki).

Browser Support

  • Chrome: 143.
  • Edge: 143.
  • Firefox: not supported.
  • Safari: not supported.

W poniższym przykładzie wyskakujące okienko z pozycją zakotwiczenia zmienia położenie na podstawie pozycji zastępczej i położenia w obszarze widocznym za pomocą zapytań o zakotwiczony kontener. Gdy etykietka otwiera się nad elementem wywołującym, jest animowana od dołu do góry, od źródła. Gdy jest pod elementem wywołującym, animacja jest od góry do dołu.

25. CSS border-shape

Właściwość border-shape umożliwia zdefiniowanie nieregularnych obramowań za pomocą tej samej składni kształtu co w przypadku właściwości clip-path. W przeciwieństwie do przycinania border-shape zachowuje obramowania, kontury i cienie wizualnie dopasowane do niestandardowego kształtu. Wykracza też poza możliwości corner-shape, ponieważ border-shape jest znacznie bardziej elastyczny.

Browser Support

  • Chrome: 147.
  • Edge: 147.
  • Firefox: not supported.
  • Safari: not supported.

26. Funkcja CSS shape()

Funkcja CSS shape() umożliwia zdefiniowanie złożonych ścieżek geometrycznych w kodzie CSS. Można go używać we właściwościach takich jak clip-path, border-shape czy shape-outside, aby tworzyć organiczne, nieprostokątne kształty, na których mogą być wyświetlane treści.

Browser Support

  • Chrome: 135.
  • Edge: 135.
  • Firefox: 148.
  • Safari: 18.4.

Source

27. Przyklejone pozycjonowanie względem osi

Dzięki niedawnej zmianie w specyfikacji przepełnienia, która umożliwia kontenerom przewijanie tylko w jednej osi, pozycjonowanie przyklejone może teraz śledzić jednocześnie 2 różne kontenery przewijania (po jednym dla każdej osi). Dzięki temu pierwsza kolumna i górny wiersz w tabeli działają zgodnie z oczekiwaniami nawet w kontenerach przewijania wzdłuż jednej osi.

Browser Support

  • Chrome: 56.
  • Edge: 16.
  • Firefox: 32.
  • Safari: 13.

Ta funkcja jest dostępna do testowania w Chrome 148 z włączoną flagą Eksperymentalne funkcje platformy internetowej.

Więcej informacji o position: sticky na osi

Część 5. Dostosowywanie do formatu

Jedną z najcenniejszych cech internetu jest jego elastyczność. Użytkownicy mogą przeglądać internet na różnych urządzeniach, z których każde ma własne mechanizmy interakcji. Układy powinny zasadniczo dostosowywać się do urządzenia i metody wprowadzania danych, niezależnie od tego, czy klawiatura wirtualna jest otwarta, czy aktywne są elementy dotykowe. Projektowanie stron internetowych z uwzględnieniem rodzaju urządzenia nadaje witrynie lub aplikacji internetowej dodatkową elegancję i spełnia oczekiwania użytkowników.

28. Gesty przewijania (obszary, po których można przesuwać)

Przykładem dostosowania do formatu jest możliwość korzystania z interakcji opartych na gestach i przesuwaniu w internecie mobilnym. Do uzyskania niektórych z tych efektów możesz użyć przewijania, ale nie zawsze jest to intuicyjne rozwiązanie.

Zespół Chrome pracuje nad proponowanym rozwiązaniem deklaratywnym, które w ramach dyskusji z grupą społecznościową OpenUI umożliwi tworzenie natywnych obszarów, które można przesuwać gestami (np. list w Gmailu lub menu bocznych, które można zamknąć przesunięciem), za pomocą elementów overscrollcontainer i wywoływaczy poleceń. Będzie ono działać naturalnie zarówno w przypadku dotyku, jak i przewijania.

Więcej informacji o gestach przewijania

29. HTML w Canvas

Interfejs HTML-in-Canvas API to duża zmiana paradygmatu, która umożliwia programistom umieszczanie rzeczywistych elementów DOM w elemencie <canvas> (za pomocą atrybutu layoutsubtree). Te elementy pozostają w pełni przeszukiwalne i dostępne oraz obsługują funkcje przeglądarki, takie jak autouzupełnianie, a jednocześnie umożliwiają natywną interakcję shaderów WebGL/WebGPU.

Runda błyskawiczna

Krótkie omówienie innych zaawansowanych funkcji, które rozwijają internet.

30. Przeprowadzka z zachowaniem stanu DOM (moveBefore())

Metoda DOM moveBefore() umożliwia zmianę elementu nadrzędnego węzłów DOM (np. odtwarzanie filmów, elementów iframe lub zaznaczonych pól wejściowych) bez niszczenia ich stanu i wywoływania ponownego wczytywania.

Oznacza to, że filmy są nadal odtwarzane, elementy iframe nie są ponownie wczytywane, animacje CSS nie są ponownie uruchamiane, a pola wprowadzania zachowują fokus podczas przenoszenia ich w układzie.

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: 144.
  • Safari: not supported.

Source

Więcej informacji o funkcji moveBefore()

31. CSS text-fit

text-fit to eksperymentalna właściwość CSS, która dynamicznie skaluje rozmiar czcionki, aby dokładnie dopasować wiersze tekstu do szerokości elementu zawierającego (np. text-fit: grow per-line-all).

Więcej informacji o funkcji text-fit

32. Usługa porównywania cen text-box (text-box-trim i text-box-edge)

Właściwość text-box (i jej odpowiedniki text-box-trim i text-box-edge) przycina pionową przestrzeń (interlinię) nad i pod tekstem, zapewniając idealne pionowe wyrównanie i wyśrodkowanie.

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: behind a flag.
  • Safari: 18.2.

Source

Więcej informacji o funkcji text-trim

33. Dekoracje przerw CSS

Dekoracje przerw CSS wprowadzają column-rule do siatki i flexboxa oraz nową właściwość row-rule, która umożliwia programistom stylizowanie odstępów między wierszami i kolumnami. Nie musisz już manipulować obramowaniami ani pseudoelementami, aby stylizować linie między wierszami i kolumnami.

Browser Support

  • Chrome: 149.
  • Edge: 149.
  • Firefox: not supported.
  • Safari: not supported.

Więcej informacji o dekoracjach przerw w CSS

34. Jednostki widocznego obszaru uwzględniające pasek przewijania (vw, vh itp.)

Jednostki widocznego obszaru, takie jak vw i vh, automatycznie odejmują rozmiar pasków przewijania (jeśli są widoczne, przy użyciu overflow-y: scroll lub scrollbar-gutter: stable zadeklarowanych w :root), co zapobiega przypadkowemu przepełnieniu w poziomie podczas ustawiania elementów na 100vw.

Browser Support

  • Chrome: 20.
  • Edge: 12.
  • Firefox: 19.
  • Safari: 6.

Więcej informacji o jednostkach viewportu uwzględniających paski przewijania

35. Dostęp do pseudoelementów za pomocą JavaScriptu

Interfejsy API sieci teraz udostępniają JavaScriptowi pseudoelementy CSS (np. ::before lub ::after).

Za pomocą funkcji Element.pseudo(type) możesz pobrać instancję CSSPseudoElement, a za pomocą funkcji Event.pseudoTarget sprawdzić, który pseudoelement wywołał zdarzenie.

Browser Support

  • Chrome: 149.
  • Edge: 149.
  • Firefox: not supported.
  • Safari: not supported.

Więcej informacji o funkcji CSSPseudoElement

Podsumowanie

To wszystko w naszym podsumowaniu nowości w interfejsie internetowym. Mamy nadzieję, że wykorzystasz te funkcje do tworzenia świetnych interfejsów. Do zobaczenia w przyszłym roku!