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

TIL 
about CSS and email clients

Avatar for Gunnar Bittersmann Gunnar Bittersmann
January 13, 2020
Programming
0
190

TIL 
about CSS and email clients

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

Avatar for Gunnar Bittersmann

Gunnar Bittersmann

January 13, 2020
Tweet

More Decks by Gunnar Bittersmann

See All by Gunnar Bittersmann
Responsive typography 2
Avatar for Gunnar Bittersmann gunnarbittersmann
0
130
Go home, Prettifier, you’re drunk!!
Avatar for Gunnar Bittersmann gunnarbittersmann
0
90
3 Fehler sind zu finden
Avatar for Gunnar Bittersmann gunnarbittersmann
0
160
TIL that the future :has already begun
Avatar for Gunnar Bittersmann gunnarbittersmann
0
100
TIL how to clear floats
Avatar for Gunnar Bittersmann gunnarbittersmann
0
96
TIL about showModal (from small things big things one day come)
Avatar for Gunnar Bittersmann gunnarbittersmann
0
110
Inclusive Design 24 2022 – Gunnar’s picks
Avatar for Gunnar Bittersmann gunnarbittersmann
0
95
The color rebeccapurple
Avatar for Gunnar Bittersmann gunnarbittersmann
0
150
Mehrsprachige Websites
Avatar for Gunnar Bittersmann gunnarbittersmann
0
98

Other Decks in Programming

See All in Programming
「リーダーは意思決定する人」って本当？～ 学びを現場で活かす、リーダー4ヶ月目の試行錯誤 ～
Avatar for Marina Nakagawa marina1017
0
240
Honoアップデート 2025年夏
Avatar for Yusuke Wada yusukebe
1
840
Understanding Ruby Grammar Through Conflicts
Avatar for yui-knk yui_knk
1
120
CSC305 Summer Lecture 05
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
110
画像コンペでのベースラインモデルの育て方
Avatar for tattaka tattaka
3
1.8k
AI時代のドメイン駆動設計-DDD実践におけるAI活用のあり方 / ddd-in-ai-era
Avatar for MinoDriven minodriven
23
8.9k
【第4回】関東Kaggler会「Kaggleは執筆に役立つ」
Avatar for Wataru Takahara mipypf
0
710
Laravel Boost 超入門
Avatar for Arlo fire_arlo
1
110
WebAssemblyインタプリタを書く ～Component Modelを添えて～
Avatar for ruccho ruccho
1
900
SOCI Index Manifest v2が出たので調べてみた / Introduction to SOCI Index Manifest v2
Avatar for Tetsuya Kikuchi tkikuc
1
100
MLH State of the League: 2026 Season
Avatar for Swift theycallmeswift
0
160
Jakarta EE Core Profile and Helidon - Speed, Simplicity, and AI Integration
Avatar for ivargrimstad ivargrimstad
0
180

Featured

See All Featured
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
9
560
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
15
1.6k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
28
4k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
236
140k
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
126
17k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
8
890
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
110
20k
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
59
9.5k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
251
21k
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
328
39k
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
96
6.2k
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
367
19k

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