通過切割芥末來遷移到Flexbox

鑰匙要點

• >本文討論了從使用CSS浮子到flexbox的過渡，以構建CSS中的佈局。它突出顯示了Flexbox的舊語法和補間語法的局限性，並建議僅針對完全實現新語法的Tweener語法和瀏覽器版本。 引入“切割芥末”或功能檢測的概念是一種識別正在使用哪個瀏覽器/設備/用戶代理的方式，並為可用技術提供最合適的解決方案。這可以使用普通的JavaScript或使用Modernizr。
>作者建議使用SASS減少CSS輸出的大小並使維護更容易。它還提到，由於漸進式增強的概念，Flexbox的實現在每種經驗中都不會完全相同。
• >本文的結論是，隨著瀏覽器的開發新功能，可以對這種特徵檢測方法進行調整和進化以適應未來的要求。它鼓勵讀者在下一個項目中熟悉Flexbox。
• 作為前端開發人員，現在是時候從使用CSS浮子來探索新的令人興奮的Flexbox世界了。 CSS Floats是造型佈局的過時方法。自從4.0版以來，它們就可以在Internet Explorer中使用，並且需要解決方法以使其具有延展（包括Clearfix Hack並使用Nth-Child Pseudo-Class進行包裝列）。
>本文的主要主題是如何考慮其碎片跨多個瀏覽器實現Flexbox。如果您想變得更熟悉Flexbox，則有很多可用的資源，我強烈建議以下內容：>
我們準備好使用Flexbox了嗎？由nick salloum on Sitepoint

> Chris Coyier在CSS-tricks

上撰寫的Flexbox的完整指南

flexible框（“ flexbox”）在MSDN上的Internet Explorer 10中的佈局（可選）

>

• 在本文結尾處，您應該能夠：
>
• 了解哪些版本的flexbox可以針對響應式網站。
>通過功能檢測（切割芥末）利用Flexbox，並為舊瀏覽器提供後備。 >
• >在大多數情況下不使用IE條件評論。
>通過創建帶有傳統後備的基本2×2網格來證明Flexbox的實際用途。
flexbox的簡短歷史
靈活的框佈局模塊（又稱flexbox）是在CSS中構造佈局的新方法。它已經進行了多次修訂，並且在相對較短的存在中已經顯著發展。在編寫Flexbox時，仍然是W3C的工作草案，但是與其他標準一樣，這在生產環境中不應該使其不吸引。
>

標準的三個迭代，通常稱為舊語法，二元格語法和新的語法。

flexbox的局限

舊語法不支持Flex-wrap。

僅在IE 10（包括手機）中支持元素語法。 。
新語法在Firefox（22-27）中尚未完全實現，因為它缺少Flex-wrap和Flex-Flow屬性。
• 包裝（Flex-wrap）是規範的重要特徵，這是創建響應式網格所需的。因此，最好僅針對完全實現新語法的teener語法和瀏覽器版本。
這使我們擁有以下瀏覽器版本：
> Internet Explorer 10（帶有-MS-前綴的tweener語法）
Internet Explorer 11和Edge（New Syntax）
firefox 28（新語法）
>
• chrome 21-28（帶有-webkit-前綴的新語法）
• chrome 29（新語法）
• > safari 6.1（帶有-webkit-前綴的新語法）
• > ios safari 7.0（帶有-webkit-前綴的新語法）
>由於有不支持FlexBox的大量市場份額的瀏覽器，因此使用CSS Floats會後備。但是，如何用代碼表示？區分應該接收帶有浮子而不是Flexbox的CSS的瀏覽器版本的最佳方法是什麼？可以使用哪種策略來確保支持新語法但不支持包裝的Firefox版本被確定為遺產？
• 介紹：切割芥末。
• 切割芥末醬（特徵檢測）
如果您以前從未聽說過它，那麼BBC News的開發團隊創造了“切割芥末”。該術語源於英國廣播公司（BBC）網站必須迎合大量的國際觀眾，並針對瀏覽器版本和設備專門針對的是一個麻煩的解決方案。該概念的關鍵是識別使用哪個瀏覽器/設備/用戶代理，並提供多填充以使網站工作。在客戶端檢測到特定功能的存在，因此提供了最合適的技術解決方案。

