菜单

以Email中防御性地以HTML5和CSS3的指南

2018年11月16日 - Html/Html5

在Email中防御性地使HTML5和CSS3的指南

2015/04/20 · CSS,
HTML5 · 1
评论 ·
Email

本文由 伯乐在线 –
fzr
翻译,黄利民
校稿。未经许可,禁止转载!
英文出处:litmus.com。欢迎加入翻译组。

“在Email中未能够采取HTML5或者CSS3”。

由她“有限”的支撑,这都化作邮件设计行业之一个广共识。然而,我们现在可以说它是一个全然荒唐的传道。

尽管支持还未是杀通用的,但不少主流电邮客户端已经得以支撑HTML5和CSS3了。实际上,电邮总体市场的50%还支持HTML5和CSS。前五万分电邮客户端中为生3贱开始支持它们了。对于特定顾客,可支持的内容或会见再度多。

唯独,那些还无可知支撑这些高档功能的客户端会怎么样啊?你的邮件在如此的订阅者的信箱中该如何展示?当这些关系到邮箱,就概括为一个:为订阅者提供非凡之心得。然而,这吗不意味你的邮件必须于各一样贱客户端挨还显得的一致——只待为您的具备订阅者都能够好得易取。

自身欢喜的星星点点位邮件设计师——Jonathan Kim 和 Brian
Graves——就挺强调用不同的办法实现:防御性邮件设计与渐进式增强。

防御性邮箱设计

盖两年前, Jonathan
Kim在我们的 Mobile
Master 作品展上提出了“Pushing the Limits of
Email”的定义。在说中,Jonathan发明了一个初歌词来证明当前之电邮设计状态,即防御性邮件设计。

外讲说,由于有的信箱客户端对CSS的支撑有限,使得邮件设计者们陷入了老的计划性状态。他首倡邮件设计者们事先为那些支持网络渲染引擎的客户端设计,进而推进邮件设计行业前行。

渐进式增强

以此类推,在2014年的信箱设计大会上,DEG的UI设计师,
Brian
Graves,,提出了“赢得在每个屏幕及规划之战”。他的摆的要在于渐进式增强,关于以支撑之条件达标提供高级功能。他吗强调了优雅降级的最主要。优雅降级意味着,即使订阅者的邮箱客户端不能够支撑有起特定功能,你为只要能啊她们提供愉悦的用户体验。

针对得到Brian的整展示感兴趣?幻灯片和录像现在都来供了。

自动楼梯就是其实在蒙一个渐进式增强与优雅降级的应有尽有例子。已故喜剧演员Mitch
Hedberg开玩笑说,“自动扶梯永远不会见生故障:因为其可以仅是一个梯子。你应有永远为不见面见到‘自动扶梯暂时故障’的牌子,只是‘自动扶梯暂时为阶梯’,不便于方便。”不论环境怎么,自动扶梯都能够保障和谐之效益。

啊HTML5和CSS3贯彻渐进式增强

应用渐进式增强是解决邮件设计之顶实惠办法。我们还知情的凡,在邮箱中行使传统的HTML5和CSS3会在不同客户端里引起广大渲染问题。向后的兼容性好不平等——一些HTML和CSS有坚实的朝后兼容性而另的可并没有。对斯,不同的客户端采用了不同取舍。使用专业的HTML5和CSS3待重多之测试,而且会影响开发速度。所以,到底什么才是以邮箱中实现渐进式增强的顶好法子?

以电邮中采用HTML5和CSS3不必太不方便。它不要求于好奇的邮箱客户端上浪费大量岁月排除故障(说之就是Outlook邮箱)。它所待做的虽是为此一个适龄的框架来飞执行HTML5和CSS3要是非用烦恼和担心有渲染问题。而且,非常幸运的是,我们发那样的框架。

脚就邮件设计者们和开发者们提供的平等执要之代码:

XHTML

@media screen and (-webkit-min-device-pixel-ratio:0) { /* Insert styles
here */ }

1
2
3
@media screen and (-webkit-min-device-pixel-ratio:0) {
  /* Insert styles here */
}

斯媒体询问才针对支持WebKit的信箱客户端——对HTML5和CSS3生出怀疑的支持度。这个媒体询问允许而利用现代技能例如HTML5视频、CSS3动画、web字体以及重新多。

此办法吧拿现代邮件客户端和旧式客户端的邮箱出分为两组成部分。你可在运用Safari或Chrome浏览器也支持WebKit的客户端测试出现代技术的又,使用Firefox为旧式浏览器提供诸如外观之类的中心经验。

这么化解电邮开发问题得以以再度多的质控制过程易至浏览器方面如果不是电邮客户端。这给邮件设计者为重新多之权杖,控制力,和自信去出一个克于具有邮箱客户端里优雅渲染的电邮。

下载这些Litmus测试结果,显示了即媒体询问对WebKit的支撑。值得注意的是,Gmail——既是一个web邮箱客户端,也是一个移动App——并无支持媒体询问,所以这些测试对那些屏幕截图无效。

