6 poin oleh GN⁺ 2024-05-07 | 1 komentar | Bagikan ke WhatsApp

Dukungan properti CSS transition (29 Maret 2024)

  • Ringkasan status dukungan properti CSS transition di klien email
  • Properti CSS transition adalah fitur untuk memberikan efek animasi pada perubahan nilai properti CSS selama jangka waktu tertentu
  • Masih belum didukung secara luas di klien email

Dukungan properti CSS text-wrap (3 April 2024)

  • Ringkasan status dukungan properti CSS text-wrap di klien email
  • Properti CSS text-wrap adalah properti yang menentukan bagaimana kata panjang diproses saat pergantian baris
  • Masih belum didukung secara luas di klien email

Dukungan properti CSS word-spacing, shape-margin, dan shape-outside (13 Maret 2024)

  • Ringkasan status dukungan properti CSS word-spacing, shape-margin, dan shape-outside di klien email
  • CSS word-spacing adalah properti untuk mengatur jarak antar kata
  • CSS shape-margin dan shape-outside adalah properti yang menentukan cara teks mengalir mengelilingi gambar atau objek
  • Masih belum didukung secara luas di klien email

Berita pembaruan Caniemail Maret 2024 (29 Maret 2024)

  • Berita yang merangkum pembaruan yang ditambahkan ke situs Caniemail pada Maret 2024

Berita pembaruan Caniemail Februari 2024 (29 Februari 2024)

  • Berita yang merangkum pembaruan yang ditambahkan ke situs Caniemail pada Februari 2024

Status dukungan properti CSS di klien email

  • Apple Mail (macOS): mendukung 267 dari 284
  • Apple Mail (iOS): mendukung 266 dari 284
  • Samsung Email (Android): mendukung 239 dari 284
  • SFR (Desktop Webmail): mendukung 226 dari 257
  • WEB.DE (iOS): mendukung 222 dari 235

Pengenalan situs Caniemail

  • Situs yang diluncurkan dan dipelihara oleh @HTeuMeuLeu dan tim Tilt Studio
  • Berbasis pada caniuse.com asli dari @Fyrd dan didesain oleh @Lensco
  • Berdasarkan ide dan nama asli dari @M_J_Robbins dan tim Rebel
  • Komunitas pengembang email di GitHub mendukung kontribusi data
  • Jika ada masalah, pengguna diarahkan untuk melaporkan bug di GitHub

Opini GN⁺

  • Situs yang sangat berguna bagi pengembang email karena memungkinkan mereka melihat sekilas status dukungan properti CSS di tiap klien email. Ini adalah situs yang wajib untuk memeriksa kompatibilitas saat menerapkan properti CSS baru ke email.
  • Dukungan CSS di klien email masih jauh tertinggal dibanding browser web. Properti terkait animasi maupun layout hampir tidak didukung, sehingga menjadi batasan dalam desain email.
  • Situs ini rutin mengabarkan pembaruan, sehingga tampaknya membantu pengembang email mengikuti informasi terbaru. Namun, siklus pembaruannya mungkin terlalu cepat sehingga agak sulit diikuti.
  • Situs serupa antara lain EmailOnAcid dan Litmus, tetapi keduanya berbeda karena menyediakan screenshot pratinjau tampilan rendering di masing-masing klien. Jika digunakan bersama Caniemail, kemungkinan dapat menghasilkan efek sinergis.

