Přejít k navigační liště

Zdroják » JavaScript » Má web fungovat bez JavaScriptu?

Má web fungovat bez JavaScriptu?

Články JavaScript, Webdesign

Při tvorbě webu je potřeba zvážit, jestli a jak má fungovat bez podpory JavaScriptu.

Článek původně vyšel na autorově webu Je čas.

Názory na to, jestli se mají podporovat lidé s vypnutým JavaScriptem, se mohou lišit. Od snahy, aby web bez JS fungoval, až po názory na návštěvníky bez JS typu:

Takový lidi si zaslouží chcípnout. – Lukáš Havrlant

Desktopový Facebook zastává podobný názor:

Facebook bez JS

Na Alza.cz si bez JS nejde nic objednat, protože tlačítko Koupit je závislé na JS akci:

Alza bez JS

Selhání JavaScriptu

Jelikož podíl zařízení nepodporujících JavaScript je naprosté minimum, může se zdát zbytečné situace bez dostupného JS řešit.

Nicméně:

Stránky funkční bez JavaScriptu se nedělají pro návštěvníky s vypnutým JS. Dělají se hlavně pro případ jeho selhání.

I u zařízení plně podporující JS se mohou stát dvě věci:

  1. Soubor se skriptem se nepovede načíst. Buď se vůbec nestáhne vlivem pomalého/přerušeného spojení, nebo se načte později, než jeho funkce uživatel potřebuje.
  2. Do skriptu programátor zanese chybu, která v určitých případech způsobí celkové selhání. JS není tolik tolerantní k chybám jako HTML/CSS.

Řešit danou věc v CSS nebo nejlépe v HTML přináší vyšší stabilitu a odolnost stránky.

Rozšiřování funkčnosti

Ideální je tak všechno řešit co nejblíže HTML/CSS a JavaScriptem zajišťovat až rozšířenou/vylepšenou funkcionalitu.

Nicméně v praxi může být tento přístup hodně pracný, takže typicky dochází ke kompromisům, kdy něco bez JavaScriptu tak dobře nefunguje.

Je třeba si určit priority, aby bez JS fungovaly alespoň stěžejní součásti webu:

  • V případě obsahové stránky by se měl zobrazit obsah. To je dost důležité i s ohledem na SEO, protože některé vyhledávače mají s obsahem vypisovaným skriptem problém.
  • U služby pro nahrávání obrázků by kromě drag & drop uploadu v AJAXu měl existovat klasický formulář s <input type="file">.
  • Při použití AJAXového objednávkového formuláře by měla existovat standardní cesta, jak formulář odeslat.

A tak dál…

Jak vypnout JavaScript

Pro ověření, že je web bez JS použitelný, je vhodné skriptování pro otestování vypnout.

Jde to ve vývojářských nástrojích po stisku F12. Postup v Chrome:

  1. Vpravo nahoře je ikona pro Nastavení:Nastavení ve vývojářských nástrojích
  2. Na začátku je přímo volba Disable JavaScriptVypnutí JS ve vývojářských nástrojích

Detekce JS

Jak detekovat, že je JavaScript vypnutý, popisuje následující samostatný článek:

Pokud je web na JS existenčně závislý, je dobré na to upozornit ve značce <noscript>. Návštěvník může mít omylem vypnuté skriptování, aniž by si to uvědomoval.

Skrývání obsahu

Jedna z nejčastějších chyb webových tvůrců nastává při skrývání obsahu, který následně má zobrazit JS funkce.

<div id="skryty" style="display: none">
  Skrytý obsah
</div>
<button onclick="$('#skryty').show()">
  Zobrazit
</button>

Živá ukázka

Bez JS se nikdo ke skrytému obsahu nedostane.

Řešení

Lepší postup je přidat třídu js pro element <body>:

<body>
<script>
document.body.className+= ' js';
</script>

A skrývání provádět přes CSS:

.js #skryty {
  display: none;
}

Ani tento postup není úplně ideální, protože třída js se typicky nastaví dříve, než se stáhne ostatní JavaScript umožňující zobrazení skrytého obsahu.

Nabízelo by se tedy obsah skrývat až v momentě, kdy bude připravena funkce pro jeho zobrazení.

To by ale zase způsobilo poskakování stránky při načítání skrývajících skriptů.

Proto je šikovné problém obejít a řešit co nejvíce věcí v HTML/CSS. Případně dát na stažení obslužného JS nějaký časový limit – třeba 3 vteřiny – po kterém se js třída zase odebere.

var jsCasovac = setTimeout(function() {
  document.body.className = 
    document.body.className.replace(" js", "");
}, 3 * 1000);

Po stažení obslužné JS funkce se případně tento časovač zruší:

clearTimeout(jsCasovac);

A opět se přidá JS třída:

