Nettstedet "When Can I Use" tar gjetninger ut av nettleserkompatibilitet

Selv om det kanskje ikke er det mest visuelt tiltalende nettstedet, gjør When Can I Use ... (WCIU) kompensasjon for mangelen på stil med detaljert statistikk og alternativer for nettleserkompatibilitet med nåværende stiler og designelementer. Kompatibilitetstabeller og en uttømmende indeks indikerer hvilke stasjonære og mobile nettlesere som støtter hvilke HTML5-elementer, CSS3-stiler, SVG-vektorgrafikk, JS API for JavaScript, applikasjonsprogrammeringsgrensesnittobjekter og andre elementer. Fra dette tidspunktet var de siste datatilskuddene til WCIU gjeldende fra 1. oktober 2012.

Figur A

CSS

Du må finne den nyeste kompatibiliteten for @ font-face Web-skrifter? Ikke noe problem, bare klikk på "@ font-face Web fonts" -koblingen øverst i CSS-delen, og den tar deg til støttetabellen for metoden for å vise skrifter lastet ned fra nettsteder. Hver tabell gir deg en innledende forkortet liste over nettlesere som vanligvis inkluderer følgende: IE, Firefox, Chrome, Safari, Opera, iOS Safari, Opera Mini, Android Browser og Blackberry Browser. Klikk på lenken til Vis alle versjoner, og i dette eksemplet viser den 19 versjoner tilbake, som vist i figur B, vist i Chrome versjon 23.0.1271.64 m:

Figur B

Legg merke til fargenøkkelen for støttenivå øverst i figur B. For øyeblikket har @ font-face Web Fonts en global støtte på 77, 91%, en delvis støtte på 15, 15%, med en total støtte på 93, 08%. Hvis du har en spesifikk nettleser brukerne dine bruker på grunn av firma- eller organisasjonsstandarder, kan du klikke på fanen Vis alternativer og filtrere søket ved å endre kategori, status, nettleser, mobil nettleser, versjon av terskel for bruk av nettleser og alternativer, for eksempel som nettleseren godtar polyfyll og hva er tilgjengelige farger. Du kan også endre sorteringen. Alle alternativene vises i figur C :

Det som forundrer meg når jeg blar gjennom de forskjellige CSS-stilene, er nivået på total global støtte som mange av dem for øyeblikket har oppnådd i alle nettlesere. Med støtteprosent for CSS3 Border Radius på 80, 88%, CSS3 Box Shadow på 80, 69%, CSS3 Opacity på 95, 62%, CSS3 Text Shadow på 67, 16%, og Border Images på 64, 84%, gjør mange CSS3 egenskaper god inngang til full støtte for nettleseren og kompatibilitet. CSS-kategorien har over førtiåtte stilegenskaper oppført som vist i kolonnen (til høyre).

HTML5

Kompatibilitetstabellene Can Can Use ... gir en nedkjøring på alle HTML5-funksjoner, inkludert:

  • Audio Element, som er en metode for å spille av lyd på websider (uten å kreve en plug-in), er for øyeblikket på 80, 12% støttefrekvens
  • Canvas (Basic Support), en metode for å generere rask, dynamisk grafikk ved hjelp av JavaScript, ligger for tiden på 83, 12%
  • Dra og slipp, en metode for enkelt å dra og slippe elementer på en side, som krever minimalt med JavaScript, ligger for tiden på 83, 57%
  • WebGL 3D Graphics Canvas, som er en metode for å generere dynamisk 3D-grafikk ved hjelp av JavaScript, akselerert gjennom maskinvare ligger for tiden på 53, 54%
  • Video, en metode for å spille av videoer på nettsider (uten å kreve en plug-in), er for tiden 80, 67%.

Denne korte listen fremhever bare noen av de mer populære funksjonene, mens hele listen i HTML5-kategorien inneholder over tjuefire HTML5-elementer som vist nedenfor.

Figur E

JS API

JavaScript og API inkluderer JSON Parsing er en metode for å konvertere objekter til JSON-strenger og JSON tilbake til objekter som bruker JSON.stringify () og JSON.parse (), som for øyeblikket støttes i 94, 05% av alle nettlesere globalt.

Nettlagring - navn / verdipar er en metode for å lagre data lokalt som informasjonskapsler, men for større datamengder (sessionStorage og localStorage, pleide å falle inn under HTML5), og har for tiden en global støtte på 92, 04%.

getComputedStyle er et API for å få gjeldende beregnet CSS-stiler brukt på et element. Dette kan være den gjeldende verdien som brukes av en animasjon eller som angitt av et stilark. Foreløpig har den en kompatibilitetsgrad på 83, 08%. Dette er bare tre av de mer enn tjueteks oppføringer i JS- og API-funksjonskategorien som vist nedenfor.

Figur F

SVG

Scalable Vector Graphics (SVG) er en familie med spesifikasjoner for et XML-basert filformat for todimensjonal vektorgrafikk, både statisk og dynamisk (dvs. interaktiv eller animert). Kompatibilitetstabellene viser til sammen ni spesifikasjoner inkludert SVG (grunnleggende støtte), som har en global hastighet på 80, 54%, SVG-skrifter har den laveste av SVG-kategorien, og kommer inn på 42, 89% global støtte.

Annen

Klumpet inn i kategorien diverse "Annet", det er over tjuefire funksjoner. PNG-alfa-transparens er en metode for å vise semi-transparente områder i PNG-filer og har 95, 17% global støtte. Data URL-er er en metode for å legge inn bilder og andre filer på websider som en tekststreng, og har 94, 31% global støtte.

Hvis du ønsker å legge til HTML5-funksjoner, CSS3-elementer eller SVG i webutviklingen din, men har vært sjenert eller sliten av å bytte på grunn av støtteproblemer, må du først sjekke kompatibilitetstabellene levert av When Can I Use ..., du kanskje bare bli overrasket over hvor mye støtte mange av de nye funksjonene og elementene faktisk gir. Det er spesielt oppmuntrende hvis du vet at målbrukerne dine er pålagt å bruke en av de mer aktuelle nettleserversjonene, som vanligvis har mest støtte for HTM5 og CSS3.

© Copyright 2020 | mobilegn.com