Nowości w Chrome 112

Adriana Jara

Oto, co musisz wiedzieć na ten temat:

Nazywam się Adriana Jara. Zobacz, co nowego w Chrome 112 dla deweloperów.

Obsługa zagnieżdżania w CSS.

Jedna z naszych ulubionych funkcji preprocesora CSS jest teraz wbudowana w język: zagnieżdżanie reguł stylów.

Przed zagnieżchnięciem każdy selektor musiał być zadeklarowany osobno. Prowadzi to do powtarzania się elementów, nadmiernego rozrostu arkuszy stylów i 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 reguły stylów można grupować.

Po
.nesting {
  color: hotpink;

  > .is {
    color: rebeccapurple;

    > .awesome {
      color: deeppink;
    }
  }
}

Zagnieżdżanie ułatwia deweloperom pracę, ponieważ zmniejsza potrzebę powtarzania selektorów, a zarazem umożliwia grupowanie reguł stylów powiązanych elementów. Może też pomóc w dopasowaniu stylów do kodu HTML, na który są one kierowane.

Jeśli w naszym przykładzie element .nesting został usunięty z projektu, możesz usunąć całą grupę, zamiast szukać w plikach powiązanych instancji selektora.

Umieszczanie elementów w grupach może być przydatne w tych sytuacjach:

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

Wskazówki dotyczące optymalnego korzystania z zagnieżdżania w CSS znajdziesz w tym artykule, a informacje o obsłudze zagnieżdżania w devtools znajdziesz tutaj.

Aktualizacja algorytmu dla początkowego skupienia uwagi na <dialog>.

Element HTML <dialog> to standardowy sposób reprezentowania okienka dialogowego lub innego interaktywnego komponentu, takiego jak alert, który można zamknąć, lub podokno, które musi być wyświetlane nad wszystkimi innymi treściami na stronie internetowej.

Ten element HTML to zalecany sposób tworzenia takich treści, ponieważ jego funkcje zostały zaprojektowane tak, aby zapewniać lepszą i spójniejszą użyteczność oraz dostępność.

Jedną z nich jest obsługa elementu, który jest zaznaczany po otwarciu okna dialogowego. W tej wersji zaktualizowano algorytm, który wybiera ten element.

Od teraz:

Kroki dotyczące ustawiania zaznaczenia w oknie dotyczą elementów możliwych do zaznaczenia za pomocą klawiatury, a nie dowolnych elementów możliwych do zaznaczenia. Element <dialog> zostaje zaznaczony, jeśli ma ustawiony atrybut autofocus.

Zamiast „zresetowania” fokusu na elemencie <body>, fokus otrzymuje sam element <dialog>.

Aby dowiedzieć się więcej o komponencie <dialog>, przeczytaj dokumentację.

Pomijanie modułów obsługi pobierania no-op skryptu service worker.

Od wersji 112 Chrome uruchamianie usługi i wysyłanie listenera z krytycznego szlaku nawigacyjnego zostaną pominięte, jeśli agent użytkownika wykryje, że wszystkie listenery pobierania usługi są nieaktywne.

Ta funkcja przyspiesza nawigację po tych stronach.

Obsługa pobierania była jednym z wymagań dotyczących aplikacji internetowych, aby można je było instalować. Podejrzewamy, że może to być przyczyną tego, że niektóre witryny mają pusty moduł obsługi pobierania. Uruchomienie skryptu service worker i wykonanie listenera bez operacji powoduje tylko dodatkowe obciążenie, nie przynosząc żadnych korzyści, które można uzyskać dzięki odpowiedniemu skryptowi service worker, np. możliwości buforowania czy pracy offline. Dlatego Chrome je pomija, aby ulepszyć nawigację.

W ramach tej zmiany Chrome będzie wyświetlać ostrzeżenia w konsoli, jeśli wszystkie odbieranie danych przez service workera jest niepotrzebne, i zachęcać deweloperów do usunięcia tych odbiorców.

Ostrzeżenia w Narzędziach deweloperskich dotyczące pustych obsługiwanych przez skrypt odbioru w ramach skryptu usługi.

I wiele więcej!

Oczywiście jest ich znacznie więcej.

  • Metoda ustawiania właściwości document.domain została wycofana.
  • W przypadku wycofania X-Requested-With header w komponencie WebView obowiązuje okres próbny dla originów.
  • Rejestrator w narzędziach deweloperskich może teraz nagrywać za pomocą selektorów przebijania.

Więcej informacji

Ta lista zawiera tylko niektóre najważniejsze informacje. Aby poznać inne zmiany w Chrome 112, kliknij linki poniżej.

Subskrybuj

Aby być na bieżąco, zasubskrybuj kanał w YouTube dla programistów Chrome. Otrzymasz wtedy e-maila z powiadomieniem, gdy tylko opublikujemy nowy film.

Nazywam się Adriana Jara i jak tylko pojawi się wersja 113 Chrome, od razu opowiem Ci, co nowego w tej przeglądarce.