xml地图|网站地图|网站标签 [设为首页] [加入收藏]

正规赌博十大app排名

当前位置:网上十大正规赌博平台 > 正规赌博十大app排名 > 在Email中防御性地使用HTML5和CSS3的指南,一个整数

在Email中防御性地使用HTML5和CSS3的指南,一个整数

来源:http://www.nb-machinery.com 作者:网上十大正规赌博平台 时间:2019-09-25 23:24

在Email中防范性地动用HTML5和CSS3的指南

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

本文由 伯乐在线 - fzr 翻译,黄利民 校稿。未经许可,禁止转载!
韩文出处:litmus.com。款待参预翻译组。

“在Email中无法运用HTML5或CSS3”。

鉴于它们“有限”的辅助,那已变为邮件设计行当的三个大范围共同的认知。然则,大家今后能够说它是二个完全荒唐的传道。

固然援助还不是丰裕通用的,但过多主流电邮客户端已经得以协理HTML5和CSS3了。实际上,电中国人民邮政根据地体集镇的一半都援救HTML5和CSS。前中国共产党第五次全国代表大会电邮客户端中也可以有3家开端协理它们了。对于特定客商,可支撑的故事情节只怕会更加多。

然而,那一个还不可能支持那几个高等功效的顾客端会怎样啊?你的邮件在这么的订阅者的信箱中该怎么体现?当这几个关系到邮箱,就归纳为一个:为订阅者提供卓越的体验。然则,这也不意味着你的邮件必得在每一家客商端中都显示的平等——只须求让你的有着订阅者都能易得易取。

自己开心的两位邮件设计员——Jonathan Kim 和 Brian Graves——就十二分重申应用分裂的方法达成:防备性邮件设计和渐进式巩固。

防守性邮箱设计

大致八年前, Jonathan Kim在我们的 Mobile Master 小说展上提出了“Pushing the Limits of Email”的定义。在谈话中,Jonathan发明了叁个新词来注明当前的电邮设计景况,即防备性邮件设计。

她解释说,由于局地邮箱顾客端对CSS的支撑少数,使得邮件设计者们陷入了破旧的宏图处境。他提倡邮件设计者们事先为那一个帮衬互连网渲染引擎的客商端设计,进而拉动邮件设计行当发展。

渐进式巩固

由此及彼,在二零一四年的邮箱设计大会上,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协助的很好的如Motorola和AppleMail之类的客商端吗?你能够使用Litmus’ Email Analytics测验工具检查测量检验出订阅者中最风靡的邮箱App。

依照所获得的新闻,你可以垄断是不是渐进式加强会对您的职业有扶持。例如,假如你的受众中多方面采用WebKit,能够很好的支撑高端作用,那么恐怕尝试创新性的技术,比方HTML5 录像,会是二个不利的想法!

创设三在这之中坚经验

用对HTML和CSS扶助有限的邮箱App——如Outlook和Gmail,在你为另外顾客端优化邮件在此以前,为订阅者建构一个主导经验。渐进式加强不应有让别的客商发生次优体验。

尽心竭力优化

假如您早就创建叁个主导经验,就起来为别的客户优化体验。你能够应用CSS3,录像,交互,可缩放向量图形(SVG),以及web字体。记住,即便是对HTML和CSS支持的可比好的Email顾客端也许有它们分别的极其规之处,还是要求测量检验哪些才是可行的。

实战:邮件中的渐进加强例子

咱俩先看看一些在邮件中运用渐进式加强的开创性例子。为了体现对那个邮件的优化,你不能够不运用二个如Chrome或Safari同样以Web基特为重力的浏览器。

二〇一六邮件设计大会以HTML5录像为背景的邮件

