Gmail 용 HTML 이메일 스타일링
내부 스타일 시트를 사용하는 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 이메일 스타일을 지정하는 유일한 옵션입니까?
모든 것에 인라인 스타일을 사용하십시오. 이 사이트는 수업을 인라인 스타일로 변환합니다 : http://premailer.dialect.ca/
여기에 나온 답변은 2016 년 9 월 30 일 현재 구식입니다. Gmail은 현재 에서 태그 및 미디어 쿼리 에 대한 지원 을 제공하고 있습니다. Gmail이 유일한 관심사라면 최신 개발자와 같은 수업을 사용해도 안전합니다!stylehead
참고로 공식 Gmail CSS 문서를 확인할 수 있습니다 .
참고로 Gmail은 지원하지 않는 유일한 주요 클라이언트였습니다 style( 어쨌든 업데이트 될 때까지 참조 ). 즉 , 스타일을 인라인으로 배치 하는 것을 거의 안전하게 중단 할 수 있습니다 . 더 모호한 클라이언트 중 일부는 여전히 필요할 수 있습니다.
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은이를 무시합니다.
You might think that your CSS is perfect, because you've done it so often, why would I have mistakes in my CSS? Run it through the CSS Validator (for example http://www.css-validator.org/) and see what happens. I did that after encountering some Gmail display issues, and to my surprise, several Microsoft Outlook specific style declarations showed up as mistakes.
Which made sense to me, so I removed them from the style sheet and put them into a only for Microsoft code block, like so:
<!--[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]-->
This is just a simple example, but, who know, it might come in handy some time.
As others have said, some email programs will not read the css styles. If you already have a web email written up you can use the following tool from zurb to inline all of your styles:
http://zurb.com/ink/inliner.php
This comes in extremely handy when using templates like those mentioned above from mailchimp, campaign monitor, etc. as they, as you have found, will not work in some email programs. This tool leaves your style section for the mail programs that will read it and puts all the styles inline to get more universal readability in the format that you wanted.
Note that services and tools for sending emails may be able to inline your CSS for you, allowing CSS in <style> tags to work in Gmail.
For instance, if you're sending emails with MailChimp, your CSS from <style> tags will get inlined automatically by default. With Mandrill, you can enable this functionality (although it's disabled by default for performance reasons) by checking the "Inline CSS Styles in HTML Emails" box in the "Sending Defaults" section of the Settings tab:
참고URL : https://stackoverflow.com/questions/9056172/styling-html-email-for-gmail
'code' 카테고리의 다른 글
| 서로 다른 서버의 두 데이터베이스에있는 두 테이블을 결합하여 데이터 쿼리 (0) | 2020.09.08 |
|---|---|
| Chrome Dev Tool에 날짜 __proto__가 잘못된 날짜로 표시되는 이유는 무엇입니까? (0) | 2020.09.08 |
| 이것이 C ++ 11 for 루프의 알려진 함정입니까? (0) | 2020.09.08 |
| CMD.exe 교체 (0) | 2020.09.08 |
| obj 폴더는 무엇을 위해 생성됩니까? (0) | 2020.09.08 |