Snabbtips Glöm inte noscript -elementet

JavaScript är ett kraftfullt språk som ger webbplatser till liv med interaktivitet, tills det fruktade ögonblicket när JavaScript är inaktiverat i webbläsaren, ur det blå. I det här snabba tipset ser vi på att ge fallbacks med

Ingen JavaScript

Användare kan inaktivera JavaScript av ett antal skäl. De kan göra det för att klara av bandbreddskrav, för att spara batterilivslängden, kanske för integritet så att de inte kommer att spåras med analytiska skript. En handfull människor installerar även webbläsaretillägg som NoScript för att förhindra att webbläsaren kör JavaScript. Det räcker med att säga, om JavaScript är inaktiverat, misslyckas många webbplatser och appar att fungera. om inte helt, då delvis.

Låt oss titta på några exempel.

Tips: I denna handledning ska jag använda Quick JavaScript Switcher, en praktisk tillägg för Chrome som gör det möjligt för mig att byta JavaScript i ett enda klick.

WordPress.com

Den nya WordPress.com-postredigeraren är mycket beroende av JavaScript. Som du kan se från följande skärmdump, visas ingenting annat än "W" WordPress-logotypen när JavaScript är avaktiverat. Antag majoriteten av WordPress användare kan vara icke-tekniskt kunniga, de skulle nog inte vara medvetna om vad som händer.

WordPress.com postredaktör (11 december 2015).

Trello

Trello, en projekthanteringswebapp, är starkt beroende av JavaScript. Till skillnad från WordPress.com berättar Trello vänligen oss med en enkel varning:

Trello-gränssnittet (11 december 2015)

Facebook

Facebook hanterar denna situation ännu bättre. Den visar en anmälan, berättar användarna vad som händer och ger flera åtgärdskurser med utloggnings- och uppdateringsknappen och möjligheten att tillgripa den mobiloptimerade versionen. Dessa presenteras alla med välkända Facebook-visuella varumärken.

Facebook (11 december 2015)

New York Times

Vissa webbplatser kan bara använda JavaScript, delvis, till exempel bloggar och nyhetssajter. När du använder NewYorkTimes hittar du till exempel ett par tomma fläckar när JavaScript är avstängt. De sökikoner som följer med Sök och den sektioner länkar försvinner, se nedan.

Detta är graciös försämring (användarna kanske inte ens märker), och betonar att det är klokt att leverera bästa möjliga upplevelse när JavaScript är avstängt. 

Använda "noscript" -elementet

Hur vi tillhandahåller återkrav beror till stor del på hur vi distribuerar JavaScript på våra webbplatser, men noscript element kommer att komma till nytta i många fall. Som namnet antyder kan vi använda noscript att göra alternativt innehåll. Något inom taggar kommer bara att göras när JavaScript är inaktiverat.

För att fungera som ett exempel byggde jag en demosida. Denna demo replikerar den suddiga bildladdningseffekten som ses på Medium. Bilderna och suddseffekten levereras båda via JavaScript, så gissa vad som händer när vi stänger av JavaScript?

Bilderna laddas inte.

För att visa dessa bilder kan vi pakka in dem noscript element samt inpakning av stildeklarationerna, adressering av positioneringsproblemen.

  ... 
      
 

Vi kan också använda noscript element för att anmäla användare om att JavaScript är avstängt-liknande vad Facebook och Trello gör. Dessutom kan vi lägga till en referenslänk som hjälper våra användare att vända på JavaScript.

Sammanfatta

tillhandahålla noscript som en återgång är ett användbart sätt att berätta för webbplatsanvändare att det, utan JavaScript, inte nödvändigtvis kan fungera 100%. Men låt oss inte glömma att din prioritet borde vara att se till att en brist på JavaScript (eller CDN, eller någon av en mängd andra beroenden) inte bryter användarens upplevelse. Tack till Christian Heilmann för att se till att meddelandet förmedlades.