Nowości w Chrome 105

Pete LePage

Oto, co musisz wiedzieć na ten temat:

Nazywam się Pete LePage. Przyjrzyjmy się im. zobacz, co nowego dla deweloperów w Chrome 105.

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

W przypadku zapytań o kontenery to jedna z najpopularniejszych funkcji Chrome 105. Umożliwiają one programistom wysyłanie zapytań dotyczących rozmiaru selektora nadrzędnego i informacje o stylu, które umożliwiają elementowi podrzędnemu posiadanie własnego responsywność, niezależnie od tego, gdzie na stronie się znajduje.

Są podobne do zapytania @media, z tą różnicą, że są sprawdzane na podstawie rozmiaru kontener zamiast rozmiaru widocznego obszaru.

Zapytanie o kontener a zapytanie o multimedia.

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

Jedna karta dwukolumnowa.

Aby utworzyć zapytanie dotyczące kontenera, ustaw w kontenerze karty parametr container-type. Ustawianie container-type na inline-size powoduje wysyłanie zapytań do inline-direction rozmiaru nadrzędnego.

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

Teraz możemy użyć tego kontenera, by zastosować style do dowolnego elementu podrzędnego, używając @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 usługi porównywania cen :has()

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

Na przykład p:has(span) oznacza selektor akapitu ze rozpiętością w środku. . Możesz użyć tej opcji, aby określić styl akapitu nadrzędnego lub dowolnego innego elementu w dokumencie. Możesz też użyć figure:has(figcaption), aby określić styl elementu figury który zawiera podpis.

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

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

Przeczytaj artykuł Uny @container and :has(): dwa nowe, zaawansowane, elastyczne interfejsy API , który zawiera bardziej szczegółowe wyjaśnienia i zabawne prezentacje.

Interfejs API Sanitizer

Większość aplikacji internetowych często korzysta z niezaufanych ciągów znaków, ale w bezpieczny sposób renderuje że treści mogą być trudne. Bez odpowiedniej staranności łatwo przypadkowo stwarzają możliwości powstawania luk w zabezpieczeniach związanych z takimi skryptami.

Pomogą Ci w tym biblioteki takie jak DomPurify. i pracochłonność. Interfejs HTML Sanitizer API pomaga zmniejszyć liczbę luki w zabezpieczeniach związanych ze skryptami z innych witryn przez zastosowanie procesu sanityzacji platformy.

Aby go użyć, utwórz nową instancję Sanitizera. Następnie zadzwoń pod numer setHTML() na element, 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 jest z założenia bezpieczny i można go dostosować co pozwala określić różne opcje konfiguracji, lub zezwalanie na inne elementy.

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

Zapoznaj się z artykułem na temat manipulacji DOM przy użyciu interfejsu Sanitizer API. .

Wycofanie Web SQL na potrzeby niezabezpieczonych kontekstów

Jakiś czas temu ogłosiliśmy plany wycofania Web SQL. Zaczyna się za Chrome 105, Web SQL zostanie wycofany w kontekstach niezabezpieczonych.

Jeśli używasz Web SQL w niezabezpieczonych kontekstach, przejdź na IndexDB, lub inny lokalny pojemnik.

I inne funkcje

Oczywiście istnieje też znacznie więcej możliwości.

  • Teraz możesz zaktualizować nazwę zainstalowanej aplikacji PWA zarówno na komputerze, jak i na urządzeniu mobilnym przez zaktualizowanie pliku manifestu aplikacji internetowej.
  • Interfejs API rozmieszczania okien na wielu urządzeniach uzyskuje dokładne etykiety nazw ekranów.
  • Dostępny jest już interfejs API nakładania elementów sterujących okien. Dzięki niemu PWA zapewniają i wrażenia z aplikacji. Możesz zamienić pasek tytułu o pełnej szerokości na na mniejszą nakładkę. Dzięki temu możesz umieścić niestandardową zawartość w obszarze paska tytułu.

Więcej informacji

To tylko niektóre z najważniejszych informacji. Przejrzyj te linki: dodatkowych zmian w Chrome 105.

Subskrybuj

Aby być na bieżąco, zasubskrybuj Kanał Chrome Developers w YouTube, a gdy będziemy mogli opublikować nowy film, otrzymasz e-maila z powiadomieniem.

Jestem Pete LePage i gdy tylko Chrome 106 się ukaże, opowie o nowościach w Chrome.