赚钱资源:我在《网络探险家8》杂志上用了一天网络 ,怎么赚钱_赚钱方法_赚钱门路!尽在来赚网 !

关于我在《网络探险家8》杂志上用了一天网络的更多新闻资讯尽在教你怎么赚钱的来赚网!

文章作者:怎么赚钱 文章来源:怎么赚钱_赚钱方法_赚钱门路!尽在来赚网 !http://shisuyi.com/ 发布时间:2019-03-26 07:12:51

作者Chris Ashton是bbc新闻的资深软件工程师。当他不忙于编码时,他喜欢在bbc交响合唱中作为男高音唱歌。更多关于克里斯...

我在网上浏览了一天

将你的收件箱升级,每月两次获得我们编辑的精选。您的电子邮件订阅→

8是十年前的今天发布的。Chris Ashton对着现代的网络进行了尝试,并思考我们如何才能建立自己的网站。

这篇文章是我试图在各种限制下使用web的系列文章的一部分,它代表了给定的用户群。我希望提高真实的人所面临的困难的形象,如果我们以同情他们的需要的方式来设计和发展,这些困难是可以避免的。

上次,我用屏幕阅读器在网上浏览了一天。这次,我花了一天的时间使用互联网探索者8,这是十年前的今天,2009年3月19日发布。

世界上有谁会使用ie8?

在我们开始之前;免责声明:我不会告诉你你需要开始支持ie8。

完全有理由不支持我。三年前,微软正式停止了对ie8、ie9和ie10的支持,微软的高管们甚至告诉你不要再使用互联网资源管理器11了。

但正如我们开发者希望它消失一样,它只是。不会的。死亡。ie8继续出现在浏览器统计数据中,尤其是在西方世界的泡沫之外。

对浏览器的统计数据只能勉强得出结论,但目前估计,全球范围内的ie8使用量约占桌面市场份额的0.3%至0.4%。估计值的低端来自w3计数器:

w3计数器目前认为ie8占全球使用量的0.3%,而2010年底的峰值是近30%。(大预览)

较高的估计值来自国家计数器(与“我能使用”使用表所使用的数据提要相同)。据该公司估计,全球ie8桌面浏览器的比例约为0.37%。

根据国家统计台的数据,全球范围内ie8的使用率为0.37%。(大预览)

我怀疑在某些地理区域,我们可能会看到更高的ie8使用率,因此按大陆对数据进行了深入分析。

按区域分列的使用情况

这里是每个大陆的ie8桌面比例(2018年2月-2019年1月的数据):

1.大洋国0.09%2。欧洲0.25%3。南美0.30%。北美0.35%。非洲0.48%6.亚洲0.50%

亚洲有人使用ie8的可能性是大洋洲人的五倍。

我更仔细地研究了亚洲的统计数据,注意到了每个国家的ie8使用量的比例。在ie8的使用上,有六个国家的排名非常明显,之后,这些数字会下降到与世界平均水平相当的水平:

1.伊朗3.99%2。中国1.99%3。朝鲜1.38%土库曼斯坦1.31%5%。阿富汗1.27%6.柬埔寨1.05%7。也门0.63%8。台湾0.62%9.巴基斯坦0.57%10。孟加拉国0.54%

以下地图概述了这些数据:

伊朗、土库曼斯坦和阿富汗在中东,而中国、朝鲜和柬埔寨在远东的ie8的使用非常突出。(大预览)

令人难以置信的是,ie8占伊朗桌面用户的4%,是大洋洲的40倍。

接下来,我看了一下非洲的国家统计数据,因为它与亚洲的ie8使用情况大致相同。有一个明显的赢家(厄立特里亚),其次是一些超过或接近1%使用量的国家:

1.厄立特里亚3.24%2。博茨瓦纳1.37%。苏丹和南苏丹1.33%。黑鬼1.29%5.莫桑比克1.19%6。毛里塔尼亚1.18%7。1.12%8刚果民主共和国1.07%9。赞比亚0.94%

以下地图概述了这一点:

ie8的使用量(3.24%)突出。其他一些国家也有>1%的使用率。(大预览)

而亚洲那些ie8使用率高于正常水平的国家,在地理上大致上是捆绑在一起的,而在非洲似乎并没有一种模式。我能看到的唯一模式——除非是巧合——是,世界上最大的ie8中,有很多国家对互联网接入进行了著名的审查,因此可能不鼓励或不允许更新到更安全的浏览器。

如果你的网站针对的是纯粹的西方受众,那么你不太可能在意ie8。然而,如果你有一个蓬勃发展的亚洲或非洲市场,特别是如果你关心中国、伊朗或厄立特里亚的用户,你可能非常关心你网站的ie8体验。是的,即使在2019年!

是谁还在使用人工智能?

那么,这些人是谁?他们真的会出现在我们中间吗?!

不管他们是谁,你可以打赌他们不是在用旧浏览器来骚扰你。没有人刻意选择一个更糟糕的浏览体验。

由于以下原因,可能有人在使用旧浏览器:

缺乏意识他们只是没有意识到他们使用的是过时的技术。

他们只是没有意识到他们使用的是过时的技术。缺乏教育他们不知道升级选项和可供选择的浏览器。

他们不知道向他们开放的升级选项和替代浏览器。没有计划因为工作繁忙而取消升级提示,但没有远见在安静的时间升级。

