Oto, co musisz wiedzieć na ten temat:
- Zaawansowana funkcja CSS
attr()
umożliwia stosowanie typów innych niż<string>
we wszystkich właściwościach CSS. - Zapytania o stan przewijania CSS umożliwiają stosowanie zapytań o kontenery do stylizacji potomków kontenerów na podstawie ich stanu przewijania.
- CSS
text-box
,text-box-trim
itext-box-edge
umożliwiają większą kontrolę nad wyrównaniem pionowym tekstu - I to nie wszystko
Funkcja zaawansowana attr()
CSS
Ta funkcja dodaje do istniejącej funkcji attr()
funkcje określone w specyfikacji CSS na poziomie 5. Umożliwia to używanie typów innych niż <string>
we wszystkich właściwościach CSS (oprócz obecnego obsługiwania treści pseudoelementów).
W poniższym przykładzie wartość właściwości color
dla elementu div
używa wartości z atrybutu data-color
. Ta wartość atrybutu jest analizowana w formie <color>
za pomocą attr()
i type()
. Wartość zastępcza to red
.
<div data-foo="blue">test</div>
div {
color: attr(data-foo type(<color>), red);
}
Więcej informacji znajdziesz w artykule Usługa porównywania cen attr()
przechodzi na wyższy poziom.
Zapytania do kontenera stanu przewijania w CSS
Używaj zapytań dotyczących kontenerów, aby nadawać styl potomkom kontenerów na podstawie ich stanu przewijania.
Kontenery zapytań to albo kontenery z paskiem przewijania, albo elementy, na które wpływa pozycja kursora w kontenerze z paskiem przewijania. Możesz wysyłać zapytania o stany:
stuck
: przyklejony kontener jest przytwierdzony do jednej z krawędzi pola przewijania.snapped
: kontener wyrównany do przyciągania jest obecnie przyciągnięty w poziomie lub w pionie.scrollable
: określa, czy kontener z paskiem przewijania można przewijać w kierunku zapytanym.
Nowy typ kontenera: scroll-state
umożliwia wysyłanie zapytań do kontenerów. Na przykład:
.stuck-top {
container-type: scroll-state;
position: sticky;
top: 0px;
> nav {
@container scroll-state(stuck: top) {
background: Highlight;
color: HighlightText;
}
}
}
Aby dowiedzieć się więcej i zobaczyć kilka demonstracji, zapoznaj się z artykułem Zapytania o stan przewijania w usługach porównywania cen.
CSS text-box
, text-box-trim
i text-box-edge
Właściwość text-box-trim
określa, które krawędzie mają zostać przycięte (górna lub dolna), a właściwość text-box-edge
określa, jak ma być przycięta krawędź.
Te właściwości umożliwiają dokładne kontrolowanie odstępów pionowych za pomocą wymiarów czcionki.
h1 {
/* trim both sides to the capital letters */
text-box: trim-both cap alphabetic;
/* trim both sides to the lowercase letter x */
text-box: trim-both ex alphabetic;
}
Dowiedz się, jak używać tych nowych usług w CSS text-box-trim
.
I inne funkcje
Oczywiście jest ich znacznie więcej.
Animation.overallProgress
pokazuje w wygodny i spójny sposób, jak daleko posunęła się animacja w ramach iteracji, niezależnie od charakteru jej osi czasu.Node.prototype.moveBefore
umożliwia przenoszenie elementów w drzewie DOM bez resetowania ich stanu.- Interfejs
FileSystemObserver
powiadamia witryny o zmianach w systemie plików. - Metoda
PublicKeyCredential
getClientCapabilities()
pozwala określić, które funkcje WebAuthn są obsługiwane przez klienta użytkownika.
Szczegółowe informacje o tych i innych nowych funkcjach Chrome znajdziesz w informacjach o wersji Chrome 133.
Więcej informacji
Ta lista zawiera tylko niektóre najważniejsze informacje. Aby dowiedzieć się więcej o dodatkowych zmianach w Chrome 133, kliknij te linki.
- Informacje o wersji Chrome 133
- Nowości w Narzędziach deweloperskich w Chrome (133)
- Aktualizacje ChromeStatus.com dotyczące Chrome 133
- Kalendarz wersji Chrome.
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.
Gdy tylko pojawi się nowa wersja Chrome, poinformujemy Cię o jej nowościach.