>功能檢測並不是新事物。上述BBC文章於2012年3月發表，儘管它越來越受歡迎，但令人驚訝的是，看到網站仍在2008年推出了Paul Irish的特定條件類別。

> Modernizr（由Paul Irish做出了貢獻）都是關於特徵檢測的：
>利用涼爽的新網絡技術非常有趣，直到您必須支持落後的瀏覽器。 Modernizr使您可以輕鬆編寫有條件的JavaScript和CSS來處理每種情況，無論瀏覽器是否支持功能。非常適合輕鬆進行漸進式增強。

>

>儘管CSS現在具有本地功能檢測，但目前沒有足夠的市場份額，無法可行，可用於現實世界中的使用。本文的其餘部分將討論如何拋棄IE條件評論，以支持JavaScript中的功能檢測。

識別功能和瀏覽器

每個項目都需要一組不同的功能才能運行。可以通過多種方法來實現特徵檢測，其中最簡單的包括：
使用普通的JavaScript（如BBC所使用）

>

使用Modernizr（本文將使用）
最有效的方法是香草JavaScript實現。它很快（因為它不需要客戶下載任何其他庫），並且不需要任何其他處理。這種方法遠非已知的問題，遠非完美。但是，有多種方法可以克服常見的特徵檢測問題。
• > [b] Rowser檢測已成為一種不可能的糾結，並且在很大程度上掉落了，無法被更好的東西（功能檢測）取代。
[…]功能檢測也不是完全可靠的 - 有時會失敗。
-

>詹姆斯·愛德華茲

選擇現代化的切割芥末可能不那麼高效（因為它需要下載和客戶處理），但是手動檢測Flex-框支持並不是一項簡單的任務。同樣重要的是要注意，儘管ModernIzr 2版未檢測到Flex包裝，但版本3確實如此！該功能被標記為Flex線包裝。

儘管存在使用Modernizr生成的文檔根上附加的CSS類（例如：html.flexwrap）的CSS類，最好為每種體驗提供單獨的CSS文件以減少網站的下載尺寸。

BBC新聞開發人員是指兩種類型的瀏覽器：>

>團隊中的某人開始將他們稱為“ HTML4瀏覽器”和“ HTML5瀏覽器”，我們發現它們更容易與非技術人員傳達情感。

-

> BBC響應新聞>

當您考慮2012年瀏覽器景觀的氣候時，

這個理由是完全有效的。但是，隨著新功能的可用，該部門不一定那麼清楚。例如，Flexbox在所有“ HTML5”瀏覽器中均未完全支持。

>

>一種強大的方法是區分“遺產”和“現代”瀏覽器版本。此外，某些項目可能需要多個部門，其中可以識別中途（或“過渡”）瀏覽器。

實現方法

首先創建以下文件：

index.html - 主HTML文件

> stylesheets/Modern.css - 現代瀏覽器的樣式（媒體查詢，包裝flexbox）
> stylesheets/legacy.css - 舊式瀏覽器的樣式（無媒體查詢，沒有flexbox）
>腳本/依賴項。
這是我們的index.html文件的外觀：
請注意，沒有IE條件評論？只需清潔有效的HTML代碼。而且，如果瀏覽器未啟用JavaScript，則它將返回使用Legacy.css，無論其支持水平如何。 >

>您還可能注意到腳本標籤位於HTML頁面的頂部。這是因為ModernIzr應該首次處理瀏覽器繪畫之前的樣式表並註入樣式表。這減少了重新粉刷，並有助於避免閃爍的未風格的內容（FOUC）。但是請記住，大多數腳本標籤都位於頁面的底部。

>

我們的傳統文件將包含以下內容：

