Sisäiset tyylit sähköposteissa
Käytä CSS:ää sisäisinä tyyleinä yhtenäisen renderöinnin varmistamiseksi sähköpostiohjelmissa
Sisäiset tyylit sähköposteissa on ilmainen HTML Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu HTML Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. HTML Academy-kurssilla on yhteensä 4 oppituntia.
Miksi inline-tyylejä käytetään
Monet sähköpostiohjelmat — tunnetuimpana Gmailin verkkoversio ennen toukokuuta 2016, mutta myös useat nykyiset mobiilisovellukset — poistavat tai muokkaavat <style>-lohkoja ja ulkoisia tyylitiedostoja. Inline-style="..."-attribuutit ovat ainoa CSS-ratkaisu, jonka säilyminen voidaan taata jokaisessa ohjelmassa.
Kirjoita ulkoiseen CSS:ään, vie inline-muotoon
Inline-tyylien kirjoittaminen käsin ei ole ylläpidettävää. Kirjoittakaa sähköposti tavallisilla <style>-tageilla ja class-nimillä, ja suorittakaa koontivaiheessa inliner (Juice, Premailer, mjml), joka kopioi jokaisen säännön vastaavan elementin style-attribuuttiin ennen julkaisua.
Spesifisyys ratkaisee
Inline-tyyleillä on suurin spesifisyysarvo, kun !important-määritystä ei oteta huomioon. Inline-arvon ohittavan media queryn on käytettävä !important-määritystä jokaisessa ominaisuudessa, koska inline-määrite voittaa muuten @media-kontekstista riippumatta.
@media (max-width: 600px) {
.col {
width: 100% !important;
display: block !important;
}
}Inlinerit eivät koske @media-lohkoihin
Inlinerit kopioivat vain yksittäisiin elementteihin täsmäävät säännöt; @media-lohkot jäävät <style>-tagin sisään, koska niitä ei voi muuntaa suoraan elementeiksi. Tämä toimii hyvin: Gmail ja muut poistajat säilyttävät inline-tyylit ennallaan, ja <style>-tageja tukevat ohjelmat soveltavat media queryt niiden päälle.
Vältä lyhennysmerkintöjä
Jotkin ohjelmat rikkovat lyhennysmerkinnät: font: 14px/1.4 Arial voidaan ohittaa kokonaan. Käyttäkää pitkää muotoa (font-family, font-size, line-height), jotta kukin ominaisuus joko toimii tai epäonnistuu itsenäisesti.
Aseta aina väri ja tausta
Tumma tila kääntää värit automaattisesti monissa ohjelmissa. Määrittäkää tekstisäiliöille eksplisiittisesti color ja background-color, jotta vältätte mustan tekstin mustalla taustalla. Asettakaa nämä aina yhdessä.
Mittayksiköt
Käyttäkää mitoitukseen px-yksikköä. rem-, vh- ja vw-yksiköiden tuki vaihtelee. Prosenttiosuudet toimivat täysleveissä asetteluissa taulukoissa, kun taas sisempien taulukoiden ja solujen absoluuttiset pikselileveydet renderöityvät samalla tavalla eri ohjelmissa.
Fontit: web-safe-fonttipinot
Web-fontit @font-face-määrittelyllä toimivat Apple Mailissa, iOS Mailissa ja Thunderbirdissa, mutta eivät Outlookissa ja Gmailissa. Käyttäkää inline-arvona web-safe-fonttipinoa (Arial, Helvetica, sans-serif) ja varatkaa @font-face ainoastaan progressiiviseksi parannukseksi asiakkaille, jotka tukevat sitä.
Taustakuvat ja Outlook
Div-elementin inline-määrite background-image toimii moderneissa asiakasohjelmissa, mutta Outlook jättää sen huomiotta. Käyttäkää varalla bgcolor-määritettä ja ehdollista VML-elementtiä <v:rect> Outlookia varten, jotta jokainen asiakasohjelma näyttää visuaalisesti vastaavan taustan silloinkin, kun täydellinen yhdenmukaisuus ei ole mahdollista.
Testatkaa oikeissa asiakasohjelmissa
Inline-tyylit näyttävät oikeilta selaimen esikatselussa, mutta sähköposti voi silti näkyä eri tavalla Gmailissa, Outlookissa tai iOS Mailissa. Käyttäkää Litmusta, Email on Acidia tai ilmaisia Mailtrap-esikatseluja tarkistaaksenne jokaisen merkittävän asiakasohjelman ennen kampanjan lähettämistä.
Nollaustyylit
Lisätkää pieni nollaus <style>-tagiin (margin: 0 body-elementille, line-height: 100% taulukoille ja border: none kuville) neutraloimaan asiakasohjelmien oletustyylit. Ympäröikää se media queryllä, jos haluatte käyttää sitä vain siellä, missä <style> otetaan huomioon.
Tietotesti
Miksi HTML-sähköpostien media queryt edellyttävät !important-määritettä jokaiselle ominaisuudelle?
Yhteenveto
Sähköposteissa tarvitaan inline-tyylejä, jotta asiakasohjelmat eivät poista niitä, mutta kirjoittakaa tyylit tavallisesti <style>-tagiin ja lisätkää ne inline-tyyleiksi koontivaiheessa. Käyttäkää media queryissä !important-määritettä ohittamaan inline-tyylien spesifisyys, suosikaa pitkän muodon ominaisuuksia lyhennemuotojen sijaan, määrittäkää color ja background-color eksplisiittisesti, pitäytykää px-yksiköissä ja testatkaa oikeissa asiakasohjelmissa ennen lähettämistä.
Opi HTML tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 40
- Oppitunnit
- 159
Usein kysytyt kysymykset
Onko oppitunti ”Sisäiset tyylit sähköposteissa” ilmainen?
Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa HTML Academy-oppimispolun 3 oppituntia, myös oppitunnin “Sisäiset tyylit sähköposteissa”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. HTML Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Sisäiset tyylit sähköposteissa”?
Käytä CSS:ää sisäisinä tyyleinä yhtenäisen renderöinnin varmistamiseksi sähköpostiohjelmissa Harjoittelet HTML Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni HTML Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin HTML Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/4.
Kuinka kauan ”Sisäiset tyylit sähköposteissa”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä HTML Academy-oppitunnilla?
Kyllä. Jokainen HTML Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- Taulukkopohjainen asettelutapa
- Sisäiset tyylit sähköposteissa
- Kuvien käsittely sähköpostiohjelmissa
- Testaus Litmuksella ja Email on Acidilla