而吧足以本着Gecko(Firefox)渲染之媒体询问:

XHTML

@-moz-document url-prefix() { /* Insert styles here */ }

1
2
3
@-moz-document url-prefix() {
  /* Insert styles here */
}

大少发客户端采用Gecko(Firefox)作为渲染引擎,这也是怎么最好就算支持WebKit的信箱提供你的增长版。但是,使用媒体询问也WebKit渲染引擎添加相同的功用就概括的大半了,对Thunderbird之类的客户端而言。

除了这个方法,还发生其它以电邮中贯彻HTML5和CSS3的办法吧?有。但咱信任是点子是出的无限快捷的主意——也是极端安全的。它缩小了为新鲜邮箱客户端支出外观之类需要的工作量,而且集中吃依据浏览器的测试。

小结:渐进式增强的建议

叩问您的受众

订阅者在哪打开你的邮件?他们见面用对HTML和CSS支持之坏好之要iPhone和AppleMail之类的客户端也?你可行使Litmus’
Email
Analytics测试工具检测出订阅者中尽盛的邮箱App。

冲所抱的音,你可操纵是否渐进式增强会针对你的做事产生帮助。例如,如果你的受众中多方面动WebKit,能够挺好之支撑高级功能,那么可能尝试创新性的艺,比如HTML5
视频,会是一个不错的想法!

树一个中坚经验

就此对HTML和CSS支持少数的信箱App——如Outlook和Gmail,在公也其它客户端优化邮件之前,为订阅者建立一个主导经验。渐进式增强不应给其他用户产生不良精彩体验。

尽量优化

假使您既成立一个着力经验,就从头也其他用户优化体验。你可以使CSS3,视频,交互,可缩放向量图形(SVG),以及web字体。记住,即使是指向HTML和CSS支持之于好的Email客户端也发出她各自的出格的远在,仍然需要测试哪些才是实惠之。

实战:邮件被的渐进增强例子

咱俩先行瞧有在邮件被动用渐进式增强的开创性例子。为了显示对这些邮件的优化,你必下一个如Chrome或Safari一样以WebKit为动力之浏览器。

2014邮件设计大会以HTML5视频为背景的邮件

为播报2014邮件设计大会,我们决定认真地因为HTML5视频为背景实现渐进式增强。尽管这种专项技能只能以Apple邮箱与Outlook
2011(Mac版)上干活,但眼看点儿种植客户端上接收特定邮件的用户40%横。

View the full email here

对于不支持视频的电邮客户端,HTML5视频仅仅只是退化为同一摆放静态背景图片。我们的结果也是叫人诧异的——而且回报为是耸人听闻之!

B&Q 交互式旋转圆盘邮件

立刻同样年被最要命的邮件之一是B&Q的交互式旋转圆盘邮件。对于WebKit客户端,该邮件包含了一个盘热点,供用户点击查阅不同的局部。

View the full email here

全副邮件被最好让人记忆深刻的一部分,可能是它为非WebKit邮箱使用的备用方案——一个美丽的旋转木马网格布局,没有藏身也没有复制任何内容!

图片 1

而可于 Firefox 或 Internet Explorer 浏览器中开拓该邮件查看备用设计。

Litmus Builder(邮件开发工具)交互的同邮件

为了引入我们的初邮件代码编辑器,Litmus
Builder,在马上封邮件被显示了汪洋底而点击交互。同样,该技术吧只好当Apple邮箱与Outlook
2011(Mac版)中行事,而当时点儿单可占有了咱的顾客的绝大部分。(注:邮件需要屏幕至少800像素宽才会浏览。)

拖欠展览仅仅只是退化为一个静态背景图片,而且会调用接口跳反到登录页面。这邮件取了巨大的功成名就,其产品在尽开始的几乎龙里增加了诸多的用户。

View the full email here

怀念尝试一下 Litmus Builder?注册后
,你便好开下HTML5和CSS3测试你的邮件!

一个更新邮件设计框架

CSS

@media screen and (-webkit-min-device-pixel-ratio:0) { /* Insert styles
here */ }

1
2
3
@media screen and (-webkit-min-device-pixel-ratio:0) {
  /* Insert styles here */
}

夫红娘查询也邮件设计师提供了一个简易的更新框架。我们可吗富有现代邮箱客户端的那同样不行片段订阅者提供再好之体会。

无限好之防卫就是进攻。现在欠是攻击的时节了。在邮件设计受到利用这个红娘查询开始更新,推动邮件前进。

为订阅者去尝试。为了我们的行业,为了
对邮件的热衷。

已迫不及待想看我们见面并成立有什么了。

倘若你用之凡这种措施——或者开而自己之重复高级的版本——在您的邮件中,或者使您针对这种办法来另外的问题,请在下面的褒贬中贴出,或者用重新好之方式,去Litmus社区!

发现你的给众 + 测试你的统筹

