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

TIL 
about CSS and email clients

TIL 
about CSS and email clients

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

Gunnar Bittersmann

January 13, 2020
Tweet

More Decks by Gunnar Bittersmann

Other Decks in Programming

Transcript

  1. TIL
    about CSS and email clients

    View Slide

  2. T-Mobile.pl

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide




  6. {% for digit in digits %}
    {% if loop.last %}
    style="color:#f64040; font-family:Georgia, sans-serif; font-size:220px;">
    {{ number }}
    "
    {% else %}
    style="border-right:1px solid #898882;
    color:#f64040; font-family:Georgia, sans-serif; font-size:220px;">
    {{ number }}
    "
    {% endif %}
    {% endfor %}
    "

    View Slide




  7. {% for digit in digits %}
    {% if loop.last %}
    style="color:#f64040; font-family:Georgia, sans-serif; font-size:220px;">
    {{ number }}
    "
    {% else %}
    style="border-right:1px solid #898882;
    color:#f64040; font-family:Georgia, sans-serif; font-size:220px;">
    {{ number }}
    "
    {% endif %}
    {% endfor %}
    "

    View Slide




  8. {% for digit in digits %}
    {% if loop.last %}

    {{ number }}
    "
    {% else %}
    style="border-right:1px solid #898882;">
    {{ number }}
    "
    {% endif %}
    {% endfor %}
    "

    View Slide

  9. T-Mobile.pl

    View Slide

  10. HAPPY
    END

    View Slide