CSS til inline-stiler — konverterer
Konverter CSS-regler til inline-stilattributter for HTML-eposter og maler.
CSS-inndata
Inline-stilutdrag
Eksempler på CSS til inline
Konverter CSS-regler til inline-style-utdrag for e-post eller HTML. Eksempel:
Overskrift- og knappstiler
CSS-inndata:
Inline-utdata:
Bruk Eksempel over for å laste mer eksempeldata.
Hva er CSS til inline-stiler?
Inline-stiler er style-attributter på HTML-elementer. E-postklienter, enkelte CMS og rammeverk krever inline-stiler fordi de fjerner eller ignorerer eksterne stilark. Verktøyet konverterer CSS-regler til inline-style="..."-utdrag du kan lime inn i HTML. W3C CSS-spesifikasjonene beskriver kildeformatet.
Konvertering skjer helt i nettleseren din. Ingenting sendes til server. Utdata er klar for HTML. For full HTML-e-post-inlining (koble selektorer til elementer), bruk et dedikert verktøy som Juice. Dette verktøyet genererer stilutdrag fra CSS-regler.
Slik bruker du verktøyet
Lim inn eller last opp CSS
Kopier CSS og lim inn i venstre editor. Du kan også klikke Last opp for å åpne en .css-fil. Eksempel laster eksempeldata. Ugyldig CSS viser feil.
Gjennomgå inline-utdrag
Høyre panel viser stilutdrag for hver regel. Hvert utdrag er en style="..."-streng du kan legge på HTML-elementer. Selektorer listes slik at du vet hvilket element som får hvilke stiler.
Kopier eller last ned
Bruk Kopier eller Last ned. Lim utdrag inn i HTML. Formater CSS først med CSS-formaterer. Minifiser med CSS-minifiserer.
Slik fungerer konverteringen
Verktøyet parser CSS-regler og konverterer hver deklarasjonsblokk til style="egenskap: verdi; ...". Selektorer listes slik at du vet hvilket utdrag som hører til hvilket element. Utdata følger HTML style-attributt-syntaks. For full HTML+CSS-inlining bruk verktøy som Juice; Can I Email dokumenterer e-postklientstøtte.
Når CSS til inline hjelper
E-post-HTML er det vanligste bruksområdet. Gmail, Outlook og mange klienter fjerner <style>-tagger og eksterne stilark. Inline-stiler er den mest pålitelige måten å style e-post på. Å konvertere CSS her gir utdrag du kan legge på <td>, <div> og andre elementer.
CMS-systemer, PDF-generatorer eller eldre verktøy som tar HTML men ikke CSS-filer trenger ofte inline-stiler. Konvertering her gir formatet de forventer. For leverandørprefiks før inlining, bruk CSS-prefiks. For formatering eller minifisering først, CSS-formaterer eller CSS-minifiserer.
Ofte stilte spørsmål
Inline-er det hele HTML-en?
Verktøyet genererer stilutdrag fra CSS-regler. Det parser ikke HTML og bruker ikke stiler på elementer. For full konvertering (HTML + CSS til HTML med inline-stiler), bruk Juice eller lignende.
Er dataene mine private?
Ja. Konvertering skjer helt i nettleseren din. Ingen data sendes til server.
Hva med pseudoklasser?
Pseudoklasser som :hover og ::before kan ikke inline-es. Inline-stiler støtter bare statiske egenskaper. Bruk dem for grunnstiler; e-postklienter kan støtte begrenset <style> for hover.
Hva med media queries?
Media queries kan ikke inline-es. Inline-stiler er per element. For responsiv e-post, bruk hybrid: inline grunnstiler og <style> for media queries der det støttes.
Spesifisitet og arv?
Inline-stiler har høy spesifisitet. Når du limer inn et utdrag på et element, overstyrer det meste annet. Rekkefølge betyr noe når flere regler gjelder samme element.
Relaterte verktøy
CSS-spesifikasjon: W3C CSS. Referanse: MDN CSS. Can I Email dokumenterer CSS-støtte i e-postklienter.