Nowości w Chrome 106

Pete LePage
Adriana Jara

Oto, co musisz wiedzieć na ten temat:

Nazywam się Pete LePage, a ja Adriana Jara. Przyjrzyjmy się bliżej nowościom w Chrome 106 dla deweloperów.

Nowe interfejsy Intl API

Interfejsy Intl API pomagają wyświetlać treści w formacie zlokalizowanym.

Podobnie jak w przypadku innych interfejsów Intl API, to rozwiązanie przenosi ciężar na system, dzięki czemu nie musisz wysyłać ani utrzymywać złożonego kodu lokalizacji dla każdego użytkownika.

Interfejs API wie, gdzie umieścić symbol waluty, jak sformatować daty i godziny lub skompilować listę.

Chrome 106 zawiera wiele nowych funkcji formatowania liczb.

const opts = {
  style: 'currency',
  currency: 'EUR'
};
const x = new Intl.NumberFormat('de-DE', opts);
const r = x.format(number);
// expected output: "123.456,79 €"

Chcesz wyświetlać przedział cenowy? formatRange pomoże Ci w każdej sprawie.

Utwórz nowy obiekt numberFormat, podaj wartości style i inne opcje oraz określ, ile cyfr ma być wyświetlanych.

Następnie wywołaj funkcję formatRange(), aby uzyskać sformatowany ciąg.

const opts = {
  style: "currency",
  currency: "EUR",
  maximumFractionDigits: 0,
};
const nf = new Intl.NumberFormat("en-US", opts);
nf.formatRange(2.9, 3.1);
// expected output: "~€3"

Chcesz zaokrąglić liczbę do najbliższego przyrostu 5 z dokładnością do 2 miejsc po przecinku? Żaden problem.

Określ wartości minimumFractionDigits i roundingIncrement, a następnie wywołaj funkcję format().

const opts = {
  style: 'percent',
  minimumFractionDigits: 2,
  roundingIncrement: 5,
};
const nf = new Intl.NumberFormat("en-US", opts);
nf.format(0.428267);
// expected output: "42.85%"

Możesz nawet poprosić przeglądarkę o uwzględnienie ostatnich zer w przypadku trailingZeroDisplay, co jest bardzo przydatne w przypadku cen.

const strip = new Intl.NumberFormat('en-US', {
  style: 'percent',
  minimumFractionDigits: 2,
  trailingZeroDisplay: 'stripIfInteger',
}).format(0.42);
// 42%

const auto = new Intl.NumberFormat('en-US', {
  style: 'percent',
  minimumFractionDigits: 2,
  trailingZeroDisplay: 'auto',
}).format(0.42);
// 42.00%

Więcej informacji znajdziesz w dokumentacji MDN dotyczącej formatu numeru międzynarodowego.

Interfejs API Pop-Up ułatwia tworzenie interfejsu użytkownika, gdy trzeba wyświetlić użytkownikowi informacje.

Atrybut popup automatycznie przenosi element do górnej warstwy witryny i zapewnia łatwe sterowanie widocznością. Nie musisz już martwić się pozycjonowaniem, elementami nakładania się, punktem zaznaczenia ani interakcjami z klawiaturą. Co najlepsze, nie wymaga JavaScriptu.

Dzięki temu fragmentowi kodu interfejs API będzie odpowiedzialny za renderowanie elementu na wierzchu wszystkich innych treści oraz za obsługę danych wejściowych użytkownika i zarządzanie punktem skupienia.

<div id="my-pop-up" popup>
Pop-up content!
</div>
<button  popuptoggletarget="my-pop-up">
Toggle Pop-up button
</button>

Domyślnie użytkownicy mogą zamknąć wyskakujące okienko za pomocą gestów, takich jak klawisz ESC lub kliknięcie innych elementów.

Deweloperzy mają pełną kontrolę nad stylem,pozycjonowaniem i rozmiarem górnej warstwy, a także możliwość modyfikowania domyślnych zachowań. Używając tylko kodu CSS i HTML.

Więcej przykładów i opcji interfejsu API znajdziesz w tym artykule.

Zarejestruj się w ramach okresu próbnego wersji źródłowej, aby łatwo i na bieżąco przekazywać użytkownikom informacje. Powiedz nam, co o nim sądzisz.

Nowe funkcje CSS

Mamy dla Ciebie 2 nowe funkcje CSS, które poprawiają interoperacyjność i mają ułatwić Ci życie.

Wprowadziliśmy nową jednostkę długości: ic. ic jest podobny do ch. Język ic jest jednak używany w przypadku tekstu napisanego w językach, w których stosuje się ideogramy. Mierzy długość na podstawie szerokości lub wysokości znaku [punkt w dowolnym miejscu], czyli „woda”.

Jest to jednostka przeznaczona do określania rozmiaru tekstu, która pozwala ograniczyć szerokość, aby poprawić czytelność, oraz zapewnia przewidywalną kontrolę niezależnie od rozmiaru tekstu.

Jeśli na przykład ustawisz max-width kontenera na 10 pikseli, wiesz, że kontener będzie zawierać maksymalnie 10 glifów o pełnej szerokości, niezależnie od rozmiaru czcionki. Zobacz to na przykładzie:

Wkrótce udostępnimy obsługę interpolacji w CSS Grid dla grid-template-columns i grid-template-rows. Planowaliśmy to w wersji 106, ale opóźniliśmy to i wprowadzimy w Chrome 107. Możesz już teraz wypróbować tę funkcję w Chrome Beta. Oto przykład kodu Bramus:

I inne funkcje

Oczywiście jest ich znacznie więcej.

  • Rozpoczynamy etap 5 planu redukcji klienta użytkownika.
  • wycofujemy obsługę HTTP2 Push i typu limitu trwałego.
  • Właściwość CSS hyphenate-character jest teraz dostępna bez prefiksu.

Więcej informacji

To tylko niektóre z najważniejszych informacji. Aby dowiedzieć się więcej o dodatkowych zmianach w Chrome 106, kliknij linki poniżej.

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ę Adriana Jara i jak tylko pojawi się nowa wersja Chrome 107, opowiem Ci, co nowego w tej przeglądarce.