Nowości w Chrome 131

Mariko Kosaka
X

Oto, co musisz wiedzieć na ten temat:

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

Dziedziczenie wyróżnienia CSS

Dziedziczenie wyróżnienia CSS zmienia się w przypadku pseudoklas ::selection i ::target-text. Dzięki temu model dziedziczenia stylów staje się bardziej intuicyjny i jest zgodny z niedawno dodanymi pseudoklasami ::highlight, ::spelling-error i ::grammar-error.

Weź pod uwagę ten fragment kodu z podkreślonym tekstem.

p {
  color: deeppink;
}

.blue::selection {
  color: blue;
}

<p class="blue">
    This is
    <em>emphasized</em>
    text.
</p>

W wcześniejszych wersjach Chrome po wybraniu tekstu, który jest wyróżniony, jego kolor nie zmieniał się na niebieski, mimo ustawienia pseudoklasy ::selection w elementach nadrzędnych akapitu.

Wyróżniony tekst na różowo

Dzieje się tak, ponieważ została ona zaimplementowana przy użyciu modelu dziedziczenia elementów źródłowych. W tym przypadku pseudoklasa ::selection pasuje tylko do elementów z klasą niebieską, której element w tym akapicie nie ma.

Zmiana dziedziczenia wyróżnienia: gdy ten sam tekst zostanie wybrany w Chrome 131, zmieni kolor na niebieski.

Wyróżniony tekst na niebiesko

Wprowadziliśmy też kilka innych zmian związanych z tym tematem. Przeczytaj artykuł Zmiany w stylach selektora CSS z uwzględnieniem dziedziczenia, który napisał Stephen Chenney z Igalia, który pracował nad tą funkcją.

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

Obejmuje to 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.