Stylesheet

Heb je wel eens problemen met het bekijken van websites op je mobiel? Dik kans dat dat door een onvolledige stylesheetEen stylesheet is een stijldefinitie voor een webpagina, document of applicatie. verder lezen komt. Een term uit de front-end ontwikkeling. In dit artikel geven we een kleine introductie en vind je antwoord op de vraag wat het is en waar stylesheets voor worden gebruikt.

Wat is het?

Een stylesheet is een stijldefinitie voor een webpagina, document of applicatie. Er zijn verschillende webtalen die stylesheets kunnen omvatten, zoals CSS (Cascading Style SheetsCSS ofwel Cascading Style Sheets, zijn stijldefinities voor een webpagina of webapplicatie. verder lezen) en XSLT (voor XML documenten). Het is een reeks aan definities die elementen in een (X)HTML of XML pagina aanspreken en voorzien van een stijl, zoals achtergrondkleur of grootte.

De voordelen van een stylesheet

Het is een mogelijkheid om de vormgeving van webpagina’s los te koppelen van hun feitelijke inhoud en centraal vast te leggen. Daarmee kunnen meerdere pagina’s gebruik maken van dezelfde stijl, waarin positionering van elementen, lettertypen, kleuren en afbeeldingen kunnen worden vastgelegd. Dat scheelt laadtijd van webpagina’s, omdat de stijl slechts een keer gedownload hoeft te worden. Een stijl bestaat uit een aantal aspecten zoals lettertype en tekst- en achtergrondkleur. Ook breedte van lijnen, blokken, de horizontale en verticale positie, de zichtbaarheid, de transparantie, of een element boven of onder een ander element ligt en vele andere aspecten kunnen in een stylesheet worden aangegeven.

Een stylesheet voor elke browser

Omdat er nogal wat verschillende browsers zijn, zoals Google Chrome, Microsoft Edge en Mozilla Firefox, moet de webprogrammeur die stylesheets schrijft ervoor zorgen dat zijn werk in elke browser uitvoerig wordt getest. Er zijn verschillen in interpretatie van stylesheet-code, en vooral nieuwe definities, zoals in CSS3 dat sinds enkele jaren in browsers wordt ondersteund, moeten worden getest. CSS3 laat toe elementen te manipuleren met animaties en transities, iets dat tot dan toe nog niet mogelijk was met CSS, enkel met JavascriptJavaScript is een scripttaal om webpagina's interactief te maken en webapplicaties te ontwikkelen. verder lezen, of langer geleden: Flash of JAVA-applets. Om CSS te testen in de browser zijn er inmiddels flink wat tools beschikbaar, waarbij de Inspector (in Google Chrome) een veelgebruikte is. Wanneer je in die browser op F12 drukt of ergens op de pagina rechts-klikt en kiest voor Element inspecteren, zie je de stijldefinitie voor alle elementen. De programmeur kan zelfs direct in de Inspector eigenschappen van een element manipuleren, zodat hij of zij kan testen of een lettertype bijvoorbeeld iets groter ook goed werkt.

Vooral Microsoft was met Internet Explorer (IE) lange tijd erg eigenwijs. Er werd een aparte interpretatie ontwikkeld van CSS en de browser ondersteunde lang niet alle ‘nieuwere’ CSS-tags, die andere browsers inmiddels wel omarmden. Gevolg was dat er vaak een aparte stylesheet voor verschillende browsers geschreven moest worden. Bovendien werden er regelmatig hacks toegepast om dat ene element maar goed in het scherm te krijgen, terwijl de code er niet meer valide door werd. Validiteit van (CSS-)code is een manier om te controleren of de officiële specificaties van de programmeertaal worden nageleefd, opgesteld door het W3C, de organisatie die webcode bijhoudt. Inmiddels is met de komst van Microsoft Edge en modernere versies van IE een eind gekomen aan de jarenlange frustratie van front-end developers. En het scheelt bedrijven veel tijd en daarmee geld.