Nowości w Chrome 105

Pete LePage

Oto, co musisz wiedzieć na ten temat:

  • Zapytania dotyczące kontenerów oraz :has() to dopasowania stosowane w elastycznym wszechstronnym świecie.
  • Nowy interfejs Sanitizer API udostępnia zaawansowany procesor do obsługi dowolnych ciągów znaków, który pomaga zmniejszyć podatność na ataki z wykorzystaniem skryptów między witrynami.
  • Robimy kolejny krok w kierunku wycofania Web SQL.
  • I to nie wszystko .

Mam na imię Pete LePage. Zobaczmy, co nowego dla programistów Chrome 105.

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

Zapytania o kontenery to jedna z najbardziej pożądanych funkcji 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 kontenera, ustaw container-type na 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, przełącza się 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, aby nadać styl akapitowi nadrzędnemu lub dowolnemu elementowi w jego obrębie. Możesz też użyć figure:has(figcaption), aby określić styl elementu figury zawierającego podpis.

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

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

Bardziej szczegółowe wyjaśnienia i zabawne wersje demonstracyjne znajdziesz w artykule Uny @container and :has(): dwa nowe, zaawansowane elastyczne interfejsy API.

Interfejs API Sanitizer

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.

Pomocne są też biblioteki takie jak DomPurify, które wiążą się z niewielkim nakładem pracy. Interfejs HTML Sanitizer API pomaga zmniejszyć liczbę luk w zabezpieczeniach związanych z wykonywaniem skryptów 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 dane.

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 Web SQL. Od Chrome 105 baza danych WebSQL nie będzie już obsługiwana w niebezpiecznych kontekstach.

Jeśli używasz Web SQL w niezabezpieczonych kontekstach, jak najszybciej przejdź na IndexDB lub do innego lokalnego kontenera 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.
  • Dostępny jest już interfejs API nakładania elementów sterujących okien. Sprawia, że aplikacje PWA będą bardziej podobne do aplikacji, zamieniając obecny pasek tytułu o pełnej szerokości na małą nakładkę. Dzięki temu możesz umieścić niestandardową zawartość w obszarze paska tytułu.

Więcej informacji

Obejmuje to tylko niektóre najważniejsze informacje. Pod poniższymi linkami znajdziesz dodatkowe zmiany w Chrome 105.

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, opowiem Ci, co nowego w tej przeglądarce.