1 komentar

 
GN⁺ 2024-05-07
Opini Hacker News
  • Sumber yang bagus, dan Outlook benar-benar merepotkan serta mendukung terlalu sedikit hal.
    Saat membuat template email untuk notifikasi aplikasi perusahaan, biasanya cukup menyulitkan, tetapi setelah beralih ke MJML(https://mjml.io/) semuanya jauh lebih lancar.
    Dari beberapa perangkat yang diuji, hasilnya tampak paling kompatibel, dan rendering di berbagai aplikasi serta perangkat diperiksa dengan Litmus(https://litmus.com). Saya juga mencoba https://testi.at/ yang disebut di thread lain, dan hasilnya cocok dengan baik.

    • MJML tampak menarik. Akan bagus jika organisasi punya alasan bisnis untuk peduli pada email yang aksesibel dan dapat dibaca mesin.
      Email HTML seperti web yang berhenti di era IE6, jadi untuk segelintir pekerjaan email yang membutuhkan lebih dari sekadar daftar tag gambar, saya memakai Foundation for Emails(https://get.foundation/emails.html), dan saya bersyukur alat itu ada.
    • MJML sejauh ini adalah alat terbaik di bidang ini dan sering saya pakai. Jika membuat email pada 2024, ini adalah jalan pintas penting yang membantu menghindari atau mengurangi banyak masalah besar email HTML.
    • Untuk pembuatan email, saya juga merekomendasikan react-email(https://react.email). Komponen yang disediakannya sudah cukup, dan jauh lebih baik daripada membuat email dengan menyisipkan tag setiap lima baris seperti pada masa pemasaran email dulu.
    • Sepertinya Outlook hari ini adalah Internet Explorer-nya email.
  • Ada anekdot lucu tentang situs ini. Pengelolanya dulu pernah bilang bahwa di log penggunaan ada banyak jejak orang-orang yang salah paham soal tujuan situs ini, memasukkan nama selebritas, lalu mencoba mengirim email kepada mereka.

    • Awalnya saya mencoba memahami ini apa, tetapi tidak menemukan penjelasan berarti. Katanya ini “semacam caniuse untuk konten email”, tetapi kalau tidak tahu apa itu caniuse, sulit untuk memahaminya.
      Sebelum meluncurkan layanan baru, alangkah baiknya menambahkan bagian penjelasan singkat agar orang awam bisa tahu ini apa.
  • Semakin rendah skornya, semakin baik. Saya cukup mengenal orang-orang yang punya kebijakan “email hanya boleh teks polos, lampiran tanpa kesepakatan sebelumnya tidak boleh, dan sisanya dihapus otomatis”.

    • Sedikit perluasan dari teks polos itu masuk akal. Ini bukan hanya soal dekorasi; untuk hal seperti bahasa yang ditulis dari kanan ke kiri, daftar, dan tautan, sedikit markup membantu, dan HTML sudah cukup.
      Masalahnya ada pada penggunaan CSS yang berlebihan, atau bahkan mengizinkan JavaScript. Saya tidak terpikir isu keamanan email yang muncul hanya dari HTML tanpa CSS atau JavaScript.
    • Saya tahu setidaknya dua orang yang mengirim email dengan versi HTML kosong atau hanya berisi “jangan pakai klien yang bloat”, sementara isi sebenarnya ada di badan alternatif teks polos.
      Sepertinya untuk membacanya di Thunderbird, saya harus melihat sumber asli emailnya.
  • Tautan terkait:
    Can I Email? - https://news.ycombinator.com/item?id=27112960 - Mei 2021, 273 komentar
    Can I Email: ‘Can I Use’ for email - https://news.ycombinator.com/item?id=20948826 - September 2019, 196 komentar
    'Can I Use' for Email - https://news.ycombinator.com/item?id=20934601 - September 2019, 1 komentar

  • Dua klien paling populer, Gmail dan Outlook, masing-masing berada di peringkat ke-25 dan ke-41, alias di kelompok terbawah.

    • Kalau melihat fitur yang tidak didukung Gmail, ada hal-hal seperti display: none, animasi, dan CSS lain yang sulit dianggap wajib ada dalam email.
      Dasarnya sudah ada, jadi peringkat tinggi belum tentu merupakan sasaran yang baik.
    • Ini mengingatkan pada Internet Explorer, yang paling populer tetapi miskin fitur.
  • “Dokumen” HTML yang berfitur lengkap sebenarnya lebih dekat ke aplikasi daripada dokumen, jadi masuk akal jika klien email membatasi dukungannya.
    Namun karena fragmentasi seperti ini, saya berharap ada standar yang nyata. Kita butuh subset HTML non-aplikasi yang resmi, yang tidak bisa mengambil resource jarak jauh atau menjalankan kode. Cukup berupa format dokumen dengan media tertanam, animasi, styling, dan semacamnya.

    • Apakah media video yang animatif dan tidak statis masih bisa disebut “dokumen”?
    • Jujur saja, tidak ada alasan bagi orang lain untuk mengirim kode yang harus saya jalankan atau resource yang harus saya ambil.
      Saya tahu industri teknologi iklan ingin memakai email saya sebagai papan reklame, tetapi saya ingin mereka berhenti. Teks polos dan lampiran sudah cukup.
  • Sebagai referensi, jsx-email punya fitur pemeriksaan kompatibilitas klien email berbasis CLI bawaan yang memakai dataset caniemail: https://jsx.email/docs/core/cli#check

  • Sepertinya akan lebih berguna kalau hanya mencantumkan beberapa properti CSS yang dikenali semua klien email. Ini bukan bercanda, saya serius.
    Jawaban CanIEmail? umumnya adalah “tidak”.

    • Di https://www.caniemail.com/clients/, jika memilih “check all”, Anda bisa melihat secara terpisah fitur yang didukung semua klien email dan fitur yang dukungannya berbeda-beda.
      Yang tampaknya didukung semua kira-kira adalah border-collapse, shorthand font, list-style-type, beberapa unit CSS (cm, em, ex, in, mm, pc, %, pt, px), vertical-align, beberapa elemen HTML dan atribut valign, serta format gambar JPG/PNG.
  • Awalnya saya kira ini situs lelucon yang hanya menampilkan “No.” dengan huruf besar.

    • Biasanya itu juga jawaban default saya saat tim desain meminta pembaruan template email. “Tidak bisa. Format dasar saja. Kalau mau agak berani, mungkin tabel. Lebih dari itu tidak bisa.”
  • Dukungan dark mode di email termasuk salah satu hal paling membuat frustrasi yang pernah saya alami sebagai frontend developer yang sudah coding sejak era IE6.
    Pada dasarnya kita hanya bisa mengimplementasikan desain light mode, lalu memilih warna yang tetap tampak oke saat klien email dengan dark mode yang buruk melakukan inversi otomatis.
    Gmail adalah salah satu contoh terburuk. Sama sekali tidak ada cara untuk memilih warna sendiri di dark mode.