Wyświetlanie stanu wartości podstawowej w postach na blogu i prezentacjach

Data publikacji: 23 października 2024 r.

Z tego posta dowiesz się, jak używać nowego komponentu internetowego <baseline-status> na własnej stronie oraz logotypów Baseline w prezentacjach, gdy piszesz lub mówisz o funkcjach platformy internetowej.

Większość programistów miała już doświadczenia z szukaniem rozwiązania problemu z tworzeniem stron internetowych, znalezieniem artykułu z opisem idealnego rozwiązania, a następnie zorientowaniem się na końcu, że narzędzie jest dostępne tylko w jednej przeglądarce. Albo możesz się ekscytować funkcją, o której mówi prelegent na konferencji, a potem dowiedzieć się, że jest ona eksperymentalna. Chcieliśmy to poprawić w naszych witrynach dla deweloperów Chrome, dlatego przez ostatnie 2 lata dodawaliśmy do naszych postów dane o zgodności z MDN.

Jednak podstawa porównawcza pozwala jeszcze bardziej to ułatwić. Zamiast sprawdzać poszczególne wersje przeglądarek, możesz sprawdzić, czy dana funkcja jest dostępna w ramach podstawowej wersji rozpowszechnionej, a tym samym gotowa do beztroskiego używania. Możesz też dowiedzieć się, że jest to element bazowy, który jest już dostępny, a więc interoperacyjny, ale jako nowa funkcja może wymagać opracowania strategii zapasowych. Na stronie web.dev zaczęliśmy dodawać nowy komponent stanu bazowego do niektórych stron. Możesz go zobaczyć w artykule na blogu o CSS font-size-adjust.

Komponent pokazujący, że font-size-adjust jest dostępny w wersji bazowej.
Element w postu font-size-adjust.

Dodawanie komponentu do witryny

Komponent internetowy nie jest przeznaczony tylko do użytku przez nas. Z przyjemnością przedstawiamy Ci komponent <baseline-status>. Możesz go używać do pokazywania stanu odniesienia przy tworzeniu tworzonych treści. Komponent można zainstalować z npm lub wstępnie skompilować z sieci CDN. Przeczytaj instrukcje instalacji. Po zainstalowaniu wyświetl stan funkcji, jak pokazano w tym kodzie HTML: font-size-adjust.

<baseline-status featureId="font-size-adjust"></baseline-status>

Gdy funkcja przejdzie z poziomu Dostępność ograniczona na Nowo dostępna, a potem na Dostępna szeroko, komponent zostanie automatycznie zaktualizowany.

Znajdź featureId

Wartość featureId przekazana do komponentu to nazwa funkcji w repozytorium funkcji internetowych. Komponent uzyskuje stan funkcji na podstawie danych zebranych w ramach projektu funkcji internetowych.

Dodawanie logo Baseline

Jeśli publikujesz coś w wersji drukowanej, jako pliku PDF lub podczas prezentacji na konferencji, użycie logo może okazać się przydatne w pokazaniu stanu w danym momencie. W panelu Stan platformy internetowej możesz sprawdzić stan domyślny każdej funkcji.

2 zielone logo z napisem Baseline na białym i czarnym tle.
Logotyp Baseline w trybie jasnym i ciemnym.

Logo Baseline jest licencjonowane do użytku we wszystkich Twoich materiałach. Pobierz je w formacie PNG i SVG.

Powiedz nam, gdzie używasz Baseline

Chętnie dowiemy się, gdzie jest używany Baseline. Nagraj się i dodaj link do miejsca, w którym był przez Ciebie używany, na potrzeby obserwacji i działań jako punktu odniesienia.

Czy masz inne pomysły na integrację?

Czy masz pomysł na integrację Baseline w inny sposób? Być może masz narzędzie dla programistów, które może zawierać te informacje, lub produkt, który może skorzystać na udostępnieniu wersji podstawowej używanej przez panel administracyjny. Zgłoś problem ze swoimi pomysłami – chętnie Ci pomożemy.