Slik forhindrer du flash av unstylet innhold på nettstedene dine

Jeg er sikker på at du har sett websider lastes med unstylet innhold, og da kan det gå noen sekunder (eller minutter) før du ser hva som kan være sidens tiltenkte utseende og følelse. I webdesign kalles denne avviken den utilsiktede Flash of Unstyled Content (FOUC). Figur A viser et eksempel på FOUC-anomalien på CNN US Edition-forsiden der CSS ikke kunne lastes.

Figur A

Se et forstørret bilde av figur A.

I denne artikkelen vil jeg dele litt bakgrunn om FOUC, og deretter beskrive måter å forhindre FOUC fra å oppstå på nettstedene dine, eller i det minste redusere muligheten for at nettstedene dine blir berørt av det, uansett nettleser eller enhet.

En kort historie

Da FOUC først ble dokumentert i 2001-artikkelen Flash of Unstyled Content, syntes problemet å være unikt for Internet Explorer. Da fant glippen veien inn i Safari i 2006, og den ble beskrevet i artikkelen FOUC Problemet. Begge artiklene avdekket arten av uregelmessigheten som ligger i CSS-gjengivelse riktig i disse to nettleserne og deres manglende evne til å gjengi stylet innhold på en jevn basis. Nyere indikasjoner viser at FOUC også forekommer med visse JavaScript- og jQuery-implementeringer der skriptene brukes til styling, bilder, vanligvis innhold som tar lengre tid eller henger etter siden lastes inn.

Teknikker for å minimere FOUC

Den første teknikken presenteres i en FOUC-tutorial av Brad Baxter. Han skisserer en enkel metode for å minimere FOUC ved å skjule hele eller deler av websiden til alle stiler og JavaScript er ferdige ved å bruke et klassens navn "js" som velgeren som skjuler alt innhold i en beholder som har en id = "fouc" . Elementet "fouc" er uhindret ved hjelp av en JavaScript getElementById-funksjon som setter skjermverdien til "blokkeringsnivå".

Eksemplene gitt i den korte presentasjonen inkluderer og forslag til klasse- og ID-navn, samt plassering av kodeeksempler på websiden og elementer. Presentasjonen er også tilgjengelig for nedlasting som PDF fra Google-dokumenter. Skjermbildet som vises i figur B viser to sider fra dokumentet som representerer kodebitene som Brad deler for utlevering av FOUC.

Figur B

Se et forstørret bilde av figur B.

En annen kort FOUC-veiledning som bruker samme teknikk blir presentert av John Polacek. Han bruker og med en JavaScript-metode for å angi et "no-fouc" klassnavn for å vise lik ingen, noe som skjuler det spesifiserte innholdet til siden er fullastet. Koden er også tilgjengelig fra GitHub Gist.

En annen FOUC-leksjon som bruker en lignende teknikk er av Karl Swedberg. Han demonstrerer en måte å bruke jQuery for å unngå FOUC når JavaScript brukes til å bruke stiler på websidelaster; han gir til og med en testtest for demo som blinker en gul markert liste, som opprinnelig er skjult ved sideinnlasting. På Karls andre testside blir FOUC praktisk talt eliminert ved å plassere skript nederst på siden. En av de viktigste takeawayene med teknikken er å sørge for at du legger alle skript nederst på websiden.

En lignende teknikk er beskrevet i Paul Irlands blogginnlegg Unngå FOUC v3.0. Han bruker en unik CSS for ikke-JavaScript-brukeren, så det er ikke nødvendig å skrive .js foran hver velger for populære funksjoner som trekkspill, glidebrytere og lignende. Løsningen hans er å legge til en class = "no-js" til HTML-koden, og deretter legger han til en i den som endrer den tilbake til 'js'. Jeg har ikke lekt med denne metoden, men ifølge Paul brukes denne tilnærmingen også i Modernizr for å stille inn klassene på HTML-elementet når det laster.

En teknikk som ikke er bra for de fleste webutviklere, er at du må inkludere lenkekoden (e) til stilarkene i dokumentene på websiden. Steve Souders gjør dette poeng i sin regel nr. 5 - Sett stilark på toppen (som er en del av listen over 14 regler for raskere lasting av nettsteder). Hans regel nr. 5 demonstrerer dette ved å ha stilarket lagt til bunnen av kroppen rett før den avsluttende taggen. FOUC-en i aksjon på denne siden kan sees som vist i figur C med før og etter skjermbilder.

Figur C

Se et forstørret bilde av figur C.

Jeg er sikker på at denne siste teknikken er i bruk av de fleste nettutviklere. Selv om noen av JavaScript-teknikkene kan være i bruk, brukes de sannsynligvis ikke så mye som de kan være. Jeg foreslår at du tar disse underutnyttede metodene for å unngå FOUC, og se om du kan vinne kampen med nettstedene dine.

© Copyright 2020 | mobilegn.com