Upgrade to Pro — share decks privately, control downloads, hide ads and more …

TIL 
about CSS and email clients

051dbe29a972707cde167602b38c9778?s=47 Gunnar Bittersmann
January 13, 2020
Programming
0
60

TIL 
about CSS and email clients

Lightning talk on how (not) to mess up with CSS in email clients

051dbe29a972707cde167602b38c9778?s=128

Gunnar Bittersmann

January 13, 2020
Tweet

More Decks by Gunnar Bittersmann

See All by Gunnar Bittersmann
051dbe29a972707cde167602b38c9778?s=48 gunnarbittersmann
0
39
051dbe29a972707cde167602b38c9778?s=48 gunnarbittersmann
0
15
051dbe29a972707cde167602b38c9778?s=48 gunnarbittersmann
0
11
051dbe29a972707cde167602b38c9778?s=48 gunnarbittersmann
1
29
051dbe29a972707cde167602b38c9778?s=48 gunnarbittersmann
0
31
051dbe29a972707cde167602b38c9778?s=48 gunnarbittersmann
2
17
051dbe29a972707cde167602b38c9778?s=48 gunnarbittersmann
0
24
051dbe29a972707cde167602b38c9778?s=48 gunnarbittersmann
0
50
051dbe29a972707cde167602b38c9778?s=48 gunnarbittersmann
0
58

Other Decks in Programming

See All in Programming
B793da271a45d149b52f507bca9f137c?s=48 77web
0
210
5c588fdfe782f92fa6b081903edd82bb?s=48 hr01
1
1.2k
6dd0483f1353a4a359e92633cfd65c64?s=48 wasabeef
1
560
Eae7b6aeee72d3081b01d09a2d675f9a?s=48 akkeylab
0
340
6338c8fa4e2e6325094fe30b1e9f9443?s=48 malvinstn
1
630
1623dd1adf096ba35ba33727d933e14c?s=48 nbkouhou
1
1.1k
Ca91df01df9ee53c57b8c5a81aeec889?s=48 kazuki19992
0
440
9eca6d3a5658ef22998083a3d8e7ec44?s=48 shigeruoda
0
470
405fe9ab689473f267e2cfbd95f78c75?s=48 kyonmm
2
2.1k
99d4c0ed3c8027ea1c37b53d6441d042?s=48 sullis
0
120
3331499a8c17bf14833f22b9173223f1?s=48 hanakla
2
3k
6378a3035de0b841dba4ab82bd7f624d?s=48 blendthink
0
410

Featured

See All Featured
465724d73fe3a92c0879fdfb43a3a6f3?s=48 philhawksworth
192
8.8k
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
1348
190k
C4de88ea47538e4594750e3861a341c8?s=48 brettharned
93
3k
F57e2136eb9895eb95ff5dc8a1c02677?s=48 zakiwarfel
88
3.3k
5b6a2bd86ef643786a381a212e0ef2f1?s=48 geoffreycrofte
18
780
48c098b6579220a67a6ba949be6e4b5a?s=48 revolveconf
200
9.6k
A9704266587836f7e784235e5073b93e?s=48 jmmastey
9
530
2f5463832ccb768ccb4a1ca3607c27ef?s=48 jacobian
255
20k
5f2da528927a2ec9ba4fec2069cbc958?s=48 kneath
219
15k
5ce91fa49a613cbc3e20d5f96856473f?s=48 edds
56
9.3k
E837d2996f52008ace055a08fbfff992?s=48 frogandcode
127
20k
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
168
7.1k

Transcript

  1. TIL about CSS and email clients

  2. T-Mobile.pl

  3. font-family: Abril Text font-family: Abril Text; font-variant-numeric: lining-nums tabular-nums font-family:

    Abril Display; font-variant-numeric: lining-nums tabular-nums

  4. font-family: Georgia font-family: Georgia Pro; font-variant-numeric: lining-nums tabular-nums font-family: Comic

    Sans MS; font-variant-numeric: lining-nums tabular-nums

  5. font-family: Georgia font-family: Georgia Pro; font-variant-numeric: lining-nums tabular-nums font-family: Cambria;

    font-variant-numeric: lining-nums tabular-nums

  6. <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%"> <tbody> <tr> {% for

    digit in digits %} {% if loop.last %} <td align="center" class="counter" style="color:#f64040; font-family:Georgia, sans-serif; font-size:220px;"> {{ number }} "</td> {% else %} <td align="center" class="counter" style="border-right:1px solid #898882; color:#f64040; font-family:Georgia, sans-serif; font-size:220px;"> {{ number }} "</td> {% endif %} {% endfor %} "</tr>

  7. <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%"> <tbody> <tr> {% for

    digit in digits %} {% if loop.last %} <td align="center" class="counter" style="color:#f64040; font-family:Georgia, sans-serif; font-size:220px;"> {{ number }} "</td> {% else %} <td align="center" class="counter" style="border-right:1px solid #898882; color:#f64040; font-family:Georgia, sans-serif; font-size:220px;"> {{ number }} "</td> {% endif %} {% endfor %} "</tr>

  8. <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%"> <tbody> <tr style="color:#f64040; font-family:Cambria,

    Times New Roman, serif; font-size:220px"> {% for digit in digits %} {% if loop.last %} <td align="center" class="counter"> {{ number }} "</td> {% else %} <td align="center" class="counter" style="border-right:1px solid #898882;"> {{ number }} "</td> {% endif %} {% endfor %} "</tr> ☠

  9. T-Mobile.pl

  10. HAPPY END