CSS Email Inliner (Insérateur d'attribut de style)

Beaucoup de clients e-mail — notamment les versions anciennes d'Outlook et plusieurs fournisseurs de messagerie web — suppriment entièrement l'élément head ou le sandboxent de manière à ignorer les styles externes et intégrés. Les attributs style sur chaque élément sont la seule forme de déclaration respectée par tous les principaux clients e-mail, donc l'étape d'inline est une exigence absolue pour les designs qui doivent avoir la même apparence sur Gmail, Outlook, Yahoo et Apple Mail.

La spécificité est le poids que CSS attribue à un sélecteur en fonction de ses IDs, classes, attributs, pseudo-classes et types d'éléments. Lorsque deux règles ciblent la même propriété sur le même élément, le navigateur garde la valeur de la règle ayant la plus grande spécificité ; les égalités sont résolues par l'ordre source, avec la règle plus tardive gagnante. Un outil d'inline doit répéter cet algorithme déclaration par déclaration, sinon une règle à faible spécificité pourrait surcharger une règle à haute spécificité, et la conception affichée changerait sans être détectée.

Dans le cascade standard, les styles inline se trouvent à un niveau supérieur de source par rapport aux feuilles d'ordre d'auteur, donc ils battent généralement toute règle de classe ou d'élément. L'indicateur !important est l'exception : une déclaration !important d'une feuille d'ordre d'auteur bat une déclaration inline non importante. C'est pourquoi un bouton coloré en blanc !important dans une classe restera blanc même si l'élément porte style=\"color: blue\".

L'attribut style contient des déclarations qui s'appliquent inconditionnellement à l'élément sur lequel il se trouve. Les règles de pseudo-classe décrivent un état — hover, focus, checked — et les pseudo-éléments décrivent du contenu généré qui n'a pas de nœud DOM réel à y attacher. Aucun de ces concepts n'a de forme correspondante en inline, donc tout outil d'inline doit laisser ces règles dans un bloc résiduel pour les petits groupes de clients e-mail qui les supportent.

Les requêtes de média sont des règles conditionnelles dont les déclarations s'appliquent uniquement lorsque la fenêtre de visualisation répond à une contrainte. Puisque l'attribut style ne peut pas exprimer une application conditionnelle, les requêtes de média doivent être conservées telles quelles dans un bloc . Les conceptions réactives s'appuient sur des requêtes min-width et max-width pour changer les layouts sur mobile, donc les supprimer ferait disparaître entièrement le comportement réactif.