<span><span>
</span><span><span><span> class<span>="no-js"</span>></span>
</span>  <span><span><span>></span>
</span>    <span><span><span><title>></title></span>Cutting the mustard<span><span></span>></span>
</span>    <span><span><span><script> src<span >="javascripts/dependencies.js"</script></span>></span><span><span></span>></span>
</span>    <span><span><span><noscript>></noscript></span>
</span>    <span><span><span><link> rel<span>="stylesheet"</span> href<span>="stylesheets/legacy.css"</span>></span>
</span>    <span><span><span></span>></span>
</span>    <span><!-- ... -->
</span>  <span><span><span></span>></span>
</span>  <span><span><span>></span>
</span>    <span><span><span><div> class<span>="container"</span>>
      <span><span><span><div> class<span>="cell cell-1"</span>>Cell 1<span><span></span></span>
</div></span>></span>
</span>      <span><span><span><div> class<span>="cell cell-2"</span>>Cell 2<span><span></span></span>
</div></span>></span>
</span>      <span><span><span><div> class<span>="cell cell-3"</span>>Cell 3<span><span></span></span>
</div></span>></span>
</span>      <span><span><span><div> class<span>="cell cell-4"</span>>Cell 4<span><span></span></span>
</div></span>></span>
</span>    <span><span><span></span></span></span>
</div></span>></span>
</span>  <span><span><span></span>></span>
</span><span><span><span></span>></span></span></span></span></span></span></span></span></span>

此實現包括一個Clearfix Hack和：用於包裝的nth-Child偽級。它在大多數瀏覽器中起作用；但是，Internet Explorer 8需要Selectivizr或等效的解決方案才能使選擇器正常工作。

接下來，我們的現代.css文件：

不要被此文件的大小推遲。這些評論使它看起來更大，但是這些評論使開發更容易理解每​​個部分的目標。

接下來，我們將編寫依賴項的代碼。 如前所述，我們需要生成一個版本的ModernIzr（版本3），該版本檢測Flex-wrap屬性的支持。在JavaScript文件的頂部包含代碼。

