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

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

Internet stale się rozwija, a przeglądarki są stale aktualizowane, aby zapewnić deweloperom 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.

Chociaż ciągła ewolucja i dostosowywanie się do zmian są pomocne, mogą też wprowadzać zamieszanie. Poruszanie się po tych wszystkich aktualizacjach może być trudne. Programiści pytają, kiedy wszystkie przeglądarki będą obsługiwać tę nową funkcję. „Kiedy mogę zacząć używać tych funkcji w kodzie produkcyjnym?” „Jak długo powinniśmy obsługiwać starsze przeglądarki?”

Prawidłowa odpowiedź to „to zależy”. To, czego potrzebujesz i co jest przydatne, zależy od bazy użytkowników, pakietu technologicznego, struktury zespołu i obsługiwanych urządzeń. Wszyscy jednak zgadzamy się, że obecna sytuacja w internecie może utrudniać podejmowanie takich decyzji.

Aby wyjaśnić tę kwestię, zespół Chrome współpracuje z innymi silnikami przeglądarek i ze społecznością internetową. Obejmuje to nasze działania w ramach projektów takich jak Interop 2023, które mają na celu poprawę interoperacyjności kluczowych funkcji. A co z funkcjami wprowadzonymi w ostatnich latach? 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 promptów 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 metodę showModal() elementu dialogu.

<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 obsługuje wbudowane funkcje takie jak zarządzanie punktem skupienia, śledzenie kart i zachowywanie kontekstu układania. Więcej informacji znajdziesz w artykule Tworzenie komponentu dialogowego.

Poszczególne właściwości transformacji CSS

Przekształcenia CSS to skuteczny sposób na dodanie ruchu do witryny.
Możesz znać sposób zapisywania transformacji CSS z 3 właściwościami w jednym wierszu.
Za pomocą właściwości transformacji możesz teraz określać poszczególne właściwości transformacji. Jest to przydatne podczas tworzenia złożonych animacji klatek kluczowych.

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

Szczegółowe wyjaśnienie tej zmiany znajdziesz w artykule Większa kontrola nad przekształceniami CSS za pomocą właściwości przekształcenia.

Nowe jednostki widocznego obszaru

Na urządzeniach mobilnych rozmiar widocznego obszaru zależy od obecności lub braku dynamicznych pasków narzędzi.
Czasami pasek adresu URL i pasek narzędzi nawigacji są widoczne, ale czasami są całkowicie schowane.
Rzeczywisty rozmiar widocznego obszaru będzie się różnić w zależności od tego, czy paski narzędzi są widoczne.
Nowe jednostki widoku, takie jak svh i lvh, zapewniają deweloperom stron internetowych większą kontrolę podczas projektowania stron mobilnych. Więcej informacji znajdziesz w artykule Duże, małe i dynamiczne jednostki widocznego obszaru.

Głębokie kopiowanie 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 popularny sposób, że V8 (mechanizm JavaScriptu w Chrome) znacznie poprawił wydajność tego triku. Dzięki structuredClone nie musisz już stosować tego sposobu.

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 Głębokie kopiowanie w JavaScript za pomocą funkcji structuredClone.

Pseudoklasa :focus-visible

Jako deweloperzy internetowi znamy wszyscy „pierścień fokusu”, który pojawia się, gdy poruszasz się po stronie za pomocą klawiatury lub klikasz elementy wprowadzania. Jest to niezbędna funkcja ułatwiająca dostępność, ale czasami przeszkadza w projektowaniu wizualnym dla różnych użytkowników. Pseudoklasa CSS :focus-visible sprawdza, czy według przeglądarki fokus powinien być widoczny. Teraz możesz określać style tylko wtedy, gdy ma być widoczny fokus.

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

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

Więcej informacji znajdziesz w sekcji Focus na temat nauki języka CSS.

Interfejs TransformStream

Interfejs TransformStream interfejsu Streams API umożliwia przesyłanie strumieni do siebie nawzajem.

Możesz na przykład przesyłać strumień danych z jednego miejsca, a potem kompresować go w innej lokalizacji. W artykule Wysyłanie żądań strumieniowych za pomocą interfejsu Fetch API znajdziesz przykładowe zastosowanie.

Podsumowanie

W ostatnim czasie wiele funkcji stało się interoperacyjnych i stabilnych w użyciu na platformie internetowej. W przyszłości będziemy współpracować z grupą społeczności WebDX, aby lepiej wyjaśnić te zestawy funkcji bazowych. 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 interesuje nas, czy nasze działania są dla Ciebie przydatne i czy potrzebujesz innego rodzaju pomocy. Skontaktuj się z nami na stronie grupy społeczności WebDX.