CSS

CSS ofwel Cascading Style SheetsCSS ofwel Cascading Style Sheets, zijn stijldefinities voor een webpagina of webapplicatie. verder lezen, zijn stijldefinities. Lees in onze kennisbank alles over CSS in de browser en de voordelen ervan.

Wat zijn CSS?

CSS (Cascading Style Sheets) zijn stijldefinities voor een webpagina of webapplicatie zoals Ambrero die maakt. 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 stylesheetEen stylesheet is een stijldefinitie voor een webpagina, document of applicatie. verder lezen worden aangegeven.

De voordelen van CSS?

CSS bestaat al sinds 1994. Hiervoor werd HTML gebruikt om elementen een eigenschap mee te geven, maar dit bleek al snel niet erg efficiënt. Met classes en ID’s worden HTML-elementen nu in een webpagina voorzien van een unieke ‘naam’ die vervolgens door CSS kan worden gebruikt om eigenschappen aan dat HTML-element toe te kennen. Zonder die eigenschappen ziet het HTML(5)-element, zoals ‘header’ of ‘article’ er uit zoals de standaardstijl van de browser definieert.

Vrijwel geen enkele site of applicatie maakt tegenwoordig niet op een of andere manier gebruik van CSS. Vaak zijn stylesheets vele duizenden regels lang, omdat ze vrij snel complex kunnen worden. Het begrip cascading (als een waterval) verwijst naar de mogelijkheid van het overerven van opmaak-eigenschappen. Elk aspect van de stijl wordt onafhankelijk overgeërfd door onderliggende elementen in een webpagina. Daarom hoeven alleen de afwijkende aspecten van een stijl te worden aangegeven. Als er in de stijl een lettertype wordt aangegeven voor het hele document, dan wordt dat lettertype in het hele document gebruikt en hoeft het niet voor elk element apart te worden aangegeven. Met behulp van CSS kan een front-end developerEen front-end developer zet een design over naar een werkbare applicatie, website of ander stuk software. verder lezen een ontwikkeld design doorvoeren in de code. Daarmee krijgt de webpagina de gewenste (huis)stijl en dit komt de gebruiksvriendelijkheid ten goede.

Het is zaak dat de front-end developer altijd test of de stijl in verschillende browsers hetzelfde er uit ziet. Sommige oudere browsers ondersteunen nieuwere CSS(3) code nog niet, waardoor sommige website-onderdelen anders worden weergegeven. Vooral in het vorige decennium moest er veel tijd worden besteed om stylesheets te voorzien van extra code om het in Internet Explorer 6, toen nog veel gebruikt, goed te laten werken. Die tijd is langzamerhand voorbij, nu ook Microsoft zich met Edge aan de specificaties van het W3C (World Wide Web Consortium) houdt.

CSS in de browser, LESS of SASS in de achtergrond

Inmiddels schrijven nog weinig front-end developers ‘native’ CSS code. Met SASS of LESS is het schrijven van stylesheets een stuk eenvoudiger geworden. Deze zogenaamde preprocessors zorgen ervoor dat de developer een set aan tools tot zijn beschikking heeft, zoals variabelen en functies die gewone CSS niet biedt. Uiteindelijk ‘leest’ de browser normale CSS-code, dus zal SASSSASS maakt het mogelijk om met behulp van variabelen kleuren en andere eigenschappen van de pagina vast te leggen. Dit geeft een efficiënte en schone webpagina-stijl. verder lezen of LESSLESS is een dynamische stylesheet-programmeertaal waarmee CSS-stylesheets efficiënter kunnen worden geschreven. verder lezen code met behulp van de preprocessor omgezet worden naar CSS.