Nowości w Chrome 99

Pete LePage

Oto, co musisz wiedzieć na ten temat:

• W ciągu kilku tygodni Chrome i Firefox przejdą na wersję 100.
• Warstwy kaskadowe CSS zapewniają większą kontrolę nad kodem CSS i pomagają zapobiegać konfliktom związanym ze stylami.
• Metoda showPicker() umożliwia programowo wyświetlanie selektora przeglądarki dla elementów <input>, takich jak date, color i datalist.
• I to nie wszystko .

Mam na imię Pete LePage. Przyjrzyjmy się bliżej temu, co deweloperzy znajdą w Chrome 99.

Chrome 100 i Firefox 100

Chrome 100 zostanie udostępniona pod koniec marca 2022 r., a Firefox 100 – wkrótce po niej, na początku maja. Obie te wersje są głównymi i mają numery 3-cyfrowe. Jeśli jednak kod oczekuje dwóch cyfr, nowy numer wersji może powodować problemy.

Trzeba sprawdzić każdy kod, który sprawdza numery wersji lub analizuje ciąg znaków klienta użytkownika, aby upewnić się, że nie występują w nim żadne problemy.

W Chrome flaga #force-major-version-to-100 zmieni bieżący numer wersji na 100.

W menu ustawień Firefoxa Nightly możesz włączyć opcję „Ciąg znaków klienta użytkownika Firefoxa 100”. Warto przetestować stronę, aby mieć pewność, że wszystko działa zgodnie z oczekiwaniami.

Aby uzyskać więcej informacji, zapoznaj się z artykułem Chrome i Firefox wkrótce osiągną główną wersję 100.

Warstwy kaskadowe CSS

Obsługa warstw kaskadowych CSS i reguły CSS @layer zostanie wprowadzona w Chrome 99. Zapewniają one ściślejszą kontrolę nad plikami CSS, co pozwala uniknąć konfliktów dotyczących stylów. Jest to szczególnie przydatne w przypadku dużych baz kodu, systemów projektowania i zarządzania stylami innych firm w aplikacjach.

Wprowadzają nową warstwę do kaskady CSS. W przypadku stylów warstwowych pierwszeństwo warstwy zawsze wygrywa ze specyficznością selektora.

Jeśli spróbujesz nadać styl linkowi w ramach elementu .card w elemencie .post, zostanie zastosowany bardziej szczegółowy selektor. Za pomocą reguły @layer możesz dokładniej określić styl każdego z nich i mieć pewność, że styl linku na karcie zastąpi styl linku w poście.

@layer base {
  a {
    font-weight: 800;
    color: red;
  }

  .link {
    color: blue;
  }
}

Wynika to z kaskadowego pierwszeństwa. Style warstwowe tworzą nowe płaszczyzny kaskadowe.

Kaskadowe warstwy z użyciem reguły CSS @layer są obsługiwane w Chrome 99, Firefox 97 i Safari 15.4 Beta. Więcej informacji znajdziesz w artykule W przeglądarce pojawią się warstwy kaskadowe.

Funkcja showPicker() dla elementów wejściowych

Od dawna musieliśmy korzystać z bibliotek widżetów niestandardowych lub ataków hakerskich, aby wyświetlać selektor daty. W HTML InputElements jest nowa metoda showPicker(). Jest to kanoniczny sposób wyświetlania selektora przeglądarki nie tylko w przypadku date, ale też time, color i innych elementów <input> z selektorami.

Aby go użyć, wywołaj showPicker() w elemencie <input>. W tym przykładzie użyłem bloku try…catch. Dzięki temu mogę zapewnić alternatywne rozwiązanie, jeśli przeglądarka nie obsługuje interfejsu API lub nie może wyświetlić selektora. Dzięki temu użytkownicy nadal będą mogli korzystać z Twojej aplikacji.

const button = document.querySelector("button");
const dateInput = document.querySelector("input");

button.addEventListener("click", () => {
  try {
    dateInput.showPicker();
    // A date picker is shown.
  } catch (error) {
    // Use an external library when this fails.
  }
});

Szczegółowe informacje oraz informacje o różnych typach <input>, w jakich możesz używać showPicker(), znajdziesz w artykule Wyświetlanie selektora przeglądarki dla daty, godziny, koloru i plików.

I inne funkcje

Oczywiście jest ich znacznie więcej.

Interfejs Canvas2D API został zaktualizowany o nowe funkcje, w tym:

• 2 nowe zdarzenia dotyczące ContextLost i ContextRestored
• Opcja willReadFrequently
• Więcej obsługi modyfikatorów tekstu w CSS
• Więcej informacji

Dostępna jest nowa wersja próbna dla źródła, która umożliwia aplikacjom PWA wyświetlanie alternatywnych kolorów w pliku manifestu aplikacji internetowej na potrzeby trybu ciemnego.

Dostępny jest już interfejs API rozpoznawania pisma odręcznego.

Więcej informacji

Obejmuje to tylko niektóre najważniejsze informacje. Aby dowiedzieć się więcej o dodatkowych zmianach w Chrome 99, kliknij linki poniżej.

• Nowości w Narzędziach deweloperskich w Chrome (99)
• Funkcje wycofane i usunięte w Chrome 99
• Aktualizacje ChromeStatus.com dotyczące Chrome 99
• Lista zmian w repozytorium źródłowym Chromium
• Kalendarz wydań Chrome

Subskrybuj

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

Nazywam się Pete LePage i jak tylko pojawi się Chrome 100, opowiem Ci, co nowego w tej wersji przeglądarki.