Inline-styles til e-mails

Indlejrede formateringer har den højeste specificitet bortset fra !important. En medieforespørgsel, der vil tilsidesætte en indlejret værdi, skal bruge !important for hver egenskab, fordi den indlejrede erklæring ellers vinder uanset @media-konteksten.

Værktøjer til indlejring kopierer kun de regler, der matcher enkelte elementer; @media-blokke bliver inde i <style>-tagget, fordi de ikke kan flades ud. Det er fint — Gmail og andre klienter, der fjerner stilark, lader de indlejrede formateringer være intakte, og klienter, der respekterer <style>-tags, anvender medieforespørgslerne ovenpå.

Nogle klienter går i stykker ved kort notation: font: 14px/1.4 Arial bliver måske ignoreret helt. Brug den lange form (font-family, font-size, line-height), så hver egenskab enten virker eller fejler uafhængigt af de andre.

Mange klienter inverterer automatisk farver i mørk tilstand. Hvis du angiver color og background-color eksplicit på tekstbeholdere, forhindrer du katastrofer med sort tekst på sort baggrund. Angiv altid begge.

Hold dig til px til dimensionering. rem, vh og vw understøttes ikke ensartet. Procenter fungerer på tabeller til layout i fuld bredde; absolutte pixelbredder på indre tabeller og celler gengives ens i alle klienter.

Webskrifttyper via @font-face fungerer i Apple Mail, iOS Mail og Thunderbird, men virker ikke i Outlook og Gmail. Brug en websikker skrifttypestak som inline-værdi (Arial, Helvetica, sans-serif), og gem udelukkende @font-face som en progressiv forbedring til klienter, der understøtter den.

En inline background-image på en div fungerer i moderne klienter, men ignoreres af Outlook. Brug bgcolor som reserveværdi og betinget VML <v:rect> til Outlook, så alle klienter viser en visuelt tilsvarende baggrund, selv når fuld nøjagtighed ikke er mulig.

Inline-typografier ser rigtige ud i en browserforhåndsvisning, men kan stadig blive vist anderledes i Gmail, Outlook eller iOS Mail. Brug Litmus, Email on Acid eller de gratis forhåndsvisninger i Mailtrap til at kontrollere hver vigtig klient, før du sender kampagnen.

Tilføj en lille nulstilling i <style>-tagget (margin: 0 på body, line-height: 100% på tabeller, border: none på billeder) for at neutralisere klienternes standardtypografier. Pak den ind i en medieforespørgsel, hvis du kun vil anvende den dér, hvor <style> respekteres.

E-mails har brug for inline-typografier for at overleve, at klienter fjerner typografier, men du bør normalt skrive dem i <style> og indsætte dem inline på byggetidspunktet. Brug !important i medieforespørgsler for at slå inline-specificiteten, foretræk egenskaber skrevet i fuld form frem for forkortelser, angiv color og background-color eksplicit, hold dig til enheden px, og test i rigtige klienter, før du sender.