拒绝升级提示,因为他们很忙,但没有预见到在安静的时期升级。他们不愿改变上一次升级的软件,他们不得不学习一个新的用户界面。"如果它没有坏,不要修复它。"

上一次升级他们的软件时,他们不得不学习一个新的用户界面。"如果它没有坏,不要修复它。"他们不愿冒险在最后一次升级时,他们的机器慢了一步,或者他们失去了他们最喜欢的功能。

上一次他们升级的时候,他们的机器慢到了爬行的地步,或者他们失去了他们最喜欢的功能。软件限制他们的操作系统太老了,不能让他们升级,或者他们的管理权限可能被锁定。

他们的操作系统太老了,不能让他们升级,否则他们的管理员特权可能会被锁定。硬件限制更新的浏览器通常对硬盘空间、内存和cpu要求更高。

更新的浏览器通常对硬盘空间、内存和cpu要求更高。网络限制数据限制或慢连接意味着他们不想下载75mb的软件。

数据限制或慢连接意味着他们不想下载75mb的软件。法律限制,他们可能是在一个公司机器上,只允许使用一个特定的浏览器。

世界上仍有很多人执着于ie8,这真的是如此令人惊讶吗?

我决定让自己站在这些匿名灵魂的立场上,用ie8上网浏览一天。你可以在家里玩!从微软网站下载一台“windows7上的ie8”虚拟机,然后在一个像虚拟盒子一样的虚拟化程序中运行。

一开始就很糟糕

我启动了我的ie8 vm,点击了互联网资源管理器程序的预期,这就是我看到的:

我看到的第一件事是404.好极了。(大预览)

嗯,好吧。看起来由ie8调出的默认网页已经不存在了。好吧,这就对了。微软已经正式停止了对ie8的支持,那它为什么还要确保ie8的登陆页面还能正常工作呢?

我决定转到世界上使用最广泛的网站。

用搜索引擎搜索

谷歌主页在ie8中显示了良好的效果。(大预览)

这是一个简单的网站,因此很难出错,但公平地说,它看起来很棒!我试图寻找的东西:

那些读过我以前文章的人可能会注意到这里反复出现的主题。(大预览)

搜索效果不错,尽管布局看起来和我习惯的有点不同。然后我想起来了——当我使用互联网一天,javascript关闭时,我看到了相同的搜索结果布局。

作为参考,以下是在启用javascript的现代浏览器中搜索结果的外观:

更清晰的布局,额外的图像和元信息,Netflix/twitter集成。(大预览)

所以,看起来ie8得到了谷歌搜索的非js版本。我不认为这一定是一个精心设计的决定--它可能只是javascript ershep:

页面试图运行javascript但失败了。(大预览)

不过,最终的结果对我来说手机赚钱适合在家是好的--我得到了我的搜索结果,这就是我想要的。

我通过点击看了一个youtube视频。

YouTube视频网站

这是一个有趣的标志,没有相关视频的图片,也不奇怪,没有视频。(大预览)

这一页有很多破绽。所有的一切都和在ie里的小怪癖有关。

例如,商标被放大和裁剪。这归结为ie8不支持svg,而我们实际上看到的是youtube提供的备用方案。他们已经应用了一个背景图像css属性,以便在没有svg支持的情况下,您可以尝试显示该标识。只是他们似乎没有正确地设置背景大小,所以它有点太放大了。

youtube在标志跨度上设置了一个背景img,它可以吸引雪碧。(大预览)

作为参考,这里是chrome中的同一页(请参阅chrome如何呈现svg):

那你的自动游戏机呢?它看起来就像一个奇怪的复选框:

看起来ie8默认在引擎盖下有一个复选框。(大预览)

这似乎是由于使用了自定义元素(纸托按钮,这是一个材料设计元素),即不理解:

纸托按钮是一个自定义元素。(截图来自chrome工具,以及自动播放切换应该如何呈现。)(大预览)

我并不感到惊讶,这没有正确的渲染;ie8甚至不应对基本的语义标记,我们使用这些天。尝试使用“搁置”或“主”,它基本上会将它们呈现为divs,但忽略了您应用到它们的任何样式。

要启用html5标记,您必须明确地告诉浏览器这些元素是存在的。然后,他们可以被称为正常的:

<!--[如果它是9]>脚本>文档;创建元素(标题);文档;创建元素(节);文档;创建元素(项);文档;文档;创建元素(边);文档;文档;创建元素(边);文档.创建元素(页脚);</脚本><!-->

顺便说一下,这是有条件的。<!--(如果lt-9)>是对大多数浏览器的html注释,因此会被跳过--但在ie中,它是一个条件,只通过“如果小于ie 9”,它执行/呈现其中的dom节点。

所以,视频页面是一个失败。直接拜访YouTube.com并没有比这更好。

至少这次我收到了一条明显的错误信息!(大预览)

我毫不犹豫地无视警告,试图在youtube的搜索栏内搜索视频。

ie8的流量显然非常可疑,以至于youtube不相信我是一个真正的用户,决定不处理我的搜索请求!

报名参加Gmail

如果我要花一天时间在ie8,我需要一个电子邮件地址。所以我开始尝试建立一个新的。

首先,我试了Gmail。

