搜索

首页 >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
上一篇：Using Helper Classes to DRY and Scale CSS下一篇：Introduction to inuitcss: A Different Kind of CSS Framework

相关文章

查看更多