Cross-browser compatibiliteit

Wat is cross-browser compatibiliteit?

Cross-browser compatibiliteit is de mate waarin websites, webshops of andere applicaties op het wereldwijde web (www) functioneren op meerdere webbrowsers. Webbrowsers zoals Google Chrome, Microsoft Edge, Mozilla Firefox en Safari zijn de modernste webbrowsers in dit tijdperk. Webbrowsers als Microsoft Internet Explorer en Netscape worden beschouwd als oude webbrowsers en deze beschikken niet over alle functies die de moderne webbrowsers hebben.

Wanneer een website een bepaalde functionaliteit, die niet mogelijk is of op een andere manier moet worden gerealiseerd op andere (verouderde) webbrowsers, daarvoor op een andere manier programmeert of met een alternatieve oplossing komt, dan is dat een voorbeeld van cross-browser compatibiliteit. Hieronder een tweetal voorbeelden van cross-browser compatibiliteit dat toegepast is op deze website.

Voorbeelden van cross-browser compatibiliteit

Hieronder geven wij een aantal voorbeelden die vaak voorkomen bij het ontwikkelen van websites en webshops.

WebP-afbeeldingen niet ondersteund door Microsoft Internet Explorer

Deze website maakt gebruik van afbeeldingen met de bestandsindeling 'WebP'. Deze afbeeldingen zijn veel sneller te downloaden dan normale afbeeldingen met bestandsindeling 'JPEG' of 'PNG'. Dat is hartstikke fijn natuurlijk, maar Microsoft Internet Explorer (verouderde webbrowser) herkent die bestandsindeling niet en weet niet hoe die daar mee om moet gaan. WebP is namelijk een bestandsindeling dat geïntroduceerd is door Google in het jaar 2010 en niet direct door alle andere browsers in gebruik genomen werd, omdat het natuurlijk nog een succes moet blijken voordat ze een product gaan gebruiken dat gemaakt is door een ander bedrijf (Google).

Deze website biedt beide afbeeldingen aan, zodat de webbrowser zelf kan kiezen welke bestandsindeling die gebruikt. Daarmee zullen webbrowsers die WebP niet ondersteunen, de keuze maken voor de afbeelding met de JPEG- of PNG-bestandsindeling. Mensen die nog gebruik maken van Microsoft Internet Explorer zullen dan geen voordeel kunnen nemen uit de snellere downloadtijd van de afbeeldingen, maar ze kunnen gelukkig nog wel de JPEG- of PNG-afbeeldingen zien.

Sinds 2020 is er een nieuwe bestandsindeling voor afbeeldingen: AVIF. Afbeeldingen met deze bestandsindeling zijn nóg sneller te downloaden dan afbeeldingen met de bestandsindeling 'WebP'. WebP-afbeeldingen zijn gemiddeld 30% lichter dan JPEG-afbeeldingen, AVIF-afbeeldingen zijn 50% lichter dan JPEG-afbeeldingen.

Bron: https://www.ctrl.blog/entry/webp-avif-comparison.html

Gradiënt op tekst niet mogelijk bij Microsoft Internet Explorer

Zoals u misschien al vermoed, is Microsoft Internet Explorer vandaag de zondebok. Op Google Chrome is het mogelijk om een gradiënt te gebruiken bij tekst. Dit is helaas niet mogelijk bij Microsoft Internet Explorer, omdat dit een functionaliteit is dat kwam na de tijd wanneer Microsoft Internet Explorer nog verder werd ontwikkeld; dat gebeurt nu niet meer, waardoor deze webbrowser de nieuwste functies niet heeft.

Gelukkig is het mogelijk om na te gaan of een webbrowser zo'n gradiënt ondersteund. Wanneer een browser deze niet ondersteund, dan wordt er gebruik gemaakt van een volle kleur en wordt er geen poging gedaan om een gradiënt toe te passen op tekst in webbrowsers die dat niet ondersteunen. Wanneer een website een gradiënt op tekst toevoegt zonder te controleren of dat wordt ondersteund, dan wordt de gradiënt op de achtergrond van de tekst toegepast i.p.v. op de tekst (dat ziet er niet mooi uit).

Meer programmeer­werk bij lijsten doorzoeken

Stel, deze website doet een zoekopdracht naar alle afbeeldingen op de homepagina. Vervolgens controleert deze website per afbeelding of deze wél of niet zichtbaar is op uw scherm. Om dit te doen, dient de website dus door de hele lijst te gaan. Dat kan heel gemakkelijk en kort worden gecodeerd (getypt) voor moderne browsers.

Het gaat om de lengte van de code in tegenstelling tot de onderstaande code die gebruikt moet worden bij oudere webbrowsers... Zie onderstaande vergelijking.

var afbeeldingen = document.getElementsByTagName('img');
afbeeldingen.forEach(function(afbeelding) {
  // .....
});

var afbeeldingen = document.getElementsByTagName('img');
var aantalAfbeeldingen = afbeeldingen.length;
var iAfbeelding, afbeelding;
for(iAfbeelding = 0; iAfbeelding < aantalAfbeeldingen; iAfbeelding++) {
  afbeelding = afbeeldingen.item(iAfbeelding);
  // .....
}

Dit is een groot verschil, aangezien dit soort code vaak gebruikt wordt door websites en webshops. Het heeft dus geen nut om de eerste te gebruiken, aangezien dit niet werkt op verouderde webbrowsers, tenzij er geen rekening gehouden hoeft te worden met mogelijk gebruik van verouderde webbrowsers.

Hoe en welke webbrowsers controleren wij?

In eerste instantie ontwikkelen wij uw website of webshop in Google Chrome. Google Chrome is wereldwijd de populairste webbrowser (66% aandeel eind 2020). Vervolgens controleren wij uw website op Microsoft Edge, Mozilla Firefox, Safari en Mobile Safari.

Daarbij kijken wij naar het webdesign, de ligging van de elementen en het functioneren van uw website of webshop, bijvoorbeeld of de contactformulieren en uitklapbare menu's functioneren.

Wij ontwikkelen websites en webshops met cross-browser compatibiliteit in het achterhoofd. Wanneer wij iets toevoegen, denken wij ook na over hoe dit zal functioneren op oudere webbrowsers (Microsoft Internet Explorer) en webbrowsers waarbij veel bugs zitten die te maken hebben met het webdesign van een website of webshop (Safari).