HTeuMeuLeu

Résoudre les problèmes de mode sombre de Gmail avec les modes de fusion en CSS

Depuis ses débuts en octobre 2019, le mode sombre (« dark mode ») de Gmail cause pas mal d’arrachage de cheveux. Les choses se sont améliorées et uniformisées au fil du temps, mais il reste encore des différences majeures entre le mode sombre de Gmail sur iOS contre celui sur Android.

Un des plus gros problèmes sur iOS est que Gmail insiste pour changer n’importe quelle couleur de texte clair en une couleur de texte sombre. Donc un email déjà sombre avec du texte blanc sur un fond noir sera transformé en texte noir sur fond blanc. Non seulement ça me semble un peu contre productif, mais ça créé aussi de vrais problèmes de lisibilité et d’accessibilité.

Voici par exemple un email de Nest.

Ça fait un moment que je réfléchis à comment on pourrait résoudre ça. Et les modes de fusion en CSS (Blend Modes) me sont restés en tête depuis qu’ils sont supportés dans Gmail. Voici donc comment résoudre certains problèmes du mode sombre de Gmail avec des modes de fusion en CSS.

1. Le code de base

Pour cet exemple, on va commencer en utilisant une seule <div> avec un fond noir et un texte blanc.

<div style="background:#000; color:#fff;">
    Lorem ipsum dolor, sit amet, consectetur adipisicing elit.
</div>

2. Comment Gmail transforme les couleurs

Si vous ouvrez un email avec le code ci-dessus dans Gmail sur iOS en mode sombre, vous verrez que les couleurs auront changé. Je n’ai jamais vraiment compris comment Gmail fait pour modifier les couleurs. (On garde toujours notre code d’origine si on copie/colle l’email ou si on le transfère.) Mais le résultat final est similaire à ce que donnerait le code suivant.

<div style="background:#fff; color:#000;">
    Lorem ipsum dolor, sit amet, consectetur adipisicing elit.
</div>

3. Ajout des modes de fusion

Revenons à notre code initial et commençons à faire de la magie avec les modes de fusion. On va ajouter deux <div> internes à notre code, chacune avec un fond noir et un mode de fusion différent.

<div style="background:#000; color:#fff;">
    <div style="background:#000; mix-blend-mode:screen;">
        <div style="background:#000; mix-blend-mode:difference;">
            Lorem ipsum dolor, sit amet, consectetur adipisicing elit.
        </div>
    </div>
</div>

Et pour notre tour final, on va utiliser une image de fond créée par un dégradé linear-gradient en CSS pour maintenir notre couleur de fond souhaitée. (J’ai appris cette technique grâce à Annett Forcier pendant sa présentation sur le mode sombre avec Anne Tomlin l’an dernier.)

<div style="background:#000; background-image:linear-gradient(#000,#000); color:#fff;">
    <div style="background:#000; mix-blend-mode:screen;">
        <div style="background:#000; mix-blend-mode:difference;">
            Lorem ipsum dolor, sit amet, consectetur adipisicing elit.
        </div>
    </div>
</div>

Regardons petit à petit comment ce code est interprété dans Gmail iOS et pourquoi ça fonctionne.

3.1 Comment Gmail transforme ce code

Premièrement, Gmail va changer les couleurs. Le texte blanc va devenir noir, et les fonds noirs vont devenir blancs, à l’exception du dégradé linear-gradient. Notre code finira donc par ressembler à ça.

<div style="background:#fff; background-image:linear-gradient(#000,#000); color:#000;">
    <div style="background:#fff; mix-blend-mode:screen;">
        <div style="background:#fff; mix-blend-mode:difference;">
            Lorem ipsum dolor, sit amet, consectetur adipisicing elit.
        </div>
    </div>
</div>

3.2 Les modes de fusion

Parlons maintenant des modes de fusion. Si on prend la définition de MDN :

Un mode de fusion est une méthode de calcul permettant de déterminer la couleur finale d’un pixel lorsque plusieurs couches sont empilées.

Une opération de fusion nécessite une « couleur source » et la fusionne avec une « couleur d’arrière plan ». Le résultat exact dépend du type de mode de fusion qu’on utilise.

On peut utiliser des modes de fusion dans Photoshop. Et on peut utiliser des modes de fusion en CSS grâce à deux propriétés : background-blend-mode et mix-blend-mode. Les deux ont le même support dans Gmail. Mais comme notre objectif ici est de maintenir la couleur d’un texte, on va utiliser uniquement la propriété mix-blend-mode.

