Berichten


Geplaatst op 05 oktober, 2012

Interessant leesvoer over verouderde browsers

Door Richard van der Meer


Zul je net zien! Een gloednieuwe site. Weken van intensief samenwerken, de ontwerpen vele malen doorgenomen, eindelijk online. Fantastisch! Je komt thuis, bekijkt nog eens rustig de site, en wat schetst je verbazing? Nou? … Die site, natuurlijk. Die weliswaar lijkt op de ontwerpen, maar dan, tja, -iets- mist. Geen idee wat! De telefoon pakken dan maar? Een geïrriteerde mail sturen? Of is er misschien iets anders aan de hand?

Geen paniek. De kans is groot dat je de site bekijkt met een oudere browser. ‘Moderne’ browsers ondersteunen inmiddels veel functies om een website NOG mooier weer te geven. Functies die in eerdere browsers, met name Internet Explorer 6, 7, 8 en in mindere mate 9, niet worden ondersteund. Wat die verschillen dan wel zijn? Hieronder enkele voorbeelden.

Transparantie
Met transparantie geven we aan dat een bepaald element van een website doorzichtig is. Dit kan bijvoorbeeld worden gebruikt om een achtergrondafbeelding door te laten lopen zonder dat delen van de website hierdoor niet meer leesbaar worden. Wordt er geen transparantie ondersteund zal de achtergrondafbeelding op dat deel van de website niet meer zichtbaar zijn.

Afgeronde hoeken
Een scherpe hoek is ook maar een scherpe hoek. Toch? Daarom is er, in moderne browsers in ieder geval, de mogelijkheid om deze hoeken wat af te vlakken. Ze ronder te maken. Lijkt wel zo mooi!

Schaduw
Door het toevoegen van een schaduw kan op de website een soort 3D-effect worden gecreëerd. Door bijvoorbeeld een schaduw onder een blok plaatsen lijkt het alsof het betreffende blok boven de website zweeft.

Verloopjes
Veel blokken maken gebruik van achtergrondkleuren. Door hierin een verloopje (gradient) te verwerken (dat wil zeggen dat de kleur bovenaan het blok geleidelijk overloopt naar de kleur onderaan het blok) kan een ruimtelijk effect worden gecreëerd.

Meerdere achtergronden
In moderne browsers is het mogelijk om meerdere achtergrondafbeeldingen te combineren. Hiermee kunnen interessante effecten worden gecreeerd die het gevoel van 3D en animaties kunnen simuleren. Ondersteunt de browser dit niet? Geen probleem, dan wordt een ‘gewone’ achtergrondafbeelding getoond.

CSS selectors
De techniek die al de bovengenoemde opmaak mogelijk maakt noemen we ‘CSS’. CSS is een taal waarbij je delen van de website kunt benoemen en hier een opmaak aan kunt geven. Bijvoorbeeld: ‘maak de achtergrond van de website grijs’ of ‘laat een groene balk zien achter de titel’. In de nieuwste versie van CSS is het ook mogelijk om ingewikkeldere selecties te maken, bijvoorbeeld: ‘geef het tweede, vierde, zesde (etc) bericht een rode achtergrondkleur’. In browsers die dergelijke selecties niet mogelijk maken wordt teruggevallen op de oorspronkelijke achtergrondkleur.

Transformeren
Roteren. Schalen. Uitrekken. Tegenwoordig is dat, in sommige browsers, best mogelijk. Hier zijn, zeker in combinatie met onderstaand punt, fantastische effecten mee te bereiken. Een polaroid die net even scheef staat. Een knop die, wanneer je er met de muis overheen gaat, net iets groter wordt. Oudere browsers: recht toe, recht aan!

Overgangen
Hoewel animaties niet nieuw zijn is er met de komst van overgangen (transitions) een goede mogelijkheid om subtiele animaties te tonen. De knop uit het vorige voorbeeld die niet ineens twee keer zo groot wordt, maar dit heel geleidelijk doet. Een blok tekst dat deels verborgen is en subtiel tevoorschijn komt door er met de muis overheen te bewegen. Zulke dingetjes.

‘Doe dat ook even voor mijn browser’
Voor veel (maar niet alle) bovengenoemde situaties zijn heus wel oplossingen te vinden om dit ook werkend te krijgen op die oudere browser. Waarom het dan toch niet werkt? Is het eigenwijsheid? Luiheid? Onwelwillendheid? Is het te duur?

Nee! Nou ja, het kost veel tijd, dus duurder is het zeker. En eigenwijs zijn we zeker! Maar dat is niet de belangrijkste reden. De belangrijkste reden is om vooruitgang niet in de weg te staan. Wanneer een vormgever altijd rekening moet houden met de oudste, meest beperkte browser, zullen ontwerpen nooit worden vormgegeven met de nieuwste mogelijkheden. Als de ontwikkelaar vervolgens nog voor iedere browser de juiste oplossing moet realiseren heeft dat vele nadelen, waaronder een grotere hoeveelheid code (die duurder in onderhoud zal zijn), niet toekomstvast (aangezien er niet gebruik wordt gemaakt van hedendaagse standaarden), extra laadtijd (vanwege de vele extra afbeeldingen die gebruikt moeten worden) en tja: toch de kosten.

Daarom worden sites altijd zo opgebouwd dat iedereen altijd alle informatie te zien krijgt. Browsers die het ondersteunen krijgen het alleen iets mooier te zien (middels progressive enhacement of graceful degration).

‘Leuk, maar nu zit ik nog steeds met een kapotte site’
Nou, nee dus. Die site werkt prima. Het wordt alleen nu echt tijd om je browser eens bij te werken. Chrome, Safari, Firefox, Opera, Internet Explorer: het maakt me niet uit, als het maar de nieuwste versie is! Want een browser van zo’n 3,5 jaar oud (IE8) of 6 jaar oud (IE7), dat kan eigenlijk niet meer. Gebruik je nog IE6? 11 jaar oud? Het wordt tijd dat ook jij de schoonheid van het internet kunt zien. UPDATEN! Kost je niks en er gaat een wereld voor je open!

Bron: Intressant

 

Terug naar ‘Trends & ontwikkelingen’

 

 

 

Direct contact met DOC52

T:
0522 - 855 700
E:
info@doc52.nl
W:
www.doc52.nl

Blankenstein 110
7943 PE  Meppel

Links & Downloads

Volg bureau DOC52!


}