Tag Archives: Css

CSS compatibility and mailboxes

19 November 2009 09:43 , Leave a Comment ,

Today, some very useful links and tips while working on newsletter and webmails.

You have to know that webmails such as Gmail are disabling several CSS properties inside their mails contents to ensure that the HTML code inside is not altering the webmails own design and layout. Imagine that in your mail your are redefining a class (randomly : .mailText { display: none; }) used by these web applications, the result could be catastrophic for the user.

So first, on this website http://www.quirksmode.org/compatibility.html you will find how CSS versions are supported in different browsers. Always useful.

In this second link : http://www.xavierfrenette.com/articles/css-support-in-webmail/#selectors-properties-gmail-2 the author describes all the properties supported or not in the most popular webmails : Gmail, Hotmail, Yahoo! Mail. He gives some very useful information and Hotmail hacks.

And because writing a newsletter is a very well know problem for communication professional, you will find in this link http://net.tutsplus.com/tutorials/html-css-techniques/20-email-design-best-practices-and-resources-for-beginners/ the best practices to begin with newsletters.

Lessons I got from this experience are:

* <style> tags are useless. Use inline CSS and style attributes.

* The most complex client mail to make compatible with your newsletter design will be Outlook. Outlook will not display background images until its next version after Outlook 2010. And that’s not even sure. So, never use background images or advanced CSS. More information on http://fixoutlook.org/

* Good old tables are the rule to construct your page! Separate your pictures into different small pictures like before 2000 !

* Because Gmail/Yahoo! Mail/others don’t implement acknowledgement of receipt, you cannot know if somebody using these webmails read your message by this way.
BUT, with pictures inside your mail, you can add a tracker on them to know who opened your mail and downloaded them!

EDIT : Microsoft documentation with supported attributes for each HTML element to maximise your newsletters’ compatibility with Outlook : http://msdn.microsoft.com/en-us/library/aa338201.aspx

Posted in: CSS , Tagged: , , ,

Astuce CSS et min-height

18 March 2009 08:40 , 1 Comment ,

Un attribut CSS dont je me sers tout le temps quand je fais des sites… le min-height (comme Bernard). Propriété ô combien magique qui permet de définir une hauteur minimale pour un bloc. Cependant, suivant les navigateurs, ça marche ou pas. Donc voici l’astuce machiavélique qui fait que ça fonctionne avec tous les navigateurs (enfin bon, en tout cas sous Internet Explorer 6 et 7, Google Chrome, Firefox 2 et 3, le machiavélisme est fainéant des fois) :

votre_selecteur {
min-height:400px;
height:auto !important;
height:400px;
}

Explications : dans les faits (comme Clochette), min-height est compris par Chrome, FF et IE7, mais pas IE6.
Cependant sous IE6, height possède la même propriété que le min-height. Donc, on ajoute la règle !important qui va faire que :

  • Pour FF, IE7 et Chrome height: auto va être préféré à height: 400px; propriété même du !important qui va faire interpréter au navigateur l’attribut possédant la règle !important dans un sélecteur si un attribut est défini plusieurs fois. La hauteur ne va donc pas être fixe, avec une hauteur minimale. Youpi, c’est ce qu’on voulait.
  • Pour IE6 (et peut-être inférieur qui sait…), cette ligne de CSS va tout bonnement être ignorée : IE6 ne la comprend pas. IE6 va donc juste interpréter : height 400px; qui, dans le codage douteux d’IE6 je le redis, possède la même propriété que min-height sous les derniers navigateurs.

Petit rappel qui ne fait pas de mal, on ne sait jamais : l’ordre de ces lignes est capital. Bah oui, le CSS c’est pas encore du langage logique, bien que le bordélisme de certaines feuilles de style rappelle la douce insouciance des sessions de Prolog…

C’est loin d’être tout neuf comme astuce, mais si je cherche le petit bout de code qui va bien, maintenant, je sais où il est.

PS : au fait, et tant qu’à faire, ça marche aussi pour max-height, min-width et max-width. C’est pas merveilleux ?

Posted in: CSS , Tagged: , ,