Nowości w Chrome 99

Pete LePage

Oto, co musisz wiedzieć na ten temat:

• Za kilka tygodni odliczamy czas do wersji 100 Chrome i Firefoksa.
• Kaskadowe warstwy CSS zapewniają większą kontrolę nad CSS i pomagają uniknąć konfliktów związanych z określonymi stylami.
• Metoda showPicker() umożliwia automatyczne wyświetlanie selektora przeglądarki dla elementów <input>, takich jak date, color i datalist.
• A do tego wiele więcej.

Nazywam się Pete LePage. Przyjrzyjmy się nowościom dla programistów w Chrome 99.

Chrome 100 i Firefox 100

Chrome 100 jest wysyłany pod koniec marca (2022 r.), a Firefoksa 100 – na początku maja. Jeśli jednak Twój kod zawiera tylko 2 cyfry, nowy numer wersji może powodować problemy.

Należy sprawdzać każdy kod, który sprawdza numery wersji lub analizuje ciąg klienta użytkownika, aby mieć pewność, że nie występują żadne problemy.

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

W menu Ustawienia w Firefoksie Nightly włącz opcję „Ciąg znaków klienta użytkownika w Firefoksie 100”. Warto ją przetestować i sprawdzić, czy wszystko działa zgodnie z oczekiwaniami.

Szczegółowe informacje znajdziesz na stronach Chrome i Firefox, które wkrótce zostaną wprowadzone w wersji głównej 100.

Warstwy kaskadowe CSS

Obsługa warstw kaskadowych CSS i reguła @layer CSS jest dostępna w Chrome 99. Zapewniają dokładniejszą kontrolę nad plikami CSS, co pozwala uniknąć konfliktów związanych 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 ma wyższy priorytet niż specyfika selektora.

Jeśli próbujesz zmienić styl linku, wewnątrz elementu .card w obrębie .post zobaczysz, że zostanie zastosowany bardziej szczegółowy selektor. Korzystając z reguły @layer, możesz dokładniej określić specyfikę poszczególnych stylów 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 pierwszeństwa kaskadowego. Style warstwowe tworzą nowe płaszczyzny kaskadowe.

Kaskadowe warstwy przy użyciu reguły CSS @layer są obsługiwane w Chrome 99, Firefox 97 i Safari 15.4 w wersji beta. Przeczytaj artykuł W Twojej przeglądarce będą wkrótce dostępne warstwy Kaskadowe, aby dowiedzieć się więcej.

showPicker() dla elementów wejściowych

Przez długi czas korzystaliśmy z niestandardowych bibliotek widżetów lub narzędzi hakerskich, aby wyświetlać selektor dat. W kodzie HTML InputElements dostępna jest nowa metoda showPicker(). Jest to kanoniczny sposób wyświetlania selektora przeglądarki, nie tylko elementu date, ale też elementów time, color i innych elementów <input> z selektorami.

Selektory dat w przeglądarkach Chrome na komputery, Chrome na komórki, Safari na komputery, w Safari na komórki i w Firefoksie na komputerach (lipiec 2021 r.).

Aby go użyć, wywołaj showPicker() w elemencie <input>. W tym przykładzie ujęliśmy go w blok try…catch. Dzięki temu mogę podać wartość zastępczą, jeśli przeglądarka nie obsługuje interfejsu API lub nie może wyświetlić selektora. W ten sposób dbamy o to, aby użytkownicy byli zadowoleni.

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.
  }
});

Więcej informacji znajdziesz w artykule o wyświetlaniu selektora przeglądarki według daty, godziny, koloru i plików, a także informacje o różnych typach <input>, których można użyć showPicker().

…i wiele innych.

Oczywiście, jest ich jeszcze więcej.

Zaktualizowaliśmy interfejs Canvas2D API, dodając nowe funkcje, w tym:

• 2 nowe wydarzenia: ContextLost i ContextRestored
• Opcja willReadFrequently
• Większa obsługa modyfikatora tekstu CSS
• Więcej informacji

Udostępniliśmy nową wersję próbną origin, która umożliwia aplikacjom PWA udostępnianie alternatywnych kolorów w pliku manifestu aplikacji internetowej na potrzeby trybu ciemnego.

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

Więcej informacji

To tylko niektóre z najważniejszych kwestii. Kliknij poniższe linki, aby dowiedzieć się więcej o zmianach w Chrome 99.

• Nowości w Narzędziach deweloperskich w Chrome (99)
• Wycofanie i usunięcie Chrome 99
• Aktualizacje ChromeStatus.com w Chrome 99
• Lista zmian repozytorium źródłowego Chromium
• Kalendarz wydań Chrome

Subskrybuj

Aby być na bieżąco, zasubskrybuj kanał Chrome Developers w YouTube. Będziesz otrzymywać e-maile z powiadomieniami o każdym nowym filmie.

Nazywam się Pete LePage i jak tylko pojawi się Chrome 100, będę informować Cię o nowościach w Chrome.