Nowości w Chrome 93

Pete LePage

Oto, co musisz wiedzieć na ten temat:

Jestem Pete LePage. Pracuję i nagrywam z domu. Przyjrzyjmy się nowościom dla programistów w Chrome 93.

Skrypty modułu CSS

Teraz możesz ładować arkusze stylów CSS za pomocą instrukcji import, tak jak moduły JavaScript. Arkusze stylów można następnie zastosować do dokumentu lub do źródła-cienia w taki sam sposób, w jaki można tworzyć arkusze stylów.

Nowa funkcja skryptów modułu CSS jest doskonałym rozwiązaniem w przypadku elementów niestandardowych. W przeciwieństwie do innych metod stosowania CSS z JavaScriptu nie trzeba tworzyć elementów ani bawić się ciągami JavaScriptu tekstu CSS.

Aby go użyć, zaimportuj arkusz stylów za pomocą assert {type: 'css'}, a następnie zastosuj go do document lub shadowRoot, wywołując adoptedStyleSheets.

import sheet from './styles.css' assert { type: 'css' };
document.adoptedStyleSheets = [sheet];
shadowRoot.adoptedStyleSheets = [sheet];

Pamiętaj jednak, że jeśli nie dodasz assert, plik zostanie potraktowany jako JavaScript i nie będzie działać.

Więcej informacji znajdziesz w artykule Używanie skryptów modułu CSS do importowania arkuszy stylów na stronie web.dev.

Interfejs API rozmieszczania okien wieloekranowych

W przypadku niektórych aplikacji otwieranie nowych okien i umieszczanie ich w określonych miejscach lub na określonych wyświetlaczach jest ważną funkcją. Na przykład podczas prezentowania slajdów chcę, aby slajdy były wyświetlane na pełnym ekranie na głównym ekranie, a notatki na drugim ekranie.

Interfejs Multi-Screen Window Placement API pozwala numerować wyświetlacze podłączone do komputera użytkownika i rozmieszczać okna na konkretnych ekranach. Jest to druga wersja próbna origin. Na podstawie Waszych opinii wprowadziliśmy szereg zmian.

Możesz szybko sprawdzić, czy do urządzenia jest podłączonych więcej niż jeden ekran:

const isExtended = window.screen.isExtended;
// returns true/false

Kluczową funkcją jest jednak window.getScreens(), który zawiera wszystkie szczegóły dotyczące dołączonych wyświetlaczy.

const screens = await window.getScreens();
// returns
// {
//    currentScreen: {...}
//    oncurrentscreenchange: null
//    onscreenschange: null
//    screens: [{...}, {...}]
// }

Możesz np. określić ekran główny, a potem użyć requestFullscreen(), aby wyświetlić na nim element.

try {
  const screens = await window.getScreens();
  const primary = screens.filter((screen) => screen.primary)[0];
  await elem.requestFullscreen({ screen: primary });
} catch (err) {
  console.error(err);
}

Zapewnia też możliwość wyłapywania zmian, np. podłączenia lub usunięcia nowego wyświetlacza.

const screens = await window.getScreens();
let numScreens = screens.screens.length;
screens.addEventListener('screenschange', (event) => {
  if (screens.screens.length !== numScreens) {
    console.log('Screen count changed');
    numScreens = screens.screens.length;
  }
});

Więcej informacji na ten temat znajdziesz w artykule Toma na temat zarządzania kilkoma wyświetlaczami przy użyciu interfejsu Multi-Screen Window Placement API na web.dev.

Skrócony cykl uwalniania

W marcu ogłosiliśmy plany skrócenia cyklu wydań i wprowadzenia nowej wersji Chrome co 4 tygodnie.

Już ten czas nadszedł i w wersji Chrome 94 udostępnimy ją 21 września. Planowane daty wydania poszczególnych wersji znajdziesz w Kalendarzu Chrome.

Nowe funkcje PWA

Jeśli tworzysz progresywną aplikację internetową, zapoznaj się z 2 nowymi testami origin.

Moduły obsługi adresów URL PWA

Jeśli masz zainstalowaną aplikację PWA i klikniesz link do niej, prawdopodobnie chcesz, aby aplikacja otwierała się w niej, a nie na karcie przeglądarki.

Określając url_handlers w pliku manifestu aplikacji internetowej i dodając plik web-app-origin-association do katalogu .well-known/, możesz poinformować przeglądarkę, że gdy użytkownik kliknie link do Twojej aplikacji PWA, powinna się ona otwierać w zainstalowanej aplikacji PWA.

Przykład url_handlers w pliku manifest.json:

{
  ...
  "url_handlers": [
    {"origin": "https://music.example.com"}
  ]
}

Przykładowy plik web-app-origin-association:

{
  "web_apps": [
    {
      "manifest": "https://music.example.com/manifest.json",
      "details": {
        "paths": ["/*"],
        "exclude_paths": ["/internal/*"]
      }
    }
  ]
}

Dzięki dodatkowej weryfikacji możesz nawet obsługiwać linki PWA z innych Twoich źródeł.

Wszystkie szczegóły dotyczące testowania origin znajdziesz w sekcji PWA jako moduły obsługi adresów URL na web.dev.

Nakładka z elementami sterującymi okna

Nakładka z elementami sterującymi okna rozszerza obszar klienta na całe okno, w tym pasek tytułu i przyciski sterowania oknami, takie jak przyciski zamykania, maksymalizacji i minimalizowania.

Dzięki tej funkcji Twoja zainstalowana aplikacja PWA będzie wyglądać podobnie do innych zainstalowanych aplikacji.

Więcej informacji o testowaniu origin znajdziesz w artykule o dostosowywaniu nakładki z elementami sterującymi okna na pasku tytułu aplikacji PWA.

Zjazd PWA

PWA Summit odbędzie się w październiku. To bezpłatna konferencja online, która ma pomóc w osiągnięciu sukcesu dzięki progresywnym aplikacjom internetowym. Zjazd PWA powstał w wyniku współpracy osób z kilku różnych firm zaangażowanych w tworzenie technologii PWA: Google, Intel, Microsoft i Samsung.

Przygotowaliśmy mnóstwo ciekawych dyskusji i treści. Aby dowiedzieć się więcej i zarejestrować się, wejdź na PWASummit.org.

…i wiele innych.

Oczywiście, jest ich jeszcze więcej.

  • Elementy Flexbox i flexbox dodały obsługę słów kluczowych dopasowania: start, end, self-start, self-end, left i right.
  • Interfejs asynchronicznego schowka API obsługuje teraz pliki SVG.
  • Gdy ustawisz wartość meta theme-color, atrybut media będzie uwzględniany, więc możesz określić różne kolory motywu w trybie jasnym i ciemnym.
<meta name="theme-color"
      media="(prefers-color-scheme: light)"
      content="white">

<meta name="theme-color"
      media="(prefers-color-scheme: dark)"
      content="black">

Więcej informacji

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

Subskrybuj

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

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