6P by neo 1달전 | favorite | 댓글 1개

CSS transition 속성 지원 (2024년 3월 29일)

  • 이메일 클라이언트에서 CSS transition 속성 지원 현황을 정리한 내용
  • CSS transition 속성은 CSS 속성 값의 변화를 일정 시간에 걸쳐 애니메이션 효과를 주는 기능
  • 아직 이메일 클라이언트에서는 폭넓게 지원되지 않음

CSS text-wrap 속성 지원 (2024년 4월 3일)

  • 이메일 클라이언트에서 CSS text-wrap 속성 지원 현황을 정리한 내용
  • CSS text-wrap 속성은 긴 단어를 어떻게 줄 바꿈 처리할지 지정하는 속성
  • 아직 이메일 클라이언트에서는 폭넓게 지원되지 않음

CSS word-spacing, shape-margin, shape-outside 속성 지원 (2024년 3월 13일)

  • 이메일 클라이언트에서 CSS word-spacing, shape-margin, shape-outside 속성 지원 현황을 정리한 내용
  • CSS word-spacing은 단어 사이의 간격을 조절하는 속성
  • CSS shape-margin과 shape-outside는 이미지나 개체 주변으로 텍스트를 둘러싸는 방식을 지정하는 속성
  • 아직 이메일 클라이언트에서는 폭넓게 지원되지 않음

2024년 3월 Caniemail 업데이트 소식 (2024년 3월 29일)

  • 2024년 3월에 Caniemail 사이트에 추가된 업데이트 내용을 정리한 소식

2024년 2월 Caniemail 업데이트 소식 (2024년 2월 29일)

  • 2024년 2월에 Caniemail 사이트에 추가된 업데이트 내용을 정리한 소식

이메일 클라이언트 CSS 속성 지원 현황

  • 애플 Mail (macOS) : 284개 중 267개 지원
  • 애플 Mail (iOS) : 284개 중 266개 지원
  • 삼성 Email (Android) : 284개 중 239개 지원
  • SFR (Desktop Webmail) : 257개 중 226개 지원
  • WEB.DE (iOS) : 235개 중 222개 지원

Caniemail 사이트 소개

  • @HTeuMeuLeu와 Tilt Studio 팀이 런칭하고 유지 관리하는 사이트
  • @Fyrd의 원래 caniuse.com을 기반으로 하고 @Lensco가 디자인함
  • @M_J_Robbins와 Rebel 팀의 원래 아이디어와 이름을 기반으로 함
  • GitHub의 이메일 개발자 커뮤니티가 데이터 기여를 지원함
  • 문제가 있으면 GitHub에 버그를 보고해 달라고 안내

GN⁺의 의견

  • 이메일 개발자에게 매우 유용한 사이트로, 각 이메일 클라이언트별로 CSS 속성 지원 현황을 한 눈에 파악할 수 있음. 새로운 CSS 속성을 이메일에 적용할 때 호환성 체크에 꼭 필요한 사이트임.
  • 아직 이메일 클라이언트의 CSS 지원이 웹브라우저에 비해 많이 부족한 상황. 애니메이션 관련 속성이나 레이아웃 관련 속성은 거의 지원되지 않고 있어서 이메일 디자인의 한계로 작용하고 있음.
  • 정기적으로 업데이트 소식을 알려주고 있어서, 이메일 개발자들이 최신 정보를 파악하는데 도움이 될 듯함. 다만 업데이트 주기가 너무 짧아서 따라가기 벅찰 수도 있을 듯.
  • 비슷한 사이트로 EmailOnAcid, Litmus 등이 있는데, 이 사이트들은 각 클라이언트에서 렌더링 되는 모습을 미리보기 스크린샷으로 제공한다는 차이가 있음. Caniemail과 함께 활용하면 시너지 효과를 볼 수 있을 듯함.
Hacker News 의견

요약해보자면:

  • Dark mode 이메일 지원은 프론트엔드 개발자에게 가장 좌절감을 주는 것 중 하나임. light mode 디자인만 구현하고 이메일 클라이언트의 dark mode 자동 색상 반전에 잘 보일 색상을 선택해야 함.
  • mjml(https://mjml.io/)을 사용하여 이메일 템플릿을 빌드하면 호환성이 좋아짐.
  • Litmus(https://litmus.com)나 testi.at으로 다양한 앱과 기기에서의 이메일 템플릿 모양을 테스트해볼 수 있음.
  • Can I email? 사이트에는 유명인에게 이메일을 보내려는 사람들이 많이 방문한다는 재미있는 일화가 있음.
  • HTML은 문서가 아닌 애플리케이션에 가까워서 메일 클라이언트에서 지원이 제한적임. 공식 HTML 서브셋 문서 표준이 있으면 좋겠음.
  • 일부는 HTML이 이메일에 도입된 것이 최악이며, 평문 콘텐츠가 최고라고 생각함.
  • jsx-email은 caniemail 데이터셋을 사용하는 내장 이메일 클라이언트 호환성 검사 CLI가 있음.
  • Gmail과 Outlook은 호환성 순위가 최하위권임.
  • 순위가 낮을수록 좋음. 일부는 "사전 합의 없는 첨부 파일이 있는 이메일은 자동 삭제" 정책을 가지고 있음.