Litmus Conf London, 2016/07/27

Rémi Parmentier @HTeuMeuLeu

THINKING

THINKING OUTSIDE THE

<TABLE>

Super Mail Forward Part I

What happens when you forward an email? (from a webmail)

Not much more than when the webmail receives it in the first place.

.cell {

color : white ;

background : green

url ( image.jpg ); }

.cell {

color : white ; }

AOL Yahoo Outlook.com Gmail

AOL Yahoo Outlook.com Gmail AOL

< table

< tr

< td

style

"background:green;" class

"step1" aria-labelledby

"step1"

AOL</ td

< td

style

"background:green; background:grey url(spacer.gif);" class

"step2"

Yahoo</ td

< td

style

"background:green; background:grey url(spacer.gif);" class

"step3"

Outlook.com</ td

< td

style

"background:green; background:grey url(spacer.gif);" class

"step4"

Gmail</ td

</ tr

</ table

< style

[ aria-labelledby

"step1" ],

.step2 ,

.step4 {

background : grey !important ; }

@media yahoo {

.step2 {

background : green !important ; } }

.step1 {

background : grey url ( 'spacer.gif' ) !important ;

background : grey !important ; } </ style

CSS HTML

< table

< tr

< td

style

"background:green;" class

"step1" aria-labelledby

"step1"

AOL</ td

< td

style

"background:green; background:grey url(spacer.gif);" class

"step2"

Yahoo</ td

< td

style

"background:green; background:grey url(spacer.gif);" class

"step3"

Outlook.com</ td

< td

style

"background:green; background:grey url(spacer.gif);" class

"step4"

Gmail</ td

</ tr

</ table

< style

[ aria-labelledby

"step1" ],

.step2 ,

.step4 {

background : grey !important ; }

@media yahoo {

.step2 {

background : green !important ; } }

.step1 {

background : grey url ( 'spacer.gif' ) !important ;

background : grey !important ; } </ style

CSS HTML

< table

< tr

< td

style

"background:green;" class

"step1" aria-labelledby

"step1"

AOL</ td

< td

style

"background:green; background:grey url(spacer.gif);" class

"step2"

Yahoo</ td

< td

style

"background:green; background:grey url(spacer.gif);" class

"step3"

Outlook.com</ td

< td

style

"background:green; background:grey url(spacer.gif);" class

"step4"

Gmail</ td

</ tr

</ table

< style

[ aria-labelledby

"step1" ],

.step2 ,

.step4 {

background : grey !important ; }

@media yahoo

{

.step2 {

background : green !important ; } }

.step1 {

background : grey url ( 'spacer.gif' ) !important ;

background : grey !important ; } </ style

CSS HTML

< table

< tr

< td

style

"background:green;" class

"step1" aria-labelledby

"step1"

AOL</ td

< td

style

"background:green; background:grey url(spacer.gif);" class

"step2"

Yahoo</ td

< td

style

"background:green; background:grey url(spacer.gif);" class

"step3"

Outlook.com</ td

< td

style

"background:green; background:grey url(spacer.gif);" class

"step4"

Gmail</ td

</ tr

</ table

< style

[ aria-labelledby

"step1" ],

.step2 ,

.step4 {

background : grey !important ; }

@media yahoo

{

.step2 {

background : green !important ; } }

.step1 {

background : grey url ( 'spacer.gif' ) !important ;

background : grey !important ; } </ style

CSS HTML

AOL

< div class

"aolReplacedBody"

< table

< tr

< td

style

"background:green;" class

"step1" aria-labelledby

"step1"

AOL</ td

< td

style

"background:green; background:grey url(spacer.gif);" class

"step2"

Yahoo</ td

< td

style

"background:green; background:grey url(spacer.gif);" class

"step3"

Outlook.com</ td

< td

style

"background:green; background:grey url(spacer.gif);" class

"step4"

Gmail</ td

</ tr

</ table

</ div

< style

.aolReplacedBody * [ aria-labelledby

"step1" ],

.aolReplacedBody .step2 ,

.aolReplacedBody .step4 {

background : grey !important ; }

@media yahoo

{

.aolReplacedBody .step2 {

background : green !important ; } }

.aolReplacedBody .step1 {

background : grey url ( 'spacer.gif' ) !important ;

background : grey !important ; } </ style

