整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
文本已獲授權轉載
在網站開發中，展示圖片毫無疑問是使用 <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小時內與您取得聯系。
