Oto, co musisz wiedzieć na ten temat:
- 3 nowe funkcje CSS ułatwiają dodawanie płynnych animacji wejścia i wyjścia.
- Obliczaj zbiory danych w wyższej kolejności za pomocą grupowania tablic.
- Narzędzia deweloperskie ułatwiają zastępowanie lokalne.
- A to jeszcze wiele więcej.
Nazywam się Adriana Jara. Przyjrzyjmy się nowościom dla deweloperów w Chrome 117.
Nowe funkcje CSS dotyczące animacji wejścia i wyjścia.
Te 3 nowe funkcje CSS uzupełniają zestaw, by łatwo dodawać animacje wejścia i wyjścia oraz płynnie animować się do i z elementów zamykanych górnej warstwy, takich jak okna i popovery.
Pierwsza funkcja to transition-behavior
. Aby przenieść właściwości dyskretne, np. display
, użyj wartości allow-discrete
w polu transition-behavior
.
.card {
transition: opacity 0.25s, display 0.25s;
transition-behavior: allow-discrete; /* Note: be sure to write this after the shorthand */
}
.card.fade-out {
opacity: 0;
display: none;
}
Następnie reguła @starting-style
jest używana do animowania efektów wejścia z elementu display: none
do górnej warstwy. Użyj operatora @starting-style
, aby zastosować styl, który przeglądarka może wyszukać, zanim element zostanie otwarty na stronie.
/* 0. BEFORE-OPEN STATE */
/* Starting point for the transition */
@starting-style {
.item {
opacity: 0;
height: 0;
}
}
/* 1. IS-OPEN STATE */
/* The state at which the element is open + transition logic */
.item {
height: 3rem;
display: grid;
overflow: hidden;
transition: opacity 0.5s, transform 0.5s, height 0.5s, display 0.5s allow-discrete;
}
/* 2. EXITING STATE */
/* While it is deleting, before DOM removal in JS, apply this
transformation for height, opacity, and a transform which
skews the element and moves it to the left before setting
it to display: none */
.is-deleting {
opacity: 0;
height: 0;
display: none;
transform: skewX(50deg) translateX(-25vw);
}
Aby zaniknąć efektu popover
lub dialog
z górnej warstwy, dodaj do listy przejść właściwość overlay
. Dodaj nakładkę w przejściu lub animacji, aby włączyć animację nakładki wraz z pozostałymi funkcjami i upewnić się, że podczas animacji pozostaje ona na górze warstwy. Będzie to dużo gładsze.
[open] {
transition: opacity 1s, display 1s allow-discrete;
}
[open] {
transition: opacity 1s, display 1s allow-discrete, overlay 1s allow-discrete;
}
Sprawdź 4 nowe funkcje CSS zapewniające płynne animacje wejścia i wyjścia, aby dowiedzieć się, jak ich używać do zwiększania wygody użytkowników w zakresie ruchu.
Grupowanie według tablicy
W programowaniu grupowanie tablic jest bardzo powszechną operacją, najczęściej gdy używamy klauzuli GROUP BY SQL i programowania MapReduce (które lepiej zinterpretować jako map-group-reduce).
Możliwość łączenia danych w grupy pozwala programistom obliczać zbiory danych w wyższej kolejności. Na przykład średni wiek kohorty lub dzienne wartości LCP dla strony internetowej.
Grupowanie tablic umożliwia takie scenariusze przez dodanie metod statycznych Object.groupBy
i Map.groupBy
.
groupBy
wywołuje podaną funkcję wywołania zwrotnego raz dla każdego elementu w funkcji iteracyjnej. Funkcja wywołania zwrotnego powinna zwrócić ciąg lub symbol, który wskazuje grupę powiązanego elementu.
W poniższym przykładzie z dokumentacji MDN znajduje się tablica produktów z metodą groupBy
służącą do zwracania ich pogrupowanych według typu.
const inventory = [
{ name: "asparagus", type: "vegetables", quantity: 5 },
{ name: "bananas", type: "fruit", quantity: 0 },
{ name: "goat", type: "meat", quantity: 23 },
{ name: "cherries", type: "fruit", quantity: 5 },
{ name: "fish", type: "meat", quantity: 22 },
];
const result = Object.groupBy(inventory, ({ type }) => type);
/* Result is:
{
vegetables: [
{ name: 'asparagus', type: 'vegetables', quantity: 5 },
],
fruit: [
{ name: "bananas", type: "fruit", quantity: 0 },
{ name: "cherries", type: "fruit", quantity: 5 }
],
meat: [
{ name: "goat", type: "meat", quantity: 23 },
{ name: "fish", type: "meat", quantity: 22 }
]
}
*/
Więcej informacji znajdziesz w dokumentacji usługi groupBy
.
Uproszczone zastąpienia lokalne w Narzędziach deweloperskich.
Funkcja zastąpień lokalnych została uproszczona, dzięki czemu można łatwo imitować nagłówki odpowiedzi i treści internetowe z zasobów zdalnych z panelu Sieć bez dostępu do nich.
Aby zastąpić treści internetowe, otwórz panel Sieć, kliknij żądanie prawym przyciskiem myszy i wybierz Zastąp treść.
Jeśli masz skonfigurowane zastąpienia lokalne, ale są wyłączone, zostaną one włączone w Narzędziach deweloperskich. Jeśli narzędzia deweloperskie nie są jeszcze skonfigurowane, na pasku działań u góry pojawi się odpowiedni komunikat. Wybierz folder, w którym będą przechowywane zastąpienia i zezwól na dostęp do niego Narzędziom deweloperskim.
Po skonfigurowaniu zastąpień w Narzędziach deweloperskich możesz otworzyć Źródła > Zastąpienia > Edytor, aby zastępować treści internetowe.
Pamiętaj, że zastąpione zasoby są oznaczone symbolem w panelu Sieć. Najedź na tę ikonę, aby zobaczyć zastąpienie.
W sekcji Nowości w Narzędziach deweloperskich znajdziesz więcej szczegółów na temat Narzędzi deweloperskich w Chrome 117.
…i wiele innych.
Oczywiście, jest ich jeszcze więcej.
Wcześniej oczekiwana wartość parametru
subgrid
dlagrid-template-columns
igrid-template-rows
została wdrożona w Chrome.Istnieje okres próbny wycofania
WebSQL
i okres dla programistów wycofania wydarzeniaunload
.W tej wersji powinien zostać uruchomiony interfejs API
notRestoredReasons
dla pamięci podręcznej wspomniany w filmie dotyczącym Chrome 116.
Więcej informacji
Ta analiza obejmuje tylko niektóre najważniejsze kwestie. Kliknij linki poniżej, aby dowiedzieć się o dodatkowych zmianach w Chrome 117.
- Nowości w Narzędziach deweloperskich w Chrome (117)
- Wycofanie i usunięcie Chrome 117
- Aktualizacje ChromeStatus.com w Chrome 117
- Lista zmian repozytorium źródłowego Chromium
- Kalendarz wydań Chrome
Subskrybuj
Aby być na bieżąco, zasubskrybuj kanał Chrome Developers w YouTube. Będziesz otrzymywać e-maile z powiadomieniami o każdym nowym filmie.
Cześć Adriana Jara, a gdy tylko Chrome 117 będzie dostępny, będę informować Cię o nowościach w Chrome.