CSS hacky pro Outlook

Každý člověk, který někdy kódoval newslettery, se musel potýkat s mizernou podporou novějších verzí HTML a CSS u některých emailových klientů a to už nemluvím o chybějící podpoře media queries, důležitých pro tvorbu responzivních HTML emailů, u řady moderních emailových klientů. Mezi nejproblémovější emailové klienty patří Outlook, překvapivě v novějších verzích 2007, 2010 a 2013. Velikou výhodou Outlooku je ale možnost vkládání CSS hacků do stylu emailu. Níže uvádím zapisování hacků pro všechny verzy Outlooku, pro jednotlivé verze i pro všechny emailové klienty s výjimkou Outlooku.

 

Pokud chcete vložit do svého zdrojového kódu CSS hack pro všechny verze Outlooku, tak vložíte mezi tagy <head> a </head> níže uvedený kód, do kterého napíšete vlastní styl pro Outlook.

 

<!–[if (gte mso 9)|(IE)]>

<style>

/* váš kód */

</style>

<![endif]–>

 

Zkratka gte znamená, že kód platí pro všechny vyšší verze Outlooku, než je verze 9 a také pro verzi 9.

Zkratku gte můžeme nahradit zkratkou gt (kód platí pro všechny verze vyšší než 9  a neplatí pro verzi 9)

 

Analogicky k tomu, pokud chcete aby kód platil pro všechny verze nižší než je uvedená verze a také pro uvedenou verzi, tak vkládáme na místo gte zkratku lte. Pokud má kód platit jen pro verze nižší a ne pro verzi vedenou v závorce, tak do zdrojového kódu vkládáme pouze lt.

 

Níže uvádím číslování jednotlivých verzí Outlooku:

Outlook 2000        verze   9

Outlook 2002         verze 10

Outlook 2003         verze 11

Outlook 2007         verze 12

Outlook 2010         verze 14

Outlook 2013         verze 15

 

CSS kód pro všechny emailové klienty s vyjímkou Otlooku

 

<!–[if (gte mso 12)]><!– –>

<style>

.smaller-marg-top{ margin-top: 14px!important; }

</style>

<!–<![endif]–>

 

Samozřejmě i zde můžete měnit jednotlivé parametry – verze Outlooku, gte, gt, lte a lt.

Share this: