Caniemail.com - บริการตรวจสอบความเข้ากันได้ของคอนเทนต์อีเมล (caniuse เวอร์ชันอีเมล)

 (caniemail.com)
6 คะแนน โดย GN⁺ 2024-05-07 | 1 ความคิดเห็น | แชร์ทาง WhatsApp

การรองรับพร็อพเพอร์ตี CSS transition (29 มีนาคม 2024)

  • เนื้อหาที่สรุปสถานะการรองรับพร็อพเพอร์ตี CSS transition ในอีเมลไคลเอนต์
  • พร็อพเพอร์ตี CSS transition เป็นความสามารถที่ทำให้การเปลี่ยนแปลงค่าของพร็อพเพอร์ตี CSS มีเอฟเฟ็กต์แอนิเมชันในช่วงเวลาที่กำหนด
  • ในอีเมลไคลเอนต์ยังไม่รองรับอย่างกว้างขวาง

การรองรับพร็อพเพอร์ตี CSS text-wrap (3 เมษายน 2024)

  • เนื้อหาที่สรุปสถานะการรองรับพร็อพเพอร์ตี CSS text-wrap ในอีเมลไคลเอนต์
  • พร็อพเพอร์ตี CSS text-wrap เป็นพร็อพเพอร์ตีที่กำหนดว่าจะตัดบรรทัดคำยาวอย่างไร
  • ในอีเมลไคลเอนต์ยังไม่รองรับอย่างกว้างขวาง

การรองรับพร็อพเพอร์ตี CSS word-spacing, shape-margin, shape-outside (13 มีนาคม 2024)

  • เนื้อหาที่สรุปสถานะการรองรับพร็อพเพอร์ตี CSS word-spacing, shape-margin, shape-outside ในอีเมลไคลเอนต์
  • CSS word-spacing เป็นพร็อพเพอร์ตีที่ใช้ปรับระยะห่างระหว่างคำ
  • CSS shape-margin และ shape-outside เป็นพร็อพเพอร์ตีที่กำหนดวิธีให้ข้อความล้อมรอบรูปภาพหรือวัตถุ
  • ในอีเมลไคลเอนต์ยังไม่รองรับอย่างกว้างขวาง

ข่าวอัปเดต Caniemail เดือนมีนาคม 2024 (29 มีนาคม 2024)

  • ข่าวที่สรุปเนื้อหาการอัปเดตที่เพิ่มเข้ามาในเว็บไซต์ Caniemail ในเดือนมีนาคม 2024

ข่าวอัปเดต Caniemail เดือนกุมภาพันธ์ 2024 (29 กุมภาพันธ์ 2024)

  • ข่าวที่สรุปเนื้อหาการอัปเดตที่เพิ่มเข้ามาในเว็บไซต์ Caniemail ในเดือนกุมภาพันธ์ 2024

สถานะการรองรับพร็อพเพอร์ตี CSS ของอีเมลไคลเอนต์

  • Apple Mail (macOS) : รองรับ 267 จาก 284 รายการ
  • Apple Mail (iOS) : รองรับ 266 จาก 284 รายการ
  • Samsung Email (Android) : รองรับ 239 จาก 284 รายการ
  • SFR (Desktop Webmail) : รองรับ 226 จาก 257 รายการ
  • WEB.DE (iOS) : รองรับ 222 จาก 235 รายการ

แนะนำเว็บไซต์ Caniemail

  • เป็นเว็บไซต์ที่เปิดตัวและดูแลโดย @HTeuMeuLeu และทีม Tilt Studio
  • อ้างอิงจาก caniuse.com ต้นฉบับของ @Fyrd และออกแบบโดย @Lensco
  • อ้างอิงจากไอเดียและชื่อดั้งเดิมของ @M_J_Robbins และทีม Rebel
  • ชุมชนนักพัฒนาอีเมลบน GitHub ช่วยสนับสนุนการมีส่วนร่วมด้านข้อมูล
  • หากพบปัญหา แนะนำให้รายงานบั๊กบน GitHub

