Nowości w Chrome 105

Pete LePage

Oto, co musisz wiedzieć na ten temat:

Mam na imię Pete LePage. Przyjrzyjmy się bliżej nowościom w Chrome 105 dla deweloperów.

Zapytania dotyczące kontenera i właściwość CSS :has()

Zapytania dotyczące kontenera, jedna z najbardziej oczekiwanych funkcji, trafiają do Chrome 105. Umożliwiają one deweloperom wysyłanie zapytań do selektora nadrzędnego o informacje o skali i stylu, dzięki czemu element podrzędny może mieć własną logikę stylizacji w ramach strony, niezależnie od tego, gdzie się znajduje.

Są one podobne do zapytania @media, ale zamiast rozmiaru widocznego obszaru sprawdzają rozmiar kontenera.

Zapytanie o kontener a zapytanie o multimedia.

Aby używać zapytań dotyczących kontenera, musisz ustawić ograniczenie w elemencie nadrzędnym. Możesz na przykład utworzyć kartę z obrazem i tekstem.

Pojedyncza karta z 2 kolumnami.

Aby utworzyć zapytanie dotyczące kontenera, ustaw wartość container-type w kontenerze kart. Ustawienie container-type na inline-size wysyła zapytanie o rozmiar inline-direction elementu nadrzędnego.

.card-container {
  container-type: inline-size;
}

Teraz możemy użyć tego kontenera, aby zastosować style do dowolnego z jego elementów podrzędnych za pomocą funkcji @container.

.card {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

@container (max-width: 400px) {
  .card {
    grid-template-columns: 1fr;
  }
}

W tym przypadku, gdy kontener ma mniej niż 400 pikseli, przechodzi na układ z jedną kolumną.

Pseudoklasa CSS :has()

Możemy to jeszcze bardziej rozwinąć, używając pseudoklasy CSS :has(). Umożliwia sprawdzenie, czy element nadrzędny zawiera elementy podrzędne z określonymi parametrami.

Na przykład p:has(span) wskazuje selektor akapitu z elementem span. Możesz użyć tego do nadania stylu akapitowi nadrzędnemu lub dowolnemu elementowi w jego obrębie. Możesz też użyć figure:has(figcaption), aby nadać styl elementowi rysunku, który zawiera podpis.

p:has(span) {
  /* magic styles */
}

figure:has(figcaption) {
  /* this figure has a figcaption */
}

Aby uzyskać bardziej szczegółowe wyjaśnienia i zobaczyć kilka ciekawych demonstracji, przeczytaj artykuł Una @container i :has(): 2 nowe potężne interfejsy API do obsługi elastycznych interfejsów API.

Sanitizer API

Większość aplikacji internetowych często ma do czynienia z niesprawdzonymi ciągami znaków, ale bezpieczne renderowanie tego typu treści może być trudne. Bez odpowiedniej ostrożności łatwo jest przypadkowo stworzyć luki w zabezpieczeniach typu cross-site scripting.

Istnieją biblioteki, takie jak DomPurify, które mogą pomóc, ale wymagają niewielkiego nakładu pracy na konserwację. Interfejs HTML Sanitizer API pomaga zmniejszyć liczbę luk w zabezpieczeniach związanych z wykonywaniem skryptu na wielu stronach, ponieważ umożliwia tworzenie funkcji sanitazowania w platformie.

Aby z niej korzystać, utwórz nową instancję Sanitizer. Następnie wywołaj metodę setHTML() w elemencie, do którego chcesz wstawić wyczyszczone treści.

const mySanitizer = new Sanitizer();
const user_input = `<img src="" onerror=alert(0)>`;
elem.setHTML(user_input, { sanitizer: mySanitizer });

Interfejs Sanitizer API jest bezpieczny i można go dostosowywać, co pozwala na określenie różnych opcji konfiguracji, na przykład pomijanie niektórych elementów lub zezwalanie na inne.

const config = {
  allowElements: [],
  blockElements: [],
  dropElements: [],
  allowAttributes: {},
  dropAttributes: {},
  allowCustomElements: true,
  allowComments: true
};
// sanitized result is customized by configuration
const mySanitizer = new Sanitizer(config);

Więcej informacji znajdziesz w artykule Bezpieczne manipulowanie DOM-em za pomocą interfejsu Sanitizer API.

Wycofanie bazy danych WebSQL z niezabezpieczonych kontekstów

Jakiś czas temu ogłosiliśmy plany wycofania usługi Web SQL. Od Chrome 105 baza danych WebSQL nie będzie już obsługiwana w niebezpiecznych kontekstach.

Jeśli używasz bazy danych WebSQL w niezabezpieczonych kontekstach, jak najszybciej przejdź na IndexDB lub inny lokalny kontener pamięci masowej.

I inne funkcje

Oczywiście jest ich znacznie więcej.

  • Możesz teraz zaktualizować nazwę zainstalowanej aplikacji PWA na komputerze i na urządzeniu mobilnym, aktualizując plik manifestu aplikacji internetowej.
  • Interfejs API do rozmieszczania okien na wielu ekranach otrzymuje dokładne etykiety nazw ekranów.
  • Interfejs API nakładki z elementami sterującymi okna jest już dostępny. Umożliwia to, aby PWA wyglądały bardziej jak aplikacje, ponieważ dotychczasowa pełnowymiarowa linia tytułowa zostaje zastąpiona małym nakładem. Dzięki temu możesz umieszczać treści niestandardowe w obszarze paska tytułu.

Więcej informacji

Obejmuje to tylko niektóre najważniejsze informacje. Aby dowiedzieć się więcej o dodatkowych zmianach w Chrome 105, kliknij linki poniżej.

Subskrybuj

Aby być na bieżąco, zasubskrybuj kanał w YouTube dla programistó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 106, opowiemy Ci, co nowego w Chrome.