CSS HTML

< div class

"aolReplacedBody"

< table

< tr

< td

style

"background:green;" class

"step1" aria-labelledby

"step1"

AOL</ td

< td

style

"background:green; background:grey url(spacer.gif);" class

"step2"

Yahoo</ td

< td

style

"background:green; background:grey url(spacer.gif);" class

"step3"

Outlook.com</ td

< td

style

"background:green; background:grey url(spacer.gif);" class

"step4"

Gmail</ td

</ tr

</ table

</ div

< style

.aolReplacedBody * [ aria-labelledby

"step1" ],

.aolReplacedBody .step2 ,

.aolReplacedBody .step4 {

background : grey !important ; }

@media yahoo

{

.aolReplacedBody .step2 {

background : green !important ; } }

.aolReplacedBody .step1 {

background : grey url ( 'spacer.gif' ) !important ;

background : grey !important ; } </ style

CSS HTML

< div class

"aolReplacedBody"

< table

< tr

< td

style

"background:green;" class

"step1" aria-labelledby

"step1"

AOL</ td

< td

style

"background:green; background:grey url(spacer.gif);" class

"step2"

Yahoo</ td

< td

style

"background:green; background:grey url(spacer.gif);" class

"step3"

Outlook.com</ td

< td

style

"background:green; background:grey url(spacer.gif);" class

"step4"

Gmail</ td

</ tr

</ table

</ div

< style

.aolReplacedBody * [ aria-labelledby

"step1" ],

.aolReplacedBody .step2 ,

.aolReplacedBody .step4 {

background : grey !important ; }

@media yahoo

{

.aolReplacedBody .step2 {

background : green !important ; } }

.aolReplacedBody .step1 {

background : grey url ( 'spacer.gif' ) !important ;

background : grey !important ; } </ style

CSS HTML

< div class

"aolReplacedBody"

< table

< tr

< td

style

"background:green;" class

"step1" aria-labelledby

"step1"

AOL</ td

< td

style

"background:green; background:grey url(spacer.gif);" class

"step2"

Yahoo</ td

< td

style

"background:green; background:grey url(spacer.gif);" class

"step3"

Outlook.com</ td

< td

style

"background:green; background:grey url(spacer.gif);" class

"step4"

Gmail</ td

</ tr

</ table

</ div

< style

.aolReplacedBody * [ aria-labelledby

"step1" ],

.aolReplacedBody .step2 ,

.aolReplacedBody .step4 {

background : grey !important ; }

@media yahoo

{

.aolReplacedBody .step2 {

background : green !important ; } }

