CSS-inliner online

Werking en mogelijkheden

De CSS-inliner is bedoeld om eenvoudige CSS-regels uit style-elementen om te zetten naar inline style-attributen. Dit is handig voor e-mailings die geen externe stylesheets ondersteunen.

Concreet voorbeeld

Stel dat u de volgende HTML invoert:

<style>p{color:red}</style><p>Hallo</p>

Na conversie krijgt het p-element een inline stijl: style="color: red;". Als 'remove-style' is aangevinkt, verdwijnt het style-element en blijft alleen het geparste document over.

Beperkingen

Deze tool is een lichtgewicht converter. Het implementeert niet de volledige CSS-cascade, specificiteit, media queries, keyframes, pseudo-elementen, geneste CSS of externe stylesheets. Ook berekende stijlen worden niet toegepast. De browser kan de HTML tijdens het parsen normaliseren, dus de uitvoer kan afwijken van de invoer.

Ongeldige selectors worden overgeslagen. De conversie gebeurt volledig lokaal; er worden geen externe stylesheets of externe bronnen geladen. Het resultaat is geen sanitizer of compatibiliteitstester. Controleer de visuele weergave altijd in de doelomgeving.

Veelgestelde vragen

Waarom worden sommige stijlen niet toegepast?

De tool verwerkt alleen eenvoudige selectorblokken die met accolades worden gevonden. Complexe selectors, media queries of keyframes worden niet ondersteund. Ook als de CSS buiten een style-element staat (bijvoorbeeld in een apart CSS-bestand) wordt deze niet geladen.

Wat betekent het selectievakje 'remove-style'?

Als dit is ingeschakeld, worden alle style-elementen uit het uiteindelijke document verwijderd. De inline stijlen blijven behouden. Als u het uitschakelt, blijven de oorspronkelijke style-elementen staan.

Kan ik een volledige e-mailtemplate met media queries verwerken?

Nee, media queries worden niet geïnterpreteerd. De tool past alleen directe stijlregels toe op elementen. Voor geavanceerde responsieve e-mails is een gespecialiseerde oplossing nodig.

Controlelijst

• Controleer of de invoer geldige HTML is.
• Zet extra CSS in het tweede veld als dat nodig is.
• Bepaal of u de style-elementen wilt verwijderen.
• Inspecteer de uitvoer in uw doel-e-mailclient.
• Houd rekening met de beperkingen van de tool.