Tehnika Fab Four za stvaranje responzivnih e-poruka bez medijskih upita

Mislim da sam pronašao novi način za stvaranje responzivnih e-poruka, bez medijskih upita. Rješenje uključuje CSS funkciju calc () i svojstva tri širine , minimalne širine i najveće širine .

Ili kako ih volim nazivati ​​sve zajedno: Fab Four (u CSS-u).

Problem

Izrada responzivnih e-adresa je teška, pogotovo jer klijenti e-pošte na mobilnim uređajima (kao što su Gmail, Yahoo ili Outlook.com) ne podržavaju medijske upite. Hibridni pristup, prva strategija za Gmail ili responzivna e-pošta bez medijskih upita izvrsni su načini prilagodbe ovoj situaciji.

Taj zadnji pristup mi je do sada bio najdraži. Velika je ideja imati stupce kao iv> s s fiksnom širinom poravnato s "display: inline- block". Jednom kada zaslon više ne može sadržavati dva bloka jedan do drugog, prirodno će teći jedan ispod drugog. Ali uvijek sam imao problema s ovim.

Jednom kad su svi blokovi složeni, ne uzimaju cijelu širinu e-pošte.

Dugo sam tražio načine da riješim ovaj problem. Flexbox je sjajan kandidat, ali nažalost podrška za Flexbox u e-pošti je zastrašujuća.

Rješenje

Sjećajući se širine , min-širine i maksimalne širine

Povrh funkcije calc () , rješenje koje sam pronašao uključuje ova tri CSS svojstva. Kako bismo u potpunosti razumjeli kako to funkcionira, evo podsjetnika na to kako se ponašaju širina , minimalna širina i maksimalna širina kada se koriste zajedno (što je jasno sažeo kolega francuski front-end programer Raphaël Goetter).

  • Ako je vrijednost širine veća od vrijednosti max-width , max-width pobjeđuje.
  • Ako je vrijednost minimalne širine veća od vrijednosti širine ili maksimalne širine , dobit će minimalna širina .

Možete li pogoditi kolika bi bila širina okvira sa sljedećim stilovima?

.box { width:320px; min-width:480px; max-width:160px;}

(Odgovor: okvir bi bio širok 480 piksela.)

Predstavljamo vam calc () i čarobnu formulu

Bez daljnjega, evo primjera Fab Four za stvaranje dva stupca koji će se slagati i rasti ispod 480px.

.block { display:inline-block; min-width:50%; max-width:100%; width:calc((480px — 100%) * 480);}

Razdvojimo ga za svako svojstvo širine .

min-width:50%;

Min širine svojstvo definira naše širine stupaca na ono što bismo mogli nazvati naš desktop verziju. Tu vrijednost možemo promijeniti da bismo dodali više stupaca (na primjer, 25% za raspored s četiri stupca) ili postavili stupce s fiksnom širinom piksela.

max-width:100%;

Max širine vlasništvo definira naše širine stupaca na ono što bismo mogli nazvati našu mobilnu verziju. Sa 100%, svaki će stupac rasti i prilagoditi se punoj širini matičnog spremnika. Ovu vrijednost možemo promijeniti kako bismo zadržali stupce na mobilnom uređaju (na primjer, 50% za raspored s dva stupca).

width:calc((480px — 100%) * 480);

Zahvaljujući funkciji calc () , svojstvo width je mjesto na kojem se događa magija. Vrijednost 480 odgovara našoj željenoj vrijednosti točke prekida. 100% odgovara širini nadređenog spremnika naših stupaca. Cilj ovog izračuna je stvoriti vrijednost veću od naše maksimalne širine ili manju od naše minimalne širine , tako da se umjesto toga primijeni bilo koje od tih svojstava.

Evo dva primjera.

S roditeljem od 500 piksela , izračunata širina iznosi -9600 piksela. Manji je od min-širine. Tako pobjeđuje minimalna širina od 50%. Tako imamo raspored u dva stupca.

S roditeljem od 400 piksela, izračunata širina jednaka je 38400 piksela. Veća je od minimalne širine, ali maksimalna širina je manja. Dakle, maksimalna širina od 100% pobjeđuje. Tako imamo raspored u jednom stupcu.

Demo

Evo demonstracije ove tehnike.

Cijeli demo možete vidjeti na mreži ovdje (ili na Litmus Builderu ili na CodePenu).

Evo i dvije snimke zaslona ove demonstracije u Gmailu, na web pošti za stolna računala i u mobilnoj aplikaciji na iOS-u. Isti kod, različit prikaz.

