Poznaj niektóre funkcje, które są częścią Baseline.
Data publikacji: 10 maja 2023 r.
Internet stale się rozwija, a przeglądarki są stale aktualizowane, aby zapewnić deweloperom nowe narzędzia do wprowadzania innowacji na platformie. Funkcje, które wcześniej wymagały bibliotek pomocniczych, stają się częścią platformy internetowej i są obsługiwane we wszystkich przeglądarkach, a także krótsze i prostsze sposoby kodowania elementów projektu.
Chociaż ciągłe ewoluowanie i dostosowywanie się do zmian jest przydatne, może też wprowadzać zamieszanie. Może być trudno poruszać się pośród wszystkich tych zmian. Jako deweloperzy mamy pytania w rodzaju „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 obecny stan internetu 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, o których wspominaliśmy 2 lata temu, są już gotowe do użycia?
W tym poście chcę zwrócić uwagę na niektóre funkcje, które są teraz dostępne we wszystkich głównych silnikach przeglądarek w ostatnich 2 głównych wersjach. Jest to punkt graniczny, w którym naszym zdaniem większość deweloperów uzna daną funkcję za bezpieczną. Jest to zestaw funkcji, który nazywamy „poziomem bazowym”. Więcej informacji znajdziesz w powiadomieniu dotyczącym Baseline.
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 potem 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 wbudowany element HTML, zawiera funkcje takie jak zarządzanie fokusem, ś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. Być może znasz już sposób pisania transformacji CSS z 3 właściwościami w jednym wierszu. Dzięki właściwościom transformacji możesz teraz określać właściwości transformacji pojedynczo. Jest to przydatne podczas tworzenia złożonych animacji klatki kluczowej.
.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 i pasek nawigacyjny 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ą 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 viewport.
Głębokie kopiowanie w JavaScript
W przeszłości, aby utworzyć głęboką kopię obiektu bez odniesienia do obiektu oryginalnego, popularnym sposobem było połączenie JSON.stringify z 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 stron internetowych 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 o nowych funkcjach znajdziesz na stronie z wartościami wyjściowymi.
Jeśli chcesz być na bieżąco, nasz zespół publikuje artykuły w momencie, gdy funkcja staje się interoperacyjna, oraz miesięczne informacje o tym, co dzieje się na platformie internetowej, od funkcji eksperymentalnych po nowe funkcje interoperacyjne.
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.