Inline CSS
Wat betekent inline CSS?
Inline CSS is opmaak direct in de HTML-code, bijvoorbeeld met een style-attribuut op één element of een stukje CSS in de kop van de pagina. Het staat dus niet in een apart stijlbestand dat de browser los moet ophalen.
Veelgestelde vragen over inline CSS
Maakt inline CSS mijn website sneller of juist trager?
Dat hangt af van hoeveel en welke CSS je inline zet. Een klein stukje CSS in de kop van de pagina laat je pagina sneller verschijnen. Dit heet kritieke CSS: de opmaak voor alles wat bovenaan direct zichtbaar is. De browser hoeft dan niet eerst op een apart bestand te wachten. Zet je juist veel CSS inline, dan wordt elke pagina zwaarder. De browser kan die opmaak ook niet bewaren in zijn cache, het tijdelijke geheugen voor volgende pagina's. Houd inline CSS dus klein en laat de rest in een extern stijlbestand staan.
Hoe zet ik kritieke CSS inline in WordPress?
Met een snelheidsplugin hoef je dit niet met de hand te doen.
- WP Rocket: zet bij Bestandsoptimalisatie de optie voor het optimaliseren van de CSS-levering aan.
- LiteSpeed Cache: zet bij Page Optimization de optie Load CSS Asynchronously aan. De plugin maakt dan kritieke CSS aan.
- Autoptimize: gebruik de optie Inline and Defer CSS.
Test daarna je belangrijkste pagina's in een privévenster. Zie je heel kort een pagina zonder opmaak? Dan klopt de kritieke CSS niet en laat je die opnieuw genereren. Meet het effect met PageSpeed Insights.
Kan ik niet gewoon overal style-attributen gebruiken?
Dat kan, maar het wordt snel een rommeltje. Een style-attribuut geldt alleen voor dat ene element. Wil je later je huisstijlkleur of lettergrootte aanpassen, dan moet je elke pagina en elk blok apart langs. Het gebeurt ook ongemerkt: als je in de blokeditor of een paginabouwer per blok een kleur of marge instelt, leg je vaak losse opmaak vast. Beter is het om vaste stijlen centraal vast te leggen. Gebruik bijvoorbeeld de globale stijlen van je thema of een CSS-klasse die je op meerdere plekken hergebruikt.
Waarom overschrijft inline CSS mijn eigen stijlregels?
Inline CSS weegt zwaarder dan regels uit een stijlbestand. Browsers kijken naar specificiteit: hoe specifieker een regel, hoe meer voorrang die krijgt. Een style-attribuut op een element wint daardoor bijna altijd van je eigen CSS. Zo los je het op:
- Zoek met rechtermuisklik en Inspecteren uit waar de opmaak vandaan komt.
- Haal de instelling weg in de blokeditor, je thema of de plugin die hem toevoegt.
- Lukt dat niet, zet dan als noodoplossing !important achter je regel.
Gebruik !important spaarzaam, anders loop je later opnieuw vast.
Waarom moet CSS in e-mailnieuwsbrieven inline staan?
Veel e-mailprogramma's negeren CSS uit externe bestanden en soms ook CSS uit de kop van de e-mail. Vooral bepaalde versies van Outlook zijn daar streng in. Opmaak die direct op elk element staat, komt wel goed door. De editors van nieuwsbriefprogramma's zoals Mailchimp regelen dat meestal automatisch bij het versturen. Schrijf je zelf een HTML-mail, gebruik dan een zogeheten CSS-inliner: een tool die je opmaak automatisch op de elementen zet. Stuur altijd eerst een proefmail naar verschillende e-mailprogramma's en bekijk die ook op je telefoon.
