Pro Yearly is on sale from $80 to $50! »

Thinking Outside the table

Thinking Outside the table

Email constraints can be frustrating for a web developer (damn you, [insert your most loathed email client here]). But aside from annoying bugs, these constraints are sometimes here for very important security reasons. These constraints can also be a fuel for brand new ideas and techniques unique to emails. From a goofy email that evolves as you forward it, to a brand new technique to build responsive email without media queries, this talk will guide you inside the mind of an email geek.

Read the full transcript here: https://emails.hteumeuleu.com/thinking-outside-the-table-at-tedc16-a58a76c7c625

A6201a057eac39e2b97a5a58d5f8601e?s=128

HTeuMeuLeu

July 27, 2016
Tweet

Transcript

  1. Litmus Conf London, 2016/07/27

  2. Rémi Parmentier @HTeuMeuLeu

  3. THINKING OUTSIDE THE <TABLE>

  4. Super Mail Forward Part I

  5. None
  6. None
  7. What happens when you forward an email? (from a webmail)

  8. None
  9. Not much more than when the webmail receives it in

    the first place.
  10. .cell { color: white; background: green url(image.jpg); }

  11. .cell { color: white; }

  12. AOL Yahoo Outlook.com Gmail

  13. AOL Yahoo Outlook.com Gmail AOL

  14. ! <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
  15. ! <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
  16. ! <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
  17. None
  18. <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
  19. <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
  20. <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
  21. <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(&quot;<a href="spacer.gif&quot" target=_blank>spacer.gif</a>;)!important; background:grey!important; } </style> CSS HTML
  22. <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
  23. Yahoo

  24. <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
  25. <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
  26. <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
  27. <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
  28. <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
  29. <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
  30. Outlook.com

  31. <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
  32. <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
  33. <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
  34. <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
  35. <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
  36. Gmail

  37. <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
  38. <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
  39. None
  40. None
  41. None
  42. None
  43. None
  44. None
  45. None
  46. None
  47. None
  48. None
  49. None
  50. None
  51. None
  52. None
  53. None
  54. AOL fixed their bug. The good news is…

  55. None
  56. None
  57. Webmail security Part II

  58. <a style="position:fixed; left:0; right:0; top:0; bottom:0;" href="http://example.com"> … </a>

  59. <div style="overflow:hidden;"> … </div>

  60. <div style="java-script:hidden;"> … </div>

  61. None
  62. None
  63. Why java-script ?

  64. None
  65. None
  66. None
  67. None
  68. onload ✖

  69. onanimationend

  70. <style> @keyframes bar {} </style>

  71. <style> @keyframes bar {} .foo { animation:bar; } </style>

  72. <style> @keyframes bar {} .foo { animation:bar; } </style> <div

    class="foo"></div>
  73. <style> @keyframes bar {} .foo { animation:bar; } </style> <div

    class="foo" onanimationend="alert('Hi !');"></div>
  74. None
  75. I reported this bug and all I got was a

    lousy thank you.
  76. How do you filter JavaScript out of an email ?

    Use a white list.
  77. None
  78. No class, no id No <style> on mobile No media

    queries on mobile
  79. There are two hard things in Computer Science:
 cache invalidation

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

    
 and naming things and responsive emails. “ ”
  81. It's hard to code responsive emails.

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

  83. None
  84. None
  85. without media queries? How can we make a column grow

    on mobile
  86. F L E X B O X

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

  88. .grid { display: flex; flex-wrap: wrap; flex-direction: row; } !

    .grid > * { flex: 1 1 auto; }
  89. .grid { display: flex; }

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

  91. without media queries? How can we make a column grow

    on mobile
  92. without media queries and without flexbox? How can we make

    a column grow on mobile
  93. Three ideas that put me on track

  94. Three ideas 1. Gmail CSS support

  95. .hero { background: url(image.jpg) 0 0; background-size: cover; }

  96. .hero { background: url(image.jpg) 0 0 / cover; }

  97. .hero { background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285aeb

    90%); }
  98. Source : http://emailweekly.co/

  99. .main { width: calc(100% - 200px); }

  100. 200px calc(100% - 200px)

  101. 200px calc(100% - 200px)

  102. Three ideas 2. Responsive typography

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

  104. font-size: calc( 12px + (24 - 12) * ( (100vw

    - 400px) / ( 800 - 400) ));
  105. Three ideas 3. « Size matters »

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

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

  108. min-width: ; width: ; max-width: ; 160px 320px 480px

  109. 320px min-width: ; width: ; max-width: ; 160px 480px

  110. 480px min-width: ; width: ; max-width: ; 320px 160px

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

  112. None
  113. Bingo !

  114. width,! min-width,! max-width,! & calc()

  115. The Fab Four Technique Part III

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

  117. None
  118. There are three hard things in Computer Science:
 cache invalidation

    
 and naming things and responsive emails. “ ”
  119. The Fab Four Technique

  120. Above 480px

  121. Below 480px

  122. max$width:100%;/ min$width:25%;/ width:calc((480px/$/100%)/*/480); Below breakpoint width Above breakpoint width Breakpoint

  123. max$width:100%;/ min$width:25%;/ width:calc((480px/$/100%)/*/480); with a 500px parent 500px 125px 500px

  124. max$width:/ min$width:/ width: with a 500px parent 500px 125px $9600px

  125. max$width:/ min$width:/ width: avec un parent à 500px 500px $9600px

    125px
  126. max$width:100%;/ min$width:25%;/ width:calc((480px/$/100%)/*/480); with a 400px parent 400px 100px 400px

  127. max$width:100%;/ min$width:25%;/ width:calc( with a 400px parent 400px 100px 38400px

  128. max$width:100%;/ min$width:25%;/ width:calc( avec un parent à 400px 200px 38400px

    400px
  129. max$width:100%;/ min$width:25%;/ width:calc((480px/$/100%)/*/480);

  130. max$width:50%;/ min$width:25%;/ width:calc((480px/$/100%)/*/480);

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

  133. Support for Outlook.com (2015 version

  134. None
  135. width:calc((480px/$/100%)/*/480);

  136. width:calc(480px/*/480/$/100%/*/480);

  137. Support for 
 older WebKit Safari 6 and less Android

    4 and less
  138. max$width:100%;/ min$width:25%;/ width:calc(480px/*/480/$/100%/*/480);

  139. max$width:100%;/ min$width:25%;/ width:$webkit$calc(480px/*/480/$/100%/*/480);/ width:calc(480px/*/480/$/100%/*/480);

  140. Graceful degradation
 without calc()

  141. display:inline$block;/ min$width:120px;/ width:25%;

  142. max$width:100%;/ min$width:25%;/ width:$webkit$calc(480px/*/480/$/100%/*/480);/ width:calc(480px/*/480/$/100%/*/480); display:inline$block;/ min$width:120px;/ width:25%;

  143. max$width:100%;/ min$width:$webkit$calc(25%);/ min$width:calc(25%);/ width:$webkit$calc(480px/*/480/$/100%/*/480);/ width:calc(480px/*/480/$/100%/*/480); display:inline$block;/ min$width:120px;/ width:25%;

  144. Support for Outlook.com (2016 version

  145. None
  146. <div/style="display:inline$block;// min$width:120px;/ width:25%;/ max$width:100%;// min$width:$webkit$calc(25%);// min$width:calc(25%);// width:$webkit$calc(480px/*/480/$/100%/*/480);/ width:calc(480px/*/480/$/100%/*/480);">/ / …/

    </div>
  147. <div/style="">/ / …/ </div>

  148. width:calc(480px/*/480/$/100%/*/480);

  149. width:calc(230400px/$/48000%);

  150. <div/style="display:inline$block;// min$width:120px;/ width:25%;/ max$width:100%;// min$width:$webkit$calc(25%);// min$width:calc(25%);// width:$webkit$calc(230400px/$/48000%);/ width:calc(230400px/$/48000%);">/ / …/

    </div>
  151. <div/style="display:inline$block;// min$width:120px;/ width:25%;/ max$width:100%;">/ / …/ </div>

  152. Constraints drive creativity.

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