文本不会通过颜色对比标准!(大预览)

这里的图像和文字有点不对劲。我想是因为ie8不支持媒体查询,所以它试图在桌面上给我展示一个移动图像。

一种方法是使用ss来生成两个样式表:一个用于现代浏览器,一个用于遗留。你可以通过使用mixin来查询你的媒体信息,获得易用的,移动第一的css(见Jake Archibald的教程)。混合“扁平化”您的遗产iecss对待ie像它总是一个特定的预定宽度(例如65em),只给出该宽度的相关css。在这种情况下,我会看到正确的背景图像为我假设的屏幕大小,并有一个更好的经验。

无论如何,这并没有阻止我点击“创建一个帐户”。它在ie8和现代浏览器中的外观有些不同:

ie8缺少了紧凑的布局,文本也有重叠,但除此之外仍然有效。(大预览)

虽然乍一看很有希望,但这张表格填写起来相当麻烦。当您开始在字段中填充时,“标签”并不会消失,因此您的输入文本会被混淆:

这些标签和我写的文字重叠了。(大预览)

这个标签的标记实际上是一个<div>,一些聪明的js在输入集中时移动文本。js在ie8上没有成功,所以文本顽固地停留在原地。

“标签”是用css覆盖在表单输入上的div。(大预览)

在填写完所有的细节后,我按下“下一个”键,然后等待。什么都没发生。

然后我注意到在我的ie窗左下方有一个黄色的警告符号。我点击它,看到它在抱怨一个js错误:

我走得够远了,但下一个按钮不管用。(大预览)

我放弃了gmail,转向了msn。

注册成为热门邮件

我开始担心电子邮件可能是一个10年的浏览器的限制。但是,当我去Hotmail的时候,注册表格看起来还不错,到目前为止还不错:

注册页面看起来不错。我想我们在微软的产品上会更有运气!(大预览)

然后我注意到了一个卡布查。我想,"有没有办法我能通过这个..."

我能看到并完成任务。(大预览)

令我吃惊的是,船长成功了!

表格上唯一的奇怪之处是有些轻微的错误标签定位,但是注册是无缝的:

标签的位置有点不对,但我猜我的姓后面跟着我的姓就行了。(大预览)

你看那个截图可以吗?你能找出这个故意的错误吗?

最左边的输入应该是我的名字,而不是我的姓。当我回来检查这个页面后,我点击了“名字”标签,它应用焦点到最左边的输入,这就是我本来可以检查我是在哪里填写正确的框。这显示了可访问标记的重要性——即使没有css和可视化关联,我也能准确地确定哪个输入框应用到哪个标签上(尽管是第二次!)..

无论如何,我能够完成注册过程,并被重定向到msn主页,这使伟大的。

如果有任何网站能在ie8上运行,那就是微软的主页。(大预览)

我甚至可以阅读文章,忘记我是在使用ie8:

这篇文章写得很好。没有危险的侧边栏或圆的图像。(大预览)

有了我的电子邮件注册,我准备去看看其他的互联网!

脸书

我访问了facebook网站,并立即被重新定向到移动网站:

“你使用的浏览器不受Facebook的支持,所以我们将你重新定向到一个更简单的版本,给你最好的体验。”(大预览)

这是一个聪明的回退策略,因为facebook需要在低端移动设备上支持大量的全球受众,所以无论如何都需要提供facebook的基本版本。为什么不向旧的桌面浏览器提供同样的经验基线呢?

我试过签约,并能建立一个账户。太好了!但是当我登录到那个账户时,我就被怀疑了--就像我在youtube上搜索东西时一样--还面临着一个captcha。

只是这次,没那么容易。

"请输入下面的代码"。是啊,没错。(大预览)

我试过几次请求新的代码并刷新页面,但是captcha图像从未加载,所以我实际上被锁在了我的账户之外。

哦,好吧。让我们试试更多的社交媒体。

推特

我访问了推特网站,并有完全相同的移动重定向经验。

twitter将ie8视为移动浏览器,就像facebook一样。(大预览)

但这次我甚至没办法注册一个账户

不再支持您的浏览器。要注册,请更新。您仍然可以登录到现有的用户帐户。(大预览)

奇怪的是,twitter是为你的登录而高兴的,但不是为你登记在首位。我不知道为什么——也许它的注册页面上有类似的captcha场景,在旧浏览器上是行不通的。不管怎样,我都不能再开新账户了。

我觉得登录我现有的twitter账户很尴尬。你可以说我是偏执狂,但2013年cfr的“水洞攻击”这样的漏洞让我很紧张,因为只要到ie8访问某个特定的url,就会把恶意软件安装到你的机器上。

但是,为了教育的利益,我坚持(用一个临时的新密码):

成功登入。我看到推特了!(大预览)

我也可以Tweet,尽管使用非常基本的<文本区域>:

只有当他们走了你才会想念他们。(大预览)

总之,只要你已经有了一个账号,Twitter在ie8基本上是好的!

我今天已经受够了社交媒体。我们去看看新闻吧。

bbc新闻

bbc似乎正在加载https和http资产的混合物。(大预览)

新闻主页看起来很基本,很笨重,但基本上有效——尽管内容安全警告好坏参半。

看看这个标志。就像我们已经在youtube上看到的,ie8不支持svg,所以我们需要一个png选择。

