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 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; }
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; }
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.
- Nowości w Narzędziach deweloperskich w Chrome (90)
- Wycofanie i usunięcie Chrome 90
- Aktualizacje ChromeStatus.com w Chrome 90
- Co nowego w JavaScript w Chrome 90
- Lista zmian repozytorium źródłowego Chromium
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!