document.body.className+= ' js';

Poznámka: Pro práci s třídami by bylo lepší v podporovaných prohlížečích (IE 10+) použít vlastnost classList.

Řešení bez JavaScriptu

Postupem času jde více a více věcí řešit v HTML/CSS bez použití JavaScriptu:

Komentáře

Subscribe
Upozornit na
guest
33 Komentářů
Nejstarší
Nejnovější Most Voted
Inline Feedbacks
View all comments
Milan

To je asi tak stejné jako dělat stránky tak, aby fungovaly a zobrazovaly se dobře i bez csska, které se mj. také nemusí stáhnout. ;)
… ale určitě je dobré si miminálně vyzkoušet jak se náš web chová s vypnutým javascriptem, jak velká to je pohroma.

Deficek

Když se nestáhnou CSS tak by web měl být čitelný a v rámci možností i použitelný (funkční odkazy atd.).

Deficek

Spíše jsem měl na mysli případ, kdy se prostě zobrazí stránka bez CSS, je jedno z jakého důvodu.

Anonymni uživate intranetu

hmmm, asi jste hodně dlouho neměl vyčerpané FUP.

Deficek

Ale nastat může ;) Už se mi stalo, že na mobilu se stránka načetla, ale neaplikovaly se styly (ty se zobrazily až po přenačtení). Ale na tohle bych se neomezoval, styly se např. „nezobrazí“ v nějaké textové čtečce webu ap.

iiic

Tak ono většina stránek funguje a zobrazuje se dobře i bez cssek… výchozí stylování je na tohle stavěné. Výchozí styly jistě každý pozná, žádné grafické origie, ale jde číst obsah a to se počítá. Naopak bych viděl problém najít stránku, která by bez css nefungovala. Přemýšlím teď jak by k tomu mohlo dojít. To by tam museli značnou část obsahu, nebo dokonce celý servírovat ve stylech. Nebo by na stylech musel být závislý nějaký javascript co načítá obsah. Všechno v praxi obtížně představitelné situace.

NN

Webové stránky ktoré sú závislé na JS si zaplúžia chcípnout ;-) (okrem pár špeciálnych aplikácií, kde to JS funkčnosť má význam).

fisfis

Tys spadnul odkud? Asi z madarska ze?

onanymous

Bez JS není možné dát dohromady SPA (Single page application), tedy stále populárnější (ne náhodou) architekturu.

Doporučuje autor SPA nepoužívat? Nebo vyvíjet v podstatě dvě aplikace – jednu klientskou SPA a krom toho ještě serverovou noJS app?

Jarda

Facebook je strasne hodny na uzivatele, protoze jim alespon zobrazi hlasku, ze musi mit zapnuty javascript. Na mem webu se nezobrazi bez javascriptu vubec nic. A kvuli tem dvema uzivatelum, kteri tam za rok bez JS prijdou tu hlasku delat nebudu.

kucikk

To, že se na vašem webu nezobrazí vůbec nic, je v tomto případě výhoda. Můžete jednoduše do stránky vložit <noscript>Bez JavaScriptu to nepůjde.</noscript> a máte hotovo.

iiic

Nejen hlášku, ale i alternativní (jednu ze svých mobilních) verzi, kde ovšem nechybí žádné hlavní funkce takže příspěvky si přečtu, napíšu, nasdílím i ‚olajkuju‘. Tady bych ho mezi ty špatné příklady zase až tak moc nedával.

SUK

JS by nemel byt legalni. Existuji pripady, kdy je jeho pouziti oduvodnene, ale na jeden takovy pripad pripada tak 99 pripadu, kdy je tam JS nesmyslne, zbytecne a navic to blbe funguje.

To miluju weby, ktery bez JS nic nezobrazi a s JS jsou necitelny, protoze se tam neustale neco hybe a text ujizdi na vsechny strany. „Unosy“ kliku mysi a stisku klaves (takze nefunguji nektere zkratky v prohlizeci, prave tlacitko ci dokonce leve na vyber textu). Umyslne otvirani odkazu do dalsiho tabu nebo naopak zabraneni otevreni pomoci kolecka mysi (kdo jako ku*va je autor webu, aby za mne rozhodoval, kam chci otevrit odkaz?)…

V tomhle svete asi za chvili nebudu chtit zit. Vratte mi casy, kdy platilo, ze „web musi fungovat i bez JS a CSS“. Aktualni vyvoj webu a softwaru obecne me desi…

Zasloužile chcíplej webař

To si nevymýšlíme my, ale klienti. Příklad

Bez JS to nepůjde, mam to udělat? Proč se tak blbě ptáš, to je snad jasný ne.
Bez JS to bude pracnější a bude to trvat déle. Ať je to co nejrychlejš.