.aolReplacedBody .step1 {

background : grey url ( "<a href="spacer.gif&quot" target=_blank>spacer.gif</a>; ) !important ;

background : grey !important ; } </ style

CSS HTML

< div class

"aolReplacedBody"

< table

< tr

< td

style

"background:green;" class

"step1" aria-labelledby

"step1"

AOL</ td

< td

style

"background:green; background:grey url(spacer.gif);" class

"step2"

Yahoo</ td

< td

style

"background:green; background:grey url(spacer.gif);" class

"step3"

Outlook.com</ td

< td

style

"background:green; background:grey url(spacer.gif);" class

"step4"

Gmail</ td

</ tr

</ table

</ div

< style

.aolReplacedBody * [ aria-labelledby

"step1" ],

.aolReplacedBody .step2 ,

.aolReplacedBody .step4 {

background : grey !important ; }

@media yahoo

{

.aolReplacedBody .step2 {

background : green !important ; } } </ style

CSS HTML

Yahoo

< div class

"aolReplacedBody"

< table

< tr

< td

style

"background:green;" class

"step1" aria-labelledby

"step1"

AOL</ td

< td

style

"background:green; background:grey url(spacer.gif);" class

"step2"

Yahoo</ td

< td

style

"background:green; background:grey url(spacer.gif);" class

"step3"

Outlook.com</ td

< td

style

"background:green; background:grey url(spacer.gif);" class

"step4"

Gmail</ td

</ tr

</ table

</ div

< style

.aolReplacedBody * [ aria-labelledby

"step1" ],

.aolReplacedBody .step2 ,

.aolReplacedBody .step4 {

background : grey !important ; }

@media yahoo

{

.aolReplacedBody .step2 {

background : green !important ; } } </ style

CSS HTML

< div class

"yiv113aolReplacedBody"

< table

< tr

< td

style

"background:green;" class

"yiv113step1" aria-labelledby

"step1"

AOL</ td

< td

style

"background:green; background:grey url(spacer.gif);" class

"yiv113step2"

Yahoo</ td

< td

style

"background:green; background:grey url(spacer.gif);" class

"yiv113step3"

Outlook.com</ td

< td

style

"background:green; background:grey url(spacer.gif);" class

"yiv113step4"

Gmail</ td

</ tr

</ table

</ div

< style

.yiv113aolReplacedBody * [ aria-labelledby

"step1" ],

.yiv113aolReplacedBody .yiv113step2 ,

.yiv113aolReplacedBody .yiv113step4 {

background : grey !important ; }

@media yahoo

{

.yiv113aolReplacedBody .yiv113step2 {

background : green !important ; } } </ style

CSS HTML

< div class

"yiv113aolReplacedBody"

id

"yui_123456789"

< table

< tr

< td

style

"background:green;" class

"yiv113step1" aria-labelledby

"step1"

AOL</ td

< td

style

"background:green; background:grey url(spacer.gif);" class

"yiv113step2"

Yahoo</ td

< td

style

"background:green; background:grey url(spacer.gif);" class

"yiv113step3"

Outlook.com</ td

< td

style

"background:green; background:grey url(spacer.gif);" class

"yiv113step4"

Gmail</ td

</ tr

</ table

</ div

< style

#yui_123456789 .yiv113aolReplacedBody * [ aria-labelledby

"step1" ],

#yui_123456789 .yiv113aolReplacedBody .yiv113step2 ,

#yui_123456789 .yiv113aolReplacedBody .yiv113step4 {

background : grey !important ; }

@media yahoo

{

#yui_123456789 .yiv113aolReplacedBody .yiv113step2 {

background : green !important ; } } </ style

CSS HTML

< div class

"yiv113aolReplacedBody"

id

"yui_123456789"

< table

< tr

< td

style

"background:green;" class

"yiv113step1" aria-labelledby

"step1"

AOL</ td

< td

style

"background:green; background:grey url(spacer.gif);" class

"yiv113step2"

Yahoo</ td

< td

style

"background:green; background:grey url(spacer.gif);" class

"yiv113step3"

Outlook.com</ td

< td

style

"background:green; background:grey url(spacer.gif);" class

"yiv113step4"

Gmail</ td

</ tr

</ table

</ div

< style

#yui_123456789 .yiv113aolReplacedBody * [ aria-labelledby

"step1" ],

#yui_123456789 .yiv113aolReplacedBody .yiv113step2 ,

#yui_123456789 .yiv113aolReplacedBody .yiv113step4 {

background : grey !important ; }

@media yahoo

{

#yui_123456789 .yiv113aolReplacedBody .yiv113step2 {

background : green !important ; } } </ style

CSS HTML

< div class

"yiv113aolReplacedBody" id

"yui_123456789"

< table

< tr

< td

style

"background:green;" class

"yiv113step1"

AOL</ td

< td

style

"background:green; background:grey url(spacer.gif);" class

"yiv113step2"

Yahoo</ td

< td

style

"background:green; background:grey url(spacer.gif);" class

"yiv113step3"

Outlook.com</ td

< td

style

"background:green; background:grey url(spacer.gif);" class

"yiv113step4"

Gmail</ td

</ tr

</ table

</ div

< style

#yui_123456789 .yiv113aolReplacedBody *

.filtered99999 ,

#yui_123456789 .yiv113aolReplacedBody .yiv113step2 ,

#yui_123456789 .yiv113aolReplacedBody .yiv113step4 {

background : grey !important ; }

@media yahoo

{

#yui_123456789 .yiv113aolReplacedBody .yiv113step2 {

background : green !important ; } } </ style

CSS HTML

< div class

"yiv113aolReplacedBody"

id

"yui_123456789"

< table

< tr

< td

style

"background:green;" class

"yiv113step1"

AOL</ td

< td

style

"background:green; background:grey url(spacer.gif);" class

"yiv113step2"

Yahoo</ td

