Nowości w Chrome 106

Pete LePage
Adriana Jara

Oto, co musisz wiedzieć na ten temat:

  • Dostępne są nowe interfejsy Intl API, które zapewniają większą kontrolę nad formatowaniem liczb.
  • Aby ułatwić wyświetlanie użytkownikom ważnych treści, udostępniliśmy wersję próbną interfejsu Pop-up API.
  • Dodajemy kilka funkcji CSS, aby zwiększyć interoperacyjność.
  • I to nie wszystko .

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 €"

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

Utwórz nowy obiekt numberFormat, określ opcje style i inne oraz liczbę cyfr do wyświetlenia.

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ę, aby uwzględniła zera końcowe za pomocą trailingZeroDisplay. Jest to 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 na temat formatu numeru międzynarodowego.

Interfejs API Pop-Up ułatwia tworzenie interfejsu użytkownika, gdy chcesz po prostu 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 zadba o wyświetlenie elementu na wierzchu wszystkich innych treści oraz obsłuży dane wejściowe 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 szybko przekazywać użytkownikom aktualne informacje. Powiedz nam, co o nim sądzisz.

Nowe funkcje CSS

Wprowadziliśmy 2 nowe funkcje porównywania cen, które poprawiają interoperacyjność i mają ułatwić Ci życie.

Wprowadziliśmy nową jednostkę długości: ic. ic jest podobny do ch. Jednak ic jest używany w przypadku tekstu zapisanego w językach, które używają ideogramów. W podstawie mierzy długość na podstawie szerokości lub wysokości tego znaku [wskaż gdzieś], co oznacza wodę.

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

Ta lista zawiera tylko niektóre najważniejsze informacje. 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 zaraz po wydaniu Chrome 107 opowiem Ci, co nowego w tej wersji.