bbc使用<影像>回退技术在ie上呈现png:

ie8在svg中找到base64图像并呈现出来。(大预览)

...并在svg可用时忽略png:

图像部分被忽略,SVG被很好地呈现。(大预览)

这一技术利用了一个事实,即旧的浏览器用来同时服从<图像>和<img>标签,因此将忽略未知的<SVG>标签并呈现退一步,而现代浏览器在svg中忽略了渲染<图像>。Chris Coyier更详细地解释了这项技术。

我试着看一篇文章:

此网站针对现代浏览器优化,不完全支持您的浏览器。(大预览)

这是可读的。我能看到标题,导航,图片。但其余的文章图片都不见了:

这是意料之中的,这是由于bbc的懒惰加载图像。ie8不是一个“受支持的浏览器”,这意味着它无法获得允许惰性加载的javascript,因此图像根本无法加载。

出于兴趣,我想看看如果我试图进入bbc播放器会发生什么:

这让我想知道另一个流媒体服务。

Netflix

当我在ie8的时候装上netflix的时候,我还在期待一个空白的白页。当我看到一个像样的登陆页面时,我很惊喜:

“免费参加一个月”的号召行动,通过一个流行的形象。(大预览)

我把这个和现代铬版做了比较:

“免费观看30天”的号召行动,围绕着一幅形象复杂的通俗标题。(大预览)

这是一个稍微不同的行动呼吁(按钮文本)-可能归结为多变量测试,而不是什么浏览器我。

渲染的不同之处在于集中的文本和半透明的黑色覆盖。

缺少集中文本是因为netflix使用了flexbox来对齐项目:

netflix使用了flexbox属性的正当内容:中心来对齐它的文本。(大预览)

文本对齐:该类的中心内容可能将修正ie8(以及所有旧浏览器)的中心内容。为了获得最大的浏览器支持,您可以使用旧的“安全”css使用css回退方法,然后为支持它的浏览器使用更现代的css来收紧布局。

缺乏背景是由于使用rgba(),它在ie8及以下不支持。

rgba(0,0,5)的背景对于旧的浏览器来说是毫无意义的。(大预览)

传统上,像这样提供css回退是好的,它显示了旧浏览器的黑色背景,但显示了现代浏览器的半透明背景:

Rgb(0,0,0);/*ie8回退*/rgba(0,0,0,0.8);

然而,这是一个非常特殊的解决办法,基本上所有其他浏览器都支持rgba。而且,在这种情况下,你会完全失去网飞的花牌,所以最好没有背景过滤器!确保跨浏览器支持的绝对方法是将滤镜烘烤成背景图像本身。简单但有效。

无论如何,到目前为止,还不错--ie8实际上把主页做得相当不错!我真的要在8频道上看《越狱》吗?

当我看到登录页面时,我已经试探性的乐观情绪立刻被否定了:

你能猜出哪一面是ie8,哪一面是chrome吗?(大预览)

尽管如此,我还是登记了,并看到了一个平背仪表板(没有花哨的自动膨胀拖车):

每个程序都有一个简单的悬停状态,带有播放图标和标题。(大预览)

我用模糊的预期点击了一个程序,但当然,我只看到了一个黑色屏幕。

亚马孙河

好吧,社交媒体和视频都出去了。剩下的就是去购物了。

我查看了亚马逊,然后就被它吹走了——这和你进入现代浏览器的体验几乎没有什么区别。

亚马逊的主页在ie8上看起来几乎和其他浏览器一样好。(大预览)

我以前被一个好的主页吸引过。所以,让我们点击一个产品页面,看看这是否只是一个侥幸。

这个产品页面看起来也很棒(而且让我很饿)。(大预览)

不!产品页面看起来也不错!

亚马逊并不是唯一一个让我惊讶于其向后兼容性的网站。维基百科和英国政府网站看起来都很棒。要拥有一个看起来不像真实的车祸的网站是不容易的。我的大部分经历显然没有那么精彩!

sky.com在ie8上很难阅读或导航。(大预览)

不过,我今天看到的最糟糕的事情不是过时的警告通知或古怪的布局。

完全破碎的地点

有些网站坏了,连我都连不上!

进入吉苏布的时候没有骰子。(大预览)

我想知道这是否是一个暂时的vm网络问题,但每次我刷新页面时都会发生,即使是在当天晚些时候回到同一个网站时。

这种情况整天都在几个不同的网站上发生,我最终得出结论,这不会影响http上的网站——只会影响https上的网站(但不是所有的https网站)。有什么问题吗?

通过使用wireshark分析网络流量,我再次尝试连接Github。我们可以看到,由于一个致命的错误,即“描述:协议版本”,连接未能建立。

tlsv 1警报(级别:致命,描述:协议版本)(大预览)

从ie8的默认设置来看,只有tls 1.0被启用,但吉苏布在2018年2月放弃了对tlsv1和tlsv1.1的支持。

默认的ie8的高级设置:tls 1.0被选中,tls 1.1和1.2未选中。(大预览)

我检查了盒子里的tls1.1和tls1.2,重新加载了页面和--哇!我看到了吉苏布!

它看起来不漂亮,但至少我现在可以看到它!(大预览)

非常感谢我非常有才华的朋友Aidan Fewster帮助我调试这个问题。