< td

style

"background:green; background:grey url(spacer.gif);" class

"yiv113step3"

Outlook.com</ td

< td

style

"background:green; background:grey url(spacer.gif);" class

"yiv113step4"

Gmail</ td

</ tr

</ table

</ div

< style

#yui_123456789 .yiv113aolReplacedBody *

.filtered99999 ,

#yui_123456789 .yiv113aolReplacedBody .yiv113step2 ,

#yui_123456789 .yiv113aolReplacedBody .yiv113step4 {

background : grey !important ; }

@media yahoo

{

#yui_123456789 .yiv113aolReplacedBody .yiv113step2 {

background : green !important ; } } </ style

CSS HTML

< div class

"yiv113aolReplacedBody"

id

"yui_123456789"

< table

< tr

< td

style

"background:green;" class

"yiv113step1"

AOL</ td

< td

style

"background:green; background:grey url(spacer.gif);" class

"yiv113step2"

Yahoo</ td

< td

style

"background:green; background:grey url(spacer.gif);" class

"yiv113step3"

Outlook.com</ td

< td

style

"background:green; background:grey url(spacer.gif);" class

"yiv113step4"

Gmail</ td

</ tr

</ table

</ div

< style

#yui_123456789 .yiv113aolReplacedBody *

.filtered99999 ,

#yui_123456789 .yiv113aolReplacedBody .yiv113step2 ,

#yui_123456789 .yiv113aolReplacedBody .yiv113step4 {

background : grey !important ; }

@media {

#yui_123456789 .yiv113aolReplacedBody .yiv113step2 {

background : green !important ; } } </ style

CSS HTML

Outlook.com

< div class

"yiv113aolReplacedBody"

id

"yui_123456789"

< table

< tr

< td

style

"background:green;" class

"yiv113step1"

AOL</ td

< td

style

"background:green; background:grey url(spacer.gif);" class

"yiv113step2"

Yahoo</ td

< td

style

"background:green; background:grey url(spacer.gif);" class

"yiv113step3"

Outlook.com</ td

< td

style

"background:green; background:grey url(spacer.gif);" class

"yiv113step4"

Gmail</ td

</ tr

</ table

</ div

< style

#yui_123456789 .yiv113aolReplacedBody *

.filtered99999 ,

#yui_123456789 .yiv113aolReplacedBody .yiv113step2 ,

#yui_123456789 .yiv113aolReplacedBody .yiv113step4 {

background : grey !important ; }

@media {

#yui_123456789 .yiv113aolReplacedBody .yiv113step2 {

background : green !important ; } } </ style

CSS HTML

< div class

"ecxyiv113aolReplacedBody"

id

"ecxyui_123456789"

< table

< tr

< td

style

"background:green;" class

"ecxyiv113step1"

AOL</ td

< td

style

"background:green; background:grey url(spacer.gif);" class

"ecxyiv113step2"

Yahoo</ td

< td

style

"background:green; background:grey url(spacer.gif);" class

"ecxyiv113step3"

Outlook.com</ td

< td

style

"background:green; background:grey url(spacer.gif);" class

"ecxyiv113step4"

Gmail</ td

</ tr

</ table

</ div

< style

.ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody *

.ecxfiltered99999 ,

.ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody .ecxyiv113step2 ,

.ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody .ecxyiv113step4 {

background : grey !important ; }

@media {

.ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody .ecxyiv113step2 {

background : green !important ; } } </ style

CSS HTML

< div class

"ecxyiv113aolReplacedBody"

id

"ecxyui_123456789"

< table

< tr

< td

style

"background:green;" class

"ecxyiv113step1"

AOL</ td

< td

style

"background:green; background:grey url(spacer.gif);" class

"ecxyiv113step2"

Yahoo</ td

< td

style

"background:green; background:grey url(spacer.gif);" class

"ecxyiv113step3"

Outlook.com</ td

< td

style

"background:green; background:grey url(spacer.gif);" class

"ecxyiv113step4"

Gmail</ td

</ tr

</ table

</ div

< style

.ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody *

.ecxfiltered99999 ,

.ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody .ecxyiv113step2 ,

.ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody .ecxyiv113step4 {

background : grey !important ; }

@media {

.ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody .ecxyiv113step2 {

background : green !important ; } } </ style

