Nowości w Chrome 106

Pete LePage
Adriana Jara

Oto, co musisz wiedzieć na ten temat:

  • Wprowadzono nowe interfejsy Intl API, które dają Ci większą kontrolę nad formatowaniem liczb.
  • Aby ułatwić wyświetlanie użytkownikom ważnych treści, dostępny jest test origin interfejsu Pop-up API.
  • Dodajemy kilka funkcji CSS, aby poprawić interoperacyjność.
  • A do tego wiele więcej.

Nazywam się Pete LePage i nazywam się Adriana Jara. Przyjrzyjmy się nowościom dla programistów w Chrome 106.

Nowe międzynarodowe interfejsy API

Międzynarodowe interfejsy API pomagają wyświetlać treści w zlokalizowanym formacie.

Podobnie jak w przypadku innych międzynarodowych interfejsów API, przeniesienie obciążenia na system przenosi obciążenie na system, więc nie musisz wysyłać ani utrzymywać złożonego kodu lokalizacji każdemu użytkownikowi.

Interfejs API wie, gdzie znajduje się symbol waluty, jak formatować daty i godziny oraz jak skompilować listę.

W Chrome 106 dodaliśmy mnóstwo nowych funkcji związanych z formatem 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świetlić przedział cenowy? Firma formatRange może Ci pomóc.

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

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

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 dziesiętnego z dokładnością do dwóch miejsc po przecinku? Żaden problem.

Określ minimumFractionDigits i roundingIncrement, a następnie wywołaj 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 dodanie na końcu zera poprzedzone znakiem trailingZeroDisplay – bardzo przydaje się to 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 dotyczącej formatu numerów międzynarodowych w MDN.

Interfejs Pop-Up API znacznie ułatwia tworzenie interfejsów, gdy potrzebujesz tylko przekazać informacje użytkownikowi.

Atrybut popup automatycznie umieszcza element w górnej warstwie witryny i ułatwia przełączanie widoczności. Nie musisz już martwić się o pozycjonowanie, układanie elementów, fokus czy interakcję z klawiaturą. Co najważniejsze, nie wymaga JavaScriptu.

W przypadku tego fragmentu interfejsu API renderuje element na wszystkich pozostałych treściach, obsługuje wprowadzanie danych przez użytkownika i zarządzanie koncentracją.

<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 gestami takimi jak klawisz Esc lub klikanie innych elementów.

Deweloperzy mają pełną kontrolę nad stylem, położeniem i rozmiarem górnej warstwy i mogą zmieniać zachowania domyślne. Korzystanie tylko z kodów CSS i HTML.

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

Zarejestruj się w testowaniu origin, aby łatwo udostępniać użytkownikom informacje na czas. Powiedz nam, co o nim sądzisz.

Nowe funkcje CSS

Wprowadziliśmy 2 nowe funkcje CSS, które poprawiają interoperacyjność i mam nadzieję, że ułatwią Ci życie.

W mieście jest nowa jednostka długości: ic dołącza do imprezy. ic jest podobny do ch. Parametr ic jest jednak używany specjalnie w przypadku tekstów napisanych w językach, które korzystają z ideogramów. Określa on w zasadzie długość na podstawie szerokości lub wysokości tego znaku, czyli wody.

Jest to jednostka zaprojektowana do określania rozmiaru tekstu, co pozwala ograniczyć szerokość w celu zwiększenia czytelności i zapewnia przewidywalną kontrolę niezależnie od rozmiaru tekstu.

Jeśli na przykład ustawisz max-width kontenera (np. 10ic), wiesz, że będzie on zawierać maksymalnie 10 glifów o pełnej szerokości, niezależnie od rozmiaru czcionki. Możesz to sprawdzić w tym przykładzie:

Obsługa interpolacji CSS Siatka w językach grid-template-columns i grid-template-rows pojawi się już wkrótce. Była planowana na wersję 106, ale jest opóźniona i zostanie wprowadzona w Chrome 107. Nadal możesz ją wypróbować w Chrome Beta. Oto przykład kodu Bramusa:

…i wiele innych.

Oczywiście, jest ich jeszcze więcej.

  • Rozpoczynamy fazę piątą planu redukcji liczby klientów użytkownika.
  • Obsługa push HTTP2 i typu limitu stałego są wycofywane.
  • Właściwość CSS hyphenate-character jest teraz dostępna bez prefiksu.

Więcej informacji

Ta analiza obejmuje tylko niektóre najważniejsze kwestie. Kliknij poniższe linki, aby dowiedzieć się więcej o zmianach w Chrome 106.

Subskrybuj

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

Jestem Adriana Jara i jak tylko pojawi się Chrome 107, będę tu, by informować Cię o nowościach w Chrome.