搜尋

首頁 >web前端 >css教學 >通過切割芥末來遷移到Flexbox

通過切割芥末來遷移到Flexbox

尊渡假赌尊渡假赌尊渡假赌
尊渡假赌尊渡假赌尊渡假赌原創
2025-02-25 22:20:12713瀏覽

Migrating to Flexbox by Cutting the Mustard

通過切割芥末來遷移到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><!DOCTYPE html></span>
</span><span><span><span><html</span> class<span>="no-js"</span>></span>
</span>  <span><span><span><head</span>></span>
</span>    <span><span><span><title</span>></span>Cutting the mustard<span><span></title</span>></span>
</span>    <span><span><span><script</span> src<span>="javascripts/dependencies.js"</span>></span><span><span></script</span>></span>
</span>    <span><span><span><noscript</span>></span>
</span>    <span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="stylesheets/legacy.css"</span>></span>
</span>    <span><span><span></noscript</span>></span>
</span>    <span><!-- ... -->
</span>  <span><span><span></head</span>></span>
</span>  <span><span><span><body</span>></span>
</span>    <span><span><span><div</span> class<span>="container"</span>></span>
</span>      <span><span><span><div</span> class<span>="cell cell-1"</span>></span>Cell 1<span><span></div</span>></span>
</span>      <span><span><span><div</span> class<span>="cell cell-2"</span>></span>Cell 2<span><span></div</span>></span>
</span>      <span><span><span><div</span> class<span>="cell cell-3"</span>></span>Cell 3<span><span></div</span>></span>
</span>      <span><span><span><div</span> class<span>="cell cell-4"</span>></span>Cell 4<span><span></div</span>></span>
</span>    <span><span><span></div</span>></span>
</span>  <span><span><span></body</span>></span>
</span><span><span><span></html</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><!DOCTYPE html></span>
</span><span><span><span><html</span> class<span>="no-js"</span>></span>
</span>  <span><span><span><head</span>></span>
</span>    <span><span><span><title</span>></span>Cutting the mustard<span><span></title</span>></span>
</span>    <span><span><span><script</span> src<span>="javascripts/dependencies.js"</span>></span><span><span></script</span>></span>
</span>    <span><span><span><noscript</span>></span>
</span>    <span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="stylesheets/legacy.css"</span>></span>
</span>    <span><span><span></noscript</span>></span>
</span>    <span><!-- ... -->
</span>  <span><span><span></head</span>></span>
</span>  <span><span><span><body</span>></span>
</span>    <span><span><span><div</span> class<span>="container"</span>></span>
</span>      <span><span><span><div</span> class<span>="cell cell-1"</span>></span>Cell 1<span><span></div</span>></span>
</span>      <span><span><span><div</span> class<span>="cell cell-2"</span>></span>Cell 2<span><span></div</span>></span>
</span>      <span><span><span><div</span> class<span>="cell cell-3"</span>></span>Cell 3<span><span></div</span>></span>
</span>      <span><span><span><div</span> class<span>="cell cell-4"</span>></span>Cell 4<span><span></div</span>></span>
</span>    <span><span><span></div</span>></span>
</span>  <span><span><span></body</span>></span>
</span><span><span><span></html</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中文網其他相關文章！

JavaScript html5 firefox css chrome safari css3 html sass webkit edge Float Boolean if for while include require using class Conditional Attribute Property JS function default this history background transition flex ios notion SEO Other
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：使用助手類乾燥和擴展CSS下一篇：使用助手類乾燥和擴展CSS

相關文章

看更多