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.
Obsługa przeglądarek
- 108
- 108
- 101
- 15,4
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.