Wat is het CSS-bestandsformaat?
.css-bestanden worden gebruikt voor het opmaken van inhoud en het beschrijven van de presentatie van een website.
Bestanden met de extensie .css bevatten regels die bepalen hoe .html-elementen op een bepaalde pagina moeten worden weergegeven. Deze regels omvatten gebieden zoals:
- lettertype-instellingen (lettertype, grootte, kleur en stijl),
- regelafstand en inspringing,
- lay-outregels voor ingebedde en gepositioneerde elementen,
- bronverwijzingen, animaties en responsieve breekpunten via
@media-query's.
CSS - Cascading Style Sheets - is de opmaaktaal die wordt gebruikt om .css-bestanden te maken. Het is ontworpen om de scheiding van website-inhoud en presentatie mogelijk te maken, waardoor het veel gemakkelijker wordt om het uiterlijk van een site aan te passen zonder de inhoud te beïnvloeden. .css-bestanden maken het ook mogelijk dat pagina's verschillend worden gerenderd, afhankelijk van het apparaat dat wordt gebruikt - of het nu een mobiel apparaat, desktop-pc of tablet is - voor een veel betere gebruikerservaring. Het „cascading”-gedeelte betekent dat meerdere regels tegelijkertijd op hetzelfde element gericht kunnen zijn, waarbij specificiteit en bronvolgorde bepalen welke regel wint.
CSS is geen enkelvoudig formaat met versienummers: sinds CSS3 is het ontwikkeld als onafhankelijke modules (Selectors, Flexbox, Grid, Color, Animations en andere), die elk in hun eigen tempo vorderen. Preprocessors zoals .scss en .less breiden de CSS-syntaxis uit, maar worden altijd gecompileerd naar gewone .css die browsers direct verwerken.
.css-bestanden slaan gegevens op in platte tekst en kunnen dus met elke tekst-editor worden bewerkt. Het wordt echter aanbevolen om .css-bestanden te bewerken met speciale tools om mogelijke fouten te voorkomen - dergelijke tools markeren automatisch trefwoorden, corrigeren syntaxisfouten en bieden autocomplete-functies. Een .css-bestand bevat geen binaire signatuur; het kan optioneel beginnen met een @charset-declaratie, een @import-regel of een /* commentaar */.
Beveiliging & veiligheid
RISICO: LOWCSS is platte tekst en voert geen code uit, dus een .css-bestand is veilig om te openen. Randgevallen: historisch gezien kon CSS externe bronnen laden (lettertypen/afbeeldingen) en oudere browsers hadden CSS expression()/behavior-eigenaardigheden (al lang verouderd); moderne CSS kan geen scripts uitvoeren. De echte voorzichtigheid is geboden bij het downloaden van „gratis CSS-editor/viewer”-software van portalen met veel advertenties die PUP's bundelen - gebruik de gerenommeerde editors die hierboven worden vermeld.
Formaatdetails
in een notendopProgramma's die CSS-bestanden openen
Windows4 apps
Sublime Text
Betaald Openen om te bewerken; gratis te evalueren, licentie vereist voor voortgezet gebruik. 
Visual Studio Code
Gratis Open de .css om te bewerken met syntax-highlighting, IntelliSense en live-preview extensies. 
Web browser (Chrome/Firefox/Edge)
Gratis Browsers passen CSS automatisch toe bij het laden van een pagina; gebruik DevTools (F12) om stijlen te inspecteren of live te bewerken. 
macOS2 apps
TextEdit
Ingebouwd Openen in platte tekstmodus om te lezen/bewerken; schakel eerst rijke tekst (rich text) uit.
Visual Studio Code
Gratis Open de .css om te bewerken met syntax-highlighting, IntelliSense en live-preview extensies. 
Linux1 app
VS Code / gedit / GNU Emacs
Gratis Open de .css in elke tekst- of code-editor om te bekijken of te bewerken.
CodePen / JSFiddle
Gratis Plak CSS in een online speeltuin om het live te bewerken en te bekijken in combinatie met HTML. Technische details
diepe specificaties| MIME-type | text/css |
| Bestandscodering | Platte tekst, standaard UTF-8; tekenset kan expliciet worden gedeclareerd met een `@charset`-regel bovenaan het bestand |
| Binaire signatuur | Geen - `.css`-bestanden hebben geen magic bytes; identificatie is afhankelijk van de extensie of het MIME-type |
| Typische bestandsgrootte | 1 KB tot 500 KB; geminimaliseerde bundels van frameworks van derden (Bootstrap, Tailwind) kunnen de bovenkant bereiken |
| Kernstructuur | Regelsets: een selector of selectorlijst gevolgd door een declaratieblok van `property: value`-paren tussen accolades |
| At-rules | `@media` (responsieve breekpunten), `@import`, `@font-face`, `@keyframes`, `@supports` en `@layer` regelen voorwaardelijk laden, aangepaste lettertypen, animaties en functiedetectie |
| Cascade-algoritme | Conflicterende regels worden opgelost door specificiteit, cascade-oorsprong (auteur / gebruiker / browser) en bronvolgorde; waarden worden via overerving doorgegeven aan onderliggende elementen |
| Versiemodel | Modulair sinds CSS3; individuele modules zoals Selectors, Flexbox, Grid en Color vorderen elk onafhankelijk door de W3C Candidate Recommendation-fasen |
| Aangepaste eigenschappen | Native CSS-variabelen gedeclareerd als `--name: value` en gebruikt via `var(--name)`, waardoor herbruikbare design-tokens mogelijk zijn zonder preprocessor |
| Preprocessor-interoperabiliteit | `.scss`-, `.sass`- en `.less`-bestanden compileren naar gewone `.css`; PostCSS transformeert `.css`-broncode tijdens de build; browsers verwerken alleen de uiteindelijke `.css` |
| Overdrachtcompressie | Wordt gewoonlijk gzip- of Brotli-gecomprimeerd geserveerd via HTTP voor bandbreedtebesparing; het bestand is ongecomprimeerde platte tekst op de schijf |
| Subresource Integrity | Een SHA-256/384/512 hash kan in het HTML-attribuut `<link integrity="…">` worden geplaatst om het opgehaalde bestand te verifiëren; er wordt geen hash opgeslagen in het `.css`-bestand zelf |
| Vendor-prefixes | `-webkit-`, `-moz-` en `-ms-` prefixes beschermden historisch gezien experimentele eigenschappen; de meeste zijn nu verouderd omdat de onderliggende eigenschappen zijn gestandaardiseerd |
| Browser object model | Verwerkt door de browser-engine in het CSSOM (CSS Object Model), dat wordt gecombineerd met de DOM-tree om de uiteindelijke berekende stijlen te berekenen en de pagina te tekenen |
| Standaardbeheerder | W3C CSS Working Group; specificaties worden gepubliceerd als onafhankelijke moduledocumenten, elk met eigen editor-drafts en Candidate Recommendations |
| Uitgebracht | CSS Level 1, December 1996 (W3C Recommendation) |
| Laatste versie | CSS is now modular (CSS3+); modules like Selectors, Flexbox, Grid, Color advance independently |
| Open standaard | Ja · royaltyvrij |
| Specificatie | www.w3.org |
CSS conversies
Community V&A
gevraagd door gebruikersNog geen vragen - wees de eerste om iets te vragen over CSS-bestanden.
