Oto, co musisz wiedzieć na ten temat:
- Trzy nowe funkcje CSS ułatwiają dodawanie płynnych animacji wejścia i wyjścia.
- Oblicz zbiory danych wyższego rzędu za pomocą grupowania tablic.
- Narzędzia deweloperskie ułatwiają lokalne zastąpienia.
- A to nie koniec możliwości.
Nazywam się Adriana Jara. Zobaczmy, co nowego dla programistów Chrome 117.
Nowe funkcje CSS dla animacji wejścia i wyjścia.
Te trzy nowe funkcje CSS dopełniają cały zestaw, dodając łatwe w obsłudze animacje wejścia i wyjścia. płynne animowanie do i z górnej warstwy elementów, które można zamknąć, takich jak okna dialogowe i wyskakujące okienka.
Pierwsza funkcja to transition-behavior
. Aby przenieść właściwości dyskretne, takie jak display
, użyj wartości allow-discrete
dla właściwości 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
służy do animowania efektów wejścia z display: none
do górnej warstwy. Użyj @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 zanikać popover
lub dialog
z górnej warstwy, dodaj do listy przejść właściwość overlay
. Uwzględnij nakładkę w przejściu lub animacji, aby animować nakładkę wraz z pozostałymi funkcjami i upewnić się, że pozostanie ona w górnej warstwie podczas animacji. Będzie to wyglądało znacznie płynniej.
[open] {
transition: opacity 1s, display 1s allow-discrete;
}
[open] {
transition: opacity 1s, display 1s allow-discrete, overlay 1s allow-discrete;
}
Zapoznaj się z czterema nowymi funkcjami CSS zapewniającymi płynne animacje wejścia i wyjścia, aby dowiedzieć się, jak korzystać z tych funkcji w celu poprawy wrażeń użytkownika związanych z ruchem.
Grupowanie tablic
W programowaniu grupowanie tablic to bardzo powszechna operacja, którą można zaobserwować najczęściej przy korzystaniu z klauzuli GROUP BY w kodzie SQL i programowania MapReduce (które lepiej określa się jako „map-group-reduce”).
Możliwość łączenia danych w grupy umożliwia programistom obliczanie zbiorów danych wyższego rzędu. Mogą to być na przykład średni wiek kohorty lub dzienne wartości LCP strony.
Grupowanie tablic umożliwia takie scenariusze po dodaniu metod statycznych Object.groupBy
i Map.groupBy
.
Funkcja groupBy
wywołuje podaną funkcję wywołania zwrotnego raz dla każdego elementu w iteracji. Funkcja wywołania zwrotnego powinna zwracać ciąg znaków lub symbol wskazujący grupę powiązanego elementu.
Poniższy przykład z dokumentacji MDN zawiera tablicę produktów za pomocą metody groupBy
, która jest używana do zwrócenia 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 lokalne zastąpienia w Narzędziach deweloperskich.
Funkcja zastąpienia lokalnych została udoskonalona, dzięki czemu można z poziomu panelu Sieć łatwo imitować nagłówki odpowiedzi i treści internetowe zasobów zdalnych, nie mając do nich dostępu.
Aby zastąpić treści z internetu, otwórz panel Sieć, kliknij żądanie prawym przyciskiem myszy i wybierz Zastąp treść.
Jeśli masz skonfigurowane lokalne zastąpienia, ale są wyłączone, Narzędzia deweloperskie je włączają. Jeśli nie masz jeszcze skonfigurowanych narzędzi deweloperskich, 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 nich Narzędzi deweloperskich.
Po skonfigurowaniu zastąpień w Narzędziach deweloperskich przejdziesz do sekcji Źródła > Zastąpienia > Edytor umożliwiający zastępowanie treści internetowych.
Uwaga: zastąpione zasoby są oznaczone w panelu Sieć etykietą . Najedź na nią kursorem, aby zobaczyć, co zostało zastąpione.
Zapoznaj się z nowościami w Narzędziach deweloperskich, aby dowiedzieć się więcej o Narzędziach deweloperskich w Chrome 117.
I inne funkcje
Oczywiście dostępnych jest też znacznie więcej.
Długo oczekiwana wartość
subgrid
dlagrid-template-columns
igrid-template-rows
została wdrożona w Chrome.W przypadku wycofania zdarzeń
unload
dostępny jest okres próbny wycofania usługiWebSQL
oraz wersja próbna dla deweloperów.
Więcej informacji
To tylko niektóre z najważniejszych informacji. Przejrzyj te linki: dodatkowe zmiany w Chrome 117.
- Nowości w Narzędziach deweloperskich w Chrome (117)
- Wycofanie i usuwanie Chrome 117
- Aktualizacje na ChromeStatus.com w przypadku Chrome 117
- Lista zmian w repozytorium źródłowym Chromium
- Kalendarz wersji Chrome
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.
Cześć Adrianę Jara. Gdy tylko Chrome 117 się ukaże, od razu opowiem, co nowego w Chrome.