Nowości w Chrome 112

Adriana Jara

Oto, co musisz wiedzieć na ten temat:

Nazywam się Adriana Jara. Przyjrzyjmy się nowościom dla deweloperów w Chrome 112.

Obsługa CSS w zakresie zagnieżdżania.

Jedna z naszych ulubionych funkcji wstępnego procesora CSS jest teraz wbudowana w język: reguły zagnieżdżania reguł stylów.

Przed zagnieżdżeniem trzeba było osobno zadeklarować każdy selektor. Prowadzi to do powielania i zbiorczych arkuszy stylów oraz rozproszonego procesu tworzenia.

Przed
.nesting {
  color: hotpink;
}

.nesting > .is {
  color: rebeccapurple;
}

.nesting > .is > .awesome {
  color: deeppink;
}

Po zagnieżdżeniu selektory można kontynuować, a powiązane z nimi reguły stylów można grupować.

Po
.nesting {
  color: hotpink;

  > .is {
    color: rebeccapurple;

    > .awesome {
      color: deeppink;
    }
  }
}

Zagnieżdżanie pomaga programistom przez ograniczenie konieczności powtarzania selektorów, a jednocześnie umożliwia współlokalizowanie reguł stylów dla powiązanych elementów. Pomaga to również dostosowywać style do docelowego kodu HTML.

Jeśli komponent .nesting w przykładzie został usunięty z projektu, możesz usunąć całą grupę, zamiast wyszukiwać pliki pod kątem powiązanych instancji selektora.

Zagnieżdżanie pomaga w tych kwestiach:

  • Uporządkowanie materiałów.
  • Zmniejszanie rozmiaru pliku.
  • Refaktoryzacja.

W tym artykule znajdziesz wskazówki dotyczące pełnego wykorzystania funkcji zagnieżdżania CSS. Informacje na temat zagnieżdżania w narzędziach deweloperskich znajdziesz tutaj.

Aktualizacja algorytmu dla początkowego zaznaczenia: <dialog>.

Element HTML <dialog> to standardowy sposób reprezentowania okna dialogowego lub innego komponentu interaktywnego, np. alertu, który można zamknąć, lub okna podrzędnego, który musi być wyświetlany nad całą zawartością strony internetowej.

Ten element HTML jest zalecanym sposobem tworzenia takich treści, ponieważ jego funkcje zostały opracowane w celu zapewnienia lepszej obsługi i spójności w zakresie ułatwień dostępu.

Jedną z tych funkcji jest to, który element jest zaznaczony po otwarciu okna dialogowego. W tej wersji algorytm wybierający dany element został zaktualizowany.

Od teraz:

Kroki skupienia w oknie dialogowym korzystają z elementów, które można zaznaczyć, a nie na elementach z klawiatury Sam element <dialog> jest zaznaczony, jeśli ma ustawiony atrybut autofokusa

Sam element <dialog> jest ustawiany jako element zastępczy, a nie resetowany element <body>.

Więcej informacji o elemencie <dialog> znajdziesz w dokumentacji.

Pomijam moduły obsługi pobierania bez operacji skryptu service worker.

Od wersji Chrome 112 uruchamianie skryptu service worker i wysyłanie detektora ze ścieżki krytycznej nawigacji będzie pomijane, jeśli klient użytkownika zidentyfikuje, że wszystkie detektory pobierania skryptu service worker są nieaktywne.

Ta funkcja przyspiesza nawigację na takich stronach.

Zastosowanie modułu obsługi pobierania było jednym z wymagań PWA, które musi spełniać aplikacja internetowa, aby można ją było zainstalować. Podejrzewamy, że to może być przyczyną tego, że niektóre witryny mają pusty moduł obsługi pobierania. Uruchomienie skryptu service worker i uruchomienie detektora bez operacji wiąże się tylko z brakiem możliwości i nie daje żadnych korzyści, które można wdrożyć za pomocą odpowiedniego skryptu, takiego jak buforowanie czy funkcje offline. Teraz Chrome pomija je, by ułatwić nawigację.

W związku z tym Chrome będzie wyświetlać ostrzeżenia w konsoli, jeśli wszystkie detektory pobierania powiązane z skrytkami service worker będą działać nieprawidłowo, i zachęć deweloperów do ich usunięcia.

Ostrzeżenia w Narzędziach deweloperskich dotyczące pustych modułów obsługi pobierania mechanizmów Service Worker.

…i wiele innych.

Oczywiście, jest ich jeszcze więcej.

  • Metoda ustawiająca dla document.domain została wycofana.
  • Występuje okres próbny wycofania komponentu X-Requested-With header w komponencie WebView
  • Dyktafon w narzędziach deweloperskich może teraz nagrywać za pomocą selektorów przekłuwania.

Więcej informacji

Ta analiza obejmuje tylko niektóre najważniejsze kwestie. Kliknij poniższe linki, aby dowiedzieć się więcej o zmianach w Chrome 112.

Subskrybuj

Aby być na bieżąco, zasubskrybuj kanał Chrome Developers w YouTube. Będziesz otrzymywać e-maile z powiadomieniami o każdym nowym filmie.

Jestem Adriana Jara i jak tylko pojawi się Chrome 113, będę do Ciebie mówić, co nowego w Chrome.