Zet de CSS van een e-mail inline
Outlook en verschillende webmailprogramma’s negeren of verwijderen een <style>-blok. Inlinen is de saaie, mechanische stap tussen een ontwerp dat in een browser werkt en een dat in een postvak werkt.
- Draait volledig in je browser
- Werkt offline
- Geen upload
- Geen registratie
- Geen watermerk
De tool wordt geladen…
Hoe het werkt
- Plak de HTML met het <style>-blok erin.
- Druk op “Inline the CSS” (CSS inline zetten).
- Kopieer of download het resultaat, en controleer het in de preview hieronder.
Waarom er niets wordt geüpload
Alles wat deze pagina doet, doet code die in je browsertabblad draait, met dezelfde engine die ook webpagina’s tekent. Je bestand wordt van schijf naar het geheugen van dat tabblad gelezen, daar bewerkt en weer weggeschreven als download. Het wordt nergens naartoe gestuurd — niet naar ons, en niet naar een derde partij.
Controleer het zelf
- Open de ontwikkelaarstools van je browser (F12) en kies het tabblad Netwerk.
- Laad je bestand en start de tool.
- De enige verzoeken die je ziet, halen de code van de tool zelf op — en bij een paar zware tools hun opensource-engine van een openbare CDN — plus één kleine bezoekmelding aan loreatec.jp (adres en titel van de pagina, meer niet). In geen van die verzoeken zit jouw bestand.
Veelgestelde vragen
Waarom kunnen media queries niet inline worden gezet?
Omdat aan een inline stijl geen voorwaarde vastzit — die geldt altijd. Een media query is een voorwaarde, dus die kan alleen in een <style>-blok bestaan. Daarom heeft een responsieve e-mail beide nodig: inline stijlen voor het basisontwerp, en een <style>-blok voor de telefoonopmaak, met de wetenschap dat programma’s die <style> verwijderen, het basisontwerp tonen.
Wat gebeurt er met :hover?
Zelfde probleem, zelfde antwoord: het blijft in het <style>-blok staan. Behandel hover-effecten als een bonus voor de programma’s die ze ondersteunen, nooit als iets waar het bericht van afhangt.
Wat wint, mijn bestaande inline stijl of de stylesheet?
Die van jou. Alles wat al in een style-attribuut staat, blijft behouden en wordt na de regels uit de stylesheet geplaatst, zodat het ze blijft overschrijven — net als in een browser.
Is dit hetzelfde als wat mijn nieuwsbrieftool doet?
De meeste daarvan zetten het bij het versturen inline, ja. Dit is voor het geval dat je HTML aan iemand anders overhandigt, via een API verstuurt, of uitzoekt waarom een regel het niet heeft overleefd.