Nowości w Chrome 90

Pete LePage

Oto, co musisz wiedzieć na ten temat:

• Właściwość CSS overflow ma nową wartość.
• Interfejs API zasad dotyczących funkcji został przemianowany na Zasady dotyczące uprawnień.
• Opracowaliśmy też nowy sposób wdrażania i używania modelu Shadow DOM bezpośrednio w kodzie HTML.
• W latach 90. miałem kilka kurtek prawie identycznych jak ta.
• A jest wiele innych.

Nazywam się Pete LePage i mam 411 dla deweloperów w Chrome 90. Zrób to w stylu lat 90.

Zapobiegaj przepełnianiu za pomocą overflow: clip

Usługa porównywania cen to świetne rozwiązanie. Myślę jednak, że każdy programista stron internetowych zauważył coś, co w pewnym momencie niepotrzebnie się powiększa. Na stronie CSS Tricks znajdziesz świetny artykuł o różnych sposobach obsługi przepełnienia, na przykład za pomocą overflow: hidden lub auto.

W specyfikacji CSS Overflow dostępna jest nowa właściwość clip, która działa podobnie do hidden.

.overflow-clip {
  overflow: clip;
}

overflow: clip umożliwia zapobieganie wszelkiemu przewijaniu zawartości pola, w tym przewijaniu automatycznemu. Oznacza to, że pole nie jest uważane za kontener przewijania, ponieważ nie rozpoczyna nowego kontekstu formatowania. W razie potrzeby możesz zastosować przycięcie do jednej osi za pomocą parametrów overflow-x i overflow-y.

Istnieje też funkcja overflow-clip-margin, która pozwala rozszerzyć obramowanie klipu. Jest to przydatne w przypadkach, gdy występuje przepełnienie atramentu, które powinno być widoczne.

.overflow-clip {
  overflow: clip;
  overflow-clip-margin: 25px;
}

Aby zobaczyć overflow: clip w działaniu, wejdź na stronę https://petele-css-is-awesome.glitch.me/.

Zasady dotyczące funkcji to teraz zasady dotyczące uprawnień

W Chrome 74 wprowadziliśmy interfejs Feature Policy API, który umożliwia selektywnie włączanie, wyłączanie i modyfikowanie działania niektórych interfejsów API oraz funkcji internetowych w przeglądarce. Te zasady stanowią umowę między Tobą a przeglądarką. Informują przeglądarkę o Twoich zamiarach.

Jeśli Twój kod lub używane przez Ciebie biblioteki zewnętrzne naruszają wstępnie wybrane reguły, przeglądarka zastąpi ich działanie lepszym UX lub po prostu powie „mów do ręki”, całkowicie blokując interfejs API.

Od wersji 90 Chrome interfejs Feature Policy API zmieni nazwę na Permissions Policy API, a wraz z nim zmieni się też nagłówek HTTP. Jednocześnie społeczność zdecydowała się na nową składnię opartą na wartościach pól strukturalnych w przypadku HTTP.

Permissions-Policy: geolocation=()

Feature-Policy: geolocation 'none'

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

Deklaratywny shadow DOM

Shadow DOM, który jest częścią standardu Web Components, umożliwia ograniczenie zakresu stylów CSS do konkretnego poddrzewa DOM i odizolowanie tego poddrzewa od reszty dokumentu. Do tej pory jedynym sposobem na korzystanie z Shadow DOM było tworzenie korzenia schattenowego 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 dobrze w przypadku renderowania po stronie klienta, ale nie tak dobrze w przypadku renderowania po stronie serwera, gdy nie ma wbudowanego sposobu wyrażania źródeł cieni w wygenerowanym przez serwer kodzie HTML. Deklaratywny DOM Shadow DOM działa już w Chrome 90. Możesz tworzyć rdzenie cieni tylko za pomocą kodu HTML.

Deklaratywna korzeń cienia to element <template> z atrybutem shadowroot. Jest on wykrywany przez parsowanie HTML i natychmiast stosowany jako element nadrzędny katalogu cieni.

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

Wczytywanie czystych znaczników HTML w tym drzewie DOM:

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

Dzięki temu możemy korzystać z zalet enkapsulacji i projekcji slotu w statycznym kodzie HTML. Do wygenerowania całego drzewa w tym korzenia cienia nie jest potrzebny JavaScript.

Więcej informacji znajdziesz w artykule Deklaratywny shadow DOM na stronie web.dev.

I nie tylko

I oczywiście jest jeszcze wiele innych.

Aby zwiększyć prywatność i równomierność szybkości wczytywania stron obsługujących HTTPS, pasek adresu Chrome będzie domyślnie używać https://. Jeśli nie masz jeszcze skonfigurowanego automatycznego przekierowania z HTTP do HTTPS, to dobry moment, by to zrobić.

W wersji na komputery stacjonarne Chrome dostępny jest kodek AV1, który został specjalnie zoptymalizowany pod kątem wideokonferencji z integracją WebRTC.

Więcej informacji

To tylko niektóre z najważniejszych informacji. Pod poniższymi linkami znajdziesz dodatkowe zmiany w Chrome 90.

• Nowości w Narzędziach deweloperskich w Chrome (90)
• Funkcje wycofane i usunięte w Chrome 90
• Aktualizacje ChromeStatus.com dotyczące Chrome 90
• Nowości w JavaScript w Chrome 90
• Lista zmian w repozytorium kodu Chromium

Subskrybuj

Jeśli chcesz być na bieżąco z naszych filmów, zasubskrybuj nasz kanał w YouTube dla deweloperów Chrome. Otrzymasz wtedy e-maila z powiadomieniem, gdy tylko opublikujemy nowy film.

Nazywam się Pete LePage i jak tylko pojawi się nowa wersja Chrome 91, opowiem Ci, co nowego w tej przeglądarce.

Specjalne pozdrowienia

Miło mi było kręcić ten odcinek Nowości w Chrome w klimacie lat 90. Wielkie dzięki Seanowi Meehanowi za pomysł i kontakt ze wspaniałymi ludźmi, którzy pomogli otworzyć wir czasu na rok 1990.

I oczywiście Loren Borja, Lee Carruthers i Lukas Holcek, którzy pracują nad wszystkimi filmami z serii Nowości w Chrome i sprawiają, że wyglądam o wiele lepiej, niż jestem w rzeczywistości. DZIĘKUJEMY!