Domyślnie na różnych przeglądarkach: jak działają zastępcze rozwiązania Baseline w Przewodniku po współczesnych technologiach internetowych

Tara Agyemang

Opublikowano: 12 listopada 2026 r.

Poproś agenta AI ds. kodowania o utworzenie etykietki lub okna modalnego i przyjrzyj się uważnie kodowi, który napisze. W większości przypadków agent pobiera kod JavaScript, aby odtworzyć funkcje wbudowane w przeglądarkę. Jeśli poprosisz agenta o użycie nowszych funkcji CSS lub HTML, często pominie on wykrywanie funkcji i funkcje zastępcze. Jeśli tego nie zrobisz, użytkownicy nieobsługiwanych przeglądarek zobaczą uszkodzoną stronę.

Przewodnik po współczesnych technologiach internetowych uwzględnia zgodność z przeglądarkami w każdej rekomendacji. Każdy przewodnik łączy nowoczesne funkcje internetowe z danymi pomocy Baseline i zweryfikowanymi wzorcami kreacji zastępczych. W tym poście dowiesz się, jak agent wykorzystuje te dane do pisania nowoczesnego kodu działającego w różnych przeglądarkach.

Dlaczego agenci kodujący bez wskazówek nieprawidłowo obsługują przeglądarki

Bez wskazówek agenty kodujące rzadko sprawdzają, które przeglądarki musi obsługiwać Twój projekt, zanim zaczną pisać kod. Zamiast tego zwykle popadają w jedną z 2 skrajności:

  • Domyślne używanie starszego kodu: dane treningowe modelu są pełne starszych wzorców, a oceny Przewodnika po współczesnych technologiach internetowych pokazują, że modele nadal zalecają wiele z nich. Agenci często piszą złożony kod JavaScript lub dodają zewnętrzne biblioteki, gdy wystarczy użyć wbudowanej funkcji HTML lub CSS.
  • Korzystanie z nowych funkcji bez zabezpieczeń: gdy poprosisz agenta o użycie nowszej funkcji internetowej, zwykle napisze on kod dla obsługiwanych przeglądarek i na tym zakończy. Pomija wykrywanie funkcji i nie uwzględnia kreacji zastępczych, co powoduje błędy na stronie w przeglądarkach, które nie obsługują tej funkcji.

Dane z pakietu ewaluacyjnego Przewodnika po współczesnych technologiach internetowych pokazują, jak powszechna jest ta luka. W przypadku funkcji, które nie działają jeszcze we wszystkich głównych przeglądarkach, pakiet ewaluacyjny testuje wykrywanie funkcji, reguły @supports, kreacje zastępcze lub warunkowe polyfille. Modele bez wskazówek przechodzą te testy tylko w 43% przypadków. Po włączeniu Przewodnika po współczesnych technologiach internetowych odsetek poprawnych odpowiedzi wzrasta do 87%.

Jak dane punktu odniesienia wpływają na każdą rekomendację

Aby określić, kiedy funkcja internetowa wymaga kreacji zastępczej, Przewodnik po współczesnych technologiach internetowych korzysta z Baseline. Baseline śledzi obsługę w podstawowym zestawie przeglądarek (Chrome, Edge, Firefox i Safari na komputerach i urządzeniach mobilnych) i ma 3 stany:

  • Baseline szeroko dostępna: funkcja działa we wszystkich podstawowych przeglądarkach od co najmniej 30 miesięcy.
  • Baseline Newly available (Nowo dostępne w Baseline): funkcja działa we wszystkich głównych przeglądarkach od dnia, w którym ostatnia przeglądarka dodała obsługę.
  • Ograniczona dostępność: funkcja nie jest jeszcze obsługiwana we wszystkich głównych przeglądarkach.

Każdy przewodnik po współczesnych technologiach internetowych zawiera wbudowane dane o stanie Baseline i wersji przeglądarki z pakietu web-features. Gdy agent kodujący wczytuje przewodnik, otrzymuje dokładny stan obsługi funkcji, daty wydania i wersje przeglądarki wraz z instrukcjami implementacji. Na przykład:

Browser support for <dialog closedby>: Limited availability.
Supported by: Chrome 134 (Mar 2025), Edge 134 (Mar 2025), and Firefox 141 (Jul 2025).
Unsupported in: Safari.

Domyślnie Przewodnik po współczesnych technologiach internetowych stosuje 2 reguły oparte na tych danych:

  • Podstawowe, powszechnie dostępne funkcje: agent korzysta z tych funkcji bezpośrednio, bez dodatkowego wykrywania funkcji ani kodu zastępczego. Ta reguła pozwala zachować przejrzystość bazy kodu i uniknąć niepotrzebnych obejść.
  • Funkcje Baseline o nowej i ograniczonej dostępności: przewodniki po tych funkcjach zawierają zweryfikowaną strategię zastępczą. Agent użytkownika korzysta z nowoczesnej funkcji, gdy jest ona obsługiwana, i zapewnia czystą kreację zastępczą w przypadku innych przeglądarek.

