Share
Browsers zijn de vensters waardoor de wereld ons werk bekijkt, dus het is verstandig om op te letten en ze te begrijpen. Helaas kunnen browsers en webtechnologie in hoog tempo veranderen - dit artikel zal u op de hoogte houden en een momentopname van de browser-markt presenteren zoals deze op dit moment bestaat.
Hoezeer we er ook over klagen, het omgaan met de vele eigenaardigheden en inconsistenties die bestaan tussen browsers is een noodzaak in het dagelijks leven van webontwerpers en -ontwikkelaars. Dit specifieke probleem bestaat al enige tijd en het is waarschijnlijk dat dit nog vele jaren zal voortduren. Het is daarom essentieel dat webontwerpers en ontwikkelaars op de hoogte blijven van de nieuwste browserontwikkelingen om de meest effectieve websites te produceren.
Het kan moeilijk zijn om de huidige situatie van browsers bij te houden. Er zijn vijf belangrijke browsers, elk met meerdere versies en frequente updates. Voeg dit toe aan het feit dat ze allemaal verschillende niveaus van ondersteuning bieden voor verschillende functies van CSS3 en HTML5 en het kan allemaal een beetje overweldigend worden. Dit artikel probeert de staat van de browsermarkt vast te stellen zoals deze er nu uitziet. Laten we beginnen.
De afbeelding hieronder toont de huidige versienummers van elk van de vijf belangrijkste browsers op het moment van schrijven. U merkt misschien dat de jongste browser, Google's Chrome, een versienummer heeft dat veel hoger is dan Internet Explorer, dat al veel langer bestaat. Dit komt door de zes weken durende release-cyclus van Google, die de browser en het versienummer elke keer bijwerkt. In schril contrast staan de traditioneel trage updates van Internet Explorer, die vijf jaar wachtte voordat de update van IE6 naar IE7 werd uitgevoerd.
Microsoft haalt echter het tempo van de release op met de nieuwste versies van IE. Slechts twee jaar verstreken tussen IE8 en IE9 en Microsoft heeft IE10 slechts één maand na de release van IE9 officieel aangekondigd. Firefox heeft dit voorbeeld gevolgd, waarbij ook een release-cyclus van zes weken werd geïmplementeerd, en er is zelfs sprake van dat dit wordt teruggebracht tot elke vijf weken.
Er zijn kritiek geuit op dergelijke korte versies. Sommigen hebben gesuggereerd dat met weinig tot geen belangrijke updates van functies tussen releases, het versienummer niet relevant is. Er zijn ook claims ingediend dat er niet voldoende tijd is voor het oplossen van bugs en fouten voorafgaand aan de release.
Vanuit het perspectief van webontwerpers en ontwikkelaars, zouden snellere releasecycli over het algemeen een goede zaak moeten zijn. IE6 mocht stagneren en gecombineerd met zijn enorme marktaandeel fungeerde het als een nullast voor de webontwerpgemeenschap. Moderne browsers concurreren nu met elkaar om ondersteuning te bieden voor nieuwe webtechnologieën. De nieuwste functies van HTML5 en CSS3 kunnen sneller worden geïmplementeerd en geïmplementeerd, waardoor de voortgang naar volledige standaardisatie wordt versneld.
Het is altijd interessant om de nieuwste statistieken over het gebruik van de browser te bekijken, al was het maar om te zien of IE6 eindelijk is weggestorven (nog niet, helaas). Uitzoeken hoe gebruikers het internet daadwerkelijk bekijken, kan zeer informatief zijn. Verschillende informatiebronnen kunnen echter heel verschillende afbeeldingen van de huidige situatie maken. Laten we bijvoorbeeld eens kijken naar browsergebruiksgegevens van twee verschillende bronnen.
 |  |  |  |  | |