我完全赞成向后兼容,但这是一个有趣的难题。根据pci安全标准理事会,tls1.0是不安全的,不应该再使用。但通过强制tls 1.1或更高,一些用户将不可避免地被锁在门外(而且并非所有用户都有足够的技术知识,能够在他们的高级设置中启用tls 1.2)。

通过允许旧的、不安全的标准和允许用户继续连接到我们的网站,我们并没有帮助他们——我们伤害了他们,没有给他们一个转向更安全的技术的理由。那么在支持老浏览器方面应该走多远呢?

我怎样才能开始支持旧的浏览器呢?

当一些人想到“支持老浏览器”时,他们可能会想到那些专门为ie设计的老黑客,就像当时bbc不得不做一些极其粗糙的事情来支持ie7中的i帧内容。

或者,他们可能正在考虑在互联网资源管理器“奇克斯模式”(quyks mode)中使事物发挥作用;这种特定的操作模式使事物与标准非常不同。

但“支持旧浏览器”与“为ie黑客入侵”有很大不同。我不主张后者,但我们应该务实地尝试做前者。作为一个网络开发者,我的信条是:

“为多数人优化,为少数人努力,决不牺牲安全”。

我现在要离开ie8的世界,谈论一下传统浏览器支持的一般的、可持续的解决方案。

支持旧浏览器有两个大致的策略,都是从p开始:

多填充通过填充缺失的浏览器功能来努力实现所有人的功能均等。逐步增强从一个核心经验开始,然后使用特征检测层的功能。

这些战略不是相互排斥的;它们可以同时使用。在这两种方法中,都有一些实现决策,每个决策都有各自的细微差别,下面我将详细介绍。

填充

对于某些网站或网页,javascript对于功能非常重要,您只需将javascript工作时的内容传递到尽可能多的浏览器。

有很多方法可以做到这一点,但首先,要上一堂历史课。

简要的手稿历史

exmascript是一个标准,javascript是该标准的实现。这意味着es5是“电子手稿版本5”,es6是“电子手稿版本6”。令人困惑的是,2015年和2015年是一样的。

es6是该版本发布前的流行名称,但es2015是正式名称,随后的echascript版本都与其发布年份相关。

注意:这都是由Brandon Morelli在一个伟大的博客帖子解释了javascript版本的全部历史有益的解释。

在撰写本报告时,最新的标准是2018年。大多数现代浏览器至少支持es2015。几乎每个浏览器都支持es5。

从技术上讲,不是。它甚至不是es4(这是不存在的——这个项目被放弃了)。ie8使用了微软的exmascript 3实现,称为jcript。ie8确实有一些es5支持,但在es5标准发布前几个月发布,因此支持不匹配。

转换与填充

你可以写Es 5javascript,它将运行在几乎每一个古老的浏览器:

Var Foo=函数(){返回这是es5!;};

您也可以继续这样写您的所有javascript--使向后兼容永远。但你会错过新的功能和语法糖已经成为可在不断发展的版本的javascript,允许你写的东西,如:

Const Foo=()=>{返回这是es6!;};

尝试在旧的浏览器中运行那个javascript,它会出错。我们需要将代码转换成浏览器能够理解的早期版本的javascript(即使用自动工具将我们的es6代码转换成es5)。

现在假设我们的代码使用标准的es5方法,比如array.indexof。大多数浏览器都有这样的本地实现,并且运行良好,但是ie8会崩溃。还记得ie8是在es5标准发布前几个月发布的吗?其中一个例子是指数函数,它已经为字符串而不是数组实现了。

如果我们尝试在ie8中运行这个方法,它将会失败。但如果我们已经在es5上写了,我们还能做什么呢?

我们可以对缺失方法的行为进行多重填充。传统上,开发人员通过复制和粘贴代码,或者通过引入外部第三方多填库来填充他们需要的每个特性。许多javascript功能在各自的mozilla mdn页面上都有很好的多填充实现,但值得指出的是,有多种方法可以多填充相同的功能。

例如,为了确保您可以使用ie8中的array.index法,您将复制并粘贴一个像这样的填充:

