CSS en entrée

Extraits de styles inline

Exemples CSS vers inline

Convertir les règles CSS en extraits style inline pour email ou HTML. Exemple :

Styles de titre et bouton

CSS en entrée :

Entrée

Sortie des extraits inline :

Sortie

Utilisez Exemple ci-dessus pour charger plus de données d'exemple.

Qu'est-ce que CSS vers styles inline ?

Les styles inline sont des attributs style sur les éléments HTML. Les clients email, certains CMS et certains frameworks exigent des styles inline car ils suppriment ou ignorent les feuilles de style externes. Cet outil convertit les règles CSS en extraits style="..." inline que vous pouvez coller dans le HTML. Les spécifications W3C CSS définissent le format source.

La conversion s'exécute entièrement dans votre navigateur. Rien n'est envoyé à un serveur. La sortie est prête pour le HTML. Pour un inlining complet d'email HTML (correspondance des sélecteurs aux éléments), utilisez un outil dédié comme Juice ou similaire. Cet outil génère des extraits de style à partir des règles CSS.

Comment utiliser cet outil

Coller ou télécharger du CSS

Copiez votre CSS et collez-le dans l'éditeur de gauche. Vous pouvez aussi cliquer sur Télécharger pour charger un fichier .css. Le bouton Exemple charge des données d'exemple. Un CSS invalide affichera une erreur.

Vérifier les extraits inline

Le panneau de droite affiche les extraits de style pour chaque règle. Chaque extrait est une chaîne <code>style="..."</code> que vous pouvez ajouter aux éléments HTML. Les sélecteurs sont listés pour savoir quel élément reçoit quels styles.

Copier ou télécharger

Utilisez Copier ou Télécharger. Collez les extraits dans votre HTML. Pour formater le CSS d'abord, utilisez le Formateur CSS. Pour minifier, utilisez le Minificateur CSS.

Comment fonctionne la conversion

L'outil analyse vos règles CSS et convertit chaque bloc de déclaration en une chaîne style="propriété: valeur; ...". Les sélecteurs sont listés pour savoir quel extrait s'applique à quel élément. La sortie suit la syntaxe de l'attribut style HTML. Pour un inlining complet HTML+CSS (correspondance automatique des sélecteurs aux éléments), des outils comme Juice ou Can I Email documentent le support des clients email.

Quand CSS vers inline aide

Le HTML d'email est le cas d'usage le plus courant. Gmail, Outlook et de nombreux clients suppriment les balises <style> et les feuilles de style externes. Les styles inline sont le moyen le plus fiable de styliser les emails. Convertir votre CSS ici vous donne des extraits à ajouter aux <td>, <div> et autres éléments.

Les systèmes CMS, générateurs PDF ou outils legacy qui acceptent le HTML mais pas les fichiers CSS ont souvent besoin de styles inline. Convertir ici fournit le format attendu. Pour les préfixes vendeur avant l'inlining, utilisez le Préfixeur CSS. Pour formater ou minifier le CSS d'abord, utilisez le Formateur CSS ou le Minificateur CSS.

Questions fréquentes

Inligne-t-il dans du HTML complet ?

Cet outil génère des extraits de style à partir des règles CSS. Il n'analyse pas le HTML ni n'applique les styles aux éléments. Pour une conversion complète (HTML + CSS vers HTML avec styles inline), utilisez un outil comme Juice ou similaire.

Mes données sont-elles privées ?

Oui. La conversion s'exécute entièrement dans votre navigateur. Aucune donnée n'est envoyée à un serveur.

Qu'en est-il des pseudo-classes ?

Les pseudo-classes comme :hover et ::before ne peuvent pas être inlinées. Les styles inline ne prennent en charge que les propriétés statiques. Utilisez-les pour les styles de base ; les clients email peuvent prendre en charge un <style> limité pour le survol.

Qu'en est-il des media queries ?

Les media queries ne peuvent pas être inlinées. Les styles inline sont par élément. Pour un email responsive, utilisez une approche hybride : styles de base inline et <code><style></code> pour les media queries là où c'est supporté.

Spécificité et héritage ?

Les styles inline ont une haute spécificité. Quand vous collez un extrait dans un élément, il remplace la plupart des autres styles. L'ordre compte quand plusieurs règles s'appliquent au même élément.

Outils connexes

Pour la spécification CSS : W3C CSS. MDN CSS est la référence. Can I Email documente le support des clients email pour le CSS.