Funkcje podstawowe, których możesz używać już dziś

Poznaj tylko niektóre funkcje, które są częścią wersji Baseline.

Internet stale się rozwija, a przeglądarki stale się aktualizują, aby udostępniać deweloperom nowe narzędzia do wprowadzania innowacji na platformie. Elementy, które wcześniej wymagały bibliotek pomocniczych, stają się częścią platformy internetowej i są obsługiwane przez wszystkie przeglądarki wraz z krótszymi lub łatwiejszymi sposobami projektowania elementów kodu.

Ciągła ewolucja i adaptacja pomagają, ale mogą też wiązać się z dezorientacją. Odwiedzanie wszystkich tych aktualizacji może być trudne. Deweloperzy często zastanawiają się, kiedy będą obsługiwać tę nową funkcję. „Kiedy mogę zacząć korzystać z tych funkcji w kodzie produkcyjnym?” „Jak długo mamy obsługiwać starsze przeglądarki?”

Prawidłowa odpowiedź to „to zależy”. Wymagania i użyteczność zależą od bazy użytkowników, stosu technologicznego, struktury zespołu i obsługiwanych urządzeń. Wszyscy się jednak zgodzimy: obecne środowisko internetu może utrudniać podejmowanie takich decyzji.

Zespół Chrome współpracuje z innymi silnikami przeglądarek i społecznością internetową, aby zwiększyć przejrzystość. Obejmuje to nasze prace nad takimi projektami jak Interop 2023, które pomagają poprawić interoperacyjność zestawu kluczowych funkcji. A co z funkcjami, które pojawiły się w ciągu ostatnich kilku lat? Czy funkcje eksperymentalne, o których dowiedzieliśmy się dwa lata temu, są już gotowe do użycia?

W tym poście chcę zwrócić uwagę na niektóre funkcje, które są obecnie dostępne we wszystkich głównych silnikach przeglądarek w dwóch ostatnich głównych wersjach. Sądzimy, że w tym momencie większość deweloperów poczuje, że dana funkcja jest bezpieczna i jest to zestaw funkcji, który określamy jako Baseline. Aby dowiedzieć się więcej, zapoznaj się z ogłoszeniem programu Baseline tutaj.

Element okna

Element <dialog> to nowy element HTML służący do tworzenia okien dialogowych, takich jak wyskakujące okienka czy okna modalne.

Aby go użyć, zdefiniuj element modalny, a następnie otwórz okno, wywołując metodę showModal() w elemencie okna.

<dialog id="d">
  <form method="dialog">
    <p>Hi, I'm a dialog.</p>
    <button>ok</button>
  </form>
</dialog>

<button onclick="d.showModal()">
  Open Dialog
</button>

Jako natywny element HTML wbudowane są takie funkcje jak zarządzanie ostrością, śledzenie kart i utrzymywanie kontekstu na stosie. Więcej informacji znajdziesz w artykule Tworzenie komponentu okna dialogowego.

Poszczególne właściwości przekształcania CSS

Przekształcenia CSS to skuteczny sposób na dodanie ruchu do witryny.
Jako pewnie wiesz, jak tworzyć przekształcenia CSS z 3 właściwościami w jednym wierszu.
Poszczególne właściwości przekształcania możesz określać osobno. Jest to przydatne podczas pisania złożonych animacji klatek kluczowych.

.target {
  translate: 50% 0;
  rotate: 30deg;
  scale: 1.2;
}

Szczegółowy opis tej zmiany znajdziesz w artykule Szczegółowa kontrola przekształceń CSS z poszczególnymi właściwościami przekształcenia.

Nowe jednostki widocznego obszaru

Na urządzeniach mobilnych na rozmiar widocznego obszaru wpływa obecność lub brak dynamicznych pasków narzędzi.
Czasami pasek adresu URL i pasek narzędzi nawigacyjnych są widoczne, ale czasami są one całkowicie wycofane.
Rzeczywisty rozmiar widocznego obszaru będzie się różnić w zależności od tego, czy paski narzędzi są widoczne czy nie.
Nowe jednostki widocznego obszaru, takie jak svh i lvh, dają programistom stron internetowych większą kontrolę podczas projektowania witryn na urządzenia mobilne. Więcej informacji znajdziesz w artykule Duże, małe i dynamiczne jednostki widocznego obszaru.

Głęboka treść w JavaScript

W przeszłości w celu utworzenia szczegółowej kopii obiektu bez odwołania do oryginalnego obiektu popularny haker wykonywał atak JSON.stringify i połączył go z elementem JSON.parse. Był to na tyle popularny atak, że V8 (mechanizm JavaScript w Chrome) znacząco zwiększył wydajność tej sztuczki. Dzięki usłudze structuredClone nie potrzebujesz już tej funkcji.

const original = {id: 0, prop: {name: "Tom"}}

/* Old hack */ 
const deepCopy = JSON.parse(JSON.stringify(original));

/* New way */
const deepCopy = structuredClone(original);

Więcej informacji znajdziesz w artykule Precyzyjne kopiowanie kodu w języku JavaScript za pomocą funkcjiStructuredClone.

Pseudoklasa :focus-visible

Jako programista stron internetowych wszyscy znamy „pierścień zaznaczenia”, który pojawia się, gdy poruszasz się po stronie za pomocą klawiatury lub klikasz elementy wprowadzania. Jest to funkcja niezbędna w zakresie ułatwień dostępu, ale czasem może przeszkadzać w projektowaniu u różnych użytkowników. Pseudoklasa CSS :focus-visible sprawdza, czy przeglądarka uważa, że zaznaczenie powinien być widoczne. Teraz możesz określić style tylko wtedy, gdy zaznaczenie ma być widoczne.

/* focus with tab key */
:focus-visible {
    outline: 5px solid pink;
}

/* mouse click */
:focus:not(:focus-visible) {
    outline: none;
}

Aby dowiedzieć się więcej, zapoznaj się z sekcją na temat usług porównywania cen.

Interfejs TransformStream

Interfejs TransformStream interfejsu Streams API umożliwia łączenie strumieni w pionie.

Możesz np. przesyłać strumieniowo dane z jednego miejsca, a potem skompresować strumień w innej lokalizacji w miarę jego przekazywania. Przykładowy przypadek użycia omawiamy w artykule Przesyłanie żądań strumieniowych za pomocą interfejsu API pobierania.

Podsumowanie

Jest jeszcze wiele innych funkcji, które niedawno stały się interoperacyjnością i stabilnością i można z nich korzystać na platformie internetowej. W przyszłości będziemy współpracować z grupą społeczności WebDX, aby doprecyzować informacje o tych zestawach funkcji bazowych. Aktualne informacje znajdziesz na stronie web.dev/baseline.

Aby być na bieżąco, nasz zespół publikuje artykuły, gdy dana funkcja stanie się interoperacyjnością, a także comiesięczne informacje o tym, co dzieje się na platformie internetowej, od funkcji eksperymentalnych po te, które dopiero stają się obsługiwane.

Zawsze jesteśmy ciekawi, czy nasze działania pomagają Ci w osiąganiu celów. Jeśli potrzebujesz pomocy innego typu, skontaktuj się z nami przez grupę społeczności WebDX.