4 wzorce kreacji zastępczych, które Przewodnik po współczesnych technologiach internetowych wykorzystuje w praktyce

Nie każda funkcja internetowa wymaga tego samego rodzaju kreacji zastępczej. Przewodnik po współczesnych technologiach internetowych dopasowuje każdą funkcję do jednego z 4 podejść zastępczych na podstawie tego, jak funkcja zachowuje się w nieobsługiwanych przeglądarkach:

Wzorzec zastępczy Kiedy Przewodnik po współczesnych technologiach internetowych korzysta z tego interfejsu API
Progresywne ulepszanie bez kodu zastępczego funkcje dekoracyjne lub dodatkowe, które nieobsługiwane przeglądarki bezpiecznie ignorują bez zakłócania układu lub działania.
Wykrywanie funkcji CSS za pomocą reguły @supports style wizualne lub układy, które zależą od nowszej funkcji CSS i mogą wyglądać na uszkodzone, jeśli zostaną zastosowane częściowo;
Lekki niestandardowy kod JavaScript Interaktywne atrybuty HTML lub interfejsy API, które wymagają małego skryptu bez zależności, aby odtworzyć zachowanie w starszych przeglądarkach.
Warunkowo wczytywane polyfille Większe funkcje CSS lub JavaScript, które wymagają sprawdzonego kodu polyfill, są wczytywane dynamicznie tylko wtedy, gdy brakuje obsługi natywnej.

Progresywne ulepszanie bez kodu zastępczego

Niektóre nowoczesne funkcje poprawiają typografię, animacje lub szybkość wczytywania strony bez zmiany sposobu jej działania. Jeśli przeglądarka nie rozpoznaje tych funkcji, ignoruje je i renderuje resztę strony w normalny sposób.

Na przykład deklaracja CSS text-wrap: balance (nowo dostępna w Baseline) wyrównuje długość wierszy w nagłówkach.

.balanced {
  text-wrap: balance;
}

Interfejs Speculation Rules API (ograniczona dostępność) pobiera z wyprzedzeniem lub renderuje wstępnie kolejne strony. Nieobsługiwane przeglądarki bezpiecznie ignorują bloki <script type="speculationrules"> i nierozpoznane deklaracje CSS.

<script type="speculationrules">
  {
    "prefetch": [{
      "where": { "href_matches": "/*" },
      "eagerness": "moderate"
    }]
  }
</script>

Dzięki temu agent może dodawać te funkcje bezpośrednio, bez dodatkowego kodu zastępczego.

Wykrywanie funkcji CSS za pomocą reguły @supports

Inne funkcje CSS zmieniają sposób pozycjonowania lub stylizowania elementu na ekranie. Jeśli zastosujesz część stylu bezwarunkowo, nieobsługiwane przeglądarki mogą renderować element w niewłaściwym miejscu.

Na przykład zapytania dotyczące zakotwiczonego kontenera (container-type: anchored, ograniczona dostępność) w przypadku pozycjonowanej etykietki pozwalają odwrócić strzałkę etykietki, gdy etykietka odwraca się w pobliżu krawędzi widocznego obszaru. W przeglądarkach, które nie obsługują zapytań o zakotwiczony kontener, strzałka nie może wykryć odwrócenia i może wskazywać niewłaściwy kierunek. Przewodnik po współczesnych technologiach internetowych instruuje agenta, aby opakował style strzałek w regułę @supports (container-type: anchored), dzięki czemu domyślna strzałka będzie wyświetlana tylko w przeglądarkach, które obsługują też regułę odwracania @container anchored().

@supports (container-type: anchored) {
  .tooltip-content::before {
    content: "▼";
    position: absolute;
    inset-block-end: 0;
  }
}

@container anchored(fallback: flip-block) {
  .tooltip-content::before {
    content: "▲";
    inset-block-start: 0;
    inset-block-end: auto;
  }
}

Lekki niestandardowy kod JavaScript

Gdy interaktywna funkcja HTML nie jest obsługiwana we wszystkich głównych przeglądarkach, pobieranie biblioteki innej firmy może być niepotrzebne. W przypadku samodzielnych interakcji Przewodnik po współczesnych technologiach internetowych udostępnia krótki, niezależny kod JavaScript, który jest uruchamiany po sprawdzeniu funkcji.

Na przykład atrybut closedby="any" elementu <dialog> (ograniczona dostępność) umożliwia użytkownikom zamknięcie okna modalnego przez kliknięcie tła. W przypadku przeglądarek, które nie obsługują atrybutu closedby, przewodnik zawiera mały detektor kliknięć, który najpierw sprawdza obiekt HTMLDialogElement.prototype:

const dialog = document.querySelector('dialog');

