สไตล์อินไลน์สำหรับอีเมล

โปรแกรมรับส่งอีเมลจำนวนมาก โดยเฉพาะ Gmail บนเว็บก่อนเดือนพฤษภาคม 2016 และแอปมือถือหลายแอปในปัจจุบัน ยังคงลบหรือเขียนทับบล็อก <style> และสไตล์ชีตภายนอก แอตทริบิวต์ style="..." ในบรรทัดจึงเป็น CSS รูปแบบเดียวที่รับประกันว่าจะยังคงอยู่ในโปรแกรมรับส่งอีเมลทุกชนิด

การเขียนสไตล์ในบรรทัดด้วยตนเองดูแลรักษาได้ยาก ควรเขียนอีเมลด้วยแท็ก <style> และชื่อคลาสตามปกติ จากนั้นเรียกใช้เครื่องมือฝังสไตล์ (Juice, Premailer, mjml) ระหว่างการสร้าง เพื่อคัดลอกกฎแต่ละข้อไปไว้ในแอตทริบิวต์ style ขององค์ประกอบที่ตรงกันก่อนส่งมอบ

สไตล์ในบรรทัดมีความจำเพาะสูงสุดรองจาก !important คิวรีสื่อที่ต้องการเขียนทับค่าในบรรทัดต้องใช้ !important กับทุกคุณสมบัติ เพราะหากไม่ใช้ การประกาศในบรรทัดจะมีผลเหนือกว่าไม่ว่าจะอยู่ในบริบท @media ใด

เครื่องมือฝังสไตล์จะคัดลอกเฉพาะกฎที่ตรงกับองค์ประกอบแต่ละรายการ ส่วนบล็อก @media จะยังอยู่ภายในแท็ก <style> เพราะไม่สามารถทำให้เป็นกฎแบบแบนได้ เรื่องนี้ไม่เป็นปัญหา Gmail และโปรแกรมลบสไตล์อื่น ๆ จะคงสไตล์ในบรรทัดไว้ และโปรแกรมรับส่งอีเมลที่รองรับแท็ก <style> จะใช้คิวรีสื่อเพิ่มเติมจากสไตล์เหล่านั้น

โปรแกรมรับส่งอีเมลบางชนิดทำงานผิดพลาดกับการเขียนแบบย่อ เช่น font: 14px/1.4 Arial อาจถูกเพิกเฉยทั้งหมด ให้ใช้รูปแบบเต็ม (font-family, font-size, line-height) เพื่อให้แต่ละคุณสมบัติทำงานหรือล้มเหลวได้อย่างอิสระ

โหมดมืดจะกลับสีโดยอัตโนมัติในโปรแกรมรับส่งอีเมลหลายชนิด การกำหนด color และ background-color อย่างชัดเจนให้กับตัวครอบข้อความจะป้องกันปัญหาร้ายแรงจากข้อความสีดำบนพื้นหลังสีดำ ควรกำหนดทั้งสองค่าเป็นคู่กันเสมอ

ควรใช้ px สำหรับกำหนดขนาด ส่วน rem, vh และ vw มีการรองรับไม่สม่ำเสมอ เปอร์เซ็นต์ใช้กับตารางสำหรับเค้าโครงเต็มความกว้างได้ ส่วนความกว้างเป็นพิกเซลแบบค่าสัมบูรณ์บนตารางด้านในและเซลล์จะแสดงผลเหมือนกันในโปรแกรมรับส่งอีเมลทุกชนิด

แบบอักษรบนเว็บผ่าน @font-face ใช้งานได้ใน Apple Mail, iOS Mail และ Thunderbird แต่ใช้ไม่ได้ใน Outlook และ Gmail โปรดใช้ชุดแบบอักษรที่ปลอดภัยสำหรับเว็บเป็นค่าแบบอินไลน์ (Arial, Helvetica, sans-serif) และใช้ @font-face เป็นเพียงการปรับปรุงเพิ่มเติมแบบค่อยเป็นค่อยไปสำหรับไคลเอนต์ที่รองรับเท่านั้น

การใช้ background-image แบบอินไลน์กับ div ใช้งานได้ในไคลเอนต์สมัยใหม่ แต่ Outlook จะไม่สนใจ ให้ใช้ bgcolor เป็นทางเลือกสำรอง และใช้ VML แบบมีเงื่อนไขกับ <v:rect> สำหรับ Outlook เพื่อให้ทุกไคลเอนต์แสดงผลพื้นหลังที่มีลักษณะเทียบเท่ากัน แม้จะไม่สามารถรักษารายละเอียดได้ครบถ้วนก็ตาม

สไตล์แบบอินไลน์อาจดูถูกต้องในตัวอย่างก่อนดูบนเบราว์เซอร์ แต่ยังอาจแสดงผลแตกต่างกันใน Gmail, Outlook หรือ iOS Mail โปรดใช้ Litmus, Email on Acid หรือภาพตัวอย่างฟรีจาก Mailtrap เพื่อตรวจสอบไคลเอนต์หลักแต่ละตัวก่อนส่งแคมเปญ

เพิ่มการรีเซ็ตขนาดเล็กในแท็ก <style> (margin: 0 บน body, line-height: 100% บนตาราง และ border: none บนรูปภาพ) เพื่อทำให้สไตล์เริ่มต้นของไคลเอนต์เป็นกลาง หากต้องการให้มีผลเฉพาะบริเวณที่รองรับ <style> ให้ครอบการรีเซ็ตนี้ด้วยมีเดียคิวรี

เหตุใดมีเดียคิวรีในอีเมล HTML จึงต้องใช้ !important กับทุกคุณสมบัติ

อีเมลต้องใช้สไตล์แบบอินไลน์เพื่อไม่ให้ถูกไคลเอนต์ลบออก แต่โดยปกติควรเขียนสไตล์ไว้ใน <style> และทำให้เป็นอินไลน์ขณะสร้างงาน ใช้ !important ภายในมีเดียคิวรีเพื่อเอาชนะความจำเพาะของสไตล์อินไลน์ เลือกใช้คุณสมบัติแบบเขียนเต็มแทนรูปแบบย่อ กำหนด color และ background-color อย่างชัดเจน ใช้หน่วย px และทดสอบในไคลเอนต์จริงก่อนส่ง