Can I email… mix-blend-mode

Si vous voulez en savoir plus sur les modes de fusion en CSS, je vous recommande très chaudement les articles suivants (en anglais) :

3.3 La première fusion : difference

La première fusion qui a lieu dans notre code est une difference. D’après la définition de la spécification du W3C, une fusion par différence « soustrait la plus sombre des deux couleurs de la couleur la plus claire ». Mathématiquement, le résultat est la valeur absolue de la différence entre notre couleur source (Cs) et notre couleur d’arrière-plan (Cb).

B(Cb, Cs) = |Cb - Cs|

Si on revient à notre code, ce mode de fusion va se passer entre notre texte noir sur fond blanc (suite à la transformation de Gmail) et son parent avec un fond blanc.

<div style="background:#fff;">
    <div style="background:#fff; mix-blend-mode:difference;">
        Lorem ipsum dolor, sit amet, consectetur adipisicing elit.
    </div>
</div>

Mathématiquement, ça signifie que notre texte noir de la source devient…

|Cb - Cs| = |rgb(255,255,255) - rgb(0,0,0)|
          = rgb(255,255,255)

… blanc ! Et le fond blanc de cette source fusionné avec le fond blanc de l’arrière-plan devient…

|Cb - Cs| = |rgb(255,255,255) - rgb(255,255,255)|
          = rgb(0,0,0)

… noir !

Parfait ! Mais attendez, que se passe-t-il si on applique ça dans Gmail en mode clair ? Notre code de base serait comme le suivant.

<div style="background:#000;">
    <div style="background:#000; color:#fff; mix-blend-mode:difference;">
        Lorem ipsum dolor, sit amet, consectetur adipisicing elit.
    </div>
</div>

Notre texte blanc de la source fusionné avec l’arrière-plan noir devient…

|Cb - Cs| = |rgb(0,0,0) - rgb(255,255,255)|
          = rgb(255,255,255)

… blanc ! Et notre fond noir en source fusionné avec le fond noir de l’arrière-plan devient…

|Cb - Cs| = |rgb(0,0,0) - rgb(0,0,0)|
          = rgb(0,0,0)

… noir ! Ça fonctionne toujours !

Mais attendez, on n’aurait pas fini là ? Si vous avez seulement besoin d’un texte blanc sur un fond noir, alors vous pouvez en effet vous arrêter ici. Mais si vous avez besoin d’un texte blanc sur un fond coloré, on va avoir besoin de ce deuxième mode de fusion.

3.4 La deuxième fusion : screen

