Odkryj ciekawe funkcje, które zostały udostępnione w wersjach stabilnych i beta w przeglądarkach internetowych w sierpniu 2022 roku.
Stabilne wersje przeglądarek
W sierpniu wersje Firefox 104, Chrome 104 i Chrome 105 stały się stabilne.
Pojedyncze przekształcenia
Chrome 104 zawiera poszczególne właściwości przekształceń CSS. Właściwości to scale, rotate i translate, których możesz używać do definiowania tych części przekształcenia.
Chrome dołącza do przeglądarek Firefox i Safari, które już obsługują te właściwości.
Nowa składnia zapytań o media
Chrome 104 zawiera też składnię zakresu zapytań o multimedia. Funkcja ta została już wysłana w przeglądarce Firefox i usprawniła wyszukiwanie multimediów. Na przykład to zapytanie o media:
@media (min-width: 400px) {
// Styles for viewports with a width of 400 pixels or greater.
}
Można go zapisać za pomocą operatora porównania:
@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 dodająca długo oczekiwaną funkcję zapytań dotyczących kontenerów na platformę internetową. Zapytania o multimedia umożliwiają wysyłanie zapytań dotyczących rozmiaru widocznego obszaru, natomiast zapytania o kontenery umożliwiają wysyłanie zapytań na podstawie rozmiaru kontenera.
Aby korzystać z zapytań dotyczących kontenerów, włącz izolację za pomocą właściwości container-type.
.card-container {
container-type: inline-size;
}
Ustawienie dla container-type wartości inline-size wysyła zapytania o rozmiar elementu nadrzędnego w kierunku bezpośrednim. W przypadku języków łacińskich, takich jak angielski, będzie to szerokość karty, ponieważ tekst układa się w tekście od lewej do prawej.
Teraz możemy użyć tego kontenera, aby zastosować style do dowolnego z jego elementów podrzędnych, używając elementu @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(): dwa nowe elastyczne interfejsy API w Chromium 105.
Pseudoklasa nadrzędna :has()
Wzmianka we wspomnianym wyżej poście to: :has(). Ta nowa pseudoklasa pseudoklasa CSS :has() umożliwia kierowanie reklam na element nadrzędny i elementy równorzędne na podstawie warunków. Więcej informacji znajdziesz w sekcji :has() w selektorze rodziny.
Interfejs API Sanitizer
W Chrome 105 dostępny jest też Sanitizer API. Ten interfejs API wprowadza proces oczyszczania platformy w celu usunięcia luk w zabezpieczeniach między witrynami.
W Chrome 105 jest też pseudoklasa CSS :modal. Ta wartość odpowiada elementowi znajdującemu się w stanie, w którym wyklucza ona wszystkie interakcje z elementami spoza niego. Na przykład plik <dialog> został otwarty za pomocą interfejsu API showModal().
Metody findLast() i findLastIndex()
W przeglądarce Firefox w wersji 104 obsługiwane są flagi dla metod Array.prototype.findLast(), Array.prototype.findLastIndex(), TypedArray.prototype.findLast() i TypedArray.prototype.findLastIndex(). Pozwalają one znaleźć wartość i indeks (odpowiednio) pasującym do ostatniego elementu w tablicy tablica. lub typu test
Wersje przeglądarki (beta)
Wersje beta zawierają podgląd funkcji, które pojawią się w następnej stabilnej wersji przeglądarki. To doskonała okazja do przetestowania nowych funkcji lub usunięć, które mogą wpłynąć na Twoją witrynę, zanim udostępnimy je użytkownikom na całym świecie.
Ponieważ daty premiery wypadają tuż poza miesiącem, jedyną nową wersją beta w sierpniu był Firefox 105, o którym wiemy na razie mniej.
Wersja beta Safari 16 wspomniana w czerwcu również wciąż trwa.