Nowości w Chrome 105

Pete LePage

Oto, co musisz wiedzieć na ten temat:

Nazywam się Pete LePage. Przyjrzyjmy się nowościom dla programistów w Chrome 105.

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

Jedną z najczęściej poszukiwanych funkcji są zapytania o kontenery, które trafiają do Chrome 105. Umożliwiają programistom wysyłanie zapytań do selektora nadrzędnego o informacje o rozmiarze i stylu. Dzięki temu element podrzędny może być właścicielem responsywnej logiki stylu niezależnie od tego, gdzie się znajduje na stronie.

Są podobne do zapytania @media z tą różnicą, że oceniają rozmiar kontenera, a nie rozmiar widocznego obszaru.

Zapytanie o kontener a zapytanie o media.

Aby używać zapytań dotyczących kontenerów, musisz ustawić izolację elementu nadrzędnego. Możesz na przykład mieć kartę z obrazem i tekstem.

Jedna karta 2-kolumnowa.

Aby utworzyć zapytanie dotyczące kontenera, ustaw w kontenerze karty wartość container-type. Ustawienie dla container-type wartości inline-size wysyła zapytania 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, używając pola @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 jednokolumnowy.

Pseudoklasa CSS :has()

Możemy pójść o krok dalej dzięki pseudoklasie CSS :has(). Pozwala sprawdzić, czy element nadrzędny zawiera elementy podrzędne z określonymi parametrami.

Na przykład p:has(span) wskazuje selektor akapitu, w którym znajduje się spacja. Możesz użyć tej opcji, aby dostosować styl do samego akapitu nadrzędnego lub dowolnego elementu w nim. Możesz też użyć figure:has(figcaption), by określić styl elementu postaci, który zawiera podpis.

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

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

Więcej szczegółowych informacji i zabawne prezentacje znajdziesz w artykule Uny @container and :has(): 2 nowych, zaawansowanych interfejsach API.

Interfejs API Sanitizer

Większość aplikacji internetowych często boryka się z niezaufanymi ciągami znaków, ale bezpieczne ich renderowanie może być trudne. Bez odpowiedniej staranności łatwo jest przypadkowo stwarzać luki w zabezpieczeniach związanych ze skryptami z innych witryn.

Istnieją biblioteki takie jak DomPurify, które są pomocne, ale zwiększają obciążenie związane z konserwacją. Interfejs HTML Sanitizer API pomaga zmniejszyć liczbę luk w zabezpieczeniach związanych ze skryptami między witrynami przez wprowadzenie procesu dezynfekcji platformy.

Aby go użyć, utwórz nową instancję narzędzia Sanitizer. Następnie wywołaj setHTML() w elemencie, do którego chcesz wstawić oczyszczoną treść.

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

Interfejs Sanitizer API został zaprojektowany pod kątem zapewnienia bezpieczeństwa i możliwości dostosowywania. Dzięki niemu możesz określić różne opcje konfiguracji, na przykład pomijać określone elementy lub dopuszczać inne elementy.

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 na temat bezpiecznej manipulacji DOM za pomocą interfejsu Sanitizer API.

Wycofanie Web SQL na potrzeby niezabezpieczonych kontekstów

Jakiś czas temu ogłosiliśmy plany wycofania usługi Web SQL. Od wersji Chrome 105 usługa Web SQL zostanie wycofana w niezabezpieczonych kontekstach.

Jeśli korzystasz z Web SQL w niezabezpieczonych kontekstach, jak najszybciej przeprowadź migrację do IndexDB lub innego kontenera pamięci lokalnej.

…i wiele innych.

Oczywiście, jest ich jeszcze więcej.

  • Możesz teraz zaktualizować nazwę aplikacji PWA zainstalowanej na komputerze i urządzeniu mobilnym. W tym celu musisz zaktualizować plik manifestu aplikacji internetowej.
  • Interfejs API rozmieszczania okien na wiele urządzeń otrzymuje dokładne etykiety nazw ekranów.
  • Interfejs API nakładki elementów sterujących oknami jest już dostępny. Dzięki zastąpieniu obecnego paska tytułu o pełnej szerokości aplikacje PWA wyglądają bardziej jak aplikacje i mały nakładkę. Dzięki temu w obszarze paska tytułu możesz umieścić własną treść.

Więcej informacji

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

Subskrybuj

Aby być na bieżąco, zasubskrybuj kanał Chrome Developers w YouTube. Będziesz otrzymywać e-maile z powiadomieniami o każdym nowym filmie.

Nazywam się Pete LePage i jak tylko pojawi się Chrome 106, opowiemy Ci o nowościach w tej przeglądarce.