CSS-inliner voor e-mail
Verplaats CSS van een style-blok naar inline style-attributen zodat het in e-mailclients werkt.
CSS-inliner voor e-mail
De meeste e-mailclients negeren of verwijderen CSS geschreven in een <style>-blok — Gmails webinterface is het bekendste voorbeeld. De oplossing is om elke regel op het element dat het aanwijst als een style=""-attribuut te verplaatsen, en dat is precies wat dit hulpmiddel doet: plak HTML met een <style>-blok en ontvang dezelfde markup terug met inline styles, klaar om in een campagne of transactionele sjabloon in te voegen.
De samenvoeging respecteert CSS-specificiteit standaard, dus een regel als #footer wint van een eenvoudige a, zelfs als die regel later in het stylesheet verschijnt — zet "Selecteur-specificiteit respecteren" uit om in plaats daarvan op bronvolgorde samen te voegen. Regels die niet kunnen worden inlined — media queries, :hover, andere at-rules — worden nooit stilzwijgend verwijderd: "Regels behouden die niet kunnen worden inlined" houdt ze in een getrimde <style>-blok, terwijl "Origineel <style>-blok verwijderen" bepaalt of dat blok überhaupt wordt uitgesteld. "Legacy width/bgcolor-attributen toevoegen" spiegelt width, height en background-color naar de eenvoudige attributen die oudere Outlook-builds verwachten, "Ongebruikte classes en ID's verwijderen" ruimt selectors op waarnaar niets verwijst, en "Uitvoer minimaliseren" strijkt overige witruimte glad.
Selecteurondersteuning omvat type-, class-, ID- en attribuutselectoren, plus afstammings- en kindcombinators — de patronen die echte e-mailstijlbladen gebruiken. Het eigen style=""-attribuut van een element wint altijd van alles wat wordt samengevoegd, passend hoe browsers het cascade toepassen. Met "Waarschuwingen voor niet-ondersteunde eigenschappen weergeven" ingeschakeld, worden eigenschappen die veel clients negeren — float, position: fixed, transforms, box-shadow — gemarkeerd in een opmerking aan de bovenkant van de uitvoer, zodat je ze voor het testen opvangt.
Alles draait lokaal in uw browser: de HTML die u plakt, wordt nergens geüpload. Kopieer het resultaat, download het als .txt-bestand, of stuur het rechtstreeks naar een ander hulpmiddel om het schoon te maken.