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

Poznaj tylko niektóre funkcje, które są dostępne w ramach zestawu bazowego.

Sieć stale się rozwija, a przeglądarki nieustannie się aktualizują, udostępniając programistom nowe narzędzia do wprowadzania innowacji na platformie. Elementy, które wcześniej wymagały bibliotek pomocniczych, stały się częścią platformy internetowej i obsługiwały wszystkie przeglądarki, a także krótsze lub łatwiejsze sposoby kodowania elementów projektu.

Ta nieustanna ewolucja i adaptacja są pomocne, ale mogą też powodować zamieszanie. Poruszanie się po tych wszystkich aktualizacjach może być trudne. Programiści zastanawiają się, kiedy wszystkie wyszukiwarki będą obsługiwać tę nową funkcję. „Kiedy mogę zacząć używać tych funkcji w moim kodzie produkcyjnym?” „Jak długo będziemy obsługiwać starsze przeglądarki?”

Prawidłowa odpowiedź brzmi: „to zależy”. Potrzebne elementy i użyteczność ich pracy tak naprawdę zależą od bazy użytkowników, stosu technologicznego, struktury zespołu i obsługiwanych urządzeń. Możemy się jednak zgodzić, że obecne środowisko sieci może utrudniać podejmowanie takich decyzji.

Zespół Chrome współpracuje z innymi silnikami przeglądarek i społecznością internetową, aby zwiększyć przejrzystość informacji. Dotyczy to także naszych projektów takich 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, które poznaliśmy 2 lata temu, są gotowe do użycia?

W tym poście chcę zwrócić uwagę na niektóre funkcje, które są obecnie dostępne dla wszystkich głównych wyszukiwarek w dwóch ostatnich wersjach. Jest to moment, w którym według nas większość deweloperów uzna, że dana funkcja jest bezpieczna w użyciu. To zestaw funkcji, który nazywamy Punktem odniesienia. Więcej informacji znajdziesz tutaj.

Element okna

Element <dialog> to nowy element HTML do tworzenia okien dialogowych, takich jak wyskakujące okienka i okna modalne.

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

<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 skupieniem, śledzenie kart i utrzymywanie kontekstu grupowania. Więcej informacji znajdziesz w sekcji Tworzenie komponentu okna.

Pojedyncze właściwości przekształcenia CSS

Przekształcenia CSS to skuteczny sposób na wzbudzenie zainteresowania witryny.
Być może wiesz, jak tworzyć przekształcenia CSS z 3 właściwościami w jednym wierszu.
W przypadku poszczególnych właściwości przekształcenia możesz teraz określić je pojedynczo. Jest to przydatne podczas tworzenia 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

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

Głęboki tekst w JavaScript

W przeszłości, aby utworzyć głęboką kopię obiektu bez odniesienia do oryginalnego obiektu, popularnym hakerem był JSON.stringify w połączeniu z zasadą JSON.parse. Był to tak typowy atak, że V8 (mechanizm JavaScript w Chrome) znacząco poprawił wydajność tej sztuczki. Dzięki usłudze structuredClone nie musisz już korzystać z tego narzędzia.

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 o głębokim kopiowaniu w JavaScripcie za pomocą StructuredClone.

Pseudoklasa :focus-visible

Jako programiści stron internetowych wszyscy znamy pierścień ostrości, wyświetlane podczas nawigowania po stronie za pomocą klawiatury lub klikania elementów wprowadzania tekstu. Jest to funkcja niezbędna do zapewniania ułatwień dostępu, ale czasami przeszkadza w projektowaniu strony przez różnych użytkowników. Pseudoklasa CSS :focus-visible sprawdza, czy przeglądarka uważa, że fokus powinien być widoczny. Teraz możesz określać style tylko wtedy, gdy zaznaczenie powinno być widoczne.

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

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

Więcej informacji znajdziesz w sekcji Koncentracja na kursie Poznaj CSS.

Interfejs TransformStream

Interfejs TransformStream interfejsu Streams API umożliwia łączenie strumieni za pomocą potoków.

Możesz na przykład przesyłać strumieniowo dane z jednego miejsca, a potem skompresować go do innej lokalizacji w miarę ich przekazywania. W artykule Strumieniowe przesyłanie żądań za pomocą interfejsu API pobierania znajdziesz przykładowy przypadek użycia.

Podsumowanie

Na platformie internetowej pojawiło się też wiele innych funkcji, które niedawno stały się współdziałające i stabilne. W przyszłości będziemy współpracować z grupą społeczności WebDX, aby lepiej wyjaśnić te zbiory funkcji podstawowych. Więcej informacji znajdziesz na stronie web.dev/baseline.

Jeśli chcesz być na bieżąco, nasz zespół publikuje artykuły, gdy dana funkcja stanie się interaktywna, oraz comiesięczne aktualizacje na temat tego, co dzieje się na platformie internetowej – od funkcji eksperymentalnych po te, które niedawno przestały działać.

Zawsze jesteśmy ciekawi, czy nasze działania Ci pomogą, czy też potrzebujesz innego rodzaju pomocy, więc skontaktuj się z nami przez grupę społeczności WebDX.