if (!('closedBy' in HTMLDialogElement.prototype)) {
  dialog.addEventListener('click', (event) => {
    if (event.target !== dialog) return;

    const rect = dialog.getBoundingClientRect();
    const clickedInDialog =
      rect.top <= event.clientY &&
      event.clientY <= rect.top + rect.height &&
      rect.left <= event.clientX &&
      event.clientX <= rect.left + rect.width;

    if (!clickedInDialog) {
      dialog.close();
    }
  });
}

Warunkowo wczytywane polyfille

W przypadku większych funkcji platformy, takich jak pozycjonowanie kotwicy CSS (ograniczona dostępność) lub interfejs API Temporal (ograniczona dostępność), ręczne pisanie niestandardowego kodu zastępczego jest niepraktyczne. Jednocześnie dołączanie kodu polyfill dla każdego użytkownika zwiększa koszty pobierania w przypadku przeglądarek, które już obsługują tę funkcję.

W takich przypadkach Przewodnik po współczesnych technologiach internetowych kieruje agenta, aby najpierw sprawdził obsługę i dynamicznie wczytał sprawdzony polyfill za pomocą wyrażenia import() z bundlera lub sieci CDN. Przeglądarki, które obsługują tę funkcję, nie pobierają żadnego dodatkowego kodu, a starsze przeglądarki pobierają polyfill na żądanie.

if (!CSS.supports('anchor-name: --a')) {
  await import('@oddbird/css-anchor-positioning');
}

Dostosowywanie obsługi przeglądarek w projekcie

Domyślnie Przewodnik po współczesnych technologiach internetowych traktuje funkcje Baseline Widely available jako bezpieczne do użycia bez kreacji zastępczych. Wymaga kreacji zastępczych w przypadku funkcji Baseline Newly available i ograniczonej dostępności.

Wymagania dotyczące przeglądarki mogą się różnić w zależności od projektu. Możesz na przykład kierować reklamy na konkretny rok Baseline, tworzyć aplikacje Electron lub wykluczać polyfille, aby pakiety były małe.

Możesz zdefiniować niestandardowe zasady obsługi przeglądarek w pliku AGENTS.md lub CLAUDE.md projektu:

## Browser support policy

- Target **Baseline 2024** or earlier. Omit fallbacks and `@supports` blocks for features that reached Baseline in or before 2024.
- Allow **Baseline Newly available** features when paired with a custom fallback of 20 lines or fewer.
- Don't add polyfill dependencies. Prefer CSS `@supports` rules or built-in HTML fallbacks instead.

Każdy przewodnik zawiera stan Baseline, datę wydania i minimalne wersje przeglądarki dla każdej funkcji. Zanim agent napisze kod, porówna Twoje zasady z tymi danymi dotyczącymi zgodności. Jeśli funkcja już spełnia Twoje wymagania, agent pisze nowoczesny kod i pomija kod zastępczy.

Przetestuj zarówno nowoczesną ścieżkę, jak i ścieżkę zastępczą.

Pisanie kodu działającego w różnych przeglądarkach to tylko połowa pracy. Musisz też przetestować zarówno nowoczesną ścieżkę kodu, jak i ścieżkę zastępczą w prawdziwych przeglądarkach.

Testując w jednej przeglądarce, sprawdzasz tylko jedną gałąź kodu. Na przykład Chrome i Firefox uruchamiają natywny atrybut closedby="any" w elemencie <dialog>, a Safari uruchamia zastępczy kod JavaScriptu, który reaguje na kliknięcie poza elementem. Jeśli sprawdzisz okno tylko w Chrome, ten detektor zastępczy nigdy nie zostanie uruchomiony podczas testu.

Aby zweryfikować obie ścieżki kodu, połącz agenta kodowania z kilkoma silnikami przeglądarki jednocześnie:

Po połączeniu wszystkich 3 narzędzi pracownik obsługi klienta może otworzyć Twoją stronę w Chrome, Firefoksie i Safari w ramach jednego przepływu pracy. Następnie może potwierdzić, że zarówno funkcja natywna, jak i funkcja zastępcza działają zgodnie z oczekiwaniami.

Pierwsze kroki z Przewodnikiem po współczesnych technologiach internetowych

Aby dodać Przewodnik po współczesnych technologiach internetowych do projektu, uruchom interaktywny instalator z katalogu projektu:

npx modern-web-guidance@latest install

Jeśli masz zainstalowaną starszą wersję, uruchom polecenie aktualizacji, aby przejść na wersję 1.0:

npx modern-web-guidance@latest update

Przewodnik po współczesnych technologiach internetowych możesz też zainstalować za pomocą platform z wtyczkami do Claude Code, Codex, Cursor, Antigravity, GitHub Copilot, WebStorm, Kimi Code i Grok.

Aby dowiedzieć się więcej, zapoznaj się z tymi materiałami: