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 CSS w przypadku zagnieżdżania.

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. Powoduje to powtórzenia, masowe arkusze stylów i rozproszenie podczas 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 także umożliwia umieszczanie zasad stylów w powiązanych elementach. Może też pomóc w dopasowaniu stylów do kodu HTML, na który są one nakierowane.

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.

W tym artykule znajdziesz wskazówki, które pomogą Ci w pełni wykorzystać zagnieżdżenie CSS, a pomoc dotyczącą zagnieżdżania w narzędziach deweloperskich znajdziesz tutaj.

Aktualizacja algorytmu dla początkowego skupienia się 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> staje się 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>, zapoznaj się z dokumentacją.

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

Od wersji Chrome 112 uruchomienie mechanizmu Service Worker i wysyłanie detektora ze ścieżki krytycznej nawigacji będą pomijane, jeśli klient użytkownika stwierdzi, że wszystkie detektory pobierania tego mechanizmu nie działają w środowisku operacyjnym.

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 z tego powodu niektóre witryny mają pusty moduł obsługi pobierania. Uruchomienie skryptu service worker i wykonanie listenera bez operacji powoduje tylko wzrost obciążenia, nie przynosząc żadnych korzyści, które można by wdrożyć za pomocą odpowiedniego skryptu service worker, takich jak buforowanie czy funkcje offline. Dlatego teraz Chrome je pomija, aby usprawnić nawigację.

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

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

I inne funkcje

Oczywiście dostępnych jest też znacznie więcej.

  • Metoda ustawiania właściwości document.domain została wycofana.
  • Istnieją testy origin dotyczące wycofania interfejsu X-Requested-With header z komponentu WebView.
  • Narzędzie do nagrywania w devtools może teraz nagrywać za pomocą elementów przebijania.

Więcej informacji

Obejmuje to tylko niektóre najważniejsze informacje. Aby dowiedzieć się więcej o dodatkowych zmianach 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 dam Ci znać, co nowego w tej wersji.