Nowości w Chrome 90

Pete LePage

Oto, co musisz wiedzieć na ten temat:

  • Pojawiła się nowa wartość właściwości CSS overflow.
  • Nazwa interfejsu Feature Policy API została zmieniona na Zasady dotyczące uprawnień.
  • Istnieje też nowy sposób implementowania i używania modelu Shadow DOM bezpośrednio w kodzie HTML.
  • W latach 90. miałem(-am) kilka kurtek prawie takich jak ta.
  • Jest ich wiele innych.

Jestem Pete LePage. Mam kod 411 dla programistów w Chrome 90. Robię to w stylu lat 90.

Zapobiegaj przepełnieniu za pomocą overflow: clip

CSS jest WSPANIAŁY

CSS to tyle frytek! Myślę jednak, że każdy programista stron internetowych doświadczył czegoś, co przeżyło się niezręcznie. W artykule o sztukach CSS znajdziesz różne sposoby radzenia sobie z przepełnieniem, takie jak korzystanie z overflow: hidden i auto.

W specyfikacji CSS Overflow znajduje się nowa właściwość clip, która działa podobnie do właściwości hidden.

.overflow-clip {
  overflow: clip;
}
Kwadratowe pole z tekstem CSS jest niesamowite, gdzie wystają one niesamowite.

Używanie atrybutu overflow: clip zapobiega wszelkiemu rodzajowi przewijania pola, w tym przewijaniu automatycznemu. Oznacza to, że pole nie jest uznawane za kontener przewijania i nie uruchamia nowego kontekstu formatowania. W razie potrzeby możesz zastosować przycinanie do pojedynczej osi za pomocą metod overflow-x i overflow-y.

Jest też opcja overflow-clip-margin, która pozwala powiększyć obramowanie klipu. Jest to przydatne w sytuacjach, gdy nadmiar atramentu powinien być widoczny.

.overflow-clip {
  overflow: clip;
  overflow-clip-margin: 25px;
}
Kwadratowe pole z tekstem CSS jest niesamowite, gdzie wystają one niesamowite.

Zobacz overflow: clip w praktyce na stronie https://petele-css-is-awesome.glitch.me/

Zasada funkcji to teraz Zasada uprawnień

W Chrome 74 wprowadziliśmy interfejs Feature Policy API, który umożliwia selektywne włączanie, wyłączanie i modyfikowanie działania określonych interfejsów API i funkcji internetowych w przeglądarce. Zasady te są umową między Tobą a przeglądarką. Informują przeglądarkę o Twoim zamiarze.

Jeśli Twój kod lub któraś z bibliotek zewnętrznych naruszy Twoje wstępnie wybrane reguły, przeglądarka zastąpi to działanie i zapewni lepsze wrażenia użytkownika lub po prostu powie „porozmawiaj z ręką”, co całkowicie zablokuje interfejs API.

W Chrome 90 nazwa interfejsu Feature Policy API zostanie zmieniona na Permissions Policy (Zasada uprawnień), a nazwa nagłówka HTTP zostanie zmieniona. Jednocześnie społeczność zdecydowała się na nową składnię, która jest oparta na wartościach uporządkowanych pól dla HTTP.

Chrome 90 i nowsze

Permissions-Policy: geolocation=()

Chrome 89 i starsze

Feature-Policy: geolocation 'none'

Jeśli chcesz się dowiedzieć, jak korzystać z tej funkcji w swojej witrynie, przeczytaj artykuł Wprowadzenie do zasad dotyczących funkcji.

Deklarowany DOM cienia

Metoda Shadow DOM, która jest częścią standardu Web Komponenty, umożliwia ograniczanie stylów CSS do konkretnego poddrzewa DOM i odizolowanie tego poddrzewa od reszty dokumentu. Do tej pory jedynym sposobem korzystania z modelu Shadow DOM było zbudowanie cienia katalogu za pomocą JavaScriptu.

const host = document.getElementById('host');
const opts = {mode: 'open'};
const shadowRoot = host.attachShadow(opts);
const html = '<h1>Hello Shadow DOM</h1>';
shadowRoot.innerHTML = html;

Sprawdza się to w przypadku renderowania po stronie klienta, ale nie sprawdza się w przypadku renderowania po stronie serwera, gdy nie ma wbudowanego sposobu na wyrażanie katalogów źródłowych w kodzie HTML wygenerowanym przez serwer. Jednak od wersji Chrome 90, z zastosowaniem deklaracja DOM w postaci cienia, można go używać.

Deklarowany główny poziom cienia to element <template> z atrybutem shadowroot. Parser HTML jest wykrywany i od razu stosowany jako poziom główny elementu nadrzędnego.

<host-element>
  <template shadowroot="open">
    <slot></slot>
  </template>
  <h2>Light content</h2>
</host-element>

Wczytywanie wyników wyłącznie ze znacznika HTML w tym drzewie DOM:

<host-element>
  #shadow-root (open)
  <slot>
    ↳
    <h2>Light content</h2>
  </slot>
</host-element>

Daje nam to korzyści wynikające z zastosowania hermetyzacji Shadow DOM i odwzorowania przedziałów w statycznym kodzie HTML. Do wygenerowania całego drzewa, w tym korzenu cienia, nie jest potrzebny JavaScript.

Więcej informacji znajdziesz w artykule Deklaracja DOM Shadow DOM na stronie web.dev.

oraz inne informacje.

No i oczywiście jest ich jeszcze więcej.

Aby chronić prywatność użytkowników, a nawet zwiększyć szybkość wczytywania stron obsługujących HTTPS, pasek adresu Chrome będzie domyślnie korzystać z https://. A jeśli jeszcze nie masz skonfigurowanego automatycznego przekierowania z HTTP do HTTPS, teraz jest doskonała okazja, aby to zrobić.

Z kolei w Chrome na komputery dostępny jest koder AV1 zoptymalizowany pod kątem rozmów wideo dzięki integracji z WebRTC.

Więcej informacji

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

Subskrybuj

Jeśli chcesz być na bieżąco z naszymi filmami, zasubskrybuj kanał w YouTube dla deweloperów Chrome, aby otrzymywać e-maile z powiadomieniami o każdej publikacji nowego filmu.

Jestem Pete LePage i jak tylko pojawi się Chrome 91, będę do Ciebie mówić, co nowego w Chrome.

Szczególna wzmianka

Świetnie się bawiłem, nagrywając odcinek inspirowany latami 90. „Nowości w Chrome”. Serdecznie dziękujemy Seanowi Meehanowi za ten pomysł i złączenie wspaniałych ludzi, którzy pomogli otworzyć kłótnię czasu w 1990 roku.

Projekt GDS

  • fola akinola
  • Derek Bass
  • Christopher Bodel
  • Nick Krusick
  • Krzysiek Kowalski

Projektowanie dźwięku i dodatkowa muzyka

  • Bryan Gordon

No i oczywiście Loren Borja, Lee Carruthers i Lukas Holcek, którzy opracowują wszystkie moje nowości w Chrome i sprawiają, że wyglądam o wiele lepiej niż jestem w rzeczywistości. DZIĘKUJEMY!