整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
文本已獲授權(quán)轉(zhuǎn)載
在網(wǎng)站開發(fā)中，展示圖片毫無(wú)疑問是使用 <img> 標(biāo)簽。可你有了解過 <picture> 標(biāo)簽嗎？
日前，在P站的Web前端技術(shù)分享中，技術(shù)負(fù)責(zé)人對(duì) <picture> 標(biāo)簽青睞有加，認(rèn)為它減少了開發(fā)量。
作為前端工程師，必須緊跟技術(shù)前進(jìn)的方向，一起來(lái)了解 <picture> 標(biāo)簽。
<picture> 是 HTML5 中的一個(gè)新元素，它通過包含零個(gè)或多個(gè) <source> 元素和一個(gè) <img> 元素，來(lái)為不同的場(chǎng)景提供圖像。
也就是說，<picture>也是一個(gè)展示圖片的標(biāo)簽，但是通過內(nèi)嵌的標(biāo)簽，能實(shí)現(xiàn)更多功能。
它的典型代碼結(jié)構(gòu)如下：
picture 標(biāo)簽
單個(gè) <picture> 表現(xiàn)為內(nèi)聯(lián)元素（inline）。根據(jù)規(guī)范說明，<picture> 期望內(nèi)嵌 <source> 和 <img> 這兩種標(biāo)簽。
source 標(biāo)簽
source 標(biāo)簽具有以下屬性：
當(dāng)能匹配到 source 中的某項(xiàng)時(shí)，則 picture 會(huì)顯示 source 的內(nèi)容。
img 標(biāo)簽
<picture> 內(nèi)的 <img> 標(biāo)簽是起到一個(gè)回調(diào)的作用。即當(dāng)瀏覽器不能匹配 <source> 中的任何一項(xiàng)時(shí)候，則使用 <img> 內(nèi)容顯示。
作為前端，我們熟悉響應(yīng)式設(shè)計(jì)，即根據(jù)不同的屏幕大小、分辨率、顯示終端等，實(shí)現(xiàn)不同的布局方案。
可是，這里存在瑕疵。假如移動(dòng)端和 PC 端實(shí)現(xiàn)了響應(yīng)式設(shè)計(jì)，圖片的尺寸會(huì)根據(jù)設(shè)備來(lái)改變。但是，圖片內(nèi)容其實(shí)還是同一個(gè)資源。
如果我們需要實(shí)現(xiàn)響應(yīng)式地加載圖片資源，即不同場(chǎng)景使用不同圖片 ——
可能 PC 端使用高清圖片，手機(jī)端為了節(jié)省瀏覽使用低清晰度圖片，在以往就需要 JavaScript 的參與。
為了更好地實(shí)現(xiàn)響應(yīng)式設(shè)計(jì)，HTML5 中的<picture>標(biāo)簽，可以通過 HTML 來(lái)實(shí)現(xiàn)實(shí)現(xiàn)不同的屏幕大小、分辨率、終端等加載不同的圖片資源。
P站的技術(shù)分享特意提到這個(gè)標(biāo)簽，這足以證明他們通過這種響應(yīng)式圖片加載，能節(jié)省更多的流量來(lái)服務(wù)大眾。
在瀏覽器支持 webp 格式時(shí)候加載 webp 圖片，否則使用 png 圖片，已到達(dá)節(jié)省流量的目的：
頁(yè)面尺寸大于等于 45em 時(shí)候使用 large.jpg，大于等于 32 em 時(shí)候使用 mid.jpg，都不匹配則使用 small.jpg：
以上就是 <picture> 標(biāo)簽的技術(shù)分享，希望對(duì)大家有幫助。
至于P站是否真的應(yīng)用了 <picture> 標(biāo)簽，奈何它的代碼沒有在 Github 開源，無(wú)法求證。但是，從 <picture> 所體現(xiàn)出來(lái)的能力，確實(shí)對(duì)圖片的響應(yīng)式加載有很大幫助。
你的點(diǎn)贊收藏轉(zhuǎn)發(fā)，都是我創(chuàng)作的動(dòng)力。
微軟放棄了自家經(jīng)典版 Edge 瀏覽器上的 EdgeHTML 渲染引擎，并轉(zhuǎn)投至開源的谷歌 Chromium 內(nèi)核之后，Mozilla Firefox 就成為了與谷歌瀏覽器對(duì)抗的唯一替代者。Chris Beard 曾在 2018 年 12 月表示，微軟已將網(wǎng)絡(luò)生活的更多控制權(quán)投給了谷歌。然而即便只在瀏覽器市場(chǎng)排名第三，Mozilla 的每次更新，仍在努力為 Firefox 引入大量的改進(jìn)。
在為微軟放棄 EdgeHTML 叫好的同時(shí)，Mozilla 也知悉這增加了 Firefox 復(fù)興的難度。在許多方面，對(duì)谷歌功能的增強(qiáng)，都是有一定風(fēng)險(xiǎn)的。
其中很大一部分取決于服務(wù)和網(wǎng)站創(chuàng)建者的行為，如果像 Chromium 這樣的產(chǎn)品占據(jù)了足夠的市場(chǎng)份額，則 Web 開發(fā)者和企業(yè)能夠?qū)?Chromium 的兼容性感到更加放心。
正如當(dāng)年微軟 IE 在 Firefox 誕生之前的 2000 年代初期壟斷瀏覽器市場(chǎng)，這種情況很可能再次發(fā)生。
如果僅從市場(chǎng)戰(zhàn)略上來(lái)考量，遷移至 Chromium 內(nèi)核，確實(shí)極大地改善了新版 Microsoft Edge 瀏覽器的市場(chǎng)占有率。在新版 Edge 輕松躍升的同時(shí)，F(xiàn)irefox 也遺憾地失去了全球?yàn)g覽器市場(chǎng)的第二名位置。
當(dāng)然，Mozilla 一直在歡迎良性的市場(chǎng)競(jìng)爭(zhēng)，F(xiàn)irefox 用戶也能夠最終受益。作為今年早些時(shí)候采取的措施的一部分，Mozilla 現(xiàn)已能夠每四周發(fā)布一次 Firefox 大版本更新。
盡管偶爾有一些 bug 需要應(yīng)對(duì)，但 Firefox 仍是全球領(lǐng)先的一款瀏覽器，尤其在新功能的采用方面，比如率先支持多個(gè)畫中畫窗口。
此外 Firefox 瀏覽器每月都會(huì)收到重大更新，比如最近發(fā)布的 Firefox 83 中引入的面向所有平臺(tái)的純 HTTPS 模式、PiP 快捷鍵、搜索、以及瀏覽器性能方面的大改進(jìn)。
據(jù)悉，Mozilla 在 11 月 17 日正式推出了 Firefox 83，并且替換了 JavaScript 引擎的一部分，有助于改善代碼編譯和網(wǎng)站呈現(xiàn)、同時(shí)提升引擎的安全性和可維護(hù)性。
得益于 JavaScript 引擎（SpiderMonkey）的重大更新，F(xiàn)irefox 的速度進(jìn)一步提升。頁(yè)面加載 +15%，響應(yīng)速度 +12%，同時(shí)內(nèi)存占用還減少了 8% 。
總而言之，微軟向 Chromium 的遷移，并沒有對(duì) Firefox 的未來(lái)發(fā)展產(chǎn)生太大的影響，并且在某些方面改善了用戶的瀏覽體驗(yàn)。
最后，Mozilla Firefox 仍是目前市面上取代 Google Chromium 瀏覽器的唯一先進(jìn)的選擇。
士斷腕，F(xiàn)irefox Quantum 的擴(kuò)展怎么了？
如果你是 Firefox 的新用戶，或者無(wú)意了解 Firefox 擴(kuò)展的歷史變化，也可以跳過閱讀這一部分，直接閱讀下面 Firefox 的擴(kuò)展推薦。
距離 Firefox 57.0 版本正式發(fā)布已經(jīng)有一段時(shí)間了，相信大家已經(jīng)看過了許多的對(duì)比評(píng)測(cè)，自己也親身上手試過。這可以說是 Firefox 近幾年最為巨大的一次革新，不管是煥然一新更加簡(jiǎn)潔的軟件界面，還是更加高效的 css 和引擎和更加優(yōu)化的內(nèi)存占用，F(xiàn)irefox 的全新版本的眾多特性都只為簡(jiǎn)潔與速度讓步。
從 Firefox 57.0（Firefox Quantum）開始，F(xiàn)irefox 將只支持使用 WebExtensions API 開發(fā)的擴(kuò)展。從 Firefox 官方的支持文檔中我們可以看到它的介紹：「該系統(tǒng)與 Google Chrome、Opera 和 W3C 草案社區(qū)組織 所支持的 擴(kuò)展 API 在很大程度上兼容。大多數(shù)情況下為這些瀏覽器編寫的擴(kuò)展只需少許修改即可在 Firefox 或 Microsoft Edge 中運(yùn)行。這種 API 與也完全兼容 多進(jìn)程 Firefox」。
很顯然，為了速度與兼容性，F(xiàn)irefox 已經(jīng)下定決心完全改進(jìn)擴(kuò)展的使用體驗(yàn)。Firefox 以往有使用 Add-on SDK 來(lái)開發(fā)的擴(kuò)展，功能強(qiáng)大但在安裝和卸載時(shí)都需要重啟瀏覽器，這些擴(kuò)展也常常會(huì)帶來(lái)瀏覽器的兼容性問題。而 Firefox 現(xiàn)在所推薦的 WebExtensions 擴(kuò)展保留了簡(jiǎn)潔與高效的特點(diǎn)，下載即安裝，卸載時(shí)也不需要重啟瀏覽器，不會(huì)對(duì)用戶的瀏覽造成中斷。
但 Firefox 已經(jīng)有很大一部分為人喜歡的擴(kuò)展并沒有使用 WebExtensions API 進(jìn)行開發(fā)，這意味著許多擴(kuò)展帶來(lái)的功能在 Firefox 57.0 之后將會(huì)帶有一段時(shí)間的窗口期。這對(duì)于 Firefox 來(lái)說不可說不是「壯士斷腕」。
我從測(cè)試版就開始體驗(yàn) Firefox Quantum，當(dāng)時(shí)許多擴(kuò)展都沒有開始轉(zhuǎn)為使用 WebExtension API，可以使用的擴(kuò)展非常有限。特別是有一些我們熟知并喜愛的 Add-on SDK 開發(fā)的擴(kuò)展，比如 Beyond Australis 這類甚至可以完全改變?yōu)g覽器界面的擴(kuò)展，已經(jīng)完全無(wú)法使用。可以說是這樣的「壯士斷腕」讓人陣痛了很長(zhǎng)一段時(shí)間。
但讓人高興的是，隨著 Firefox 57.0 的正式發(fā)布，也有 Firefox 的積極引導(dǎo)的作用，許多 Firefox 擴(kuò)展的作者已經(jīng)開始將舊式擴(kuò)展轉(zhuǎn)移到 WebExtensions 擴(kuò)展，并且也誕生了許多新的優(yōu)秀擴(kuò)展。
你也許和我一樣對(duì)軟件的界面有一些自己的小要求。不僅想要簡(jiǎn)潔，但同時(shí)還想要一點(diǎn)個(gè)性化。商店里無(wú)聊的主題真的不好看，而且不管怎樣變化，也只是變化一下標(biāo)題欄而已。我很喜歡 Vivaldi 跟隨所瀏覽的網(wǎng)頁(yè)更改瀏覽器窗體顏色特性，但沒想到我在 Firefox 里也能用上這樣的特性。
VivaldiFox 就是這樣一個(gè)簡(jiǎn)單的插件，它能夠改變 Firefox 窗體和標(biāo)簽頁(yè)的顏色，在默認(rèn)的主題下，瀏覽器可以跟隨你所瀏覽的網(wǎng)頁(yè)變換色彩，比如少數(shù)派的紅色、豆瓣的綠色、Behance 的藍(lán)色。讓瀏覽器隨網(wǎng)頁(yè)改變藍(lán)色不僅可以讓你的瀏覽器更漂亮，也可以讓你快速區(qū)分你正在瀏覽的網(wǎng)頁(yè)屬于哪一個(gè)網(wǎng)站。
窗體顏色可以隨網(wǎng)站配色變化
除了自動(dòng)跟隨網(wǎng)站改變色彩的功能，你還可以在 VivaldiFox 的首選項(xiàng)中自定義主題，隨意設(shè)定窗體和標(biāo)簽欄的顏色，搭配你自己個(gè)性化的瀏覽器顏色。、
點(diǎn)擊這里下載 VivaldiFox。
很多時(shí)候你肯定不可能只使用一個(gè)賬號(hào)，比如你需要使用不同的個(gè)人郵箱和工作郵箱來(lái)應(yīng)付不同的事務(wù)。如果你同時(shí)使用多個(gè)賬號(hào)，登陸和切換是一個(gè)麻煩的問題。
Multi-Account Containers 是 Firefox 官方開發(fā)的一個(gè)插件，它能夠讓你新建不同的 Containers，你可以在不同的 Containers 之間登陸不同的賬號(hào)，它們互相獨(dú)立不打擾。對(duì)應(yīng)的 Containers 在標(biāo)簽和地址欄中將會(huì)有顏色和文字進(jìn)行區(qū)分，讓你清楚知道自己所處的 Container。你還可以新建更多的 Container，以便于適應(yīng)你自己更多的多賬號(hào)需求。
總之，簡(jiǎn)單講這個(gè)功能就像是「開小號(hào)」，相信這會(huì)是很多人需要的功能。
點(diǎn)擊這里下載 Multi-Account Containers。
Firefox 現(xiàn)在仍然保留了側(cè)邊欄的功能，除了可以在側(cè)邊欄查看歷史和書簽等功能，一些擴(kuò)展程序也依然可以通過 Firefox 的側(cè)邊欄來(lái)完成一些創(chuàng)意。
現(xiàn)在，幾乎所有的現(xiàn)代瀏覽器都將標(biāo)簽欄橫向固定在頂部，但當(dāng)你打開的標(biāo)簽過多的時(shí)候，管理標(biāo)簽頁(yè)的時(shí)候就沒有那么方便了。Tab Center Redux 可以讓你在側(cè)邊欄中打開一個(gè)縱向的標(biāo)簽頁(yè)列表，如果你打開的標(biāo)簽頁(yè)非常多，你可以方便地在側(cè)邊欄中縱向滾動(dòng)標(biāo)簽頁(yè)進(jìn)行瀏覽，當(dāng)然更加寬闊的面板也可以讓你一眼看到標(biāo)簽頁(yè)的網(wǎng)頁(yè)縮略圖。你還可以在折疊視圖與完整視圖中進(jìn)行切換，以容納更多的標(biāo)簽頁(yè)。
點(diǎn)擊這里下載 Tab Center Redux。
我非常喜歡使用手勢(shì)來(lái)瀏覽網(wǎng)頁(yè)，因?yàn)閼小Ｓ袝r(shí)候在吃東西或者是喝水，我甚至懶得用左手去按 cmd+w，更別提恢復(fù)最近的標(biāo)簽頁(yè) cmd+shift+T 這種非常難按的快捷鍵了。如果你學(xué)會(huì)使用鼠標(biāo)手勢(shì)，這些操作都將變得非常便捷。
Firefox 上的手勢(shì)擴(kuò)展 FireGestures 已經(jīng)不能使用。Gesturefy 成了新的替代品。你可以自定義多種鼠標(biāo)手勢(shì)，這樣你只需要按住鼠標(biāo)右鍵進(jìn)行簡(jiǎn)單的拖動(dòng)就可以完成許多操作了。
點(diǎn)擊這里下載 Gesturefy。
在 Vivaldi 瀏覽器中，用側(cè)邊欄刷推并不是難事，只需要在側(cè)邊欄中直接添加網(wǎng)頁(yè)就可以了。但 Firefox 的側(cè)邊欄還沒有辦法進(jìn)行這樣的自定義網(wǎng)頁(yè)。Twitter as a Sidebar 擴(kuò)展的功能就是讓你可以在側(cè)邊欄中打開 Twitter。一邊瀏覽網(wǎng)頁(yè)，一邊在側(cè)邊欄中刷推真的是很方便。
點(diǎn)擊這里下載 Twitter as a Sidebar。
相信許多人都有在一邊看視頻，一邊做其他事的需求。蘋果也有注意到這樣的需求，macOS 的畫中畫功能就讓你可以將視頻變成彈出窗口浮動(dòng)在任何窗口之上，然而遺憾的是，macOS 的畫中畫功能只支持 macOS High Sierra 和 Safari 瀏覽器。
Firefox 的 Min Vid 擴(kuò)展也讓你可以將視頻彈出到一個(gè)新的窗口中，這個(gè)窗口可以隨意移動(dòng)，讓你可以在做其他事的同時(shí)繼續(xù)觀看視頻。它還有一個(gè)簡(jiǎn)單的播放列表功能，你可以繼續(xù)找到想看的視頻添加到這個(gè)窗口的播放列表中。
在視頻左上角點(diǎn)擊彈出播放的按鈕就能讓視頻在小窗口里播放了
然而美中不足的是，Min Vid 支持的網(wǎng)站非常有限，大部分國(guó)內(nèi)的視頻網(wǎng)站都還不能使用它。如果你是 Youtube 的用戶，倒是可以很愉快地使用這個(gè)擴(kuò)展。
Min Vid 是 Firefox Test Pilot 中的一項(xiàng)測(cè)試擴(kuò)展，F(xiàn)irefox Test Pilot 是什么稍后再為大家介紹。
實(shí)際上我現(xiàn)在已經(jīng)不大推薦用戶去更改 Firefox 的新標(biāo)簽頁(yè)，因?yàn)槭聦?shí)上 Firefox 57.0 的新標(biāo)簽已經(jīng)足夠簡(jiǎn)潔和好用（我竟然還是選擇了功能為先）。當(dāng)然，仍然有許多的用戶會(huì)需要有一些美化需求。如果你有對(duì)新標(biāo)簽頁(yè)的美化需求，那么在 Firefox 上我的推薦只有這一款擴(kuò)展。
Tabliss 與你在 Chrome 上見過的許多新標(biāo)簽頁(yè)美化擴(kuò)展一樣，用一張好看的壁紙?zhí)鎿Q了單調(diào)的新標(biāo)簽頁(yè)。Tabliss 的圖片來(lái)源有 Unsplash、GIPHY 和 Dribbble，當(dāng)然你也可以使用純色或上傳自己喜歡的圖片。良心保證，Unsplash 的圖片美麗，而 GIPHY 的動(dòng)圖也非常有趣，Dribbble 上的設(shè)計(jì)也很酷炫。設(shè)計(jì)師還可以在隱藏 Tabliss 的界面元素之后，把 Tabliss 當(dāng)成一個(gè)真正的 Dribbble 瀏覽器來(lái)瀏覽 Dribbble 上的內(nèi)容。
可以在新標(biāo)簽中直接瀏覽 Dribbble 上的內(nèi)容
除了壁紙，Tabliss 讓你可以自定義在新標(biāo)簽上顯示一些小組件，比如時(shí)間、搜索、鏈接。可定制的程度還不錯(cuò)。
點(diǎn)擊這里下載 Tabliss。
（另一個(gè)可愛的新標(biāo)簽頁(yè)擴(kuò)展 Tabby Cat，讓你的新標(biāo)簽頁(yè)每次打開時(shí)都顯示一只不一樣的可愛小貓。）
翻譯類的擴(kuò)展有很多，但我想在 Firefox 上推薦的是這一款，它的簡(jiǎn)單功能已經(jīng)可以滿足了大部分用戶的需求。
Simple Translate 只有一個(gè)最簡(jiǎn)單的輸入框、下拉框和翻譯整個(gè)頁(yè)面的按鈕。如果你有想要翻譯的詞語(yǔ)，直接輸入輸入框中就會(huì)自動(dòng)識(shí)別輸入的語(yǔ)言翻譯微為瀏覽器語(yǔ)言，不需要進(jìn)行任何設(shè)置。
當(dāng)然我更喜歡的是「Translate This Page」，對(duì)于一些想要快速瀏覽大概了解整篇文章的場(chǎng)景，這個(gè)按鈕讓你可以用谷歌翻譯直接將整個(gè)網(wǎng)頁(yè)進(jìn)行翻譯，同時(shí)也不影響網(wǎng)頁(yè)中的鏈接功能，非常方便。
點(diǎn)擊這里下載 Simple Translate。
Stylish：已經(jīng)支持 Firefox 57.0
Stylish 可以改變不同網(wǎng)頁(yè)的外觀，相信大家已經(jīng)很清楚它的功能，少數(shù)派在介紹 Chrome 擴(kuò)展的時(shí)候也常常提到這個(gè)功能強(qiáng)大的擴(kuò)展。現(xiàn)在 Stylish 已經(jīng)支持了 Firefox 57.0，你可以在 Firefox 中愉快地使用它了。
點(diǎn)擊這里下載 Firefox 的 Stylish。
Firefox Test Pilot 是一個(gè) Firefox 官方對(duì)新功能進(jìn)行實(shí)驗(yàn)的計(jì)劃。上面提到的 Min Vid 和 Multi-Account Containers 就都是在這個(gè)計(jì)劃中進(jìn)行測(cè)試的一個(gè)擴(kuò)展。Firefox Test Pilot 曾經(jīng)也測(cè)試過許多有趣的新功能，在進(jìn)行測(cè)試后，官方會(huì)發(fā)表一個(gè)測(cè)試報(bào)告，優(yōu)秀的擴(kuò)展也將進(jìn)入 Firefox 擴(kuò)展商店開放給所有用戶下載。
目前 Firefox Test Pilot 中除了上面提到的 Min Vid，還有其他幾個(gè)功能也正在進(jìn)行測(cè)試。比如發(fā)送加密鏈接的「Send」、把標(biāo)簽頁(yè)稍后再看的「Snooze Tabs」。你可以在這里加入 Firefox Test Pilot 試用里面的新功能。
這篇文章實(shí)際上是一個(gè)「新世代的 Firefox 擴(kuò)展介紹」，所選擇的插件大部分是 Firefox 57.0 的特有擴(kuò)展，與 Chrome 或 Safari 都有所不同。Firefox 的擴(kuò)展正處在一個(gè)窗口期，但能看到這么多開發(fā)者仍然愿意繼續(xù)支持新版本的 Firefox 是非常讓人開心的。
Firefox 這番大規(guī)模的改版帶來(lái)了非常多體驗(yàn)上的優(yōu)化，當(dāng)然這樣的大動(dòng)作也必定造成很大的震動(dòng)。內(nèi)心上，我仍然希望 Firefox 這樣一個(gè)老牌的瀏覽器在煥發(fā)新生機(jī)之后能夠繼續(xù)走下去。
如果你仍然沒有試過新版本的 Firefox，請(qǐng)一定要下載試試。如果你在使用 Firefox 時(shí)找不到某個(gè) Chrome 擴(kuò)展的替代品，也可以在這里留言與大家一起討論。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