如果(!例如:(函数(对象,最大,最小)复制javascript中的行为的大块代码到这里来!//关于全面执行,请访问:/http://mozillar/doc.n/web.javascret/参考文献/全球目标/查询/索引#pollive})(对象:math.max,math.min);}

只要你在输入你自己的js之前调用polfull,并且如果你不使用除arraf以外的任何es5 javascript功能,你的页面就可以在ie8工作。

多填充物可以用来堵塞各种缺失的功能。例如,有用于启用css3选择器的多填充,如:最后一个子(ie8中不支持)或占位符属性(ie9中不支持)。

复填在大小和效果上各不相同,有时也对外部库如jquery有依赖关系。

你也可以听到“shims”,而不是“聚合体”。别太在意名字,人们把这两个词交替使用。但从技术上讲,Shim是拦截api调用并提供抽象层的代码。多填充物是浏览器中的一种。它特别使用javascript来改造旧浏览器中新的html/cs/js功能。

“手动导入多填充”策略摘要:

<UNK>完全控制多填物的选择;

<UNK>适合基本网站;

如果没有额外的工具,你就不得不用母语写上javascript;

<UNK><UNK>难以微管理您的所有填充;

从盒子里拿出来,你的所有用户都会得到这些复填,不管他们是否需要。

Babel Polyfill

我说过把es6的代码转换成es5。你用转座器做这个,其中最流行的是babel。

babel可以通过a进行配置。babelrc文件中的根文件。在它中,你指的是各种babel插件和预设。每个语法转换和浏览器填充通常都有一个。

微管理这些并使它们与浏览器支持列表保持同步可能是一件痛苦的事情,因此现在的标准设置是将这种微管理委托给@babel/press-env模块。有了这个设置,你只需给babel一个你想要支持的浏览器版本列表,它就为你做了大量的工作:

{"预设":[["@babel/pre-env",{"使用建成物":"用法","目标":{"Chrome":"58","IE":"11"}}]}}}

@babel/pre-env的使用内置配置选项是魔术发生的地方,与应用程序入口点中的导入“@babel/polfit”(另一个模块)相结合。

如果省略,则使用内置不起任何作用。整个@babel/polfit都包含在你的应用程序中,这个程序相当重。

什么都不做。所有的都包含在你的应用程序中,这个程序相当重。当设置为“条目”时,它将@babel/polfit导入转换为多个较小的导入,导入您在您的浏览器中列出的用于对目标浏览器进行多填充的最小填充。babelrc(在本例中是chrome 58和ie 11)。

,它将导入转换为多个更小的导入,导入所需的最小填充,以对您在您的浏览器中列出的目标浏览器进行多填充(在本例中为chrome 58和ie 11)。设置为“使用”将使这一步更进一步,方法是进行代码分析,并且只为实际使用的特性导入复填充。它被归类为“实验”,但错误的一面是“填充太多”而不是“太少”。无论如何,我看不出它会创造出一个比“进入”或“虚假”更大的组合,所以这是一个很好的选择(这也是我们bbc的做法)。

使用babel,您可以在部署到生产之前将javascript进行转置和多填充,并在特定的最低限度的浏览器基线中提供目标支持。nb,另一个流行的工具是pratescript,它有自己的转换器,转换器到es3,在理论上支持ie8跳出框。

使用@babel/预设-env进行填充的摘要:

将多填物的微观管理委托给工具;

自动工具有助于防止包含您不需要的多个填充;

鳞片至较大、复杂的位点;

<UNK>从盒子里拿出来,你的所有用户都会得到复填,不管他们是否需要;

很难准确地看到你的应用程序包中的内容。

带有网络包和动态导入的惰性加载填充

在初始化应用程序之前,可以利用新的导入()建议来检测和动态下载复填充。在练习中看起来是这样的:

从导入应用程序。/应用程序js=[];如果(!windows。获取)(输入(/*网页包装名称:“多填充获取”*/Whatwg-获取));}承诺。所有(多填充)。然后(应用程序).捕获(((错误)=>{cure.错误(“失败获取多填充”,错误);});

这个示例代码是从非常好的文章中无耻地复制的,该文章更详细地研究了该技术,内容是“以网页包和动态导入的懒惰加载填充”。

摘要:

<UNK>不会用不必要的复填膨胀现代浏览器;

<UNK><UNK>需要手动管理每个聚合体。

化合物.o

它是由英国《金融时报》建立的一项服务。它通过你的页面向polfilio写一个脚本请求,或者列出你需要的具体功能。然后他们的服务器分析用户代理字符串并相应填充脚本。这将使您不必手动提供自己的填充解决方案。

这是polfileio所返回的从ie8提出的请求的javascript:

大量的js代码到多填充标准es5方法在ie8。(大预览)

这是相同的聚合物.io请求,但请求来自现代铬:

没有js代码,只是一个js注释。(大预览)

你的网站只需要一个脚本调用。

摘要:

在您的网页应用程序中容易包含;

<UNK>将多重填充知识的责任委托给第三方;

<UNK>在反侧,现在依赖第三方服务;

<UNK><UNK>做了一个阻塞<脚本>调用,甚至对于不需要任何复填的现代浏览器也是如此。

逐步加强

多填充技术是支持旧浏览器的一种非常有用的技术,但是它对网页来说是一个巨大的膨胀,而且在范围上是有限的。

另一方面,渐进的增强技术是保证所有浏览器基本体验的好方法,同时在现代浏览器上为用户保留全部功能。这应该是可以在大多数网站上实现的。

其原理是:从html(和样式,可选的)的基线开始,用javascript功能“逐步增强”页面。好处是,如果浏览器是一个传统的,或者如果javascript在其交付的任何一点被打破,你的网站仍然应该是功能。

“逐步增强”一词常与“不显眼的javascript”互换使用。它们的意思本质上是一样的,但是后者更进一步,因为你不应该在你的html中添加只有javascript才会使用的许多属性、ID和类。

切芥末

bbc“切芥子气”技术是一种经过实践检验的渐进增强技术。其原理是编写一个可靠的html基线体验,并在下载任何增强的javascript之前,检查支持的最低水平。原始实现检查是否存在标准html5特性:

如果(文档中的“查询选择器”和窗口中的“本地存储”和窗口中的“附加侦听器”){/增强html5浏览器}

随着新功能的出现和旧浏览器的日益陈旧,我们的削减芥末基线将会改变。例如,新的javascript语法,如es6箭头函数,将意味着这种内联的ctm检查甚至在传统浏览器中都无法进行分析,甚至无法安全地执行ctm检查并且无法通过ctm检查,因此可能会有意想不到的副作用,比如破坏其他第三方的javascript(例如谷歌分析)。

为了避免甚至试图解析不转换的,现代的js,我们可以应用这个“现代拍摄”的ctm技术,取自@sungug的博客,其中,我们利用了一个事实,即旧的浏览器不理解类型=“模块”声明,并将安全地跳过它。相比之下,现代浏览器将忽略<脚本配置>声明。

<脚本类型="模块"SRC="。/mustar.js"></脚本><脚本游牧SRC="。-不加芥末Js"></脚本><!--也可以内联-->><脚本类型=“模块”>从导入芥末。’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’;</脚本>

如果你很乐意将es6浏览器作为你的新最低功能基线(在撰写本报告时约92%的全球浏览器),那么这个方法是一个很好的方法。

然而,正如javascript的世界正在演变,css的世界也在演变。现在我们有了网格,Flexbox,css变量和类似的(每个都有不同效果的退一步),无法确定旧浏览器的css支持组合可能导致“现代”和“传统”风格的混搭,其结果看起来是坏的。因此,越来越多的网站选择ctm他们的造型,所以现在html是核心基线,而且css和js都被视为增强。

我们目前看到的基于javascript的ctm技术有一些缺点,如果你用javascript的存在来应用css的任何方式:

内嵌的javascript正在阻塞。浏览器必须下载,分析和执行你的javascript之前,你得到任何造型。因此,用户可能会看到一个非风格文本的闪光。一些用户可能有现代浏览器,但选择禁用javascript。一个基于javaclable的ctm阻止他们得到一个有风格的网站,即使他们完全有能力得到它。

“终极”的方法是使用css媒体查询作为你的芥菜试金石。这种“cssctm”技术在Springer自然等网站上得到了积极的应用。

<头><!------------------------------------------------------------------重要:js依赖于在css中的某处有这样的规则:‘体{清楚:两者}’--><链结Rell="样式表"href="mq--测试。Css"媒体="只有屏幕和(最小分辨率:0.1 dpcm),只有屏幕和(-webkit-最小像素比:0)和(最小颜色索引:0)"></head><身体><!--这里的内容---><脚本>(函数(){//firm以防止全局范围污染函数被支持(){var val=";如果(windows。计算机样式){val=windows。获得属性值(清除);}如果(文档。当前样式){val=文档。当前样式。}返回假;}如果(支持()){//在这里为支持的浏览器加载或运行javascript。}})();</脚本></正文>

这种方法非常脆弱——不小心在你的身体选择器上覆盖了清晰的属性会“破坏”你的网站——但是它确实提供了最好的性能。这个特定的实现使用的媒体查询至少只在9、iOS 7和android 4.4中支持,这是一个相当合理的现代基线。

"切芥末",以其各种形式,实现了两个主要原则:

广泛的用户支持;有效的应用。

网站根本不可能容纳每一个浏览器/操作系统/网络连接/用户配置组合。根据雅虎的分级浏览器支持模型,诸如“切芥末”之类的技术有助于将浏览器合理地转换为c级和a级浏览器。

芥末:反模式?

有一种观点认为,应用全局的“核心”与“高级”的二元决策对我们的用户来说并不是最好的体验。如果浏览器支持全球ctm测试中90%的功能,而这个特定的页面甚至没有使用它失败的10%的功能,那么这个技术问题将会怎样?在这种情况下,用户将获得核心体验,因为ctm检查将会失败。但我们可以给他们全部的经验。

如果给定的页面确实使用了浏览器不支持的功能,那么这种情况又如何呢?在转向组件化的过程中,我们可以有一个特性特定的退一步(或错误边界),而不是页面级别的退一步。

在我们的网络开发中,我们每天都这样做。考虑拉一个网页字体;不同的浏览器有不同水平的字体支持。我们该怎么办?我们提供了一些字体文件的变化,并让浏览器决定下载哪些:

@font-face{font-family:font名;SRC:url(路径/文件名。eot);SRC:url(路径/文件名。太好了#iefix)格式(s beded-opentype),URL(路径/文件名。woff2)格式(woff2),URL(路径/文件名。Woff)格式(“Woff”),URL(“路径/文件名”。ttf)格式(TrueType);}

我们对html5视频也有类似的选择。现代浏览器会选择他们想要使用的视频格式,而不了解什么是<video>元素的传统浏览器会简单地呈现退一步文本:

<视频宽度=“400”控件><源SRC=“mov_bbb.mp4”类型=“视频/mp4”><源SRC=“mov_bbb.OGG”类型=“视频/ogg”>您的浏览器不支持html5视频。</视频>

我们早先看到bbc用于svg的png回退的嵌套方法是<图片>响应图像元素的基础。现代浏览器将根据所提供的媒体属性呈现最佳匹配图像,而不了解什么是<图片>元素的传统浏览器将呈现<img>退一步。

<图片><源媒体="(最小宽度:650px)"srcset="img_pink_flower.jpg"><源媒体="(最小宽度:465px)"srcset="img_flower.jpg"<img SRC="mimgr_橙花.pryrpg"="宽度:自动;"></图片>

这些年来,html规范经过了精心的发展,为所有浏览器提供了一个基本的后备机制,同时也为理解它们的现代浏览器提供了功能和优化。

我们可以对我们的javascript代码应用类似的原理。想象一个像这样的特性,其中Foo方法包含一些复杂的j:

类特性{浏览器支持(){在文档中返回(查询器);//内部剪切-芥末在这里}Foo(){//等}}导出默认新特性();

在调用Foo之前,我们通过调用其浏览器支持的方法来检查该特性是否在此浏览器中支持。如果它不支持,我们甚至不尝试调用代码否则将有错误我们的页面。

从导入特性。/特征;如果(特征;浏览器支持()){特征.foo();};

这一技术意味着我们可以避免使用多填充物,只需要使用每个浏览器本身支持的内容,如果不支持,可以优雅地降低单个特性。

注意,在上面的例子中,我假设代码被转置到es5,这样所有浏览器都能理解语法,但我不假设任何代码都是填充的。如果我们想避免代码的转换,我们可以应用同样的原则,但是使用类型=“模块”来处理“芥子气”,但是它附带了一个警告:它已经有一个最低的es6浏览器要求,因此,几年后才有可能成为一个好的解决方案:

<脚本类型=“模块”>从导入特征。/特征.js;如果(特征.浏览器支持()){特征.foo();}</脚本>

我们已经报道了html,也报道了javascript。我们也可以应用css中的局部回退;css中有@css关键字,允许您根据css功能是否存在支持而有条件地应用css。然而,具有讽刺意味的是,它并没有得到普遍支持。它只是需要仔细的应用;有一篇关于如何在css中使用功能查询的很棒的mozilla博客文章。

在一个理想的世界里,我们不应该需要一个全球性的芥子气检查。相反,每个单独的html、js或css特性应该是独立的,并且有自己的错误边界。在一个由网络组件、阴影随机和自定义元素组成的世界里,我希望我们将看到更多的转向这种方法。但是,它确实使得预测和测试你的网站作为一个整体变得更加困难,并且如果一个组件的样式影响到另一个组件的布局,可能会有意想不到的副作用。

两种主要的向后兼容策略

作为一项战略的多填物概述:

<UNK>可以向大多数用户提供客户端js功能。

当将向后兼容性问题委托给复填充时,可以更容易地编写代码。

<UNK><UNK>取决于实现,对于不需要复填的用户来说可能会对性能产生不利影响。

根据应用程序的复杂性和浏览器的使用年限,可能需要大量的填充,因此运行非常糟糕。我们冒着将兆字节的多填表器传送到最不愿意接受的浏览器的风险。

作为一项战略的逐步加强的概述:

传统的ctm使您的代码易于分割和手动测试。

<UNK>保证所有用户的经验基线。

可能不必要地将核心经验提供给能够处理高级经验的用户。

<UNK><UNK>不太适合需要客户端js功能的网站。

有时很难平衡一个强大的渐进增强策略与一个执行者的第一渲染。有这样一种风险,即过度优先考虑“核心”体验,而损害了90%获得“完整”体验的用户的利益(例如,为nojs提供小图像,然后用高分辨率图像替代懒惰负载意味着我们已经浪费了大量下载从未查看的资产容量)。

结论

ie8曾经是一个最先进的浏览器。(不,我是认真的。)如今的chrome和火狐也是如此。

如果今天的网站在ie8中完全无法使用,那么十年后的网站在现代浏览器中也可能同样无法使用——尽管它们是建立在html、css和javascript的开放技术之上的。

停下来好好想想。是不是有点吓人?(也就是说,如果你不能在十年后放弃浏览器,而在公司否决了浏览器之后,你什么时候可以呢?)

8是今天的替罪羊。明天将是9,明年将是狩猎,一年后可能是铬。你可以把ie8换成“老浏览器”。重点是,在浏览器开发者所构建的浏览器和人们所使用的浏览器之间,总是存在一些分歧。我们应该停止嘲笑,并开始投资于强大的,包容性的工程解决方案。这些策略的副作用往往会在可访问性、性能和网络复原力方面带来好处,因此这里有一个更大的前景。

我们倾向于不考虑屏幕阅读器的数字。我们只是想当然地认为,尽我们最大的努力支持那些没有其他方式来消费我们的内容的用户,这在道义上是正确的,而不是我们自己的过错。同样的原则也适用于使用旧浏览器的人。

我们已经讨论了一些建立强大网站的高级策略,这些策略在某种程度上应该继续在广泛的遗产和现代浏览器中发挥作用。

再一次,免责声明:不要为ie黑东西。那就不重要了。但要注意的是,各种各样的人出于各种原因使用各种各样的浏览器,并且我们可以采取一些坚实的工程方法,使每个人都能访问网络。

为了多数人而努力,为了少数人而努力,永远不要牺牲安全。

进一步阅读关于打击犯罪的杂志:

标签: 网络 上用 探险家 杂志 一天

分页: 1 2 3

来赚网-一个教你赚钱的网站。赚钱,网络赚钱,兼职挣钱,网赚培训,你想要的手机微信赚钱的方法、项目、生意都在这里!这里有网络兼职,微信赚钱方法,手机赚钱项目,轻松赚钱技巧等等...

友情链接