#EmailCSS | Position:absolute (chapitre 87 du Kamasutra)

Confrères intégrateurs d’email et #emailgeeks, cette allocution s’adresse à vous : « Jean et Georges embrassent leur famille et saluent Bichette », je répète : « Jean et Georges embrassent leur famille et saluent Bichette ». Ah ah ! Elle est bien bonne, quel boute-en-train fais-je ! Nan, sans rire, mon message est le suivant : Avez-vous déjà mis à l’essai un positionnement « absolute » au sein de vos intégrations HTML ? Vous y avez déjà songé, c’est inévitable. Et assurément, vous fîtes marche arrière lorsque vous vîtes les complications que cela engendrerait (je m’exerce pour le prix Goncourt)

Pourtant, je l’affirme d’une voix sûre et nasillarde : Vous pourrez désormais, à l’aide de cet article, envisager la position « absolute » dans vos prochaines campagnes ! J’en veux pour preuve ce bout de papier ce tableau de support (ci-dessous) de la solution que je m’apprête à développer…

Support de l’absolute

Solution / Webmail	Support
iPad Air iOS 9
iPad Air iOS 10
iPad Mini iOS 9
iPad Mini iOS 10
iPad Pro iOS 10
iPad Retina iOS 9
iPad Retina iOS 10
iPhone 5S iOS 9
iPhone 6 iOS 9
iPhone 6 iOS 9
iPhone 6 Gmail iOS 10
iPhone 6+ iOS 9
iPhone 6+ iOS 10
iPhone 6+ Gmail iOS 10
iPhone 7 iOS 10
iPhone 7+ iOS 10
iPhone 8 iOS 11
iPhone SE iOS 10
Nexus 5 Android 5.1
Nexus 5X Gmail Android 6
Pixel Gmail Android 7
Pixel Outlook Android 7
Pixel Yahoo Android 7
Apple Mail 9 OSX 10.9
Apple Mail 10 OSX 10.10
Lotus Notes 8 Windows 7	Images les unes sous les autres, mais que peut-on attendre de Lotus Notes 8…
Lotus Notes 8.5 Windows 7	Les valeurs renseignées pour la position semblent divisées par 2
Outlook 2003 Windows 7	Les valeurs renseignées pour la position semblent divisées par 2
Outlook 2007 Windows 7
Outlook 2010 Windows 7
Outlook 2011 OSX 10.8
Outlook 2013 Windows 7
Outlook 2016 OSX 10.8
Outlook 2016 Windows 7
Outlook 2016 Windows 10
Thunderbird Windows 7
AOL Chome OSX 10.10
AOL Chome Windows 7
AOL Firefox OSX 10.10
AOL Firefox Windows 7
AOL IE 10 Windows 7
AOL IE11 Windows 7
AOL Safari OSX 10.10
Comcast Chrome Windows 7
Comcast Firefox Windows 7
Gmail Chrome OSX 10.10
Gmail Chrome Windows 7
Gmail Firefox OSX 10.10
Gmail Firefox Windows 7
Gmail IE11 Windows 7
Gmail Safari OSX 10.10
Google Apps Chrome Windows 7
Google Apps Firefox Windows 7
Google Apps IE 11 Windows 7
Office 365 Chrome Windows 7
Office 365 Firefox Windows 7
Office 365 IE 10 Windows 7
Office 365 IE 11 Windows 7
Outlook.com Chrome OSX 10.10
Outlook.com Chrome Windows 7
Outlook.com Firefox OSX 10.10
Outlook.com Firefox Windows 7
Outlook.com IE 10 Windows 7
Outlook.com IE 11 Windows 7
Outlook.com Safari OSX 10.10
Yahoo! Chrome OSX 10.10
Yahoo! Chrome Windows 7
Yahoo! Firefox OSX 10.10
Yahoo! IE 10 Windows 7
Yahoo! IE 11 Windows 7
Yandex.ru Chrome Windows 7
Yandex.ru Firefox Windows 7
Free.fr Chrome Windows 7
Free.fr Firefox Windows 7
GMX Chrome Windows 7
Laposte Chrome Windows 7
Libero Chrome Windows 7
Libero Firefox Windows 7
Mail.ru Chrome Windows 7
Nate Chrome Windows 7
Naver Chrome Windows 7
Orange.fr Chrome Windows 7
Orange.fr Firefox Windows 7
SFR.fr Chrome Windows 7
SFR.fr Firefox Windows 7
T-Online.de Chrome Windows 7	Ne prend pas en compte les commentaires Outlook et posera problème pour la solution de secours
Telstra/BigPond Chrome Windows 7
Web.de Chrome Windows 7

Ça vous épate hein! Il y a peu, j’ai envisagé pouvoir mettre en place trois couvertures de magazines superposées les unes aux autres, avec, pour chacune d’entre elles, une marge gauche incrémentée de 20 pixels.

