내부 스타일 시트를 사용하는 HTML 이메일을 생성하고 있습니다.
<!doctype html>
<html>
<head>
<style type="text/css">
h2.foo {color: red}
</style>
</head>
<body>
<h2 class="foo">Email content here</foo>
</body>
</html>Gmail에서 보면 내부 스타일 시트의 모든 스타일이 무시되는 것 같습니다. Gmail은 인라인 규칙 이외의 모든 스타일을 무시하는 것 같습니다.
<h2 style="color: red">Email content here</foo>이것이 Gmail로 볼 때 HTML 이메일 스타일을 지정하는 유일한 옵션입니까?
<html>태그 를 사용하는 것이 좋습니다 .)
답변:
여기에 나온 답변은 2016 년 9 월 30 일 현재 구식입니다. Gmail은 현재 에서 태그 및 미디어 쿼리 에 대한 지원 을 제공하고 있습니다. Gmail이 유일한 관심사라면 최신 개발자와 같은 수업을 사용해도 안전합니다!stylehead
참고로 공식 Gmail CSS 문서를 확인할 수 있습니다 .
참고로 Gmail은 지원하지 않는 유일한 주요 클라이언트였습니다 style( 어쨌든 업데이트 될 때까지 참조 ). 즉 , 스타일을 인라인으로 배치 하는 것을 거의 안전하게 중단 할 수 있습니다 . 더 모호한 클라이언트 중 일부는 여전히 필요할 수 있습니다.
body태그 대신 태그 내에 배치했음을 깨달았습니다 head.
모든 것에 인라인 스타일을 사용하십시오. 이 사이트는 수업을 인라인 스타일로 변환합니다 : http://premailer.dialect.ca/
Gmail은 헤드 영역에서 스타일 태그에 대한 기본 지원을 시작했습니다. 아직 공식적인 것을 찾지 못했지만 직접 쉽게 시도 할 수 있습니다.
클래스 및 ID 선택기를 무시하는 것처럼 보이지만 기본 요소 선택기가 작동합니다.
<!doctype html>
<html>
<head>
<style type="text/css">
p{font-family:Tahoma,sans-serif;font-size:12px;margin:0}
</style>
</head>
<body>
<p>Email content here</p>
</body>
</html>메일 본문을 포함하는 div로 제한된 자체 헤드 영역에 스타일 태그를 생성합니다.
<style>div.m14623dcb877eef15 p{font-family:Tahoma,sans-serif;font-size:12px;margin:0}</style>나는 클래스와 인라인 스타일을 지원하는 모든 사람들에게 동의합니다. 지금까지 이것을 배웠을 수도 있지만 스타일 시트에 한 가지 실수가 있다면 Gmail은이를 무시합니다.
당신은 당신의 CSS가 완벽하다고 생각할 수 있습니다. 당신이 그렇게 자주 해왔 기 때문에, 왜 제가 제 CSS에 실수를했을까요? CSS Validator (예 : http://www.css-validator.org/ ) 를 통해 실행하고 어떤 일이 발생하는지 확인하십시오. 몇 가지 Gmail 표시 문제가 발생한 후 그렇게했는데 놀랍게도 여러 Microsoft Outlook 특정 스타일 선언이 실수로 나타났습니다.
나에게 의미가 있으므로 스타일 시트에서 제거하고 only for Microsoft다음과 같이 코드 블록에 넣었습니다 .
<!--[if mso]>
<style type="text/css">
body, table, td, .mobile-text {
font-family: Arial, sans-serif !important;
}
</style>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->이것은 단순한 예일 뿐이지 만, 누가 알겠습니까? 언젠가는 유용 할 것입니다.
다른 사람들이 말했듯이 일부 이메일 프로그램은 CSS 스타일을 읽지 않습니다. 이미 작성된 웹 이메일이있는 경우 zurb의 다음 도구를 사용하여 모든 스타일을 인라인 할 수 있습니다.
http://zurb.com/ink/inliner.php
이것은 메일 침프, 캠페인 모니터 등에서 위에서 언급 한 것과 같은 템플릿을 사용할 때 매우 유용합니다. 이러한 템플릿은 일부 이메일 프로그램에서 작동하지 않기 때문입니다. 이 도구는 메일 프로그램에 대한 스타일 섹션을 남겨두고 모든 스타일을 인라인으로 배치하여 원하는 형식으로보다 보편적 인 가독성을 얻습니다.
Mailjet에서 템플릿을 디자인하는 동안 동일한 문제가 발생했습니다. 문제의 해결책은 <style>태그 내부의 축소 된 CSS 코드였습니다 .