U ovoj demonstraciji postavio sam nekoliko primjera različitih mreža (s dva, tri, četiri stupca). Prva mreža sa slikama izgrađena je tako da ide od četiri stupca na radnoj površini do dva stupca na mobilnom uređaju. Ostale mreže izgrađene su za rast pune širine na mobilnim uređajima.

Također, primijetite kako se naslov prebacuje s poravnatog ulijevo na radnoj površini u centrirani položaj na mobitelu. To se postiže davanjem naslova fiksne širine od 190 piksela i " margin: 0 auto; ”Da ga centrira. Na radnoj površini nadređeni spremnik naslova ima primijenjenu minimalnu širinu od 190 piksela, tako da logotip ostaje s lijeve strane. Na mobilnom uređaju nadređeni spremnik raste u punoj širini, pa logotip postaje centriran.

Izvrstan aspekt ove tehnike je taj što se, budući da se sve temelji na roditeljskoj širini mreže, e-pošta može prilagoditi čak i na web pošti na radnoj površini. Na primjer, na Outlook.com, bez obzira jeste li odabrali okno za čitanje na dnu ili s desne strane, e-pošta će ispravno reagirati na širinu okna za čitanje. To bi bilo nemoguće učiniti s medijskim upitima.

Podrška

In browsers, calc() is well supported since IE9. Turns out, calc() also has a pretty good support in email clients. It works in Apple Mail (on iOS and OS X), Thunderbird, Outlook (iOS and Android apps), Gmail (webmail, iOS and Android apps), AOL (webmail), and the old Outlook.com (still present in Europe).

The old Outlook.com

Outlook.com has one small quirk, though. The webmail will filter every property with a calc() that includes any parenthesis. This means that “calc(480px - 100%)” is supported, but “calc((480px - 100%) * 480)” is not. Since my initial formula involves parenthesis, we need to refactor it to avoid parenthesis. So the formula to support the old Outlook.com looks like this.

width:calc(480px * 480 — 100% * 480);

Unsupported clients

Of course, calc() isn’t supported in old email clients like Lotus Notes, or the latest Outlook for Windows (using Word’s HTML rendering engine). It also won’t work on Outlook Web App (both Office 365 and the new Outlook.com) and Yahoo (webmail, iOS and Android apps). These two will strip out any property involving a calc().

Fallbacks

In these cases, I would suggest duplicating all involved properties with fixed width values for clients that don’t support calc(). In order to hide The Fab Four from those clients, I advise to use calc() functions, even if it’s not technically useful. Our first example would look like the following.

.block { display:inline-block; min-width:240px; width:50%; max-width:100%; min-width:calc(50%); width:calc(480px * 480 — 100% * 480);}

Outlook Web App

However, Outlook Web App (both Office 365 and the new Outlook.com) has one more quirk of its own. When a calc() function contains a multiplication (with the ‘*’ character), the new Outlook.com and Office 365 will remove the whole inline style attribute corresponding. This means we need to calculate the multiplications by hand and only keep the resulting substraction. Here’s what the final calculation looks like for a 480px breakpoint.

width:calc(230400px — 48000%);

WebKit Prefixes

Older versions of Android (before Android 5.0) or iOS (before iOS 7) require -webkit- prefixes in order to work. Our final version looks like the following.

.block { display:inline-block; min-width:240px; width:50%; max-width:100%; min-width:-webkit-calc(50%); min-width:calc(50%); width:-webkit-calc(230400px — 48000%); width:calc(230400px — 48000%);}

Shortcomings and final thoughts

Like anything in the email development world, the Fab Four technique isn’t perfect. Here are a few limitations that I can think of:

  • It won’t work on Yahoo. The desktop version of its webmail supports media queries, though. So we could improve things a bit by making a mobile first version of our email, and then enhancing it on desktop with media queries.
  • You can only set one breakpoint. This might not be such a problem for emails though, as designs rarely go beyond 600px on desktop and don’t require more than one breakpoint to adapt on mobile.
  • You can only diminish the number of columns from a desktop version to a mobile version. While this rarely happens, you couldn’t go from a four columns layout on mobile to a single column layout on desktop.
  • The final version of the calculation (to support the old Outlook.com and degrade gracefully on the new one) is hard to read. Using a preprocessor and a mixin to generate all the required properties could be more than helpful.

I still think that this technique will come in very handy in a lot of cases, especially for Gmail optimizations. I’m sure there is also use cases for websites (like widgets, ads, …).

And I can’t wait to see what this will inspire you to create.