Pourquoi ne pas avoir conçu ce projet directement en une seule image ? Parce que je désirais ardemment appliquer un lien propre à chaque couverture et rendre ces couvertures dynamiques, afin de proposer la dernière parution de chaque publication (et aussi parce que je voulais sortir un article sur le sujet, soyons honnête, je suis un être vil et répugnant en quête de gloire et de notoriété…) 

Recherche

Je me suis mis à creuser comme la fouine que je suis à la recherche (non vaine) d’informations sur le support du « position:absolute » dans un email. Promptement, je parcourais l’article de Mark Robbins (une sommité de chez GoRebelMail, un éléctron puissant, une lumière glorieuse en quelques mots). Mark y développait la thèse que la propriété était plutôt mal tolérée sur l’ensemble des logiciels de messagerie et webmails. Monsieur Robbins soumettait donc une autre technique, imitant la propriété convoitée.

Code et vérité

(oui, il ne s’agit que d’un équivalent à la propriété position, j’avoue)

Ça pique votre curiosité hein, admettez-le !  Pour résumer la démarche, le postulat est de déployer un premier élément (<div>) à la largeur et hauteur fixes

<div style="width:300px;height:300px;">  
</div>

Au sein de cette entité, y insérer une seconde <div> en inline-block, et lui définir une position par l’intermédiaire de margin-top et de margin-left.

<div style="width:300px;height:300px;">  
    <div style="width:100px;height:100px;margin-top:100px;margin-left:100px;display:inline-block;">
    </div>
</div>

Annotons au passage que des valeurs négatives ne fonctionneraient pas sur Gmail, Outlook.com et Outlook 365. Cet élément a donc un comportement semblable, pour le moment, à une position:relative. Mais pour obtenir un comportement proche de la position:absolute souhaitée, nous allons englober cette <div> dans une tierce <div>, avec un max-height :0 ; max-width :0. De fait, la <div> ne prend alors plus de place sur la page, mais son contenu reste toujours visible.

<div style="width:300px;height:300px;">  
    <div style="max-height:0;max-width:0;">
        <div style="width:100px;height:100px;margin-top:100px;margin-left:100px;display:inline-block;">
        </div>
    </div>
</div>

Si nous nous confinions à cet exercice, le résultat escompté ne serait pas probant sur Yahoo. En réalité, Rémi Parmentier (une sommité de l’expérimentation HTML/CSS dans les emails, un électron puissant, une lumière… Vous aurez compris le principe) souleva que Yahoo ajoute les propriétés CSS overflow-x :auto et overflow-y :auto lorsqu’il perçoit les propriétés max-width et max-height. Pour remédier à cela, il nous faut ajouter un overflow :visible à la seconde <div>.

<div style="width:300px;height:300px;">  
    <div style="max-height:0;max-width:0;overflow:visible;">
        <div style="width:100px;height:100px;margin-top:100px;margin-left:100px;display:inline-block;">
        </div>
    </div>
</div>

Cette version du code est remarquable… Mais non aboutie ! Car ça ne s’arrête pas là. Si je cesse de travailler ici, mes contenus ne se manifesteront pas sur Yahoo Mail IE10 et IE11, laissant place à de vulgaires zones blanches insignifiantes… Et vous commencez à me connaître (enfin j’espère…), j’apprécie arriver à un résultat abouti ! En suivant alors les commentaires, discussions et remarques, j’entravai qu’ajouter un !important collé au « visible » du overflow aidait à résoudre la problématique et permettait d’atteindre ainsi le support ultime sus-cité: un équivalent à la position absolute !

Cela vous semble opaque ? Ok, ch’bim, on passe en mode bourrain : voici le code entier ci-dessous. Faites-vous plaisir avec le ctrl+c ctrl+v. C’est cadeau. Je m’aime.

<div style="width:300px;height:300px;">  
    <div style="max-height:0;max-width:0;overflow:visible!important;">
        <div style="width:100px;height:100px;margin-top:100px;margin-left:100px;display:inline-block;">
        </div>
    </div>
</div>

Rappel

Bon on n’oubliiiiiiie pas, petits insouciants que vous êtes, que sur Outlook 2007, 2010, 2013, 2016 (windows 7 et windows 10), si on ne fait rien, ça pique les yeux ! Ahhhh ah je vous vois venir, vous aviez oublié… Mais moi j’ai tout prévu les gars ! ON ME LA FAIT PAS A MOI !!! Je vous ai même préparé un exemple de code entier et une solution de secours parce que je savais que ça se passerait ainsi, JE LE SAVAIS !!! AH AH !!! GÉÉÉÉÉÉÉNIE DU MAL !!!!!!!!! (et je rappelle par la même occasion qu’il ne s’agit pas du coup de la position absolute, mais d’un résultat similaire acquis par d’autres méthodes)