CSS HTML

< div class

"ecxyiv113aolReplacedBody"

id

"ecxyui_123456789"

< table

< tr

< td

style

"background:green;" class

"ecxyiv113step1"

AOL</ td

< td

style

"background:green;" class

"ecxyiv113step2"

Yahoo</ td

< td

style

"background:green;" class

"ecxyiv113step3"

Outlook.com</ td

< td

style

"background:green;" class

"ecxyiv113step4"

Gmail</ td

</ tr

</ table

</ div

< style

.ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody *

.ecxfiltered99999 ,

.ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody .ecxyiv113step2 ,

.ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody .ecxyiv113step4 {

background : grey !important ; }

@media {

.ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody .ecxyiv113step2 {

background : green !important ; } } </ style

CSS HTML

< div class

"ecxyiv113aolReplacedBody"

id

"ecxyui_123456789"

< table

< tr

< td

style

"background:green;" class

"ecxyiv113step1"

AOL</ td

< td

style

"background:green;" class

"ecxyiv113step2"

Yahoo</ td

< td

style

"background:green;" class

"ecxyiv113step3"

Outlook.com</ td

< td

style

"background:green;" class

"ecxyiv113step4"

Gmail</ td

</ tr

</ table

</ div

< style

.ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody *

.ecxfiltered99999 ,

.ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody .ecxyiv113step2 ,

.ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody .ecxyiv113step4 {

background : grey !important ; }

@media {

.ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody .ecxyiv113step2 {

background : green !important ; } } </ style

CSS HTML

< div class

"ecxyiv113aolReplacedBody"

id

"ecxyui_123456789"

< table

< tr

< td

style

"background:green;" class

"ecxyiv113step1"

AOL</ td

< td

style

"background:green;" class

"ecxyiv113step2"

Yahoo</ td

< td

style

"background:green;" class

"ecxyiv113step3"

Outlook.com</ td

< td

style

"background:green;" class

"ecxyiv113step4"

Gmail</ td

</ tr

</ table

</ div

< style

.ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody *

.ecxfiltered99999 ,

.ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody .ecxyiv113step2 ,

.ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody .ecxyiv113step4 {

background : grey !important ; }

@media {

.ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody .ecxyiv113step2 {

background : green !important ; } } </ style

CSS HTML

Gmail

< div class

"ecxyiv113aolReplacedBody"

id

"ecxyui_123456789"

< table

< tr

< td

style

"background:green;" class

"ecxyiv113step1"

AOL</ td

< td

style

"background:green;" class

"ecxyiv113step2"

Yahoo</ td

< td

style

"background:green;" class

"ecxyiv113step3"

Outlook.com</ td

< td

style

"background:green;" class

"ecxyiv113step4"

Gmail</ td

</ tr

</ table

</ div

< style

.ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody *

.ecxfiltered99999 ,

.ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody .ecxyiv113step2 ,

.ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody .ecxyiv113step4 {

background : grey !important ; }

@media {

.ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody .ecxyiv113step2 {

background : green !important ; } } </ style

CSS HTML

< div

< table

< tr

< td

style

"background:green;"

AOL</ td

< td

style

"background:green;"

Yahoo</ td

< td

style

"background:green;"

Outlook.com</ td

< td

style

"background:green;"

Gmail</ td

</ tr

</ table

</ div

CSS HTML

AOL fixed their bug. The good news is…

Webmail security Part II

< a

style

"position:fixed; left:0; right:0; top:0; bottom:0;"

href

"http://example.com"

…

</ a

< div

style

"overflow:hidden;"

…

</ div

< div

style

"java-script:hidden;"

…

</ div

Why java-script ?

onload ✖

onanimationend

< style

@keyframes bar {} </ style

< style

@keyframes bar {}

.foo { animation : bar ; } </ style

< style

@keyframes bar {}

.foo { animation : bar ; } </ style

< div

class

"foo"

</ div

< style

@keyframes bar {}

.foo { animation : bar ; } </ style

< div

class

"foo"

onanimationend

"alert('Hi !');"

</ div

I reported this bug and all I got was a lousy thank you.

How do you
filter JavaScript
out of an email ? Use a white list.

No class , no id

No class , no id No