| w3schools | 38,7% | 4,2% | 32,3% | 21,7% | 2,4% |
| StatCounter | 26.39% | 5,93% | 25% | 40.18% | 1,81% |
De cijfers geven de gegevens weer die zijn verzameld voor de maand oktober 2011 (de cijfers van november zijn nog niet beschikbaar om voor de hand liggende redenen). De statistieken van W3Schools laten ons geloven dat alle versies van IE slechts 21,7% uitmaken van alle browsers, lager dan zowel Chrome als Firefox. Vergelijk dat eens met de gegevens van StatCounter, wat suggereert dat Internet Explorer nog steeds het grootste deel van het aandeel met meer dan 40% beveelt.
Het probleem is dat de aard van een website de resultaten vaak enigszins scheef trekt. Neem deze website bijvoorbeeld, de gebruikers zijn (hopelijk) behoorlijk web-slim en zullen waarschijnlijk een zeer recente, bijgewerkte, moderne browser gebruiken. Dit is hetzelfde geval met de cijfers van W3Schools, aangezien de bron van hun cijfers hun eigen logbestanden zijn. Ze wijzen dit zelf aan:
W3Schools is een website voor mensen met interesse voor webtechnologieën. Deze mensen zijn meer geïnteresseerd in het gebruik van alternatieve browsers dan de gemiddelde gebruiker. De gemiddelde gebruiker neigt naar de browser die vooraf is geïnstalleerd op hun computer en zoekt niet naar andere browseralternatieven.
Het is de moeite waard om hiermee rekening te houden bij het bekijken van dergelijke gegevens. Statistieken die zijn afgeleid van uw eigen websiteanalyses zullen altijd relevanter en nuttiger zijn. Desondanks kunnen globale statistieken nog steeds inzichtelijk zijn en kunnen de gegevens vaak actuele trends en patronen onthullen. De volgende grafiek, van StatCounter, toont het proportionele browsergebruik van het afgelopen jaar:
Uit de bovenstaande grafiek blijkt dat Chrome het afgelopen jaar aanzienlijk terrein heeft gewonnen, voornamelijk ten koste van Internet Explorer en Firefox, terwijl zowel Safari als Opera op een relatief constant niveau zijn gebleven. Hoewel Internet Explorer terrein verloor, lijkt het erop dat het op de een of andere manier nog steeds de meest gebruikte browser is.
Laten we nu eens kijken naar het gebruik van de wereldwijde browserversie van deze maand (november 2011) tot nu toe.
Eerder in dit artikel werd al vermeld dat browserontwikkelaars lijken te streven naar kortere releasecycli, slechts zes weken in het geval van Chrome en Firefox. Hoewel kortere releasecycli een goede zet lijken, zijn ze alleen effectief als gebruikers kiezen voor een upgrade naar de nieuwste versie. Als de opname laag is, kunnen gebruikers over verschillende versies van dezelfde browser verspreid zijn, allemaal met verschillende niveaus van ondersteuning en functies.
Chrome heeft dit probleem meestal opgelost door een automatische updatefunctie te implementeren zonder toestemming van de gebruiker. Het effect hiervan is te zien in de bovenstaande grafiek. De meest recente versie van Chrome, 15, werd pas op 25 oktober uitgebracht, maar heeft Chrome 14 al behoorlijk vervangen.
Firefox is nog niet helemaal in het stadium van automatische updates, maar vraagt de gebruiker nog steeds dringend om te upgraden na het starten van de browser. Firefox 8 is pas eerder deze maand uitgebracht, maar al een groot aantal gebruikers is overgestapt. De meerderheid van hun gebruikers bevindt zich op versie 7, maar er is nog steeds een aanzienlijk aantal dat nog steeds 3.6 gebruikt, bijna twee jaar geleden uitgebracht. Mozilla is van plan om stille updates met versie 10 van Firefox te implementeren.
... IE9 incompatibel maken met Windows XP, 's werelds meest gebruikte besturingssysteem.
Helaas heeft Internet Explorer altijd grote problemen gehad om gebruikers te laten updaten. Internet Explorer 9 is al geruime tijd beschikbaar, maar toch blijven er nog steeds veel gebruikers achter in versie 8, 7 en zelfs 6. Microsoft lijkt de situatie echter niet te helpen, door IE9 incompatibel te maken met Windows XP, 's werelds meest gebruikte besturingssysteem. Dit beleid wordt ook voortgezet met IE10, waarvoor Windows 7 en hoger vereist is.
Het grote aantal mensen dat nog steeds IE8 gebruikt, kan zorgen baren voor webontwerpers en ontwikkelaars. Internet Explorer 8 blijft de meest gebruikte browser volgens de bovenstaande diagrammen, maar biedt zeer weinig ondersteuning voor de meeste CSS3- en HTML5-functies. CSS3 en HTML5 worden goed ondersteund door de nieuwste browsers (zoals we hieronder zullen zien), maar de populariteit van IE8 betekent dat alternatieve stylesheets en fallbacks nog steeds nodig zullen zijn in de nabije toekomst.
Met de release van IE9 eerder dit jaar, betekent dit dat de nieuwste versies van alle vijf de belangrijkste browsers CSS3-ondersteuning bieden. Hoewel eerdere versies van browsers nog steeds in overweging moeten worden genomen, is dit een belangrijke stap in de goede richting en goed nieuws voor webontwerpers en ontwikkelaars. Het is echter de moeite waard om te onthouden dat CSS3 nog steeds in ontwikkeling is en dat verschillende browsers verschillende niveaus van ondersteuning bieden voor verschillende functies van CSS3. Sommige functies worden goed ondersteund, terwijl andere dat niet zijn en mogelijk moet u voorvoegsels van leveranciers gebruiken, zoals -moz-, -webkit- en -o-.
Laten we de huidige situatie van enkele van de meer populaire functies van CSS3 eens nader bekijken.
Ten eerste zijn er enkele elementen van CSS3 die zeer goed worden ondersteund. CSS3 Selectors bijvoorbeeld hebben al geruime tijd goede ondersteuning en zijn sinds kort een officiële W3C-aanbeveling nu ze door alle moderne browsers zijn geïmplementeerd.
Er zijn ook andere elementen van CSS3 waarvan je op dit moment redelijk zeker kunt zijn dat je ze nu gebruikt. CSS3-kleuren zoals RGBA en HSLA waren de eerste elementen van CSS3 om een officiële aanbeveling te worden en worden ondersteund in alle moderne browsers. Hier zijn enkele andere CSS3-eigenschappen die door alle moderne browsers worden ondersteund.
| | | | | |
| Versie | 8 | 5.1 | 15 | 9 | 11.5 |
| RGBA | ? | ? | ? | ? | ? |
| HSLA | ? | ? | ? | ? | ? |
| Meerdere BG | ? | ? | ? | ? | ? |
| Border-radius | ? | ? | ? | ? | ? |
| Box-shadow | ? | ? | ? | ? | ? |
| ondoorzichtigheid | ? | ? | ? | ? | ? |
| transformaties | ? | ? | ? | ? | ? |
| Font-face | ? | ? | ? | ? | ? |
| Media-queries | ? | ? | ? | ? | ? |
Natuurlijk zijn er nog steeds veel eigenschappen van CSS3 die niet zo breed worden ondersteund. Hoewel IE9 van Microsoft CSS3 ondersteunt, spelen ze nog steeds een inhaalslag, omdat ze niet veel van de eigenschappen ondersteunen die andere browsers al een tijdje hebben gedaan. Ze lijken hiermee echter te werken, met veel meer eigenschappen die in IE10 worden ondersteund. Hier is een tabel met verschillende niveaus van ondersteuning voor andere CSS3-eigenschappen.
| | | | | |
| Versie | 8 | 5.1 | 15 | 9 | 11.5 |
| animaties | ? | ? | ? | ? | ? |
| Transitions | ? | ? | ? | ? | ? |
| Reflections | ? | ? | ? | ? | ? |
| 3D-transformaties | ? | ? | ? | ? | ? |
| Border-image | ? | ? | ? | ? | ? |
| Schaduw tekst | ? | ? | ? | ? | ? |
HTML5 bevindt zich in vrijwel dezelfde situatie als CSS3 omdat het nog steeds in ontwikkeling is en daarom verschillende ondersteuningsniveaus heeft in verschillende browsers. Net zoals bij CSS3 zijn er functies die universeel worden ondersteund, zoals Canvas, terwijl andere functies vrijwel helemaal geen ondersteuning bieden.
Hier is de browserondersteuning voor een reeks HTML5-elementen.
| | | | | |
| Versie | 8 | 5.1 | 15 | 9 | 11.5 |
| Canvas | ? | ? | ? | ? | ? |
| SVG | ? | ? | ? | ? | ? |
| Webopslag | ? | ? | ? | ? | ? |
| Slepen, laten vallen | ? | ? | ? | ? | ? |
| aanraken | ? | ? | ? | ? | ? |
| Webmedewerkers | ? | ? | ? | ? | ? |
| Geografische locatie | ? | ? | ? | ? | ? |
| Web Sockets | ? | ? | ? | ? | ? |
| IndexDB | ? | ? | ? | ? | ? |
HTML5-audio en -video waren langverwacht en hebben veel aandacht gekregen sinds de aankondiging. Een van de trouwste supporters van HTML5-video's is Apple, die voorbereidingen treft om de ondersteuning voor Flash te dumpen en het de favoriete videospeler te maken op al hun mobiele apparaten. Het lijkt erop dat Apple zijn zin heeft gekregen, omdat Adobe onlangs heeft aangekondigd dat het de ontwikkeling van Flash voor mobiele apparaten stopt. Deze stap effent de weg voor verdere ondersteuning en ontwikkeling van HTML5-video.
Sommige grote video-serverende websites hebben ook geëxperimenteerd met HTML5-video, waaronder YouTube, Vimeo en DailyMotion. Het zal echter een tijdje duren voordat er een volledige overschakeling wordt gemaakt op een grote website voor het delen van video's. Een van de belangrijkste aspecten die de overgang naar HTML5 tegenhielden, was het ontbreken van standaard audio- en video-codecs. Momenteel zijn er geen audio- of video-codecs die door alle vijf moderne browsers worden ondersteund.
HTML5-formulieren bieden een aantal opwindende functies, zoals validatie en nieuwe invoertypen. De ondersteuning voor deze nieuwe formulierfuncties lijkt nogal te variëren tussen browsers. Opera loopt voorop op een afstand en ondersteunt bijna elke nieuwe functie, terwijl IE9 bijna geen enkele ondersteunt. Het is echter vermeldenswaard dat veel van deze nieuwe functies elegant in oudere browsers degraderen.
Er zijn dertien nieuwe invoertypen geïntroduceerd in HTML5-formulieren, helaas hebben momenteel slechts ongeveer vijf belangrijke ondersteuning onder browsers.
| | | | | |
| Versie | 8 | 5.1 | 15 | 9 | 11.5 |
| Zoeken | ? | ? | ? | ? | ? |
| Telefoon | ? | ? | ? | ? | ? |
| URL | ? | ? | ? | ? | ? |
| reeks | ? | ? | ? | ? | ? |
| ? | ? | ? | ? | ? |
Er zijn ook veel nieuwe formulierkenmerken toegevoegd, die qua ondersteuning veel beter lijken te zijn. Hier is de ondersteuning voor slechts enkele van de nieuwe formulierattributen.
| | | | | |
| Versie | 8 | 5.1 | 15 | 9 | 11.5 |
| placeholder | ? | ? | ? | ? | ? |
| autofocus | ? | ? | ? | ? | ? |
| autocomplete | ? | ? | ? | ? | ? |
| Lijst | ? | ? | ? | ? | ? |
| Verplicht | ? | ? | ? | ? | ? |
HTML5-formuliervalidatie is een zeer opwindende functie. Traditioneel is formatie aan de kant van de klant geïmplementeerd met Javascript, wat problemen kan veroorzaken als de gebruiker Javascript heeft uitgeschakeld. HTML5-formuliervalidatie kan Javascript-validatie in moderne browsers vervangen wanneer deze volledig operationeel is.
Helaas is het nog niet in deze fase. Recente versies van Chrome, Opera en Firefox ondersteunen allemaal HTML5-formuliervalidatie. Safari 5 op Windows ondersteunt ook HTML5-validatie, maar enigszins vreemd, niet op OSX.
In dit artikel hebben we ons voornamelijk geconcentreerd op desktopbrowsers, maar zoals we allemaal weten, wint mobiel browsen een serieuze tractie. Daarom is het de moeite waard om ook de trends en ontwikkelingen van mobiele browsers te bekijken.
De bovenstaande grafiek toont tot nu toe de gebruiksstatistieken van mobiele browsers voor deze maand (november 2011). Het lijkt erop dat er geen enkele dominante browser bestaat, met Android, iPhone en de mobiele versie van Opera die elk een zeer vergelijkbaar marktaandeel hebben. Nokia- en Blackberry-browsers hebben ook een aanzienlijk aantal gebruikers.
Voor de toepassing van dit artikel gaan we ons richten op de drie populairste mobiele browsers en een overzicht geven van elk van deze browsers.
Nu meer mobiele apparaten hebben gekozen voor het Android-besturingssysteem, heeft de Android-browser het afgelopen jaar langzaam zijn marktaandeel vergroot.
De standaard Android-browser is gebaseerd op de WebKit-engine, dezelfde engine die wordt gebruikt door Chrome en Safari. Zoals je zou verwachten, heeft het behoorlijk goede ondersteuning voor CSS3 en HTML5 vanaf versie 2.0 en later. Versie 4.0 van Android (Ice Cream Sandwich) heeft ondersteuning voor functies zoals SVG en CSS3 3D Transforms op smartphonebrowsers.
Er wordt gesuggereerd dat Google de ingebouwde Android-webbrowser zal vervangen door hun steeds populairder wordende Chrome-browser in toekomstige versies van het Android-besturingssysteem.
Een van de grootste functies van de iPhone is de browse-ervaring die Safari voor iOS biedt. Safari op iOS 5 lijkt ook niet anders te zijn, met functies zoals Leeslijst, Reader en sneller browsen op het web.
Safari op iOS5 biedt een aantal van de beste ondersteuning voor HTML5 en CSS3 die momenteel beschikbaar zijn. De nieuwste versie heeft verbeterde ondersteuning voor HTML5-functies, zoals webwerkers en nieuwe invoertypen.
We hebben al eerder HTML5-formulieren behandeld in dit artikel, maar het is op de iPhone waar deze nieuwe formulierkenmerken echt schijnen. De iPhone verandert feitelijk het schermtoetsenbord in verhouding tot het type invoer. U kunt hetzelfde verwachten van de nieuwe invoertypen die worden ondersteund, inclusief datum, maand en tijd.
Hoewel Opera het misschien niet zo fantastisch doet op het gebied van desktopbrowsers, compenseert het dit in zijn mobiele vorm. Een van de redenen waarom Opera het zo goed doet op mobiele telefoons, is dat het heel snel is bij het laden van webpagina's. Opera gebruikt een functie met de naam Turbo, die eerst websites op een server comprimeert voordat deze naar uw telefoon worden verzonden, wat resulteert in veel snellere laadsnelheden.
Opera Mobile bevindt zich momenteel op versie 11 en is net als zijn desktop-tegenhanger, en biedt uitstekende CSS3- en HTML5-ondersteuning.
Zoals vermeld aan het begin van dit artikel, kunnen browserontwikkelingen moeilijk zijn om bij te houden, vooral met de nieuwe kortere releasecycli. Ik hoop dat dit artikel u een actueel beeld geeft van de situatie zoals die nu is. Ik hoop ook dat dit in de toekomst een nuttig referentiepunt zal blijken. Bedankt voor het lezen :)
Accentsconagua