Poznaj kilka ciekawych funkcji, które w listopadzie 2022 r. trafiły do stabilnych i beta wersji przeglądarek internetowych.
stabilne wersje przeglądarek,
W listopadzie stały się one stabilnymi wersjami: Firefox 107 i Chrome 108. Zobaczmy, co to oznacza dla platformy internetowej.
Zmiana zachowania widocznego obszaru w układzie w Chrome na Androidzie
W Chrome 108 na Androidzie zmieniono zachowanie układu Viewport, gdy wyświetlana jest klawiatura ekranowa. Więcej informacji znajdziesz w artykule Przygotowanie się na zmiany zachowania związane z wymiarami widoku, które pojawią się w Chrome na Androida.
Nowe jednostki widocznego obszaru
W Chrome 108 dostępne są też nowe jednostki Viewport w CSS. Obejmuje to małe (svw
, svh
, svi
, svb
, svmin
, svmax
), duże (lvw
, lvh
, lvi
, lvb
, lvmin
, lvmax
), dynamiczne (dvw
, dvh
, dvi
, dvb
, dvmin
, dvmax
) i logiczne (vi
, vb
) jednostki. Te jednostki są już zaimplementowane w Firefoksie i Safari, co oznacza, że teraz w przypadku tych jednostek mamy interoperacyjność w trzech głównych silnikach przeglądarek.
Przeczytaj artykuł Duże, małe i dynamiczne widoczne obszary.
Obsługa przeglądarek
Właściwość CSS contain-intrinsic-size
jest obsługiwana w Firefox 107, podobnie jak pełna nazwa contain-intrinsic-width
, contain-intrinsic-height
i właściwości logiczne contain-intrinsic-block-size
oraz contain-intrinsic-inline-size
.
Są one używane do określania rozmiaru elementu interfejsu użytkownika, który podlega ograniczeniu rozmiaru. Dzięki temu agent użytkownika może określić rozmiar elementu bez konieczności renderowania jego elementów podrzędnych. Są one przydatne, gdy element podlega ograniczeniu rozmiaru.
Obsługa słowa kluczowego CSS fragmentation avoid
Wersja Chrome 108 obsługuje wartość avoid
właściwości fragmentacji CSS break-before
, break-after
i break-inside
podczas drukowania. Ta wartość informuje przeglądarkę, aby unikała dzielenia tekstu przed, po lub wewnątrz elementu, do którego jest zastosowana. Na przykład poniższy kod CSS zapobiega dzieleniu się rysunku na części w miejscu podziału strony.
figure {
break-inside: avoid;
}
Dodatek ten jest spowodowany uwzględnieniem obsługi drukowania za pomocą LayoutNG, co zapewnia nowoczesne, mniej problematyczne działanie. Więcej informacji o LayoutNG
Interfejs Federated Credential Management API
Interfejs Federated Credential Management API (FedCM) zapewnia abstrakcję dla przepływów tożsamości w federacji w internecie. Wyświetla okno dialogowe w przeglądarce, które umożliwia użytkownikom wybranie kont dostawców tożsamości do logowania się w witrynach. FedCM jest dostępny w Chrome 108. Więcej informacji znajdziesz w poście na blogu z ogłoszeniem FedCM.
Wersje beta przeglądarek
Wersje beta przeglądarki umożliwiają przeglądanie funkcji, które pojawią się w następnej wersji stabilnej. To świetny czas na przetestowanie nowych funkcji lub usunięcia, które mogą wpłynąć na Twoją witrynę, zanim zostaną udostępnione publicznie. Ze względu na daty premier jedyną nową wersją beta w tym miesiącu jest Firefox 108, a Safari 16.2 beta nadal jest w trakcie.
Firefox 108 obsługuje atrybuty height
i width
elementu <source>
, gdy jest on elementem podrzędnym elementu <picture>
. Te atrybuty akceptują wysokość lub szerokość obrazu w pikselach jako liczbę całkowitą bez jednostki.
W Firefoxie trwają prace nad implementacją zapytań dotyczących kontenerów. W flagach layout.css.container-queries.enabled
w Firefox 108 beta znajdziesz jednostki długości zapytania kontenera: cqw
, cqh
, cqi
, cqb
, cqmin
, cqmax
. Są to jednostki długości w stosunku do rozmiaru kontenera zapytania.
Fragment cyklu Nowości w internecie