为了播报二〇一六邮件设计大会,我们决定认真地以HTML5摄像为背景完结渐进式巩固。尽管这种专属技能只可以在Apple邮箱和Outlook 二零一二(Mac版)上干活,但那三种顾客端到达接收特定邮件的客商百分之三十左右。

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 二零一二(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,然后测量检验你新规划的邮件。

由此邮件深入分析,你能够领悟订阅者日常在什么地方张开邮件,这样你就足以聚焦精力在渐进式巩固(以及优雅降级!)上了。

测量试验设计也是支付进度中非常重大的一步。在贰十四个以上邮箱客商端和应用软件之间的包容性测验,能够保障订阅者们无论用如何邮箱展开邮件都能健康获得你的邮件。

 

赞 收藏 1 评论

旁人家的面试题:一个大背头是还是不是是“4”的N次幂

2016/05/30 · 基本功本领 · 2 评论 · 算法

本文笔者: 伯乐在线 - 十年踪迹 。未经小编许可,禁止转发!
接待参预伯乐在线 专栏撰稿人。

这是 leetcode.com 的第二篇。与上一篇同样,大家议论共同相对简便易行的标题,因为学习总重申安分守己。并且,就算是轻易的主题素材,追求算法的极端的话,个中也有大学问的。

移动爆发的错觉

这段动画的功力类似于观望古老的西洋镜,该装置显示的是一雨后苦笋延续的环绕着圆筒的插画。在下边包车型地铁示范中,大家不采纳圆筒,而是在有些成分内部显示一文山会海图片。

有关小编:fzr

图片 2

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

图片 3

至于作者:十年踪迹

图片 4

月影,奇舞蹈艺术团少将,热爱前端开采,JavaScript 技师一枚,能写代码也能打杂卖萌说段子。 个人主页 · 小编的稿子 · 14 ·     

图片 5

怎么不行使gif?

就算也足以运用 gif 动画,但在这些案例中实际不是很体面。gif 文件的轻重缓急平日一点都不小並且帧速率也麻烦调节。而选取那么些情势,我们就可以用 CSS 对这几个动画进行结束、倒回以及形形色色的调度。

永不内置函数

以此主题素材的首要思路和上一道题类似,先思索“4”的幂的二进制表示:

  • 40 = 1B
  • 41 = 100B
  • 42 = 10000B
  • 43 = 1000000B
  • ……

也正是每一个数比上八个数的二进制前面多多个零嘛。最关键的是,“4”的幂的二进制数唯有1 个“1”。如若留意阅读过上一篇,你就能了解,剖断一个二进制数独有 1 个“1”,只必要:

JavaScript

(num & num - 1) === 0

1
(num & num - 1) === 0

唯独,二进制数独有 1 个“1”只是“4”的幂的须求非丰硕准则,因为“2”的奇多次幂也只有 1 个“1”。所以,我们还索要增大的判定:

JavaScript

(num & num - 1) === 0 && (num & 0xAAAAAAAA) === 0

1
(num & num - 1) === 0 && (num & 0xAAAAAAAA) === 0

为何是 num & 0xAAAAAAAA === 0? 因为这一个保障 num 的二进制的特别 “1” 出现在“奇数位”上,也就保险了那些数确实是“4”的幂,而不仅仅只是“2”的幂。

最后,大家获取完整的版本:

版本3

JavaScript

function isPowerOfFour(num) { return num > 0 && (num & (num-1)) === 0 && (num & 0xAAAAAAAA) === 0; };

1
2
3
4
function isPowerOfFour(num) {
    return num > 0 && (num & (num-1)) === 0
                   && (num & 0xAAAAAAAA) === 0;
};

地方的代码必要加上 num > 0,是因为 0 要铲除在外,不然 (0 & -1) === 0 也是 true


“steps()”的任何用法

背景动画Smart(background sprites)仅仅只是 steps 时序函数的用法之一。除了这几个之外该函数还适用于营造别的必要一文山会海离散步骤的卡通片。譬喻,你能够用该函数制作一个摆钟。

永不循环和递归

实质上那道题真心有成都百货上千种思路,总计指数之类的对数学系学霸们完全小难题嘛:

版本2

JavaScript

const log4 = Math.log(4); function isPowerOfFour(num){ var n = Math.log(num) / log4; return n === (0|n); }

1
2
3
4
5
const log4 = Math.log(4);
function isPowerOfFour(num){
    var n = Math.log(num) / log4;
    return n === (0|n);
}

哦,通过对数公式 logm(n) = log(n) / log(m) 求出指数,然后决断指数是不是贰个大背头,那样就足以毫无循环和递归消除难题。并且,还要小心细节,能够将 log4 当做常量抽抽取来,那样毫无每一回都再也计算,果然是学霸范儿。

而是呢,利用 Math.log 方法也毕竟某种意义上的违犯禁令吧,有未有永不数学函数,用原生方法来缓和吧?

当然有了!並且还不仅仅一种,我们能够继续想30秒,要起码想出一种啊 ——


Steps() 时序函数

超越50%的时序函数,比方 ease(缓冲)和 cubic-bezier(三回贝塞尔),都能让要素从开头状态平滑地连接到最终状态。steps 时序函数与此差别,它并非平整地对接,而是将连通进程分割为一定数额的手续,况兼在那么些手续之间快速地运动。

图片 6

笔者们先创立如下的 HTML 代码:

XHTML

<section class="fave"></section>

1
<section class="fave"></section>

本文由网上十大正规赌博平台发布于正规赌博十大app排名,转载请注明出处:在Email中防御性地使用HTML5和CSS3的指南,一个整数

关键词: bbin官网下载

上一篇:即使用了,到底加密了什么

下一篇:没有了