Datavisualiseringer med Can I Use kompatibilitetstabeller

Jeg har tidligere skrevet om kompatibilitetstabellene Can I Use som viser støtte for HTML5, CSS3, SVG og andre funksjoner for stasjonære og mobile nettlesere. Nå kan du få tilgang til dataene bak listen over støttetabeller med GitHub Can I Use-depotet. Siden dataene er åpen kildekode, har flere mennesker tatt det og laget sine egne visualiseringer for å vise informasjonen på interessante måter.

Datakilde

Koden som er tilgjengelig som en komprimert zip-fil, inneholder JSON-filer for hver funksjon som finnes på nettstedet canisuse.com, og nå som de opprettholdes på GitHub, tillater det hvem som helst å oppdatere eller bidra til støttedataene som brukes på nettstedet. ZIP-filen er 185 kB, og katalogstørrelsen når den først ble åpnet er rundt 661 kB, så den er ikke for stor til å håndtere; JSON-filene har gjennomsnittlig 3-4 kB hver. Listen over støttede endringer inkluderer følgende funksjonsinformasjon som kan endres:

  • Tittel
  • Beskrivelse
  • spec
  • Status
  • lenker
  • bugs
  • kategorier
  • Statistikk
  • Merknader
  • UCprefix
  • Parent
  • nøkkelord
  • Vist

Hvis du vil legge til en ny funksjon, må du bare legge til en annen JSON-fil med basisfilnavnet som funksjons-ID, og ​​hvis du ikke har all funksjonsinformasjonen tilgjengelig, må du sørge for å sette flagget "vist" til falsk .

For øyeblikket er disse ikke-støttede endringene ikke mulig:

  • Legg til en ny nettleserversjon
  • Legg til en test til en gitt funksjon
  • Legg til eventuelle objektegenskaper som ikke allerede er definert ovenfor
  • Endre use_perc_y- eller use_perc_a-verdiene, siden disse er genererte verdier

visual~~POS=TRUNC

Det betyr også at enkeltpersoner nå er åpne for å lage sine egne visualiseringer av dataene som kan representeres i mange kreative alternativer til den tradisjonelle og mangelfulle tabellen og indeksstilen som finnes på Can I Use nettstedet i dag. I tillegg lar flere visualiseringer deg kombinere flere funksjoner, noe som gir deg en bedre oversikt over støttematrisen basert på kombinasjoner av funksjoner du kanskje vil inkludere i utviklingsprosjektene dine.

Nettleserbruk / funksjonsstatistikk

Programmet Browser Usage / Feature Statistics, opprettet av Ben Toews, er tilgjengelig fra GitHub som D3 Browser Feature Stats Visualization, og presenterer Can I Use- data i et pakkeoversikt drevet av D3 (Data Driven Documents). De innerste sirklene representerer spesifikke versjoner av nettlesere, neste nivå av sirkler representerer nettleserfamilien, og den ytterste sirkelen representerer universet til nettlesere. En rød sirkel betyr at den spesielle funksjonen ikke støttes i nettleseren, og grønn betyr at den støttes i nettleseren. Når verdiene boble opp, blir vekten oppført av en prosentandel av mennesker som bruker den aktuelle nettleseren. CSS3-kategorien med valgt CSS-gradientfunksjon vises i figur B der Chrome 25 blir brukt av 28% av de globale brukerne, men ikke støttet av IE9 eller under, Opera 7 og under, og Firefox 3.

Figur B

Jeg vil bruke og mobil Jeg vil bruke

Hvis du ønsker å se hvilken prosentandel av brukere som har nettlesere som fullt ut støtter et sett med funksjoner, kan du velge et utvalg av nettleserfunksjoner du vil bruke på nettstedet ditt eller webapplikasjonsprosjektet. Visualiseringen av Jeg vil bruke vil vise forholdet på nettet som kan bruke de valgte funksjonene delt etter stasjonær og mobil, og deretter dele nettleseren med forholdet på hele nettet som kan bruke de valgte funksjonene samlet etter nettleser. Dataene her er også levert av nettstedet Can I Use . Eksemplet i figur C viser den totale prosentandelen av brukere som kan bruke CSS3 multikolonneoppsettfunksjonen med samlet stasjonær støtte på 56, 84% og total mobilstøtte på 13, 16%. Chrome-nettleseren har mest støtte med 32, 2% av den totale støtten.

Figur C

Mobilen jeg vil bruke gir deg forholdet på hele nettet som kan bruke de valgte funksjonene samlet av mobilnettleseren. Eksemplet i figur D viser den totale prosentandelen av mobile brukere som kan bruke Content Editable Attributtet (Basic Support) (67.03%) samt den totale nettleserandelen - med iOS Safari som leder pakken med 7.192%.

Figur D

Evolusjonen av nettet

Fargebåndene i denne visualiseringen representerer samspillet mellom webteknologier og nettlesere, noe som gir liv til de mange kraftige nettappene som er i bruk i dag. Deler av dataene som er brukt i denne visualiseringen er hentet fra nettstedet Can I Use, i tillegg til Wikipedia, W3C, HTML5rocks.com og Mozilla Developer Network. Figur E viser tidslinjen for nettlesere og de forskjellige funksjonene når de er implementert som sammenfaller med nettleserversjoner og oppdateringer. Den øverste nettleserlinjen som avsluttes mot slutten av 2007 er Netscape versjon 9, og hvis du blar til begynnelsen av visualiseringen, kan du se Mosaic vises som den første nettleseren som ble implementert i mars 1993.

Figur E

HTML5 og CSS3 beredskap

Visualiseringen av HTML5 og CSS3 beredskap laget av Paul Irish og Divya Manian er ment å vise hvor mye støtte som finnes i nettleserne for hver funksjon i HTML5 og CSS3. Hver nettleser er representert med en flis på linjen og får en lik bredde på plassen i linjen, derfor, hvis en stolpe er full, betyr det at funksjonen som er valgt har universell støtte blant alle de 8 nettleserne som blir sammenlignet med beredskapens visualisering. applikasjon. Data er lagt til for å inkludere 2008 til og med 2013. For eksempel viser figur F 3D-transformasjonsfunksjonen et støttenivå som er begrenset til Chrome, Safari, Firefox og IE10.

Figur F

Mash Up-visualisering

En annen visualisering opprettet fra Can I Use-dataene ble utviklet av Raymond Camden ved å bruke mash-ups hans med to demoer. Den første demonstrasjonen bruker graderinger for å representere utvalgte funksjoner i seks nettlesere. Hans andre demonstrasjon bruker worst-case-scenariet, som viser rødt hvis noen av funksjonene ikke støttes i den aktuelle nettleseren ( figur G ) med CSS3-animasjonsfunksjonen valgt.

Figur G

Denne håndfull visualiseringer er bare en start, og det vil være interessant å se hvor mange flere visualiseringer som kan lages fra Can I Use- dataene. Hver og en gir en ny måte å se på hvordan HTML5, CSS3 og andre funksjoner blir brukt og akseptert av forskjellige stasjonære og mobile nettlesere.

© Copyright 2020 | mobilegn.com