<noscript>
Treść, którą przeglądarka pokaże tylko wtedy, gdy JavaScript jest wyłączony.
- Wyświetlanie
- none przy włączonym JavaScripcie, inline przy wyłączonym
- Znacznik zamykający
- Wymagany
- Dozwolona zawartość
- W
<body>: treść przezroczysta, bez zagnieżdżonego<noscript>. W<head>: tylko<link>,<style>i<meta>
Przykład
#<p id="calculator">Kalkulator ceny kursu wymaga JavaScriptu.</p>
<noscript>
<p>Masz wyłączony JavaScript. Wszystkie ceny znajdziesz w <a href="/cennik">cenniku</a>.</p>
</noscript>
<script>
document.getElementById('calculator').textContent = 'JavaScript działa, kalkulator jest gotowy.';
</script>Gdy JavaScript działa, skrypt podmienia tekst pierwszego akapitu, a treść <noscript> jest pomijana. Komunikat z <noscript> zobaczysz dopiero po wyłączeniu JavaScriptu w ustawieniach przeglądarki.
Definicja i zastosowanie
#Element <noscript> zawiera treść zastępczą na wypadek, gdy skrypty są wyłączone: przez użytkownika, rozszerzenie blokujące albo ustawienia firmowego komputera. Gdy JavaScript działa, przeglądarka całkowicie pomija zawartość tego elementu.
Umieszczony w <body> może zawierać zwykłą treść, na przykład komunikat z wyjaśnieniem albo link do wersji strony, która działa bez skryptów. W <head> może zawierać tylko elementy <link>, <style> i <meta>. Przydaje się to wtedy, gdy animacje ukrywają treść, dopóki skrypt jej nie odsłoni: bez JavaScriptu pozostałaby niewidoczna na zawsze.
Pamiętaj, że <noscript> nie pomoże, gdy JavaScript jest włączony, ale skrypt się nie wczyta, bo zawiodła sieć albo w kodzie jest błąd. Dlatego najważniejsza treść strony powinna być dostępna w samym HTML, a skrypty powinny ją tylko ulepszać.
Składnia
#<noscript>
Treść dla przeglądarek bez JavaScriptu
</noscript>Atrybuty
#Ten element nie ma własnych atrybutów. Obsługuje atrybuty globalne, takie jak class, id czy hidden.
Więcej przykładów
#<head>
<style>
.reveal { opacity: 0; transition: opacity 0.6s; }
.reveal.visible { opacity: 1; }
</style>
<noscript>
<style>
.reveal { opacity: 1; }
</style>
</noscript>
</head>Skrypt dodaje klasę visible, gdy element pojawi się na ekranie. Bez JavaScriptu nikt by jej nie dodał, więc style z <noscript> od razu pokazują treść.
Domyślny CSS
#Większość przeglądarek wyświetla ten element z takimi stylami domyślnymi:
/* gdy JavaScript jest włączony */
noscript {
display: none;
}Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Nie traktuj
<noscript>jako planu awaryjnego na wypadek błędów w skryptach. Działa tylko wtedy, gdy JavaScript jest wyłączony. - W komunikacie napisz, co konkretnie nie zadziała i gdzie znaleźć alternatywę. Samo „Włącz JavaScript” niewiele pomaga.
- Elementów
<noscript>nie można zagnieżdżać jeden w drugim.
Powiązane hasła
#- <script>Osadza kod JavaScript w stronie albo wczytuje go z pliku, żeby dodać stronie zachowanie.
- <head>Niewidoczna część dokumentu z metadanymi: tytułem, kodowaniem znaków, opisem, stylami i skryptami.
- <body>Widoczna część dokumentu: wszystko, co użytkownik zobaczy na stronie i z czym może wejść w interakcję.
- <style>Arkusz stylów CSS wpisany bezpośrednio w dokument HTML.
- <meta>Metadane strony: kodowanie znaków, ustawienia widoku na telefonie, opis dla wyszukiwarek i podgląd linku w serwisach społecznościowych.
Widzisz błąd albo brakuje przykładu? Napisz do nas.