Nowości w Chrome 117

Adriana Jara

Oto, co należy wiedzieć na ten temat:

Mam na imię Adriana Jara. Sprawdźmy, co nowego w Chrome 117 czeka na deweloperów.

Nowe funkcje CSS do animacji rozpoczęcia i zakończenia.

Te 3 nowe funkcje CSS uzupełniają zestaw, który ułatwia dodawanie animacji wejścia i wyjścia oraz płynne animowanie elementów zamykanych z najwyższej warstwy, takich jak okna dialogowe i wyskakujące.

Pierwsza funkcja to transition-behavior. Aby przejść do właściwości dyskretnych, takich jak display, użyj wartości allow-discrete dla 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 display: none do warstwy najwyższej. Użyj @starting-style, aby zastosować styl, który przeglądarka może wyszukać, zanim element zostanie otwarty na stronie.

/*  0. 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;
}

/*  1. BEFORE-OPEN STATE   */
/*  Starting point for the transition */
@starting-style {
  .item {
    opacity: 0;
    height: 0;
  }
}

/*  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 na koniec wyblaknąć popover lub dialog z górnej warstwy, dodaj właściwość overlay do listy przejść. Uwzględnij nakładkę w przejściu lub animacji, aby animować ją wraz z pozostałymi elementami i zapewnić, że podczas animacji pozostanie na górnej warstwie. Będzie to wyglądać znacznie płynniej.

[open] {
  transition: opacity 1s, display 1s allow-discrete;
}

[open] {
  transition: opacity 1s, display 1s allow-discrete, overlay 1s allow-discrete;
}

Więcej informacji o tym, jak używać tych funkcji do poprawy wrażeń użytkowników dzięki animacjom ruchu, znajdziesz w artykule Cztery nowe funkcje CSS do płynnych animacji wejścia i wyjścia.

Grupowanie tablic

W programowaniu grupowanie tablic jest bardzo powszechną operacją, najczęściej spotykaną w przypadku używania klauzuli GROUP BY w SQL i programowania MapReduce (które lepiej jest traktować jako mapowanie-grupowanie-redukowanie).

Możliwość łączenia danych w grupy pozwala programistom obliczać zbiory danych wyższego rzędu. Na przykład średni wiek kohorty lub dzienne wartości LCP na stronie.

Grupowanie tablic umożliwia te scenariusze dzięki dodaniu metod statycznych Object.groupBy i Map.groupBy.

groupBy wywołuje podaną funkcję wywołania zwrotnego raz dla każdego elementu w obiekcie iterowalnym. Funkcja wywołania zwrotnego powinna zwracać ciąg znaków lub symbol wskazujący grupę powiązanego elementu.

W tym przykładzie z dokumentacji MDN znajduje się tablica produktów, w której do zwrócenia produktów pogrupowanych według typu użyto metody groupBy.

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 groupBydokumentacji.

Uproszczone zastąpienia lokalne w Narzędziach deweloperskich.

Funkcja lokalnych zastąpień została uproszczona, dzięki czemu możesz łatwo symulować nagłówki odpowiedzi i treści z internetu zasobów zdalnych z poziomu panelu Sieć bez dostępu do nich.

Aby zastąpić treści z internetu, otwórz panel Sieć, kliknij prawym przyciskiem myszy żądanie i wybierz Zastąp treść.

Opcje zastąpienia w menu prośby.

Jeśli masz skonfigurowane lokalne zastąpienia, ale są one wyłączone, Narzędzia deweloperskie je włączą. Jeśli nie zostały jeszcze skonfigurowane, w pasku działań u góry pojawi się odpowiedni komunikat. Wybierz folder, w którym mają być przechowywane zastąpienia, i zezwalaj na dostęp do niego w Narzędziach deweloperskich.

Wybierz folder i zezwalaj na dostęp do niego na pasku działań u góry.

Po skonfigurowaniu zastąpień Narzędzia deweloperskie przekierują Cię do sekcji Źródła > Zastąpienia > Edytor, aby umożliwić zastąpienie treści internetowych.

Zwróć uwagę, że zastąpione zasoby są oznaczone symbolem Zapisano. w panelu Sieć. Najedź kursorem na ikonę, aby zobaczyć, co zostało zastąpione.

Ikona zastąpienia obok żądania w panelu Sieć.

Więcej informacji o Narzędziach deweloperskich w Chrome 117 znajdziesz w artykule co nowego w Narzędziach deweloperskich.

I wiele więcej!

Oczywiście jest ich o wiele więcej.

Więcej informacji

Obejmuje to tylko niektóre najważniejsze kwestie. Dodatkowe zmiany w Chrome 117 znajdziesz w linkach poniżej.

Zasubskrybuj

Aby być na bieżąco, zasubskrybuj kanał Chrome Developers na YouTube. Będziesz otrzymywać powiadomienia e-mail o każdym nowym filmie.

Jestem Adriana Jara i jak tylko Chrome 117 zostanie udostępniony, od razu powiem Ci, co nowego pojawi się w Chrome.