La technique des Fab Four

La technique des Fab Four

Intégrer des e-mails responsive, c'est difficile. Et ça impose de travailler avec un support de CSS minimal, souvent sans media queries. Voici la présentation d'une technique un peu tordue permettant d'optimiser du contenu sur mobile, sans media queries. Et un premier pas vers des Element Queries…

A6201a057eac39e2b97a5a58d5f8601e?s=128

HTeuMeuLeu

June 09, 2017
Tweet

Transcript

  1. 3.

    Il y a deux choses compliquées en informatique : l'invalidation

    d'un cache et nommer les choses. “ — Phil Karlton ”
  2. 4.

    Il y a trois choses compliquées en informatique : l'invalidation

    d'un cache et nommer les choses et faire des e-mails responsive. “ ”
  3. 6.

    Apple Mail Gmail Outlook Yahoo! Orange Android Support de @media

    sur mobile en 2016 iOS Android Webmail mobile iOS Android Outlook.com Android 4 iOS 9 iOS 8 iOS 7 Webmail mobile iOS Android Office 365 Android 5+ ✔ ✔ ✔ ✔
  4. 8.
  5. 9.
  6. 12.
  7. 15.
  8. 23.

    .hero { background: radial-gradient( circle at 30% 107%, #fdf497 0%,

    #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90% ); }
  9. 32.

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

    - 400px) / ( 800 - 400) ));
  10. 39.
  11. 40.
  12. 42.

    La technique 
 des Fab Four Illustrations by Elias Stein

    : https://dribbble.com/shots/2012203-Paul-George
  13. 43.
  14. 44.

    Il y a trois choses compliquées en informatique : l'invalidation

    d'un cache et nommer les choses et faire des e-mails responsive. “ ”
  15. 46.
  16. 47.

    max-­‐width:100%;   min-­‐width:25%;   width:calc((480px  -­‐  100%)  *  480); En

    dessous du point de rupture Au dessus du point de rupture Le point de rupture
  17. 50.

    max-­‐width:   min-­‐width:   width: avec un parent à 500px

    500px 125px -­‐9600px avec un parent à 500px
  18. 54.
  19. 57.
  20. 65.

    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%;
  21. 66.

    max-­‐width:100%;   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%;
  22. 67.

    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%;
  23. 69.
  24. 70.

    <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>
  25. 74.

    <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>
  26. 80.
  27. 81.