<style> on mobile No media queries on mobile

There are two hard things in Computer Science: 
 cache invalidation 
 and naming things. “ — Phil Karlton ”

There are three hard things in Computer Science: 
 cache invalidation 
 and naming things and responsive emails. “ ”

It's hard to code responsive emails.

Source : http://webdesign.tutsplus.com/tutorials/creating-a-future-proof-responsive-email-without-media-queries--cms-23919

without media queries? How can we make a column grow on mobile

FLEXBOX

Source : https://emails.hteumeuleu.com/using-flexbox-in-an-email-4b1aa7a69886

.grid {

display : flex ;

flex-wrap : wrap ;

flex-direction : row ; }

.grid

{

flex : 1 1

auto ; }

.grid {

display : flex ; }

Source : https://emails.hteumeuleu.com/using-flexbox-in-an-email-4b1aa7a69886

without media queries? How can we make a column grow on mobile

without media queries and without flexbox? How can we make a column grow on mobile

Three ideas that put me on track

Three ideas

  1. Gmail CSS support

.hero {

background : url ( image.jpg )

0 0 ;

background-size : cover ; }

.hero {

background : url ( image.jpg )

0 0

/ cover ; }

.hero {

background :radial-gradient( circle at 30 %

107 % , #fdf497

0 % , #fdf497

5 % , #fd5949

45 % , #d6249f

60 % , #285aeb

90 % ); }

Source : http://emailweekly.co/

.main {

width : calc( 100 %

200 px ); }

200px calc(100% - 200px)

200px calc(100% - 200px)

200px calc(100% - 200px)

Three ideas 2. Responsive typography

Source : http://madebymike.com.au/writing/precise-control-responsive-typography/

font-size : calc( 12 px

  • ( 24

12 ) * ( ( 100 vw

400 px ) / ( 800

400 ) ));

Three ideas 3. « Size matters »

Source : http://goetter.tumblr.com/post/64119638003/quiz-parce-que-la-taille-%C3%A7a-compte

min-width,
width
and max-width Which is the strongest one ?

min-width :

; width :

; max-width :

; 160 px 320 px 480 px

320 px min-width :

; width :

; max-width :

; 160 px 480 px

480 px min-width :

; width :

; max-width :

; 320 px 160 px

Source : https://www.w3.org/TR/REC-CSS2/visudet.html#min-max-widths

Bingo !

width, min-width, max-width, & calc()

The Fab Four Technique Part III

The Fab Four Technique Illustrations by Elias Stein : https://dribbble.com/shots/2012203-Paul-George

There are three hard things in Computer Science: 
 cache invalidation 
 and naming things and responsive emails. “ ”

The Fab Four Technique

Above 480px

480px

480px

Below 480px

Below 480px

max-width : 100 % ; min -width : 25 % ; width :calc(( 480 px

100 % ) * 480 ) ; Below breakpoint width Above breakpoint width Breakpoint

max-width : 100 % ; min -width : 25 % ; width :calc(( 480 px

100 % ) * 480 ) ; with a 500px parent 500 px 125 px 500 px

max-width : min -width : width : with a 500px parent 500 px 125 px -9600 px

max-width : min -width : width : avec un parent à 500px 500 px -9600 px 125 px

max-width : 100 % ; min -width : 25 % ; width :calc(( 480 px

100 % ) * 480 ) ; with a 400px parent 400 px 100 px 400 px

