Stylesheet

Heb je wel eens problemen met het bekijken van websites op je mobiel? Dik kans dat dat door een onvolledige stylesheet 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 Sheets) 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 Javascript, 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.

Mis niets meer!

Ontvang inside informatie over software innovatie in je mailbox. Meld je nu aan voor onze maandelijkse update.

Vond je dit interessant? Ontdek meer!

Lees meer over deze onderwerpen

Meer kennis opdoen over:

Software ontwikkeling Development

Software ontwikkeling voorop lopen in de markt

Wil je snel vooruit met je organisatie? Innoveren met software ontwikkeling is de manier om dit te realiseren. Maar eigen software laten maken brengt ook onzekerheid en lastige keuzes met zich mee. Hoe lang duurt het en wat krijg je uiteindelijk?

Meer info
Nu zijn we nieuwsgierig naar jou. Waar wil jij heen?
Neem contact op

Bel ons direct op
088 262 7376 100% van onze klanten beveelt ons aan bij andere organisaties
Feedback Company

© 2005 - 2022     Ambrero Software BV • Algemene voorwaardenPrivacyverklaring
Klantwaardering