Som du ved, er der meget mere at opbygge lydhøre websites end bredde. Du har brug for sensorer, der giver dig feedback til at justere websteder baseret på andre faktorer.
Den bedste måde at forbedre vores feedback på fra din brugers sensor eller browser er ved at bruge et JavaScript-bibliotek, der hedder Modernizr. I denne artikel forklarer jeg hvorfor, når du går ud over bredden, er Modernizr sådan et uvurderligt redskab.
I front-end udvikling, udviklere brugt til at justere et websted for at passe de begrænsninger af layoutmotor, der bruges af en bestemt browser. I 2003 var der kun tre browsere: Netscape, Internet Explorer og Opera. Firefox, Safari og den første mobilbrowser, Opera Mini, blev udgivet i 2005. Chrome blev ikke udgivet før 2008.
I øjeblikket er der fem store browsere, hver med sin egen mobile version. På tværs af denne række browsere er der også ældre versioner, som brugerne ikke har opgraderet. På samme måde som oprettelsen af flere layouter til flere skærmstørrelser bliver i sidste ende et nulbeløbsspil, det gør også flere frontender til flere browsere.
Vi bruger lydhurt webdesign til at rumme nye mobile browsere. Men samtidig med at der er plads til nye browsere, er det vigtigt ikke at gøre det på bekostning af ældre browsere.
Historisk set er optimering kommet som et produkt af at bygge et websted til de mest populære browsere og derefter tilpasse for at sikre, at webstedet ser det samme ud på et sæt populære browsere. Design skal have plads til alle browsers muligheder.
Progressiv forbedring er en strategi til at klare browsers manglende støtte til moderne funktioner. Der er en fristelse til at bygge for de mest opdaterede funktioner, men i et lydhurtigt web er design af et websted kontekstuelt med den ramme, som den ses gennem. Responsive webdesign er blevet populært, fordi det løser den mest åbenlyse skiftende kontekst - størrelsen af rammen - men konteksten i en browser kører meget dybere end dens visningsstørrelse.
SVG giver en fantastisk løsning til skærme med høj opløsning, men hvad med støtte i ældre browsere? Det understøttes ikke i IE 8 eller ældre, så du er nødt til at opbygge en tilbagesendelse, hvis du understøtter denne browser. Du kunne identificere browseren og vise alternative stilarter mod den pågældende browser, men så skal du betjene de samme alternative stilarter til hver browser, der ikke understøtter SVG.
Ville det ikke være nemmere, hvis du bare kunne skrive en stil, der ville blive brugt mod hver browser, der ikke understøttede SVG? På den måde behøver du ikke at følge med fejlrapporter fra brugere af ældre versioner. Du kunne bare sætte nedfaldet en gang og glemme det.
Traditionelt er funktionsdetektering opnået ved at detektere browserens brugeragent. Dette sker via JavaScript, ved hjælp af navigatorobjektet. Navigatorobjektet går tilbage til Netscape-dage og plejede at være et udviklers bedste værktøj i kryds-browser-kompatibilitet.
Hvis du har Chrome og har aktiveret DevTools, skal du åbne din browsers webinspektør ved at højreklikke på en side og vælge Inspect Element. Derefter skal du klikke på Console og efter caret, skriv "navigator.userAgent" og tryk Enter. Dette vil returnere din nuværende browserens brugeragent, hvilket er en tekststreng, der bruges til at identificere den browser, der er i brug. Chrome returnerer følgende:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_2) AppleWebKit/537.35 (KHTML, like Gecko) Chrome/27.0.1443.2 Safari/537.35På mange måder er navigatorobjektet en af de bedste sensorer, vi har til rådighed for os, for at informere vores system om, hvad vores bruger er i stand til; Det er dog ikke meget fremtidigt venligt. Det baserer dit websteds aktuatorer på mange antagelser om, hvad browseren gør og ikke støtter. Det er også upåliteligt, fordi brugerne kan konfigurere det for at få adgang til websteder, som browseren muligvis ikke kan understøtte.
Modernizr er et JavaScript-bibliotek, der bruges til at registrere funktioner i browseren. Den er lagt i hovedet på din side og kører under en sideindlæsning. Tilføjelse af det på dit websted er lige så enkelt som tilføjelse af et andet JavaScript-bibliotek, som jQuery, men når en gang er tilføjet, giver Modernizer dig en utrolig mængde kontrol med at gøre din side og sikre, at alle brugere får en kvalitetsoplevelse.
Efter at være blevet indlæst, kører Modernizr en række checks mod brugerens browser for at bestemme hvilke funktioner browseren understøtter og opretter et JavaScript-objekt, som du kan bruge til at teste imod. Modernizr skaber ikke støtte til disse funktioner; det giver dig simpelthen en måde at yde tilbagekaldsstøtte til moderne funktioner. For eksempel, i tilfælde af SVG, giver Modernizr os mulighed for at give et tilbagesendelsesbillede til browsere, der mangler SVG-support.
Modernizr anvender også et sæt klasser til HTML-mærket, hvilket giver dig mulighed for at ændre sidens CSS ved hjælp af de tilsvarende CSS-klasser. Disse CSS klasser giver dig mulighed for at bruge CSS systemer til at opbygge aktuatorer, der vil justere dine sider for at muliggøre de progressive forbedringer tilgængelige for en side.
I modsætning til brugen af User Agent registrerer Modernizr funktioner direkte ved at køre en række JavaScript-tests, der returnerer booleanske (sande eller falske) værdier. Dette dikterer de klasser, der er sat til HTML-mærket og giver dig mulighed for at bruge JavaScript til at registrere, om en funktion er tilgængelig.
Installation af Modernizr er lige så simpelt som at linke til JavaScript-biblioteket i hovedet på din side, men hvor installationsprocessen bliver kompliceret, skabes den version, du har brug for. Modernizr kan downloades i to versioner, udviklingsversionen og produktionsversionen.
Udviklingsversionen er en fuld 42 KB ukomprimeret fil. Denne version er fantastisk, hvis du er velbevandret i JavaScript og ønsker at lave nogle tweaks til de tests, den udfører. Fordi det er ukomprimeret, er det nemt at læse og forstørre, men det er bedst forladt til udviklere med en solid forståelse af JavaScript.
For dem af jer, der måske ikke er helt dygtige til JavaScript, eller gerne vil hurtigt opbygge en tilpasset version af Modernizr, er dette her, hvor produktionsversionen af biblioteket kommer i spil. Produktionsbyggingsværktøjet på webstedet giver dig mulighed for at oprette en version med kun de test, du har brug for.
Dette er praktisk, når du ved, at du kun har brug for et bestemt sæt tests. For eksempel kan dit websted ikke udnytte CSS-boksskygger, men det kan være nødvendigt at understøtte CSS-gradienter. Ved hjælp af bygningsværktøjet kan du inkludere de tests, du har brug for, og udelukke dem, du ikke behøver, holde kildekoden trim og din brugers samlede belastningstid nede.
For vores eksempel arbejder jeg med udviklingsversionen. Jeg finder ud af, at når jeg bygger et websted, er det bedst at arbejde med den fulde version, og så snart du ved, hvilke funktioner du vil bruge på dit websted, skal du trimme versionen ned.
Lad os lave nogle enkle funktionsdetektering med Modernizr. Vi starter med et rå prøvewebsted.
Lad os bruge denne lille test til at registrere, om vores browser er i stand til at understøtte SVG. For enkelhedens skyld tilføjer vi blot to spændetiketter til siden for at registrere support.
Huzzah! You have SVG support.BOO! You don't have SVG support.Hvis du tester dette i en browser, der understøtter SVG, vil du se meddelelsen "Huzzah! Du har SVG-support. "Mens du har en browser, der ikke understøtter SVG, finder du" BOO! Du har ikke SVG support. "Besked.
Dette eksempel er ret rudimentært, men det viser kerne ideen om at bruge Modernizr til at løse cross browser problemer. Hvis vi gjorde den samme løsning ved hjælp af den gamle brugeragent-metode, skulle vi have et stilark til hver browser, der ikke understøtter SVG og ændre vores CSS for hver enkelt. (For alle interesserede er de eneste større browsere, der mangler SVG-support, Internet Explorer 7 og under.)
Ved at tilføje svg / no-svg-klassen til html på siden, har din CSS nu en vælger, som kan bruges til at tilsidesætte eksisterende CSS-regler. Fordi det er på det overordnede tag, kan det bruges til at tilsidesætte andre klasser på siden.
Så i dette tilfælde er begge spændetiketter vist display: none ;. Hvis der ikke er nogen SVG-understøttelse, overskrider displayet: inline-deklarationen på spændingsetiketten med .no-klassen displayet: skjult takket være no-svg-reglen på html-taggen.
Lad os prøve et mere nyttigt eksempel på den samme idé. Vi vil måske have et SVG-baggrundsbillede på siden, som falder tilbage til en PNG, hvis browseren ikke understøtter SVG. Som standard bruger vi PNG-billedet. På denne måde serveres SVG ikke, medmindre det er nødvendigt og bliver en progressiv forbedring.
Nu har vi en fantastisk SVG-kraniet, der vil se fantastisk og skarpt ud for brugere med skærme med høj opløsning, og ser stadig godt ud til brugere med ældre browsere.
Der er et stort væld af oplysninger, der skal læres om Modernizr. Vi viste dig, hvordan det gør arbejdet med cross-browser kapacitet uden at skulle huske eller vedligeholde en kørende liste, som browsere understøtter SVG.
Det fungerer exceptionelt som et system til at betjene dine brugeraktuatorer for at skabe hurtige og yderst funktionelle hjemmesider.
Bruger du Modernizr i dine projekter? Hvilke andre metoder har du brugt til at tjene responsivt indhold? Lad os vide i kommentarerne.
Fremhævet billede / miniaturebillede, divergerende linjer billede via Shutterstock.