Revenons un peu en arrière et recommençons avec un texte blanc sur un fond violet (#639).

<div style="background:#639; background-image:linear-gradient(#639,#639); color:#fff;">
    <div style="background:#000; mix-blend-mode:screen;">
        <div style="background:#000; mix-blend-mode:difference;">
            Lorem ipsum dolor, sit amet, consectetur adipisicing elit.
        </div>
    </div>
</div>

Premièrement, Gmail va modifier ces couleurs. Le noir devient blanc, le blanc devient noir, et le violet devient légèrement plus clair.

<div style="background:#c7a4ef; background-image:linear-gradient(#639,#639); color:#000;">
    <div style="background:#fff; mix-blend-mode:screen;">
        <div style="background:#fff; mix-blend-mode:difference;">
            Lorem ipsum dolor, sit amet, consectetur adipisicing elit.
        </div>
    </div>
</div>

Ensuite, la première fusion (difference) s’applique. Mais à ce stade, on obtient exactement le même résultat qu’avant : un texte blanc sur fond noir.

Entre alors en scène notre deuxième fusion : screen. D’après la définition de la spécification du W3C, un mode de fusion screen « multiplie le complément des valeurs de l’arrière-plan et de la couleur source, puis complémente le résultat ». Oui, alors, moi aussi j’ai rien compris. Mais les formules de maths m’ont aidé à comprendre.

B(Cb, Cs) = 1 - [(1 - Cb) * (1 - Cs)]
          = Cb + Cs - (Cb * Cs)

Voyons voir ce qui se passe. À ce stade, c’est comme si on faisait une fusion d’un texte blanc sur un fond noir avec notre arrière-plan violet.

<div style="background:#639;">
    <div style="background:#000; color:#fff; mix-blend-mode:screen;">
        <div>
            Lorem ipsum dolor, sit amet, consectetur adipisicing elit.
        </div>
    </div>
</div>

Notre texte blanc en source (Cs) fusionné avec le fond violet (Cb) devient…

B(Cb, Cs) = Cb + Cs - (Cb * Cs)
          = rgb(102, 51, 153) + rgb(255,255,255) - (rgb(102, 51, 153) * rgb(255,255,255))
          = rgb(102, 51, 153) + rgb(255,255,255) - rgb(102, 51, 153)
          = rgb(255,255,255)

… blanc ! Et notre fond noir en source (Cs) fusionné avec l’arrière-plan violet (Cb) devient…

B(Cb, Cs) = Cb + Cs - (Cb * Cs)
          = rgb(102, 51, 153) + rgb(0,0,0) - (rgb(102, 51, 153) * rgb(0,0,0))
          = rgb(102, 51, 153) + rgb(0,0,0) - rgb(0,0,0)
          = rgb(102, 51, 153)

… violet ! Et voilà, c’est comme ça qu’on maintient un texte blanc sur un fond de n’importe quel couleur. Et ça fonctionne aussi avec des images de fond.

<div style="background:#6db6b0; background-image:url(https://i.imgur.com/F7S1NGq.jpg); background-size:cover; color:#fff;">
    <div style="background:#000; mix-blend-mode:screen;">
        <div style="background:#000; mix-blend-mode:difference;">
            Lorem ipsum dolor, sit amet, consectetur adipisicing elit.
        </div>
    </div>
</div>

Le seul problème ici est que ce code s’applique sur n’importe quel client mail. Et pour ceux qui ne supportent pas mix-blend-mode, seul un fond noir s’affiche. On doit donc faire en sorte que ce code ne s’applique que sur Gmail.

4. Cibler Gmail

La méthode pour cibler Gmail est bien connue depuis plusieurs années (et est même référencée sur HowToTarget.email). Il y a deux pré-requis pour que ça fonctionne :

  1. Avoir un doctype au début de votre code HTML (par exemple : <!DOCTYPE html>)
  2. Ajouter une classe dédiée sur l’élément <body> (par exemple : <body class="body">)

Ensuite on peut cibler n’importe quelle classe dans notre code (par exemple : .foo) avec le sélecteur suivant :

u + .body .foo { }

La raison pour laquelle cela fonctionne est parce que Gmail remplace le doctype d’un email avec un élément <u></u>. Donc le code de base d’un email ci-dessous…

<!DOCTYPE html>
<html lang="en">
<head>
    <title>An HTML email</title>
    <style>u + .body .text { color:green; }</style>
</head>
<body class="body">
    <p class="text">ELO world!</p>
</body>
</html>

… devient :

<div id=":8p" class="a3s aiL msg4142466614215349360">
    <u></u>
    <div class="m_4142466614215349360body">
        <p class="m_4142466614215349360text">
            ELO world!
        </p>
    </div>
</div>

Et le sélecteur CSS utilisé est bien correctement préfixé par Gmail en :

.msg6240499631687324626 u+.m_6240499631687324626body .m_6240499631687324626text { color:green }

Donc, si on revient à notre code, on va déplacer les deux modes de fusion et les styles de background en ligne dans une balise <style> dédiée. (Et on s’assurera bien d’avoir un doctype et une classe .body.)

<style>
    u + .body .gmail-blend-screen { background:#000; mix-blend-mode:screen; }
    u + .body .gmail-blend-difference { background:#000; mix-blend-mode:difference; }
</style>
<div style="background:#639; background-image:linear-gradient(#639,#639); color:#fff;">
    <div class="gmail-blend-screen">
        <div class="gmail-blend-difference">
            Lorem ipsum dolor, sit amet, consectetur adipisicing elit.
        </div>
    </div>
</div>

Un effet de bord imprévu mais bienvenu quand même de cette séparation des styles de mode de fusion est que le code va gracieusement se dégrader dans les applications Gmail avec des comptes non Google. Dans GANGA (comme les emailgeeks aiment bien dire), mix-blend-mode n’est pas supporté. Mais les éléments <style> non plus. Dans ce cas, Gmail appliquera alors simplement ses ajustements de couleurs.

5. Le code final

Voici un exemple complet de code avec tout ce qu’il faut bien en place.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fixing Gmail’s dark mode issues with CSS Blend Modes</title>
    <style>
        u + .body .gmail-blend-screen { background:#000; mix-blend-mode:screen; }
        u + .body .gmail-blend-difference { background:#000; mix-blend-mode:difference; }
    </style>
</head>
<body class="body">
    <div style="background:#639; background-image:linear-gradient(#639,#639); color:#fff;">
        <div class="gmail-blend-screen">
            <div class="gmail-blend-difference">
                <!-- Votre contenu commence ici -->
                Lorem ipsum dolor, sit amet, consectetur adipisicing elit.
                <!-- Votre contenu se termine ici -->
            </div>
        </div>
    </div>
</body>
</html>

J’ai fait une sorte de mire pour tester différentes couleurs de fond. Vous pouvez trouver le code ici.

Capture d’écran d’un test de mire dans Gmail iOS en mode sombre. En haut, avec le correctif, le texte blanc et la couleur de fond sont toujours conservés. En bas, sans le correctif, les couleurs sont changées par Gmail.

Conclusion

Je pense que le modes sombre est une avancée majeure en terme d’accessibilité et de préférences utilisateur. Et comme je le disais il y a déjà deux ans, « le mieux que vous puissiez faire est d’accepter ce choix plutôt que d’essayer de luttre contre ». Mais c’est aussi important de reconnaître quand les clients mail font n’importe quoi.

Je suis tout excité d’avoir réussi à trouver cette solution. Et même si ça reste limité (l’utilisation de mode de fusions limite ça a du texte blanc), j’espère que ce sera bien utile pour quiconque rencontre des difficultés avec le mode sombre de Gmail.

Dites bonjour à caniemail.com

En mars dernier, j’ai publié des idées pour Can I email, un site similaire à caniuse.com dédié au support dans les clients mails.

Aujourd’hui, à peine six mois après, je suis heureux et fier d’annoncer qu’avec l’aide de mes collègues et des membres de la communauté #emailgeeks, nous lançons officiellement caniemail.com.

Pour l’instant, nous avons plus de 50 fonctionnalités HTML et CSS testées sur 25 clients mails. Et on a plein de choses en réserve à venir dans les prochains mois.

Je suis aussi enchanté de pouvoir vous présenter le « tableau des scores » des clients mails. Pour la première fois, on peut voir un classement objectif des clients mails basés sur leur support de fonctionnalités HTML et CSS. J’espère que cela placera une nouvelle barre pour toute l’industrie et encouragera les moins bons élèves à s’améliorer.

Le site est fait par et pour la communauté des #emailgeeks. Toutes les données présentées sont disponibles sur GitHub de manière à ce que n’importe qui puisse les mettre à jour, les enrichir ou les contester. Vous pouvez jeter un oeil à notre guide de contribution. Et n’hésitez pas à me poser la moindre question si vous en avez.

J’espère que le site vous plaira et que vous y contribuerez de quelque manière que ce soit.

Aujourd’hui j’ai découvert la propriété mso-generic-font-family…

Et j’ai résolu un mystère d’Outlook vieux de douze ans au passage.

Ce matin, je faisais des tests dans Outlook sur les styles supportés dans les listes HTML. Et mon attention s’est vite détournée sur quelque chose qui n’a rien à voir. En utilisant le site What does it paste pour la première fois pour récupérer le code généré par Outlook et son moteur de rendu de Word, le <head> de l’e-mail contenait le code suivant :

<style> <!-- /* Font Definitions */
@font-face {
	font-family:Calibri;
	panose-1:2 15 5 2 2 2 4 3 2 4;
	mso-font-charset:0;
	mso-generic-font-family:swiss;
	mso-font-pitch:variable;
	mso-font-signature:-536859905 -1073732485 9 0 511 0;
}
</style>

@font-face ? Dans Outlook ? Qu’est-ce que cette diablerie ?

Si vous êtes habitués aux polices web dans les e-mails, vous savez surement qu’il y a un bug notable dans les Outlook (2007, 2010, 2013 and 2016) sur Windows. À chaque fois que vous importez une police web en utilisant une déclaration @font-face, Outlook l’ignore (comme on pourrait s’y attendre). Mais Outlook ignore alors aussi les polices alternatives définies dans vos styles, forçant tous les textes utilisant cette police web en Times New Roman. Prenez l’exemple suivant :

<!doctype html>
<html>
<head>
	<title>mso-generic-font-family</title>
	<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet" type="text/css" />
</head>
<body>
	<p style="font-family:Pacifico, sans-serif;">
		This is a text set in the <strong>Pacifico</strong> font.
	</p>
</body>
</html>

Outlook va irrémédiablement afficher ce texte en Times New Roman, ignorant l’alternative sans-serif définie dans la propriété font-family.

Captures d’écrans sur Email on Acid montrant le texte en Times New Roman sur Outlook 2016.

Plein de solutions ont été trouvées au fil des années pour éviter ce bug, de l’utilisation d’!important en ligne à la déclaration de la police à l’intérieur d’une media query. Ma solution préférée a toujours été de cacher l’appel à la police web aux yeux d’Outlook en utilisant un commentaire conditionnel comme dans l’exemple suivant.

<!--[if !mso]><!-- -->
<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet" type="text/css" />
<!--<![endif]-->

J’ai toujours trouvé ce comportement de Outlook bizarre (même pour Outlook, c’est dire). Mais cette solution fonctionnait suffisamment bien pour que je ne cherche jamais à creuser davantage. Et qui plus est, ce bug a été corrigé dans la dernière version d’Outlook (2019). L’affaire était donc classée pour moi. En tout cas c’est ce que je croyais.

Quand j’ai vu cette déclaration @font-face ajoutée par Outlook ce matin, je savais que j’étais tombé sur quelque chose. La ligne suivante, en particulier, a retenu mon attention :

mso-generic-font-family:swiss;

Je n’avais jamais entendu parlé de cette propriété. Mais le nom sonne vraiment comme quelque chose qui pourrait avoir un lien avec le comportement d’Outlook et des polices web.

J’ai donc repris mon premier exemple de test, j’ai déclaré ma police web dans une balise <style>, et j’ai ajouté cette propriété mso-generic-font-family.

<!doctype html>
<html>
<head>
	<title>mso-generic-font-family</title>
	<style>
		@font-face {
			font-family: 'Pacifico';
			font-style: normal;
			font-weight: 400;
			src: local('Pacifico Regular'), local('Pacifico-Regular'), url(https://www.caniemail.com/tests/assets/fonts/			pacifico-regular.woff2) format('woff2');
			mso-generic-font-family:swiss;
		}
	</style>
</head>
<body>
	<p style="font-family:Pacifico, sans-serif;">
		This is a text set in the <strong>Pacifico</strong> font.
	</p>
</body>
</html>

Et voilà !

Captures d’écrans sur Email on Acid montrant le texte en Arial sur Outlook 2016.

La propriété mso-generic-font-family accepte les valeurs suivantes :

  • decorative
  • modern
  • roman (correspondant à du serif)
  • script
  • swiss (correspondant à du sans-serif)
  • auto (correspondant à roman par défaut)

Ça explique tout. Outlook supporte bel et bien la déclaration @font-face (mais ne charge pas les polices distantes). Et parce qu’Outlook ne peut pas afficher pas cette police, il va chercher à se replier sur la valeur attendue de la propriété mso-generic-font-family. Et parce qu’elle n’est pas définie, on tombe sur sa valeur par défaut auto qui correspond à la famille roman, elle-même correspondant à du Times New Roman.

Affaire classée.

En creusant un peu plus à travers le code généré par Outlook et en lisant la documentation du HTML dans Outlook et Microsoft Office, je suis tombé sur une autre propriété nommée mso-font-alt. Cette propriété permet d’affiner encore un peu plus la police alternative dans Outlook en y attribuant le nom d’une autre police. En ajoutant les lignes suivantes à notre déclaration @font-face, Outlook va d’abord chercher à appliquer la police définie dans la propriété mso-font-alt (si elle est installée sur la machine) ou sinon appliquer la famille définie dans la propriété mso-generic-font-family.

mso-generic-font-family: swiss;
mso-font-alt: "Century Gothic";

J’espère que vous avez apprécié cette lecture autant que j’ai aimé faire ces recherches. Je me demande quand même s’il n’y aurait pas encore autre chose à creuser avec @font-face dans Outlook. N’y aurait-il pas moyen de charger des polices distantes ? Faites moi signe si vous trouvez quelque chose à ce sujet.

How To Target Email Clients

« Comment cibler les clients mails » est un site mis en place par Dylan Smith avec une liste d’exemples fournie par Mark Robbins pour cibler les clients mails spécifiquement.

Gmail compte 1,5 milliards d’utilisateurs

Vu le mois dernier :

1,5 milliards de personnes utilisent Gmail chaque mois, et 5 millions d’entreprises payent pour utiliser Gmail au travail au sein de G Suite.

En 2016, c’était 1 milliard.
En 2012, c’était 425 millions.

Garfield Mail

Vu sur Twitter :

Aujourd’hui j’ai appris qu’avant Google, G-Mail était un service gratuit du site de Garfield pour des « emails with cattitude ».

Je découvre aussi et ça me fait bien rire. Comme indiqué dans le tweet, le site est toujours visible sur Archive.org.

Comment Gmail a arrêté de supporter les animations CSS

Le saviez-vous ? Jusqu’à il n’y a pas si longtemps, Gmail supportait les animations CSS. Enfin, en quelque sorte. Jusqu’en juin 2016, la version desktop du webmail de Gmail supportait les déclarations @keyframes en CSS. Vous pouviez donc déclarer l’animation suivante dans une balise <style> dans le <head> de votre e‑mail, et Gmail la gardait telle quelle.

@keyframes foo {
    from { background:red; }
    to { background:black; }
}

Lire la suite

L’accessibilité des e‑mails par l’exemple

On parle de plus en plus d’accessibilité dans les e‑mails ces dernières années, et c’est une très bonne chose. Mais je tombe toujours régulièrement sur plein d’e‑mails peu accessibles. En donnant des formations ou des conférences, je me suis rendu compte que montrer, et pas seulement expliquer, la différence que peut faire un e‑mail accessible était un excellent moyen pour sensibiliser des gens au sujet. Voici quatre conseils pour améliorer l’accessibilité dans l’intégration d’e‑mails, illustrés par des vidéos.

1. Toujours préciser l’attribut alt.

L’attribut alt de l’élément img est obligatoire depuis HTML 4. Cela signifie que chaque image d’un e‑mail doit avoir un attribut alt, même si celui-ci est vide (alt="").

Lire la suite

Outlook.com supporte désormais les images de fond en CSS

La nouvelle, rapportée par Justin Khoo chez Email on Acid, est aussi géniale qu’inattendue. Le webmail Outlook.com supporte désormais les images de fond en CSS. Cela inclut la propriété background, mais aussi ses déclinaisons background-image, background-repeat, background-size, background-position, background-color, background-origin, background-attachment. Et même (d’après mes tests) background-blend-mode.

Jusqu’à présent, la seule façon d’inclure des images de fond dans Outlook.com était via l’attribut background en HTML. Ça avait l’inconvénient d’obligatoirement répéter une image de fond et de ne pas pouvoir en choisir le positionnement ni la taille. Mais surtout de devoir être utilisé sur une <table> ou un <td>. Cette mise à jour de Microsoft (peut-être la plus importante d’un point de vue CSS depuis l’existence d’Outlook.com) est donc un pas dans la bonne direction, retirant une des dernières raisons d’utiliser des tableaux de mise en page dans les e-mails.

Corriger les problèmes de mises à l’échelle de Outlook (120 dpi)

Courtney Fantinato a donné une excellente conférence sur les problèmes de mises à l’échelle d’Outlook. (C’est ce qu’on retrouve communément dans Email on Acid ou Litmus sous l’appelation « Outlook 120 dpi »). Elle vient d’en faire un article très clair et didactique. En résumé, pour corriger les problèmes liés à des niveaux de mises à l’échelle personnalisés dans les Outlook sur Windows, il faut :

  1. Ajouter l’espace de nom de Microsoft Office sur la balise <html> : <html xmlns:o="urn:schemas-microsoft-com:office:office">.
  2. Ajouter la balise de définition des PixelsPerInch pour les images.
    <!--[if mso]>
    <xml>
      <o:OfficeDocumentSettings>
      <o:AllowPNG/>
      <o:PixelsPerInch>96</o:PixelsPerInch>
      </o:OfficeDocumentSettings>
    </xml>
    <![endif]-->
  3. Utiliser des dimensions en pixels en CSS plutôt que via des attributs HTML. (Par exemple, privilégier <table style="width:600px;"> plutôt que <table width="600">.)