Keine Werbung mögen? Gehen Werbefrei Heute 

CSS-E-Mail-Inliner (Eigenschaftsattribut-Inliner)

EntwicklerText

ANZEIGE Entfernen?

EINGANG

Automatischer Prozess

HTML mit

Führung

CSS Email Inliner (Style Attribute Inliner)

CSS-E-Mail-Inliner (Eigenschaftsattribut-Inliner)

Wandelt HTML mit einem <style> Block in eine für E-Mails geeignete Markupsyntax um, indem jede CSS-Regel in Inline-Stil-"Attribute verschoben wird. E-Mail-Client entfernen oder ignorieren <style> Blöcke, daher ist die Inlining die einzige zuverlässige Methode, um das Design über Gmail, Outlook, Yahoo und Apple Mail hinweg zu erhalten.

Fügen Sie Ihren vollständigen HTML-Code auf der linken Seite ein; das Tool analysiert jeden Selektor, löst die CSS-Spezifität genau wie Browser und schreibt die gewinnenden Deklarationen auf jedes passende Element. Regeln wie :hover und jede @media-Abfrage werden in einem residualen <style> Block behalten, da E-Mail-Client, die sie unterstützen, sie dort immer noch benötigen.

Nutzung

Fügen Sie Ihren HTML-Code – vollständiges Dokument oder Fragment mit einem <style> Block – in das Eingabefeld ein.
Bestimmen Sie, ob Sie Medienabfragen und Pseudo-Klassen-Regeln behalten möchten (empfohlen für responsive E-Mails).
Fügen Sie optional die Klasse-Attribute aus dem Ergebnis entfernen, sobald die Styles eingefügt wurden.
Aktivieren oder deaktivieren Sie die Formatierung, je nachdem, ob Sie ein lesbares oder kompaktes Ergebnis wünschen.
Kopieren Sie den eingefügten HTML-Code oder speichern Sie ihn als Datei und fügen Sie ihn direkt in Ihren E-Mail-Anbieter ein.

Funktionen

Spezifitätsbewusstes Zusammenführen – Löst IDs, Klassen, Attribute und Elementtypen genau wie die Browserkaskade.
!important-Verarbeitung – Externe !important-Declarations gewinnen korrekt gegen einfache Inline-Stile, entsprechend der CSS-Spezifikation.
Medienabfrageerhaltung – Responsive @media-Regeln werden intakt behalten, damit Ihre Mobilbrechpunkte weiterhin aktiviert werden.
Pseudo-Klassen-Fallback – Regeln wie :hover, :focus und ::before können nicht eingefügt werden; das Tool behält sie in einem verkleinerten <style> Block.
Mehrere <style> Blöcke – Behandelt Dokumente mit mehreren Stiltags in der <head> oder <body>.
Optionale Klasse-Entfernung – Entfernen Sie jetzt überflüssige class="" Attribute für eine schlankere Payload.
Formatierte Ausgabe – Indentierter, lesbarer HTML-Code oder kompakter einzeiliger Ausgabe.
100% clientseitig – Ihr HTML verlässt den Browser nie. Keine Upload, keine Serververarbeitung.

ANZEIGE Entfernen?

 Häufig gestellte Fragen

Warum benötigen HTML-E-Mails CSS, die eingefügt werden, anstatt einen Style-Block zu verwenden?

Viele E-Mail-Client – vor allem ältere Versionen von Outlook und mehrere Webmail-Anbieter – entfernen das Kopf-Element vollständig oder sandboxen die Nachricht, sodass externe und eingebettete Styles ignoriert werden. Inline-Stil-Attribute auf jedem Element sind die einzige Deklarationsform, die alle Hauptmail-Client respektieren, daher ist das Inlining eine notwendige Voraussetzung für Designs, die gleich aussehen müssen in Gmail, Outlook, Yahoo und Apple Mail.
Was ist CSS-Spezifität und warum ist die Kaskade-Reihenfolge für das Inlining wichtig?

Spezifität ist das Gewicht, das CSS einem Selektor aufgrund seiner IDs, Klassen, Attribute, Pseudo-Klassen und Elementtypen verleiht. Wenn zwei Regeln auf die gleiche Eigenschaft eines Elements abzielen, behält der Browser den Wert aus der Regel mit höherer Spezifität; bei Gleichstand wird die Reihenfolge entschieden, wobei die spätere Regel gewinnt. Ein Inliner muss diesen Algorithmus deklaration für deklaration neu durchspielen, sonst könnte eine Regel mit geringerer Spezifität eine Regel mit höherer Spezifität überschreiben und das angezeigte Design würde schweigend verändert werden.
Wie interagiert das !important-Flag mit Inline-Stilen?

Im Standardkaskade sitzen Inline-Stile auf einer höheren Stelle als Autor-Stylesheets, sodass sie normalerweise jede Regel auf Klassen- oder Elementebene überwinden. Das !important-Flag ist die einzige Ausnahme: Eine !important-Regel aus einem Autor-Stylesheet gewinnt gegen eine nicht-important Inline-Regel. Deshalb wird ein Button, der weiß !important in einer Klasse ist, immer weiß angezeigt, selbst wenn das Element style="color: blue" trägt.
Warum können Pseudo-Klassen-Regeln wie :hover oder Pseudo-Elemente wie ::before nicht eingefügt werden?

Das Style-Attribut enthält Deklarationen, die unbedingt auf das Element angewendet werden. Pseudo-Klassen-Regeln beschreiben einen Zustand – Hover, Focus, Checked – und Pseudo-Elemente beschreiben erzeugten Inhalt, der kein echtes DOM-Element hat. Kein Konzept hat eine entsprechende Inline-Form, daher muss jedes Inliner diese Regeln in einem residualen Style-Block behalten, damit die kleinen Gruppe von E-Mail-Client, die sie unterstützen, sie erhalten.
Was passiert mit @media-Abfragen während des Inlining-Prozesses?

Media-Abfragen sind bedingte Regeln, deren Deklarationen nur dann gelten, wenn das Fenster eine Bedingung erfüllt. Da das Style-Attribut keine bedingte Anwendung ausdrücken kann, müssen Media-Abfragen genau wie ursprünglich in einem Style-Block erhalten bleiben. Responsive E-Mail-Designs setzen auf min-width und max-width-Abfragen, um Layouts auf Mobilgeräten zu wechseln, daher würde die Entfernung dieser Abfragen das responsive Verhalten vollständig zerstören.

Möchten Sie werbefrei genießen? Werde noch heute werbefrei



 Erweiterungen installieren

IO-Tools zu Ihrem Lieblingsbrowser hinzufügen für sofortigen Zugriff und schnellere Suche

恵 Die Anzeigetafel ist eingetroffen!

Anzeigetafel ist eine unterhaltsame Möglichkeit, Ihre Spiele zu verfolgen. Alle Daten werden in Ihrem Browser gespeichert. Weitere Funktionen folgen in Kürze!

ANZEIGE Entfernen?