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

TIL 
about CSS and email clients

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Gunnar Bittersmann Gunnar Bittersmann
January 13, 2020
Programming
240
0

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

More Decks by Gunnar Bittersmann

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

Other Decks in Programming

See All in Programming
エージェンティックRAGにAWSで入門しよう！
Avatar for Har1101 har1101
9
1.9k
例外の正しい扱い方 そのエラー try-catchして大丈夫？
Avatar for Watanabe Jin jinwatanabe
0
320
SREは、MCPとSRE Agentをこう使え！
Avatar for kazumax55 kazumax55
0
130
Language Server 使ってる？ 〜VSCode と Zed の場合〜 / Are you using a Language Server? ~For VS Code and Zed~
Avatar for NAGATA Hiroaki handlename
0
820
Skillsは効率化、Agentsは"自分の拡張"——Builder時代のエージェント編成（CC Night 2026）
Avatar for Hiroki Uemura wemra
1
190
ECSアプリログをFireLensでコスト削減しようとしたけど諦めた話 in Fargate×Node.js
Avatar for アキキー | Akihisa Ikeda akihisaikeda
2
4.2k
自作OSでスライド発表する
Avatar for uyuki uyuki234
1
3.6k
代数的データ型って何が嬉しいの？ #frontend_phpcon_do
Avatar for Takuma Kajikawa kajitack
8
3.9k
Agentic UI
Avatar for Manfred Steyer manfredsteyer
PRO
0
220
そのテスト、説明できますか？~LWテスト戦略FW~のご紹介
Avatar for Kei Nakahara nakahara
0
190
技術記事、 専門家としてのプログラマ、 言語化
Avatar for Koutarou Chikuba mizchi
14
7.2k
jQueryをバージョンアップする前に使いたいjQuery Migrate
Avatar for Atsushi Matsuo matsuo_atsushi
0
630

Featured

See All Featured
Context Engineering - Making Every Token Count
Avatar for Addy Osmani addyosmani
9
1k
Agile Actions for Facilitating Distributed Teams - ADO2019
Avatar for Mark Kilby mkilby
0
220
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
3.1k
世界の人気アプリ100個を分析して見えたペイウォール設計の心得
Avatar for Akihiro Kokubo akihiro_kokubo
PRO
72
40k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
29
4.3k
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
128
18k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
141
35k
Jess Joyce - The Pitfalls of Following Frameworks
Avatar for Tech SEO Connect techseoconnect
PRO
1
180
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
85
9.5k
Effective software design: The role of men in debugging patriarchy in IT @ Voxxed Days AMS
Avatar for Kenny Baas-Schwegler baasie
0
440
Code Review Best Practice
Avatar for Trisha Gee trishagee
74
20k
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
37
7.3k

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