ความเห็นของ GN⁺

  • เป็นเว็บไซต์ที่มีประโยชน์มากสำหรับนักพัฒนาอีเมล เพราะสามารถดูสถานะการรองรับพร็อพเพอร์ตี CSS ของแต่ละอีเมลไคลเอนต์ได้ในภาพรวม เป็นเว็บไซต์ที่จำเป็นมากสำหรับตรวจสอบความเข้ากันได้เมื่อต้องการนำพร็อพเพอร์ตี CSS ใหม่มาใช้กับอีเมล
  • ปัจจุบันการรองรับ CSS ของอีเมลไคลเอนต์ยังด้อยกว่าเว็บเบราว์เซอร์มาก พร็อพเพอร์ตีที่เกี่ยวกับแอนิเมชันหรือเลย์เอาต์แทบไม่ได้รับการรองรับ จึงเป็นข้อจำกัดของการออกแบบอีเมล
  • มีการแจ้งข่าวอัปเดตอย่างสม่ำเสมอ จึงน่าจะช่วยให้นักพัฒนาอีเมลติดตามข้อมูลล่าสุดได้ อย่างไรก็ตาม รอบการอัปเดตอาจถี่เกินไปจนตามไม่ทันได้
  • มีเว็บไซต์คล้ายกันอย่าง EmailOnAcid และ Litmus แต่เว็บไซต์เหล่านี้ต่างกันตรงที่มีภาพหน้าจอพรีวิวการเรนเดอร์ในแต่ละไคลเอนต์ให้ดู หากใช้งานร่วมกับ Caniemail ก็น่าจะเกิดผลเสริมกันได้

บทความที่เกี่ยวข้อง

