Nowości w Chrome 112

Adriana Jara

Oto, co musisz wiedzieć na ten temat:

Nazywam się Adriana Jara. Zobaczmy, co nowego dla programistów Chrome 112.

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

Jedną z naszych ulubionych funkcji wstępnego przetwarzania danych CSS jest teraz wbudowana w języku: zagnieżdżanie reguł stylu.

Przed zagnieżdżeniem każdy selektor musiał zostać jawnie zadeklarowany, niezależnie od i otwierać przed sobą nawzajem. Prowadzi to do powtórzeń, zbiorczych arkuszy stylów i rozproszenia błędów podczas tworzenia. z myślą o użytkownikach.

Przed
.nesting {
  color: hotpink;
}

.nesting > .is {
  color: rebeccapurple;
}

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

Po zagnieżdżeniu selektory można i powiązane z nim reguły stylu.

Po
.nesting {
  color: hotpink;

  > .is {
    color: rebeccapurple;

    > .awesome {
      color: deeppink;
    }
  }
}

Zagnieżdżanie pomaga programistom, bo ogranicza konieczność powtarzania selektorów, a jednocześnie w jednym położeniu reguł stylów powiązanych z powiązanymi elementami. Może to także ułatwić dopasowanie stylów do kodu HTML, na który są kierowane.

Jeśli z projektu został usunięty komponent .nesting z przykładu, możesz usunąć całą grupę, zamiast wyszukiwać powiązane instancje selektora.

Zagnieżdżanie może pomóc:

  • Uporządkowanie materiałów.
  • Zmniejszanie 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 zaznaczenia <dialog>.

Element HTML <dialog> to ustandaryzowany sposób reprezentowania okna dialogowego lub innego interaktywnego komponentu, takiego jak alert możliwy do odrzucenia lub okno podrzędne, które muszą być wyświetlane nad wszystkimi innymi treściami na stronie internetowej.

Ten element HTML jest zalecanym sposobem tworzenia takich treści, ponieważ jego funkcje zostały opracowane w celu zapewnienia lepszej i spójniejszej obsługi oraz dostępności.

Jedną z tych funkcji jest obsługa tego, który element jest zaznaczony po otwarciu okna. W tej wersji zaktualizowany został algorytm wybierający ten element.

Od teraz:

Kroki w oknie, które można zaznaczyć, skupiają się na elementach, które można zaznaczyć na klawiaturze, a nie o tych, które można zaznaczyć. Sam element <dialog> jest zaznaczony, jeśli ma ustawiony atrybut autofokus

Sam element <dialog> jest ustawiany jako element zastępczy – zaznaczenie nie jest resetowane. do elementu <body>.

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

Pomijam moduły obsługi pobierania bez wykonywania działań roboczych.

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 skryptu service worker nie są operacjami.

Ta funkcja przyspiesza nawigację po takich stronach.

Posiadanie modułu obsługi pobierania było jednym z wymagań PWA, które należy spełnić, aby móc zainstalować aplikację internetową. Podejrzewamy, że z tego powodu niektóre witryny mają pusty moduł obsługi pobierania. Jednak uruchomienie skryptu service worker i uruchomienie detektora bezobsługowego niesie ze sobą wyłącznie koszty i nie przynosi żadnych korzyści, które można wdrożyć za pomocą odpowiedniego skryptu service worker, takich jak pamięć podręczna czy możliwość pracy w trybie 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 detektory pobierania utworzone przez mechanizm Service Worker nie działają w środowisku operacyjnym, i zachęci deweloperów do usunięcia tych detektorów.

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 ustawiająca dla funkcji document.domain została wycofana.
  • Istnieją testy origin dotyczące wycofania interfejsu X-Requested-With header z komponentu WebView.
  • Dyktafon w narzędziach deweloperskich może teraz nagrywać za pomocą selektorów pierce.

Więcej informacji

To tylko niektóre z najważniejszych informacji. Przejrzyj te linki: dodatkowych zmian w Chrome 112.

Subskrybuj

Aby być na bieżąco, zasubskrybuj Kanał Chrome Developers w YouTube, a gdy będziemy mogli opublikować nowy film, otrzymasz e-maila z powiadomieniem.

Nazywam się Adriana Jara i gdy tylko Chrome 113 się ukaże, opowie o nowościach w Chrome.