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 w Chrome 99 jest nowego dla deweloperów.

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 Twój kod wymaga 2 cyfr, nowa wersja numeru może spowodować problemy.

Należy sprawdzić każdy kod, który sprawdza numery wersji lub analizuje ciąg agenta użytkownika, aby upewnić się, że nie spowoduje żadnych problemów.

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 większą kontrolę nad plikami CSS, aby zapobiegać konfliktom związanym ze stylem. 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 chcesz 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 hierarchii ustawień. Style nałożone tworzą nowe kaskadowe płaszczyzny.

Warstwy kaskadowe korzystające z reguły CSS @layer są obsługiwane w Chrome 99, Firefox 97 i Safari 15.4 Beta. Więcej informacji znajdziesz w artykule Warstwy kaskadowe wchodzą do Twojej przeglądarki.

Funkcja showPicker() dla elementów wejściowych

Przez długi czas musieliśmy uciekać się do niestandardowych bibliotek widżetów lub obejść problem, aby wyświetlić 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 funkcję 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.
  }
});

Aby uzyskać pełne informacje i dowiedzieć się, do jakich celów można używać różnych typów <input>, zapoznaj się z artykułem Wyświetlanie selektora przeglądarki do wybierania daty, czasu, koloru i plików.showPicker()

I inne funkcje

Oczywiście jest ich znacznie więcej.

Interfejs Canvas2D API został zaktualizowany i posiada teraz 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 kodu 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.