1 ความคิดเห็น

 
GN⁺ 2024-05-07
ความคิดเห็นจาก Hacker News

  • เป็นแหล่งข้อมูลที่ยอดเยี่ยม และ Outlook นี่ชวนปวดหัวจริง ๆ แถมรองรับอะไรน้อยมาก
    ปกติเวลาทำเทมเพลตอีเมลสำหรับการแจ้งเตือนของแอปในบริษัทมักจะลำบาก แต่หลังจากเปลี่ยนมาใช้ MJML(https://mjml.io/) แล้วทุกอย่างราบรื่นขึ้นมาก
    จากหลายอุปกรณ์ที่ทดสอบ ผลลัพธ์ดูเข้ากันได้ดีที่สุด และตรวจสอบการเรนเดอร์บนแอปกับอุปกรณ์ต่าง ๆ ด้วย Litmus(https://litmus.com) ส่วน https://testi.at/ ที่มีคนพูดถึงในเธรดอื่นก็ลองใช้แล้วเข้ากันได้ดี

    • MJML ดูน่าสนใจดี อยากให้องค์กรมีเหตุผลทางธุรกิจที่จะใส่ใจกับอีเมลที่เข้าถึงได้และอ่านได้ด้วยเครื่อง
      HTML email เหมือนหยุดอยู่ในยุคเว็บสมัย IE6 ดังนั้นงานอีเมลส่วนน้อยที่ต้องการมากกว่ารายการแท็กรูปภาพ ผมจึงใช้ Foundation for Emails(https://get.foundation/emails.html) มาตลอด และรู้สึกขอบคุณที่มันมีอยู่
    • MJML เป็นเครื่องมือที่ดีที่สุดอย่างชัดเจนในด้านนี้ และใช้บ่อย ถ้าจะทำอีเมลในปี 2024 นี่คือทางลัดสำคัญที่ช่วยเลี่ยงหรือลดปัญหาใหญ่ ๆ ของ HTML email ได้
    • สำหรับการสร้างอีเมล ขอแนะนำ react-email(https://react.email) ด้วย คอมโพเนนต์ที่ให้มามีเพียงพอ และดีกว่าการสร้างอีเมลแบบยุคการตลาดอีเมลเก่าที่ต้องใส่แท็กทุก ๆ ห้าบรรทัดมาก
    • ทุกวันนี้ Outlook คงเป็นเหมือน Internet Explorer ของอีเมล

  • มีเรื่องขำ ๆ เกี่ยวกับไซต์นี้อยู่ ผู้ดูแลเคยบอกว่าในล็อกการใช้งานมีร่องรอยจำนวนมากของคนที่เข้าใจวัตถุประสงค์ของไซต์ผิด ใส่ชื่อคนดังแล้วพยายามส่งอีเมลถึงพวกเขา

    • ตอนแรกพยายามทำความเข้าใจว่ามันคืออะไร แต่หาอธิบายอะไรไม่ค่อยเจอ บอกว่าเป็น “caniuse สำหรับคอนเทนต์อีเมล” ซึ่งถ้าไม่รู้ว่า caniuse คืออะไร ก็เข้าใจยาก
      ก่อนเปิดตัวบริการใหม่ ถ้ามีส่วนอธิบายสั้น ๆ ให้คนทั่วไปพอรู้ว่ามันคืออะไรได้ก็คงดี

  • คะแนนยิ่งต่ำยิ่งดี ผมรู้จักคนอยู่ไม่น้อยที่มีนโยบายว่า “อีเมลอนุญาตเฉพาะ ข้อความล้วน เท่านั้น ไฟล์แนบที่ไม่ได้ตกลงกันล่วงหน้าไม่อนุญาต และที่เหลือให้ลบอัตโนมัติ”

    • การขยายจากข้อความล้วนอีกเล็กน้อยก็มีเหตุผล ไม่ใช่แค่เรื่องตกแต่ง แต่การใช้งานอย่าง ภาษาที่เขียนจากขวาไปซ้าย, รายการ, ลิงก์ ฯลฯ มีมาร์กอัปนิดหน่อยก็ช่วยได้ และ HTML ก็เพียงพอแล้ว
      ปัญหาอยู่ที่การใช้ CSS มากเกินไป หรือถึงขั้นอนุญาต JavaScript เลยนั่นแหละ นึกไม่ออกว่ามีปัญหาความปลอดภัยของอีเมลที่เกิดจาก HTML อย่างเดียวโดยไม่มี CSS หรือ JavaScript
    • รู้จักอย่างน้อยสองคนที่ส่งอีเมลโดยเวอร์ชัน HTML ว่างเปล่า หรือมีแค่ข้อความว่า “อย่าใช้ไคลเอนต์ที่บวมเทอะทะ” แล้วเนื้อหาจริงอยู่ใน เนื้อหาทางเลือกแบบข้อความล้วน
      ถ้าจะอ่านใน Thunderbird เหมือนว่าต้องเปิดดูต้นฉบับอีเมล

  • ลิงก์ที่เกี่ยวข้อง:
    Can I Email? - https://news.ycombinator.com/item?id=27112960 - พฤษภาคม 2021, 273 ความเห็น
    Can I Email: ‘Can I Use’ for email - https://news.ycombinator.com/item?id=20948826 - กันยายน 2019, 196 ความเห็น
    'Can I Use' for Email - https://news.ycombinator.com/item?id=20934601 - กันยายน 2019, 1 ความเห็น

  • ไคลเอนต์ยอดนิยมสองอันดับแรกอย่าง Gmail และ Outlook อยู่ที่อันดับ 25 และ 41 ตามลำดับ หรือก็คืออยู่กลุ่มท้าย ๆ

    • ถ้าดูฟีเจอร์ที่ Gmail ไม่รองรับ จะมีอย่าง display: none, แอนิเมชัน และ CSS อื่น ๆ ที่ยากจะบอกว่าจำเป็นต้องมีในอีเมล
      พื้นฐานก็มีครบแล้ว ดังนั้นอันดับสูงอาจไม่ใช่เป้าหมายที่ดีเสมอไป
    • ทำให้นึกถึง Internet Explorer ที่เคยเป็นที่นิยมที่สุดแต่ฟีเจอร์ขาด ๆ เกิน ๆ

  • HTML “document” ที่มีฟีเจอร์ครบถ้วนจริง ๆ แล้วไม่ค่อยใช่เอกสาร แต่ใกล้เคียงกับแอปพลิเคชันมากกว่า ดังนั้นการที่เมลไคลเอนต์จำกัดการรองรับก็สมเหตุสมผล
    แต่เพราะความแตกกระจายแบบนี้ เลยอยากให้มีมาตรฐานจริง ๆ จำเป็นต้องมี HTML subset ที่ไม่ใช่แอปพลิเคชัน อย่างเป็นทางการ ซึ่งไม่สามารถดึงรีซอร์สระยะไกลหรือรันโค้ดได้ เป็นรูปแบบเอกสารที่มีสื่อฝังในตัว แอนิเมชัน สไตล์ลิง ฯลฯ ก็พอ

    • ถ้ามีแอนิเมชันกับสื่อวิดีโอที่ไม่ใช่แบบนิ่ง ยังเรียกว่า “เอกสาร” ได้ไหม?
    • พูดตรง ๆ คือไม่มีเหตุผลที่คนอื่นต้องส่งโค้ดให้ผมรันหรือส่งรีซอร์สให้ผมไปดึง
      เข้าใจว่าอุตสาหกรรมเทคโนโลยีโฆษณาอยากใช้อีเมลของผมเป็นป้ายโฆษณา แต่ขอให้ไปไกล ๆ เถอะ ข้อความล้วนกับไฟล์แนบ ก็พอแล้ว

  • หมายเหตุ: jsx-email มีฟังก์ชันตรวจสอบความเข้ากันได้ของอีเมลไคลเอนต์ผ่าน CLI ในตัว โดยใช้ชุดข้อมูล caniemail: https://jsx.email/docs/core/cli#check

  • น่าจะมีประโยชน์กว่าถ้าลิสต์เฉพาะ คุณสมบัติ CSS ไม่กี่อย่างที่อีเมลไคลเอนต์ทุกตัวรู้จัก พูดจริง ๆ ไม่ได้ล้อเล่น
    คำตอบของ CanIEmail? ส่วนใหญ่คือ “ไม่”

    • ถ้าเลือก “check all” ที่ https://www.caniemail.com/clients/ จะดูแยกได้ว่าฟีเจอร์ไหนที่อีเมลไคลเอนต์ทั้งหมดรองรับ และฟีเจอร์ไหนที่การรองรับต่างกันไป
      ที่ดูเหมือนว่าทุกตัวรองรับก็มีประมาณ border-collapse, ชอร์ตแฮนด์ font, list-style-type, หน่วย CSS หลายแบบ (cm, em, ex, in, mm, pc, %, pt, px), vertical-align, องค์ประกอบ HTML บางส่วนกับแอตทริบิวต์ valign, และฟอร์แมตรูปภาพ JPG/PNG

  • ตอนแรกนึกว่าเป็นไซต์ล้อเล่นที่แสดงคำว่า “No.” ตัวใหญ่ ๆ อย่างเดียว

    • เวลาทีมดีไซน์ขออัปเดตเทมเพลตอีเมล คำตอบเริ่มต้นของผมก็ประมาณนั้นแหละ “ไม่ได้ครับ ใช้แค่รูปแบบพื้นฐาน ถ้าอยากกล้าหน่อยก็ใช้ตารางได้ แค่นั้น เกินกว่านั้นไม่ได้”

  • การรองรับ ดาร์กโหมด ในอีเมล เป็นหนึ่งในเรื่องที่น่าหงุดหงิดที่สุดที่เคยเจอในฐานะฟรอนต์เอนด์เดเวลลอปเปอร์ที่เขียนโค้ดมาตั้งแต่ยุค IE6
    โดยพื้นฐานแล้วทำได้แค่สร้างดีไซน์โหมดสว่าง แล้วเลือกสีที่ยังดูโอเคเมื่ออีเมลไคลเอนต์ดาร์กโหมดห่วย ๆ ทำการกลับสีอัตโนมัติ
    Gmail เป็นหนึ่งในตัวอย่างที่แย่ที่สุด ไม่มีทางเลือกสีเองในดาร์กโหมดเลย