Nowości w Chrome 131

Mariko Kosaka
X

Oto, co musisz wiedzieć na ten temat:

Nazywam się Mariko Kosaka. Zobaczmy, co nowego w Chrome 131 dla deweloperów.

Ulepszenia dotyczące stylizacji w przypadku <details> i <summary>

Masz teraz więcej opcji stylizacji struktury elementów <details> i <summary>, aby tworzyć widżety z rozwijanym menu lub okiennikami.

Zmiany wprowadzone w tej wersji umożliwiają użycie właściwości display i dodanie pseudoelementu ::details-content, aby nadać styl części, która się rozwija i zwija.

Wcześniej nie można było zmienić typu wyświetlania elementu details. To ograniczenie zostało złagodzone, dzięki czemu możesz używać takich układów jak siatka czy flex.

W tym przykładzie akordeonu, który składa się z kilku elementów details, po rozwinięciu jednego z elementów details jego zawartość jest umieszczana obok elementu summary.

Widżet Accordion z układem Flex

Jest to możliwe dzięki zastosowaniu układu flex w elemencie details. Możesz też wypróbować więcej wzorów układu z innymi wartościami wyświetlania, np. grid.

Aby dowiedzieć się więcej, przeczytaj artykuł Bramusa Więcej opcji stylizacji <details>.

@page ramki marginesów

Dodano obsługę pól marginesów strony podczas drukowania dokumentu internetowego lub eksportowania go jako pliku PDF.

Pola marginesów strony umożliwiają definiowanie zawartości w obszarze marginesów strony. Możesz więc podać niestandardowe nagłówki i stopki zamiast używać wbudowanych nagłówków i stopek wygenerowanych przez przeglądarkę.

Margines strony jest definiowany za pomocą reguły @page w CSS.

@page :right {
  @bottom-left {
    content: "My book";
    font-size: 9pt;
    color: #333;
  }
}

Wygląd i zawartość pola marginesu są określane za pomocą właściwości CSS wewnątrz reguł at, które reprezentują 16 pol marginesu za pomocą treści wygenerowanych.

W przypadku numerowania stron obsługiwane są też liczniki z wartością page dla bieżącego numeru strony i pages dla łącznej liczby stron.

Aby uzyskać bardziej szczegółowe informacje, przeczytaj artykuł Rachel Dodajanie treści do marginesów stron internetowych podczas drukowania za pomocą CSS .

I inne funkcje

I oczywiście jest tego znacznie więcej.

  • Obsługa zewnętrznych zasobów SVG dla atrybutów „clip-path”, „fill”, „stroke” i „marker”.
  • WebHID jest włączony w kontekstach dedykowanych procesów roboczych.
  • Za pomocą właściwości CSS font-variant-emoji możesz kontrolować zachowanie emotikonów.

Więcej informacji

Ta lista zawiera tylko niektóre najważniejsze informacje. Aby dowiedzieć się więcej o dodatkowych zmianach w Chrome 131, kliknij te linki.

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ę Mariko Kosaka i jak tylko pojawi się nowa wersja Chrome 132, opowiemy Ci, co nowego w Chrome.