对能够开运用高级技术像HTML5和CSS3来促进邮件发展,是匪是感觉大感动?确保识别出订阅者们太心爱的信箱APP,然后测试你初计划之邮件。

经过邮件分析,你可了解订阅者经常在何打开邮件,这样你就是好集中精力在渐进式增强(以及优雅降级!)上了。

测试设计也罢是出过程被非常重要的等同步。在30只以上邮箱客户端以及APP之间的兼容性测试,可以确保订阅者们凭用什么邮箱打开邮件都能健康获得你的邮件。

 

赞 收藏 1
评论

关于作者:fzr

图片 2

微博:@fzr-fzr)
个人主页 ·
我的篇章 ·
26

图片 3

盒子模型

图片 4

w3c

图片 5

盒子模型.jpg

display:block

    block元素会独占一行,多个block元素会各自新起一行。默认情况下,block元素宽度自动填满其父元素宽度。
    block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
    block元素可以设置margin和padding属性。

display:inline

    inline元素不会独占一行,多个相邻的行内元素会排列在同一行里,直到一行排列不下,才会新换一行,其宽度随元素的内容而变化。
    inline元素设置width,height属性无效。
    inline元素的margin和padding属性,水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果;但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。

display:inline-block

    简单来说就是将对象呈现为inline对象,但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link(a元素)inline-block属性值,使其既具有block的宽度高度特性又具有inline的同行特性。

外联元素:

广泛的块级元素来 div, form, table, p, pre, h1~h6, dl, ol, ul 等。
广大的内联元素来 span, a, strong, em, label, input, select, textarea ,
img, br 等。

块元素

    <div>
        <article>
            <section>
                <h1></h1>
                <p></p>
            </section>
            <section>
                <h1></h1>
                <p></p>
            </section>
        </article>
    </div>

CSS3

层叠次序

当同一个 HTML 元素被频频一个体裁定义时,会动谁样式也?

诚如而言,所有的体制会根据下面的条条框框层叠于一个初的虚构样式表中,其中数字
4 拥有高的优先权。

浏览器缺省设置
外部样式表
内部样式表(位于 <head> 标签内部)
内联样式(在 HTML 元素内部)

因此,内联样式(在 HTML
元素内部)拥有高的优先权,这象征它们以先行受以下的体裁声明:<head>
标签中的样式声明,外部体制表中的体声明,或者浏览器被的体制声明(缺省值)。

id 选择器

注意:类名的首先只字符不能够应用数字!它无法在 Mozilla 或 Firefox
中于作用。
于现代布局中,id 选择器常常用于建派生选择器。范式

#red {color:red;}

<p id="red">这个段落是红色。</p>

CSS 元素选择器

h2, p {color:gray;}

CSS 元素选择器 —>条件

a[href] {                          +++属性+++
color:red;  //包含了href属性 《有效》
}
a[href="http://www.w3school.com.cn/about_us.asp"] {
color: red;  //指定文档的超链接变成红色 《有效》    +++值+++
}

p[class~="important"] {                 +++选择器+++
color: red;  //假设您想选择 class 属性中包含 important 的元素
} 

//这个规则会选择 title 文本包含 "Figure" 的所有图像。
img[title~="Figure"] {                          +++值+++
border: 1px solid gray;
}

div.sidebar { +++class:sidebar+++
background:blue;
} 

<a href="http://w3school.com.cn">W3School</a> 
类型 描述
[abc^="def"] 选择 abc 属性值以 "def" 开头的所有元素
[abc$="def"] 选择 abc 属性值以 "def" 结尾的所有元素
[abc*="def"] 选择 abc 属性值中包含子串 "def" 的所有元素


CSS 多类似选择器

.important {font-weight:bold;}
.warning {font-style:italic;}
.important.warning {background:silver;}

<p class="important warning">
This paragraph is a very important warning.
</p>

类选择器

范式:

.center {text-align: center}

<h1 class="center">
    This heading will be center-aligned
</h1>

CSS position 属性

通过动 position
属性,我们得选取
4 种不同门类的原则性,这会潜移默化因素框生成的方式。
position 属性值的义CSS 定位
(Positioning):

static: 静态,相对稳定一定位置(改了left等性,无效)
relative: 相对位移元素框 偏移 某个距离

absolute:
绝对定位,只想对于顶级级元素[\[1\]](https://www.jianshu.com/p/bbc59561348f#fn1)(未设置的语或根据上一个因素<div><p>等之岗位)

fixed:元素框的显现类似于用 position 设置为
absolute,不了那个蕴含块是视窗本身。

提示:相对固化实际上给视作普通流定位模型的同等部分,因为元素的位置相对于其当平常流中的职。

CSS 相对固定实例

图片 6

w3c

注意,在采用相对固化时,无论是否进行活动,元素依然占据原来的上空。因此,移动元素会促成它挂任何框。


  1. 就是:绝对定位的元素的职位相对于近期底既稳定祖先元素,如果元素没有就稳的先人元素,那么其的职位相对于初的包含块

相关文章

标签:,

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图