Share
Ikke alle HTML5- eller CSS3-funksjoner har utbredt nettleserstøtte, selvfølgelig. For å kompensere for dette har initiativrike utviklere laget en rekke verktøy for å la deg bruke disse teknologiene i dag, uten å etterlate brukere som fortsatt lever i steinalderen.
Den gode nyheten er at, med unntak av Internet Explorer, kan du opprette mer semantisk markering ved å bruke de nye HTML5-elementene - selv i nettlesere som ikke støtter dem. Bare husk å sette riktig visningsmodus: blokkere. Følgende utdrag bør referere til alle nødvendige elementer:
artikkel, til side, detaljer, figcaption, figur, footer, header, hgroup, meny, nav, del display: block;
Implementering av mange av løsningene i denne opplæringen innebærer å inkludere noe JavaScript for bestemte Internet Explorer-utgivelser. Her er en rask oversikt: Testuttrykket er vedlagt i firkantede parenteser. Vi kan se etter bestemte versjoner eller versjoner over eller under en angitt versjon. lt og gt mener lavere enn og større enn, henholdsvis, mens lte og gte mener lavere enn eller lik og større enn eller lik.
Her er noen raske eksempler:
[hvis IE 6]
Kontrollerer om nettleseren er Internet Explorer 6.
[hvis gt IE 6]
Sjekker for en versjon av Internet Explorer større enn 6.
I alt IE, unntatt den nyeste versjonen (IE9), kan du ikke bruke stiler til elementer som nettleseren ikke gjenkjenner. Dine spiffy, nye HTML5-elementer, i all sin ære, er ugjennomtrengelige for CSS-regler i det miljøet. Det er her Remy Sharps html5shiv (noen ganger kalt html5 shim) kommer til redning. Bare inkludere den i siden din delen, og du vil kunne formatere de nye HTML5-elementene perfekt.
Legg merke til hvordan de betingede kommentarene bare laster html5shiv-koden på betingelse av at versjonen av Internet Explorer er lavere enn 9. Andre nettlesere, som Firefox og Chrome, vil også ignorere denne taggen og vil ikke utføre skriptet, og dermed spare båndbredde.
html5 shiv er basert på en enkel løsning: den styrer IE for å lage elementene med JavaScript (de trenger ikke engang å bli satt inn i DOM).
document.createElement ( 'header');
På dette tidspunktet kan de styles normalt. I tillegg integrerer nyere versjoner IE Print Protector, som løser en feil der HTML5-elementene forsvinner når du skriver ut siden ...
Modernizr lar deg gi "backup" styling i nettlesere som ikke støtter visse HTML5- og CSS3-funksjoner.
Modernizr er kanskje den mest kjente av disse verktøyene, men det er også ganske misforstått (navnet hjelper ikke). Ta et dypt åndedrag: I motsetning til populær misforståelse gjør Modernizr ikke aktivere HTML5 og CSS3-funksjonalitet i nettlesere som ikke støtter dem (selv om det gjør Inkluder html5shiv slik at du kan bruke HTML5-elementer i IE < 9).
Bortsett fra html5shiv-funksjonaliteten, gjør Modernizr bare en ting og en ting: den kjører en rekke funksjonstestingstester når den lastes, og deretter legger resultatene inn i
klasseattributten tilstikkord.
Modernizrs primære formål er å tillate deg å tilby "backup" styling i nettlesere som ikke støtter visse HTML5- og CSS3-funksjoner. Dette er noe annerledes enn tradisjonell grasiøs nedbrytning, der vi bruker den samme CSS-stilen i alle nettlesere, og deretter konstruerer den slik at når spesifikke evner mangler, er resultatet fortsatt akseptabelt.
Nå for et eksempel på hvordan Modernizr opererer: hvis en nettleser støtter border-radius og kolonne-count eiendom, vil følgende klasser bli brukt:
På den annen side, hvis de samme egenskapene ikke støttes - si i IE7 - finner du:
På dette tidspunktet kan du bruke disse klassene til å bruke unik styling i nettlesere med forskjellige funksjoner. Hvis du for eksempel vil bruke en annen stil til et avsnitt, kan du gjøre det, avhengig av om CSS-kolonner støttes.
.csscolumns p / * Stil når kolonner er tilgjengelige * / .no-csscolumns p / * Stil når kolonner ikke er tilgjengelige * /
Hvis en nettleser ikke støtter kolonner, vil .csscolumns klassen vil ikke være til stede i kroppen, og nettleseren vil aldri ha mulighet til å bruke regelen som bruker den.
Noen kan motsette seg at dette bringer oss tilbake til de gamle tider med å bygge et annet nettsted for hver nettleser. Det er sant at ingenting hindrer deg fra å skrive så mange stildeklarasjoner som bruker avanserte CSS3-funksjoner som stilarket ditt blir nesten tomt når disse reglene ikke kan brukes.
Hvis du vil bruke Modernizr på en måte som er fornuftig, må du stole på design talentet ditt for å tenke alternative stilarter som ikke bryter designen og ikke krever å kaste bort resten av stilarket. For eksempel kan du prøve å erstatte dropshadows på bokstaver, når de ikke er tilgjengelige, med fet skrift eller gjennomsiktighet med en annen farge.
For å bruke Modernizr, ta med den minifiserte filen, og bruk en klasse av no-js til element. Denne siste forholdsregelen lar deg gi stiler for når JavaScript er helt deaktivert; Selvfølgelig, i slike tilfeller kan Modernizr ikke hjelpe deg i det hele tatt. Hvis JavaScript er aktivert, vil Modernizr sparke inn og erstatte no-js med resultatene av funksjonens gjenkjenningsoperasjoner.
...
Hvis du er villig til å akseptere at alle nettsteder ikke trenger å vise identisk på alle nettlesere, vil du oppdage at Modernizr er et viktig verktøy i web dev beltet ditt!
På samme notat har designeren Andy Clarke utviklet en elegant løsning for å løse IE6s mangel på standardoverholdelse. Kalt "Universal IE6", fokuserer denne stilarken utelukkende på typografi. Nøkkelen er å bruke betingede kommentarer for å skjule alle andre stilark fra IE 6.
/ * Stylesheets for andre nettlesere enn Internet Explorer 6 * /
Viktig notat: Husk å inkludere den nyeste versjonen, siden instruksjoner for eldre fortsatt er flytende rundt på nettet. De endelige resultatene ser slik ut:
Du har null arbeid å gjøre for å støtte IE 6 på et nytt nettsted.
Denne tilnærmingen har en ganske åpenbar fordel i forhold til klassiske alternative stilark: du har null arbeid å gjøre for å støtte IE 6 på et nytt nettsted. Ulempen er selvfølgelig at nettstedet viser svært lite av designen din. Videre må HTML-fundamentene dine være solid, slik at siden kan brukes selv med de fleste stiler deaktivert.
Vær oppmerksom på at Universal IE6 CSS ikke inneholder noen styling for HTML5-bare elementer som eller . Det er ikke et problem med mindre du stoler på disse elementene utelukkende for å oppnå blokknivåvisning for enkelte deler av siden. Vanligvis vil du alltid pakke inn teksten din også i det minste i et avsnitt eller et listeelement.
Denne løsningen er tydeligvis ikke for alle, og du kan finne klienter som ikke er uenige med deres nettsted gått i stykkernår det ses i IE6.
Du kan også hevde at, på dette tidspunktet, kan du like godt slippe IE6-støtte helt. Andy Clarke har oppsummert sine svar på disse innvendingene her.
Denne tilnærmingen fungerer best for innholdssentriske nettsteder, og katastrofalt for webapplikasjoner; men da igjen, bygge en moderne webapplikasjon for å fungere godt på IE 6 er en utfordring i seg selv.
Vår neste mester er et JavaScript-verktøy som har som mål å introdusere nye muligheter til eldre nettlesere (vel, egentlig bare IE 6-8): Selectivizr fungerer sammen med andre JavaScript-biblioteker som jQuery, Dojo eller MooTools for å legge til støtte for en rekke flere avanserte CSS selectors.
Jeg har oppført noen få under, men merk at den fullstendige listen over funksjoner vil være avhengig av ditt foretrukne JavaScript-bibliotek.
Accentsconagua
:sveve:fokus :første barn :siste barn :første linje :første bokstav For å bruke Selectivizr, last ned den fra hjemmesiden sin og ta den inn i din delen, sammen med en av støttebibliotekene. Her er et eksempel med jQuery:
Selectivizr fungerer sammen med andre JavaScript-biblioteker for å gi CSS3-støtte for IE 6-8.
Dette punktet er svært viktig: Selectivizr kan ikke fungere alene; det krever at ditt foretrukne bibliotek skal være til stede. Heldigvis er det kompatibelt med det store flertallet av populære JavaScript-biblioteker. Sjansen er at hvis du bruker JavaScript på nettstedet ditt, har du sannsynligvis et passende bibliotek som allerede er inkludert.
På den annen side, hvis du ikke vil bruke et bibliotek, er en alternativ løsning å bruke den lette DOMAssistanten, selv om du kanskje foretrekker det vanlige JavaScript-biblioteket ditt for å gjøre det enklere å administrere filer.
Vær imidlertid forsiktig, da de presise selektorer som Selectivizr gjør tilgjengelig, avhenger av hvilket støttende bibliotek som er valgt. Ifølge hjemmesiden, akkurat nå er det største utvalg av selektorer tilgjengelig med MooTools, mens jQuery dessverre gjør det minste antall selektorer tilgjengelig. Det må også sies at noen av seleksjonene som ikke er tilgjengelige med jQuery, er ganske eksotiske og sjelden brukt i den virkelige verdensbruk. Se våre "30 CSS Selectors du må huske" artikkelen for en fullstendig liste over selektorer.
Som det skjer, med de fleste JavaScript-løsninger for CSS woes, gjelder noen restriksjoner.