<span><span>.container</span> {
</span><span>}
</span>
<span>/* clearfix */
</span><span><span>.container:after</span> {
</span>  <span>content: "";
</span>  <span>display: table;
</span>  <span>clear: both;
</span><span>}
</span>
<span><span>.cell</span> {
</span>  <span>width: 50%;
</span>  <span>float: left;
</span><span>}
</span>
<span>/* wrapping */
</span><span><span>.cell:nth-child(<span>2n+1</span>)</span> {
</span>  <span>clear: left;
</span><span>}
</span>
<span>/* for visiblity */
</span><span><span>.cell-1</span> { background-color: #000; color: #fff; }
</span><span><span>.cell-2</span> { background-color: #666; color: #fff; }
</span><span><span>.cell-3</span> { background-color: #ccc; color: #000; }
</span><span><span>.cell-4</span> { background-color: #fff; color: #000; }</span>

>您可以選擇通過增加Ismodern Boolean來增加現代體驗的要求。例如：

<span><span>.container</span> {
</span>  <span>/* Internet Explorer 10
</span><span>   */
</span>  <span>display: -ms-flexbox;
</span>  <span>-ms-flex-wrap: wrap;
</span>
  <span>/* Chrome 21-28
</span><span>   * Safari 6.1+
</span><span>   * Opera 15-16
</span><span>   * iOS 7.0+
</span><span>   */
</span>  <span>display: -webkit-flex;
</span>  <span>-webkit-flex-wrap: wrap;
</span>
  <span>/* Chrome 29+
</span><span>   * Firefox 28+
</span><span>   * Internet Explorer 11+
</span><span>   * Opera 12.1 & 17+
</span><span>   * Android 4.4+
</span><span>   */
</span>  <span>display: flex;
</span>  <span>flex-wrap: wrap;
</span><span>}
</span>
<span><span>.cell</span> {
</span>  <span>-webkit-flex: 1 0 50%;
</span>      <span>-ms-flex: 1 0 50%;
</span>          <span>flex: 1 0 50%;
</span><span>}
</span>
<span>/* for visiblity */
</span><span><span>.cell-1</span> { background-color: #000; color: #fff; }
</span><span><span>.cell-2</span> { background-color: #666; color: #fff; }
</span><span><span>.cell-3</span> { background-color: #ccc; color: #000; }
</span><span><span>.cell-4</span> { background-color: #fff; color: #000; }</span>

> sass solutions

>您可以使用SASS抽象實現Flexbox的方法。這降低了CSS輸出的大小，並使維護更易於：

<span><span>
</span><span><span><span> class<span>="no-js"</span>></span>
</span>  <span><span><span>></span>
</span>    <span><span><span><title>></title></span>Cutting the mustard<span><span></span>></span>
</span>    <span><span><span><script> src<span >="javascripts/dependencies.js"</script></span>></span><span><span></span>></span>
</span>    <span><span><span><noscript>></noscript></span>
</span>    <span><span><span><link> rel<span>="stylesheet"</span> href<span>="stylesheets/legacy.css"</span>></span>
</span>    <span><span><span></span>></span>
</span>    <span><!-- ... -->
</span>  <span><span><span></span>></span>
</span>  <span><span><span>></span>
</span>    <span><span><span><div> class<span>="container"</span>>
      <span><span><span><div> class<span>="cell cell-1"</span>>Cell 1<span><span></span></span>
</div></span>></span>
</span>      <span><span><span><div> class<span>="cell cell-2"</span>>Cell 2<span><span></span></span>
</div></span>></span>
</span>      <span><span><span><div> class<span>="cell cell-3"</span>>Cell 3<span><span></span></span>
</div></span>></span>
</span>      <span><span><span><div> class<span>="cell cell-4"</span>>Cell 4<span><span></span></span>
</div></span>></span>
</span>    <span><span><span></span></span></span>
</div></span>></span>
</span>  <span><span><span></span>></span>
</span><span><span><span></span>></span></span></span></span></span></span></span></span></span>

漸進增強和瀏覽器測試

>了解Flexbox和CSS Floats之間的差異很重要。您的實現在每種經驗中都不會完全相同，但是漸進式增強的概念意味著它不一定必須這樣做。 例如，默認情況下，Flexbox將在同一行上拉伸所有單元格以具有相同的高度。因此，如果一個單元格長3行，相鄰行長為10行，則背景將在兩個單元格上延伸至10條線。 CSS Floats的後備將無法做到這一點，並且兩個單元格的高度都不平均。

>在多個瀏覽器中測試佈局仍然是一項要求，但是請記住，在JavaScript中將Ismodern的值迫使ISMODERN的值可以幫助任何瀏覽器中的遺留解決方案：

>

結論

在本文中，我提供了使用功能檢測的基礎知識，可以在同一HTML代碼庫上使用兩個不同的樣式表。這是開始從CSS Floats開始升級過程並減少對IE條件評論的依賴的一種極為有效的方法。

<span><span>.container</span> {
</span><span>}
</span>
<span>/* clearfix */
</span><span><span>.container:after</span> {
</span>  <span>content: "";
</span>  <span>display: table;
</span>  <span>clear: both;
</span><span>}
</span>
<span><span>.cell</span> {
</span>  <span>width: 50%;
</span>  <span>float: left;
</span><span>}
</span>
<span>/* wrapping */
</span><span><span>.cell:nth-child(<span>2n+1</span>)</span> {
</span>  <span>clear: left;
</span><span>}
</span>
<span>/* for visiblity */
</span><span><span>.cell-1</span> { background-color: #000; color: #fff; }
</span><span><span>.cell-2</span> { background-color: #666; color: #fff; }
</span><span><span>.cell-3</span> { background-color: #ccc; color: #000; }
</span><span><span>.cell-4</span> { background-color: #fff; color: #000; }</span>

>

>儘管有強烈的重點是檢測對Flexbox的支持，但重要的是要注意，隨著新功能是為瀏覽器開發的，這種切割芥末的方法可以適應和進化以滿足未來的需求。

>一旦Internet Explorer 10在目標領域的瀏覽器市場份額中出現，您可能會拋棄Tweener語法並僅通過使用新的語法來提供精益代碼。

>所以現在您擁有所有理論，為什麼不在下一個項目中熟悉Flexbox？

經常詢問有關遷移到Flexbox和避免遺留JavaScript

的問題

>遷移到flexbox的意義是什麼？ Flexbox或Flexible Box佈局是CSS3 Web佈局模型，它允許在容器中自動安排的響應元素，具體取決於屏幕尺寸。這意味著您的網頁佈局可以輕鬆適應不同的屏幕尺寸，從而確保各種設備的無縫用戶體驗。它還簡化了設計靈活，響應迅速的佈局結構的過程，而無需使用浮點或定位。

>如何為現代瀏覽器提供遺產JavaScript會影響我的網站的性能？

服務Legacy JavaScript可能會極大地影響您的網站的性能。 Legacy JavaScript通常會腫，現代瀏覽器不需要的不必要的代碼腫。由於瀏覽器需要下載，解析，編譯和執行該網站，因此此額外的代碼可以減慢您的網站。通過將現代JavaScript提供給現代瀏覽器，您可以改善網站的負載時間和整體性能。

>

>我如何避免將傳統的JavaScript提供給現代瀏覽器？

>

避免將傳統的JavaScript服務於現代瀏覽器，您可以使用模塊/nomodule模式。這種模式使您可以創建JavaScript的兩個單獨的捆綁包 - 現代的“模塊”捆綁包和遺產“ nomodule”捆綁包。理解“類型=”模塊'屬性的現代瀏覽器將下載現代捆綁包，而較舊的瀏覽器會忽略它並下載舊的捆綁包。

>使用FlexBox比傳統佈局方法有什麼好處？

Flexbox提供了比傳統佈局方法的幾個優點。它允許靈活的佈局結構，使設計響應式網站更容易。它還簡化了容器中元素的對齊，分佈和排序。使用Flexbox，您可以輕鬆地實現傳統CSS很難的複雜佈局和對齊方式。

>

>我如何確保在遷移到flexbox時的平穩過渡？

>

遷移到flexbox可能是一個複雜的過程，特別是對於大型現有項目。在開始遷移之前，徹底了解Flexbox模型很重要。首先嘗試簡單的佈局，逐漸移至更複雜的佈局。使用逐步的方法，一次遷移一個組件並徹底測試每個更改。

>

我可以使用哪些工具來檢查我是否將傳統的JavaScript服務於現代瀏覽器？ > Google Lighthouse，GTMetrix和WebPageTest等工具可以幫助您識別您是否在現代瀏覽器中為Legacy JavaScript提供服務。這些工具提供了詳細的性能報告，突出顯示了您網站性能可以提高的領域。

我可以將Flexbox與Legacy Browsers一起使用嗎？

>

雖然Flexbox是現代的佈局模型，但它確實具有一定級別較舊瀏覽器的支持。但是，可能存在一些不一致和錯誤。建議使用諸如AutopRefixer之類的工具，該工具可以在CSS中添加必要的供應商前綴，從而確保與較舊的瀏覽器的兼容性。

>如何遷移到Flexbox ackloxbox ackly seo seo？

有效地遷移到flexbox上， SEO。響應迅速的快速加載網站提供了更好的用戶體驗，這是SEO的關鍵因素。此外，更快的加載速度的網站更有可能被搜索引擎爬行和索引。 >>在遷移到flexbox時，有哪些共同挑戰？ >新的佈局模型，處理瀏覽器不一致以及確保向後兼容。重要的是要在各種瀏覽器和設備中徹底​​測試您的網站，以確保始終如一的用戶體驗。

>如何了解有關Flexbox和Modern JavaScript的更多信息？ CSS-tricks，MDN Web文檔和SitePoint等網站提供全面的指南和教程。此外，諸如Codecademy和FreecodeCamp之類的在線編碼平台提供了有關這些主題的互動課程。

以上是通過切割芥末來遷移到Flexbox的詳細內容。更多資訊請關注PHP中文網其他相關文章！