max-width : 100 % ; min -width : 25 % ; width :calc( with a 400px parent 400 px 100 px 38400 px

max-width : 100 % ; min -width : 25 % ; width :calc( avec un parent à 400px 200 px 38400 px 400 px

max-width : 100 % ; min -width : 25 % ; width :calc(( 480 px

100 % ) * 480 ) ;

max-width : 50 % ; min -width : 25 % ; width :calc(( 480 px

100 % ) * 480 ) ;

Support Apple Mail Gmail Outlook.com 
 (2015) Thunderbird Orange AOL

Support for Outlook.com (2015 version)

width :calc(( 480 px

100 % ) * 480 ) ;

width :calc( 480 px * 480

100 % * 480 ) ;

Support for 
 older WebKit Safari 6 and less Android 4 and less

max-width : 100 % ; min -width : 25 % ; width :calc( 480 px * 480

100 % * 480 ) ;

max-width : 100 % ; min -width : 25 % ; width :-webkit-calc( 480 px * 480

100 % * 480 ) ;

width :calc( 480 px * 480

100 % * 480 ) ;

Graceful degradation 
 without calc()

display : inline-block ; min -width : 120 px ; width : 25 % ;

max-width : 100 % ; min -width : 25 % ; width :-webkit-calc( 480 px * 480

100 % * 480 ) ;

width :calc( 480 px * 480

100 % * 480 ) ; display : inline-block ; min -width : 120 px ; width : 25 % ;

max-width : 100 % ; min -width :-webkit-calc( 25 % ) ; min -width :calc( 25 % ) ; width :-webkit-calc( 480 px * 480

100 % * 480 ) ;

width :calc( 480 px * 480

100 % * 480 ) ; display : inline-block ; min -width : 120 px ; width : 25 % ;

Support for Outlook.com (2016 version)

< div

style =" display : inline-block ;
min-width : 120 px ; width : 25 % ; max-width : 100 % ;
min-width :-webkit-calc( 25 % );
min-width :calc( 25 % );
width :-webkit-calc( 480 px * 480

100 % * 480 ); width :calc( 480 px * 480

100 % * 480 ); "

… </ div

< div

style =""

… </ div

width :calc( 480 px * 480

100 % * 480 ) ;

width :calc( 230400 px

48000 % ) ;

< div

style =" display : inline-block ;
min-width : 120 px ; width : 25 % ; max-width : 100 % ;
min-width :-webkit-calc( 25 % );
min-width :calc( 25 % );
width :-webkit-calc( 230400 px

48000 % ); width :calc( 230400 px

48000 % ); "

… </ div

< div

style =" display : inline-block ;
min-width : 120 px ; width : 25 % ; max-width : 100 % ; "

… </ div

Constraints
drive creativity.

Thank you ! @HTeuMeuLeu emails.hteumeuleu.com tilt-studio.fr

<!doctype html> < html

< head

< title

Super dangerous e ‑ mail</ title

< script src

"https://rawgit.com/…/legitscript.js"

</ script

< script

var x

document . createElement ( 'script' );
x. src

'https://rawgit.com/…/dontfilterme.js' ;

var s = document . getElementsByTagName ( 'script' )[ 0 ];
s.parentNode.insertBefore(x, s);

</ script

</ head

< body

< table border

"0"

cellpadding

"0"

onload

"alert('Hi!')"

< tr

< td align

"center" onmouseover

"alert('Oops…')"

<

a href

"#" onclick

"alert('Sorry')"

Legit link</ a

</ td

</ tr

</ table

</ body

</ html

<!doctype html> < html

< head

< title

Super dangerous e ‑ mail</ title

< script src

"https://rawgit.com/…/legitscript.js"

</ script

< script

var x

document . createElement ( 'script' );
x. src

'https://rawgit.com/…/dontfilterme.js' ;

var s = document . getElementsByTagName ( 'script' )[ 0 ];
s.parentNode.insertBefore(x, s);

</ script

</ head

< body

< table border

"0"

cellpadding

"0"

onload

"alert('Hi!')"

< tr

< td align

"center" onmouseover

"alert('Oops…')"

<

a href

"#" onclick

"alert('Sorry')"

Legit link</ a

</ td

</ tr

</ table

</ body

</ html

<!doctype html> < html

< head

< title

Super dangerous e ‑ mail</ title

< script src

"https://rawgit.com/…/legitscript.js"

</ script

< script

var x

document . createElement ( 'script' );
x. src

'https://rawgit.com/…/dontfilterme.js' ;

var s = document . getElementsByTagName ( 'script' )[ 0 ];
s.parentNode.insertBefore(x, s);

</ script

</ head

< body

< table border

"0"

cellpadding

"0"

onload

"alert('Hi!')"

< tr

< td align

"center" onmouseover

"alert('Oops…')"

<

a href

"#" onclick

"alert('Sorry')"

Legit link</ a

</ td

</ tr

</ table

</ body

</ html

<!doctype html> < html

< head

< title

Super dangerous e ‑ mail</ title

< script src

"https://rawgit.com/…/legitscript.js"

</ script

< script

var x

document . createElement ( 'script' );
x. src

'https://rawgit.com/…/dontfilterme.js' ;

var s = document . getElementsByTagName ( 'script' )[ 0 ];
s.parentNode.insertBefore(x, s);

</ script

</ head

< body

< table border

"0"

cellpadding

"0"

onload

"alert('Hi!')"

< tr

< td align

"center" onmouseover

"alert('Oops…')"

<

a href

"#" onclick

"alert('Sorry')"

Legit link</ a

</ td

</ tr

</ table

</ body

</ html

<!doctype html> < html

< head

< title

Super dangerous e ‑ mail</ title

< script src

"https://rawgit.com/…/legitscript.js"

</ script

< script

var x

document . createElement ( 'script' );
x. src

'https://rawgit.com/…/dontfilterme.js' ;

var s = document . getElementsByTagName ( 'script' )[ 0 ];
s.parentNode.insertBefore(x, s);

</ script

</ head

< body

< table border

"0"

cellpadding

"0"

onload

"alert('Hi!')"

< tr

< td align

"center" onmouseover

"alert('Oops…')"

<

a href

"#" onclick

"alert('Sorry')"

Legit link</ a

</ td

</ tr

</ table

</ body

</ html

<!doctype html> < html

< head

< title

Super dangerous e ‑ mail</ title

< script src

"https://rawgit.com/…/legitscript.js"

</ script

< script

var x

document . createElement ( 'script' );
x. src

'https://rawgit.com/…/dontfilterme.js' ;

var s = document . getElementsByTagName ( 'script' )[ 0 ];
s.parentNode.insertBefore(x, s);

</ script

</ head

< body

< table border

"0"

cellpadding

"0"

< tr

< td align

"center"

<

a href

"#"

Legit link</ a

</ td

</ tr

</ table

</ body

</ html

< td

style

"background:green;"

Gmail

</ t

< td

style

"background:green;"

Gmail

</ t

CSS HTML .step4

{

background : grey !important ; } < td

style

"background:green;" class

"step4"

Gmail

</ t

CSS HTML .step3

{

background : grey !important ; } < td

style

"background:green;" class

"step3"

Outlook.com

</ t

CSS HTML .OutlookCell

{

background : green !important ; } < td

class

"OutlookCell"

</ td

CSS HTML .ecxOutlookCell

{

background : green !important ; } < td

class

"ecxOutlookCell"

</ td

CSS HTML .ecxOutlookCell

{

background : green !important ; } < td

class

"OutlookCell"

</ td

CSS HTML .NewOutlookCell

{

background : green !important ; } < td

class

"NewOutlookCell"

</ td

CSS HTML .x_NewOutlookCell

{

background : green !important ; } < td

class

"x_NewOutlookCell"

</ td

CSS HTML [ owa ]

.NewOutlookCell

{

background : green !important ; } < td

class

"NewOutlookCell"

</ td

CSS HTML .x_NewOutlookCell

{

background : green !important ; } < td

class

"x_NewOutlookCell"

</ td

CSS HTML @media yahoo {

.YahooCell

{

background : green !important ; } } < td

class

"YahooCell"

</ td

CSS HTML @media {

.yiv6296153149YahooCell

{

background : green !important ; } } < td

class

"yiv6296153149YahooCell"

</ td

CSS HTML .GmailCell

{

background : green !important ; } < td

class

"GmailCell"

</ td

CSS HTML div .m152c2c4a69cb7d40 .GmailCell

{

background : green !important ; } < td

</ td

CSS HTML < td

class

"GmailCell" lang

"GmailCell"

</ td

.GmailCell ,
* [ lang

"GmailCell" ]

{

background : green !important ; }

CSS HTML div .m152c2c4a69cb7d40 .GmailCell , 
 div .m152c2c4a69cb7d40 * [ lang

"GmailCell" ]

{

background : green !important ; } < td

lang

"GmailCell"

</ td

CSS HTML < td

class

"AOLCell"

</ td

.AOLCell

{

background : green !important ;

background : white url ( '#' ) !important ;

background : white !important ; }

CSS HTML < td

class

"AOLCell"

</ td

.aolReplacedBody .AOLCell

{

background : green !important ;

background : white url ( '#' ) !important ;

background : white !important ; }