Poznaj kilka ciekawych funkcji, które w sierpniu 2022 r. trafiły do stabilnych i beta wersji przeglądarek internetowych.
stabilne wersje przeglądarek,
W sierpniu stałymi wersjami stały się Firefox 104, Chrome 104 i Chrome 105.
Poszczególne przekształcenia
Chrome 104 zawiera osobne właściwości dla przekształceń CSS. Są to właściwości scale
, rotate
i translate
, których możesz używać do indywidualnego definiowania tych części przekształcenia.
Dzięki temu Chrome dołączy do przeglądarek Firefox i Safari, które już obsługują te usługi.
Składnia zapytań dotyczących multimediów
Chrome 104 zawiera też składnię zakresu zapytania o multimedia. Ta funkcja została już wdrożona przez Firefoxa i ułatwia porządkowanie zapytań dotyczących multimediów. Na przykład zapytanie o multimedia:
@media (min-width: 400px) {
// Styles for viewports with a width of 400 pixels or greater.
}
Można je zapisać za pomocą operatora porównywania:
@media (width >= 400px) {
// Styles for viewports with a width of 400 pixels or greater.
}
Zapytania dotyczące kontenerów
Chrome 105 to ekscytująca wersja, która wprowadza na platformę internetową długo oczekiwaną funkcję zapytań kontenera. Zapytania o multimedia umożliwiają wysyłanie zapytań na podstawie rozmiaru widocznego obszaru, a zapytania o kontenery umożliwiają wysyłanie zapytań na podstawie rozmiaru kontenera.
Aby korzystać z zapytań dotyczących kontenerów, włącz zawieranie za pomocą właściwości container-type
.
.card-container {
container-type: inline-size;
}
Ustawienie container-type
na inline-size
wysyła zapytanie o rozmiar elementu nadrzędnego w kierunku inline. W przypadku języków łacińskich, takich jak angielski, będzie to szerokość karty, ponieważ tekst jest wyświetlany od lewej do prawej.
Teraz możemy użyć tego kontenera do zastosowania stylów do dowolnego z jego elementów potomnych za pomocą @container
:
.card {
display: grid;
grid-template-columns: 1fr 1fr;
}
@container (max-width: 400px) {
.card {
grid-template-columns: 1fr;
}
}
Więcej informacji o zapytaniach dotyczących kontenerów znajdziesz w poście @container i :has(): 2 nowe potężne interfejsy API do obsługi interakcji z użytkownikiem w Chromium 105.
Pseudoklasa nadrzędna :has().
W powyższym poście wspominany jest też użytkownik :has()
. Ta nowa pseudoklasa CSS :has() umożliwia kierowanie na element nadrzędny i elementy równe na podstawie warunków. Więcej informacji znajdziesz w artykule :has() – selektor rodziny.
Sanitizer API
W Chrome 105 jest też dostępny interfejs Sanitizer API. Ten interfejs API wdraża funkcję uszlachetniania w ramach platformy, aby pomóc w usuwaniu luk w zabezpieczeniach związanych z skryptami między witrynami.
W Chrome 105 dostępna jest też pseudoklasa CSS :modal. Dopasowuje element, który jest w stanie, w którym wyklucza wszystkie interakcje z elementami zewnętrznymi. Na przykład <dialog>
otwarty za pomocą interfejsu API showModal()
.
metody findLast() i findLastIndex();
Firefox 104 dodaje obsługę flagi dla metod Array.prototype.findLast(), Array.prototype.findLastIndex(), TypedArray.prototype.findLast() i TypedArray.prototype.findLastIndex(). Są one używane do znajdowania wartości i indeksu (odpowiednio) ostatniego elementu w tablicy lub TypedArray, który pasuje do podanej funkcji testowej.
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 to, że daty wydania przypadają na koniec miesiąca, w sierpniu udostępniliśmy tylko nową wersję beta Firefoxa 105, która nie zawiera obecnie zbyt wielu szczegółów.
Wersja beta Safari 16, o której wspominaliśmy w czerwcu, jest nadal dostępna.
Fragment cyklu Nowości w internecie