A mohl bych pokračovat… Ale což mě to muže být jedno, jsem vlastně chcíplej ne.

Hmmm

Ehm otvaranie odkazu do noveho tabu je vec HTML, nie JS… A ako autor webu si mozem dovolit rozhodnut ci chcem aby uzivatel po kliku na odkaz opustil aktualnu stranku, pretoze je to len podstranka, alebo aby mu ostala otvorena, pretoze odkaz ho odvedie niekam na cudziu stranku.

SUK

To plati v pripade, kdy je odkaz odkazem a ne spoustedlem javascriptu (tedy „nejlepe“ href=“#“ onclick=“…“). Coz neni dneska vubec neobvykle, spis naopak…

A jako autor webu bych se staral spis o to, aby pohyb po webu byl pro uzivatele prijemny, jestli ma vylitavat dalsi vyskakovaci okno. To je (respektive melo by byt, bohuzel neni a s novymi prohlizeci to uz ani nepujde rozumne nastavit) otazkou uzivatele.

Hmmm

Ale pozor, vyskakovacie okno je nieco ine nez otvorenie stanky v novom tabe.

Lemming
  • Hýbání a uhýbání textu se zařizuje (i) CSS, JS tam vůbec být nemusí
  • Zabránění výběru textu se zařizuje (i) CSS, JS tam vůbec být nemusí
  • Otevírání do nového okna se zařizuje přes atribut „target“, JS tam vůbec být nemusí
Lemming

Moje pravidlo zní „Web by měl být dostupný i bez JS, webová aplikace nemusí“.

U webu ve smyslu kolekce hypertextových dokumentů se opravdu JS používá spíš na nějaké zpříjemnění a fallbacky pro non-JS prohlížeče jsou vesměs jednoduché.

U webových aplikací použití JS typicky umožňuje mnohem lepší UX a fallbacky jsou problematické – znamenalo by to dělat celý web dvakrát.

lenoch

Myslím, že složitě přizpůsobovat web pro těch 0,0001% případů, kdy se js nestáhne nebo je z nějakého důvodu nefunkční nemá cenu.

iiic

Když se s tím počítá hned od začátku, tak to není až tak složité.

Každopádně jsem ale chtěl říct, že to procento bude daleko vyšší. Z jednoho staršího článku odtud ze zdrojáku https://www.zdrojak.cz/zpravicky/jak-logovat-javascriptove-chyby-nejen-pomoci-google-analytics/ jsem na pár webů aplikoval logování chyb javascriptu a nejvíce javascriptových chyb, co se takhle ukázalo bylo způsobeno nenačtením nějakého zdroje (a to většinou na mobilech), a dalším poměrně častým důvodem byl prohlížeč návštěvníka ‚zapluginovaný‘ nebo ‚zareklamovaný‘. Tedy tam měli plugin který způsoboval chybu javascriptu třeba i na každé stránce. Když jsem pak hledal jak tam může být taková chyba když takový script ve stránce vůbec nemám pomocí googlu jsem přišel na to že je script vkládaný pluginem, který třeba už není autorem udržovaný a tohle způsobuje a tak dělá problémy více webům …

Martin Hassman

Existují i případy, kdy reklamní skript a baner vloží uživatelovi proxy, resp. provozovatel připojení. (Pokud se na web nepřistupuje jen pomocí HTTPS, tak tomu jako autor webu zabránit nedokážete.) A i to může někdy web rozhodit.

daddyy

Po velice dlouhé době jsem si velice rát i přečetl komentáře.
Musím uznat, že JS je v dnešní době velice potřebný né však nutný.
Mnoho firem, které se věnují samotné tvorbě aplikací, eshopů na to zapomíná, viz krásný příklad Alza koupit -> hlavním učelem Alza eshopu je nakupovat, jak to že nelze nakoupit, či dokončit vůbec nejdůžitější operaci na dané aplikace bez JS?

Například u nás ve firmě filtrace eshopu, která pro každou danou stránku má svou URL, všechny tyto kombinace jsou naprosto němožné v reálném čase pro nás dostat jednoduše do sitemapy. A však vývoj si to tak žádá, a proto pokud bych jednal jako většina firem, a vše tvořil JS či skrze formulářový prvek, je pro samotným crawlerem velice obtížné dosáhnout této stránky právě s danou kombinací produktů či s jiným obsahem, i když právě tato stránka je jedinečným nodem na který je uvalen pravě počet daných kombinací. Ve zkratce robot pouze kliká, uživatel s JS nic nepostřehne, nebo pokud by danou kombinaci otevřel do nového okna, zobrazí se mu právě tato tížená kombinace.
A o tento výsledek já nechci připravit našeho návštevníka ať už je v jakékoli podobě.

Jediné co je možné tomuto vytknout je cena, ano optimalizace pro vypnutý JS či nefunkční přináší časovou náročnost, ale tato náročnost není určitě tak velká, aby si nezasloužíla pozornost v rámci celého projektu.

A rád bych zde určitě vyzdvihl jěště jednu vlastnost web závislý na třetí straně, která používa JS, může způsobit díky špatnému zásahu třetí strany, plnout nefunkčnost vaší aplikace zavíslé na JS

hz

Jo, to treba u czc neni mozne dokoncit objednavku, pokud neni povolen js google maps.

Ondřej Novák

Souhlasím s tím, že když si někdo vypíná JS, nemá co na webu pohledávat. Chápu, že existují zařízení, které JS nemají, pak to lze řešit nějakou alternativní verzí aplikace. Ale proč bránit pokroku. Prohlížeč je dnes na úrovni operačního systému a programovatelného desktopu, který lze využívat mnohem efektivněji než stařičký X Windows – mnohem efektivněji dokáže prezentovat svůj obsah.

Osobně používám kombinaci HTML+AJAX (komunikace RPC). Stránka je spíš aplikací obsahující vše co potřebuje a načte se jen jednou, pak už se jen přes RPC dočítají data. Vynechá se tím jeden stupeň zpracování a ulehčí výrazně serveru a zlepší se odezva u klienta. Složitější stránky případně dočítají svůj obsah dynamicky z ostatních souborů, není problém ani donačítat další skripty jak je potřeba. Ale generování obsahu na serveru přímo pro prohlížení mi dnes přijde jako doba kamenná. A pokud ji někde mám, pak z důvodu zpřístupnit obsah těm, kteří mají zařízení z této doby (a samozřejmě i kvůli SEO)

PS: Ale spíše píšu webové aplikace, než obsahové stránky s tunou textu.

fisfis

Souhlas na 99%. Jen ne s tim SEO. Kdysi tahle uzitecna vec, ktera se postupne stala totalnim marketingovym bullshitem takovych, jako jsou google a jim podobni, aby jim se dobre vyhledavala a kategorizovala data na kterych potom vydelavaji… Nebo snad jeste dnes nekdo veri, ze ma sanci se dostat na prvni mista ve vyhledavacich, kdyz bude mit zmakle SEO? Ale notak…

Šimon Formánek

A ten je možné provozovat jen s partnerem, kterému důvěřujeme: když programuju eshop, dám klientovi do adminu Javascriptový html editor, ale poučím ho, že musí mít na to extra prohlížeč a nejlépe vyhraazený počítač kvůli XSS a CSRF, zatímco na veřejném webu nemám ani řádek JS a řeším věci jako skrývání divů kompletně v css:

skryty:target{ display: block;}

Podle mého názoru skriptování na straně klienta na veřejný internet nepatří, protože javascript nejde rozumně uhlídat, na rozdíl třeba od SQL injection.
Tvůrcům webů, kteří se neobejdou bez vychytávek jako search suggest doporučuju přístup zvaný progressive enhancement a kompatibilitu si iniciativou Free Software Foundation LibreJs (https://www.gnu.org/software/librejs/), je celkem pravděpodobné, že uživatelů, kteří si JS zakážou bude přibývat. Mimochodem, Německý úřad pro informační bezpečnost doporučuje uživatelům používat NoScript a pečlivě zvažovat, na jakých stránkách skriptování povolí. Viz. https://www.bsi-fuer-buerger.de/BSIFB/DE/DigitaleGesellschaft/SozialeNetze/Schutzmassnahmen/Basisschutz/SichereVerwendung/SichereVerwendung.html

Šimon Formánek
<style>
#skryty{ display: none;}
#skryty:target{ display: block;}
</style>
<div id="skryty" >
  Skrytý obsah
</div>
<a href="#skryty">Zobrazit</a>

Zobrazit

fisfis

bezpecnost je to posledni, proc by si mel nekdo javascript vypinat. ty doby, kdy s nim slo kouzlit jsou davno pryc. cross-browser funkcnost je taky dneska uplne nekde jinde nez byvala drive. tech duvodu, proc nepouzit na strance (o web appce nemluve) js je dnes opravdu minimum. Musi to byt ale s rozumem, ne ze tam naplacam vsechny frameworky, co na webu najdu, vcetne vsech WYSIWYG editoru, ktere by mely byt davno smazany a zaklety a pak se divim, ze to je pomaly, nehybe se to, pulka toho nefunguje atd. Vseho s mirou, ale rozhodne to nezavrhovat!

Enum a statická analýza kódu

Mám jednu univerzální radu pro začínající programátorty. V učení sice neexistují rychlé zkratky, ovšem tuhle radu můžete snadno začít používat a zrychlit tak tempo učení. Tou tajemnou ingrediencí je statická analýza kódu. Ukážeme si to na příkladu enum.