CSS-inndata

Inline-stilfragmenter

Hva er CSS til Inline-konvertering?

Trenger du å konvertere CSS-stilarkregler til inline style-attributter? Dette verktøyet gjør akkurat det. Det tar CSS-reglene dine og konverterer dem til ferdige inline-stilfragmenter du kan lime inn direkte i HTML-elementer.

Inline-stiler er nødvendige når du jobber med HTML-e-post, der eksterne stilark fjernes av e-postklienter som Gmail og Outlook. De er også avgjørende for e-posttestverktøy, HTML-til-bilde-konverterere og eldre HTML-genereringssystemer som ikke støtter lenket CSS.

Konvertereren håndterer alle CSS-egenskaper, vendor-prefikser, !important-flagget, shorthand-egenskaper som font og margin, og media queries. Alt skjer direkte i nettleseren — ingen opplasting, ingen datalagring, fullstendig trygt.

Slik bruker du CSS til Inline-verktøyet

Følg disse trinnene for å konvertere CSS-regler til inline-stilfragmenter.

Lim inn, last opp eller last inn eksempeldata

Lim inn CSS i det venstre CSS-inndata-feltet eller klikk på Last opp for å laste inn en .css-fil. Klikk på Eksempeldata for å se eksempelformatering. Eksempel:

.subscriber-card {
  border: 1px solid #e0e0e0;
  padding: 16px;
  border-radius: 8px;
}
.plan-badge {
  display: inline-block;
  padding: 4px 8px;
  background: #e3f2fd;
}

Se inline-stilfragmenter

Det høyre Inline-stilfragmenter-feltet viser hver selektor med formatet style="property: value; ...". Kopier fragmenter til HTML-elementer, e-postmaler eller eldre systemer som krever inline-stiler.

Kopier eller last ned

Klikk på Kopier for å kopiere til utklippstavlen, eller Last ned for å lagre. Bruk Tøm for å starte på nytt.

Når du faktisk bruker dette

Design av HTML-e-post

E-postklienter fjerner eksterne stilark. Bygg e-postdesignet ditt i CSS og bruk deretter dette verktøyet for å konvertere til inline-stiler. Fungerer utmerket med e-postplattformer som Campaign Monitor og Mailchimp.

HTML til Bilde-konvertering

Verktøy som konverterer HTML til bilder eller PDF-er laster ikke inn eksterne CSS-filer, så de trenger inline-stiler. Konverter stilarket ditt til inline-stiler før du sender HTML til disse konvertererne.

Migrering av legacy-systemer

Migrerer du fra moderne webrammeverk til eldre systemer som bare støtter inline-stiler? Dette verktøyet automatiserer konverteringen og sparer timer med manuell kopiering og formatering.

Dynamisk HTML-generering

Bygger du HTML-generatorer eller malsystemer der du trenger inline-stiler for hvert element? Konverter hoved-CSS-en din én gang og referer deretter til inline-stilfragmentene i genereringskoden din.

Ofte stilte spørsmål

Hvorfor kan jeg ikke bare lenke en CSS-fil i HTML-e-post?

De fleste e-postklienter (Gmail, Outlook, Apple Mail) fjerner <link>- og <style>-tagger av sikkerhetshensyn. Inline-stiler er en av få måter å pålitelig style HTML-e-post. Se Campaign Monitors CSS-støtteguide.

Konverteres komplekse selektorer?

Konvertereren håndterer de fleste CSS-selektorer. Enkle selektorer (elementer, klasser, ID-er) konverteres direkte. For pseudoselektorer som :hover, som ikke kan være inline, indikerer verktøyet at de ikke kan konverteres.

Kan jeg konvertere media queries til inline-stiler?

Media queries kan ikke uttrykkes som inline-stiler — de krever separate <style>-blokker. Konvertereren identifiserer media query-regler og separerer dem fra stiler som kan bygges inn.

Håndterer det shorthand-egenskaper?

Absolutt. Shorthand-egenskaper som margin: 10px 20px, padding: 5px og font: bold 12px Arial ekspanderes automatisk til fullstendige ekvivalenter for maksimal kompatibilitet med e-postklienter.

Hva med !important-deklarasjoner?

!important-flagget bevares i inline-stiler nøyaktig som skrevet. Det fungerer på samme måte — tvinger høyere prioritet og overstyrer motstridende stiler.

Lagres eller analyseres CSS-dataene mine?

Nei. All konvertering skjer i nettleseren med JavaScript. CSS-en din forlater aldri datamaskinen og vi lagrer, analyserer eller logger ingen data. Fullt personvern garantert.

CSS til Inline-stiler