整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
文本已获授权转载
在网站开发中，展示图片毫无疑问是使用 <img> 标签。可你有了解过 <picture> 标签吗？
日前，在P站的Web前端技术分享中，技术负责人对 <picture> 标签青睐有加，认为它减少了开发量。
作为前端工程师，必须紧跟技术前进的方向，一起来了解 <picture> 标签。
<picture> 是 HTML5 中的一个新元素，它通过包含零个或多个 <source> 元素和一个 <img> 元素，来为不同的场景提供图像。
也就是说，<picture>也是一个展示图片的标签，但是通过内嵌的标签，能实现更多功能。
它的典型代码结构如下：
picture 标签
单个 <picture> 表现为内联元素（inline）。根据规范说明，<picture> 期望内嵌 <source> 和 <img> 这两种标签。
source 标签
source 标签具有以下属性：
当能匹配到 source 中的某项时，则 picture 会显示 source 的内容。
img 标签
<picture> 内的 <img> 标签是起到一个回调的作用。即当浏览器不能匹配 <source> 中的任何一项时候，则使用 <img> 内容显示。
作为前端，我们熟悉响应式设计，即根据不同的屏幕大小、分辨率、显示终端等，实现不同的布局方案。
可是，这里存在瑕疵。假如移动端和 PC 端实现了响应式设计，图片的尺寸会根据设备来改变。但是，图片内容其实还是同一个资源。
如果我们需要实现响应式地加载图片资源，即不同场景使用不同图片 ——
可能 PC 端使用高清图片，手机端为了节省浏览使用低清晰度图片，在以往就需要 JavaScript 的参与。
为了更好地实现响应式设计，HTML5 中的<picture>标签，可以通过 HTML 来实现实现不同的屏幕大小、分辨率、终端等加载不同的图片资源。
P站的技术分享特意提到这个标签，这足以证明他们通过这种响应式图片加载，能节省更多的流量来服务大众。
在浏览器支持 webp 格式时候加载 webp 图片，否则使用 png 图片，已到达节省流量的目的：
页面尺寸大于等于 45em 时候使用 large.jpg，大于等于 32 em 时候使用 mid.jpg，都不匹配则使用 small.jpg：
以上就是 <picture> 标签的技术分享，希望对大家有帮助。
至于P站是否真的应用了 <picture> 标签，奈何它的代码没有在 Github 开源，无法求证。但是，从 <picture> 所体现出来的能力，确实对图片的响应式加载有很大帮助。
你的点赞收藏转发，都是我创作的动力。
微软放弃了自家经典版 Edge 浏览器上的 EdgeHTML 渲染引擎，并转投至开源的谷歌 Chromium 内核之后，Mozilla Firefox 就成为了与谷歌浏览器对抗的唯一替代者。Chris Beard 曾在 2018 年 12 月表示，微软已将网络生活的更多控制权投给了谷歌。然而即便只在浏览器市场排名第三，Mozilla 的每次更新，仍在努力为 Firefox 引入大量的改进。
在为微软放弃 EdgeHTML 叫好的同时，Mozilla 也知悉这增加了 Firefox 复兴的难度。在许多方面，对谷歌功能的增强，都是有一定风险的。
其中很大一部分取决于服务和网站创建者的行为，如果像 Chromium 这样的产品占据了足够的市场份额，则 Web 开发者和企业能够对 Chromium 的兼容性感到更加放心。
正如当年微软 IE 在 Firefox 诞生之前的 2000 年代初期垄断浏览器市场，这种情况很可能再次发生。
如果仅从市场战略上来考量，迁移至 Chromium 内核，确实极大地改善了新版 Microsoft Edge 浏览器的市场占有率。在新版 Edge 轻松跃升的同时，Firefox 也遗憾地失去了全球浏览器市场的第二名位置。
当然，Mozilla 一直在欢迎良性的市场竞争，Firefox 用户也能够最终受益。作为今年早些时候采取的措施的一部分，Mozilla 现已能够每四周发布一次 Firefox 大版本更新。
尽管偶尔有一些 bug 需要应对，但 Firefox 仍是全球领先的一款浏览器，尤其在新功能的采用方面，比如率先支持多个画中画窗口。
此外 Firefox 浏览器每月都会收到重大更新，比如最近发布的 Firefox 83 中引入的面向所有平台的纯 HTTPS 模式、PiP 快捷键、搜索、以及浏览器性能方面的大改进。
据悉，Mozilla 在 11 月 17 日正式推出了 Firefox 83，并且替换了 JavaScript 引擎的一部分，有助于改善代码编译和网站呈现、同时提升引擎的安全性和可维护性。
得益于 JavaScript 引擎（SpiderMonkey）的重大更新，Firefox 的速度进一步提升。页面加载 +15%，响应速度 +12%，同时内存占用还减少了 8% 。
总而言之，微软向 Chromium 的迁移，并没有对 Firefox 的未来发展产生太大的影响，并且在某些方面改善了用户的浏览体验。
最后，Mozilla Firefox 仍是目前市面上取代 Google Chromium 浏览器的唯一先进的选择。
士断腕，Firefox Quantum 的扩展怎么了？
如果你是 Firefox 的新用户，或者无意了解 Firefox 扩展的历史变化，也可以跳过阅读这一部分，直接阅读下面 Firefox 的扩展推荐。
距离 Firefox 57.0 版本正式发布已经有一段时间了，相信大家已经看过了许多的对比评测，自己也亲身上手试过。这可以说是 Firefox 近几年最为巨大的一次革新，不管是焕然一新更加简洁的软件界面，还是更加高效的 css 和引擎和更加优化的内存占用，Firefox 的全新版本的众多特性都只为简洁与速度让步。
从 Firefox 57.0（Firefox Quantum）开始，Firefox 将只支持使用 WebExtensions API 开发的扩展。从 Firefox 官方的支持文档中我们可以看到它的介绍：「该系统与 Google Chrome、Opera 和 W3C 草案社区组织 所支持的 扩展 API 在很大程度上兼容。大多数情况下为这些浏览器编写的扩展只需少许修改即可在 Firefox 或 Microsoft Edge 中运行。这种 API 与也完全兼容 多进程 Firefox」。
很显然，为了速度与兼容性，Firefox 已经下定决心完全改进扩展的使用体验。Firefox 以往有使用 Add-on SDK 来开发的扩展，功能强大但在安装和卸载时都需要重启浏览器，这些扩展也常常会带来浏览器的兼容性问题。而 Firefox 现在所推荐的 WebExtensions 扩展保留了简洁与高效的特点，下载即安装，卸载时也不需要重启浏览器，不会对用户的浏览造成中断。
但 Firefox 已经有很大一部分为人喜欢的扩展并没有使用 WebExtensions API 进行开发，这意味着许多扩展带来的功能在 Firefox 57.0 之后将会带有一段时间的窗口期。这对于 Firefox 来说不可说不是「壮士断腕」。
我从测试版就开始体验 Firefox Quantum，当时许多扩展都没有开始转为使用 WebExtension API，可以使用的扩展非常有限。特别是有一些我们熟知并喜爱的 Add-on SDK 开发的扩展，比如 Beyond Australis 这类甚至可以完全改变浏览器界面的扩展，已经完全无法使用。可以说是这样的「壮士断腕」让人阵痛了很长一段时间。
但让人高兴的是，随着 Firefox 57.0 的正式发布，也有 Firefox 的积极引导的作用，许多 Firefox 扩展的作者已经开始将旧式扩展转移到 WebExtensions 扩展，并且也诞生了许多新的优秀扩展。
你也许和我一样对软件的界面有一些自己的小要求。不仅想要简洁，但同时还想要一点个性化。商店里无聊的主题真的不好看，而且不管怎样变化，也只是变化一下标题栏而已。我很喜欢 Vivaldi 跟随所浏览的网页更改浏览器窗体颜色特性，但没想到我在 Firefox 里也能用上这样的特性。
VivaldiFox 就是这样一个简单的插件，它能够改变 Firefox 窗体和标签页的颜色，在默认的主题下，浏览器可以跟随你所浏览的网页变换色彩，比如少数派的红色、豆瓣的绿色、Behance 的蓝色。让浏览器随网页改变蓝色不仅可以让你的浏览器更漂亮，也可以让你快速区分你正在浏览的网页属于哪一个网站。
窗体颜色可以随网站配色变化
除了自动跟随网站改变色彩的功能，你还可以在 VivaldiFox 的首选项中自定义主题，随意设定窗体和标签栏的颜色，搭配你自己个性化的浏览器颜色。、
点击这里下载 VivaldiFox。
很多时候你肯定不可能只使用一个账号，比如你需要使用不同的个人邮箱和工作邮箱来应付不同的事务。如果你同时使用多个账号，登陆和切换是一个麻烦的问题。
Multi-Account Containers 是 Firefox 官方开发的一个插件，它能够让你新建不同的 Containers，你可以在不同的 Containers 之间登陆不同的账号，它们互相独立不打扰。对应的 Containers 在标签和地址栏中将会有颜色和文字进行区分，让你清楚知道自己所处的 Container。你还可以新建更多的 Container，以便于适应你自己更多的多账号需求。
总之，简单讲这个功能就像是「开小号」，相信这会是很多人需要的功能。
点击这里下载 Multi-Account Containers。
Firefox 现在仍然保留了侧边栏的功能，除了可以在侧边栏查看历史和书签等功能，一些扩展程序也依然可以通过 Firefox 的侧边栏来完成一些创意。
现在，几乎所有的现代浏览器都将标签栏横向固定在顶部，但当你打开的标签过多的时候，管理标签页的时候就没有那么方便了。Tab Center Redux 可以让你在侧边栏中打开一个纵向的标签页列表，如果你打开的标签页非常多，你可以方便地在侧边栏中纵向滚动标签页进行浏览，当然更加宽阔的面板也可以让你一眼看到标签页的网页缩略图。你还可以在折叠视图与完整视图中进行切换，以容纳更多的标签页。
点击这里下载 Tab Center Redux。
我非常喜欢使用手势来浏览网页，因为懒。有时候在吃东西或者是喝水，我甚至懒得用左手去按 cmd+w，更别提恢复最近的标签页 cmd+shift+T 这种非常难按的快捷键了。如果你学会使用鼠标手势，这些操作都将变得非常便捷。
Firefox 上的手势扩展 FireGestures 已经不能使用。Gesturefy 成了新的替代品。你可以自定义多种鼠标手势，这样你只需要按住鼠标右键进行简单的拖动就可以完成许多操作了。
点击这里下载 Gesturefy。
在 Vivaldi 浏览器中，用侧边栏刷推并不是难事，只需要在侧边栏中直接添加网页就可以了。但 Firefox 的侧边栏还没有办法进行这样的自定义网页。Twitter as a Sidebar 扩展的功能就是让你可以在侧边栏中打开 Twitter。一边浏览网页，一边在侧边栏中刷推真的是很方便。
点击这里下载 Twitter as a Sidebar。
相信许多人都有在一边看视频，一边做其他事的需求。苹果也有注意到这样的需求，macOS 的画中画功能就让你可以将视频变成弹出窗口浮动在任何窗口之上，然而遗憾的是，macOS 的画中画功能只支持 macOS High Sierra 和 Safari 浏览器。
Firefox 的 Min Vid 扩展也让你可以将视频弹出到一个新的窗口中，这个窗口可以随意移动，让你可以在做其他事的同时继续观看视频。它还有一个简单的播放列表功能，你可以继续找到想看的视频添加到这个窗口的播放列表中。
在视频左上角点击弹出播放的按钮就能让视频在小窗口里播放了
然而美中不足的是，Min Vid 支持的网站非常有限，大部分国内的视频网站都还不能使用它。如果你是 Youtube 的用户，倒是可以很愉快地使用这个扩展。
Min Vid 是 Firefox Test Pilot 中的一项测试扩展，Firefox Test Pilot 是什么稍后再为大家介绍。
实际上我现在已经不大推荐用户去更改 Firefox 的新标签页，因为事实上 Firefox 57.0 的新标签已经足够简洁和好用（我竟然还是选择了功能为先）。当然，仍然有许多的用户会需要有一些美化需求。如果你有对新标签页的美化需求，那么在 Firefox 上我的推荐只有这一款扩展。
Tabliss 与你在 Chrome 上见过的许多新标签页美化扩展一样，用一张好看的壁纸替换了单调的新标签页。Tabliss 的图片来源有 Unsplash、GIPHY 和 Dribbble，当然你也可以使用纯色或上传自己喜欢的图片。良心保证，Unsplash 的图片美丽，而 GIPHY 的动图也非常有趣，Dribbble 上的设计也很酷炫。设计师还可以在隐藏 Tabliss 的界面元素之后，把 Tabliss 当成一个真正的 Dribbble 浏览器来浏览 Dribbble 上的内容。
可以在新标签中直接浏览 Dribbble 上的内容
除了壁纸，Tabliss 让你可以自定义在新标签上显示一些小组件，比如时间、搜索、链接。可定制的程度还不错。
点击这里下载 Tabliss。
（另一个可爱的新标签页扩展 Tabby Cat，让你的新标签页每次打开时都显示一只不一样的可爱小猫。）
翻译类的扩展有很多，但我想在 Firefox 上推荐的是这一款，它的简单功能已经可以满足了大部分用户的需求。
Simple Translate 只有一个最简单的输入框、下拉框和翻译整个页面的按钮。如果你有想要翻译的词语，直接输入输入框中就会自动识别输入的语言翻译微为浏览器语言，不需要进行任何设置。
当然我更喜欢的是「Translate This Page」，对于一些想要快速浏览大概了解整篇文章的场景，这个按钮让你可以用谷歌翻译直接将整个网页进行翻译，同时也不影响网页中的链接功能，非常方便。
点击这里下载 Simple Translate。
Stylish：已经支持 Firefox 57.0
Stylish 可以改变不同网页的外观，相信大家已经很清楚它的功能，少数派在介绍 Chrome 扩展的时候也常常提到这个功能强大的扩展。现在 Stylish 已经支持了 Firefox 57.0，你可以在 Firefox 中愉快地使用它了。
点击这里下载 Firefox 的 Stylish。
Firefox Test Pilot 是一个 Firefox 官方对新功能进行实验的计划。上面提到的 Min Vid 和 Multi-Account Containers 就都是在这个计划中进行测试的一个扩展。Firefox Test Pilot 曾经也测试过许多有趣的新功能，在进行测试后，官方会发表一个测试报告，优秀的扩展也将进入 Firefox 扩展商店开放给所有用户下载。
目前 Firefox Test Pilot 中除了上面提到的 Min Vid，还有其他几个功能也正在进行测试。比如发送加密链接的「Send」、把标签页稍后再看的「Snooze Tabs」。你可以在这里加入 Firefox Test Pilot 试用里面的新功能。
这篇文章实际上是一个「新世代的 Firefox 扩展介绍」，所选择的插件大部分是 Firefox 57.0 的特有扩展，与 Chrome 或 Safari 都有所不同。Firefox 的扩展正处在一个窗口期，但能看到这么多开发者仍然愿意继续支持新版本的 Firefox 是非常让人开心的。
Firefox 这番大规模的改版带来了非常多体验上的优化，当然这样的大动作也必定造成很大的震动。内心上，我仍然希望 Firefox 这样一个老牌的浏览器在焕发新生机之后能够继续走下去。
如果你仍然没有试过新版本的 Firefox，请一定要下载试试。如果你在使用 Firefox 时找不到某个 Chrome 扩展的替代品，也可以在这里留言与大家一起讨论。
*请认真填写需求信息，我们会在24小时内与您取得联系。
