如何使用CSS包含属性来优化浏览器
#css #browsers #automationtesting #cssproperty

Web开发的组成部分是级联样式表，通常称为CSS。该库包含一长串的功能和属性列表，这些功能和属性可帮助我们在几行中发展功能，而不是编写凌乱的JS代码。这可能包括position sticky，media queries或为网页设置aspect ratio。

在我的Web开发经验中，我总是将CSS中可用的功能和属性分为两个分区。一个部分包含Web开发中的特定设计相关项目，例如在用户滚动时将元素粘贴到顶部。另一节包含根据最新的web development trends的效率，优化和改进的开发策略。

今天，我们将讨论CSS属性以及CSS包含属性的方式，可帮助开发人员优化网页，并让浏览器了解不同的元素及其之间的关系。

this Cypress test automation 教程将帮助您学习柏树自动化的好处，以及如何安装柏树和执行柏树自动化测试，而不是浏览器的几个浏览器和在线操作系统。

重新粉刷网页及其效果

要了解CSS包含属性，我们首先需要了解其解决的问题。

我们的浏览器采用HTML，CSS和JavaScript等神奇的原材料，并将其转换为由数百个团队成员为最终用户创建的产品。它应该完美地工作，并且浏览器与开发人员和测试人员一起承担着巨大的责任。我们无法从浏览器中负担一个错误。让我们更深入地探索浏览器的工作以及在给出Web URL后按Enter时执行的过程。

  1. 我们的浏览器要做的第一件事是创建文档对象模型和CSS对象模型。

  2. 创建了一个渲染树，以探索造型表中应用的样式并计算其关系。例如，当我们使用CSS Selectors,时，我们定义了许多关系，例如.my_class或div> p等。

  3. 下一步是布局步骤。在这里，我们计算我们在DOM树中定义的所有元素的所需空间。

  4. 一旦我们完成了空间计算，我们就可以按照JS和CSS中的说明来绘制像素。

  5. 最后一步是堆肥。无论我们在上面的步骤中汲取什么东西，都来自多个层，有时来自多个来源。必须在单个屏幕上通过仔细的布局计算来对此进行整理。由于一个元素可以重叠另一个元素，创建视觉差异，因此组成步骤变得至关重要。

用图表总结它们看起来像这样：

image

为了提高网站的性能，开发人员经常尝试优化其中一个或多个步骤，以使页面迅速加载。如果您的页面未按时加载，则跳出率将增加到90％，而53％的用户在三秒钟后退出。

this Cypress automation 测试教程将帮助您学习柏树自动化的好处，以及如何安装柏树和执行柏树自动化测试，在线浏览器和操作系统。

网页的绘画和重新粉刷不断发生。这取决于我们在做什么，我们查看的内容以及我们使用的系统。

系统背后的逻辑很简单。如果您要查看60fps图形，则浏览器理想情况下（可能）在一秒钟内绘画和重新粉刷60帧。这是一个不同的故事，具有优势。

另一件事是我们在做什么。如果您正在阅读某些内容，那么在滚动时，浏览器不必重新粉刷。但是，滚动需要重新粉刷网页。

最重要的最重要的要点是我们所看到的。许多事情取决于您当前正在查看的网页及其各种元素。如果网页具有GIF，它将连续重新粉刷。 CSS animations和其他CSS transitions也是如此。

考虑到您正在阅读此博客的此页面，Google Chrome的开发人员工具可帮助我们了解每个网页相同的五个过程。导航到“检查元素”部分，然后到达性能 tab。

单击记录以记录会话并重新加载页面。

image

您将获得类似于下图的结果：

image

如您所见，绘画所花费的时间比其他过程要少得多。这是因为此页面上的大多数元素都是书面内容，而其他需要绘画的并发症很少。

让我们切换到CSS动画，您将在其中找到许多有趣的动画可以在网页上实现。重复相同的步骤以监视网页的性能。这次有不同的结果：

image

注意： 这只是我们模仿用户动作的结果，即在带有典型图像的典型博客页面上，包括滚动。如果您想查看剧烈的绘画结果，可以创建一个GIF并通过开发人员工具观察性能。

这里的结果表明，绘画花了相当长的时间，这意味着如果我们可以减少它，我们可以实现更好的性能。

但是，即使我们谈论绘画是一个过程，它也会分为数字介质中的两个逻辑部分。在绘画像素之前，浏览器必须创建绘制呼叫的列表。此过程称为栅格化。完成栅格时，我们可以根据开发人员的说明绘制每个像素。因此，在此包含属性的CSS博客中，请考虑我们在讨论绘画时隐式包括栅格化。

通过提到这一点，我敢肯定，在必须呈现网页时，browser engines被高度优化，可以发挥作用。问题出在开发人员如何设计网页上。如果浏览器认为页面上的所有元素都是新的，它将重新加载所有内容。

image

它分为各个部分，右上角和顶部在您的章节负载中保持一致。左导航栏随突出显示和中心部件变化而变化。如果我们保留逻辑重新加载完整的页面，我们将不必要地绘制很多元素。

但是，如果我们专注于两个面板，我们可以减少绘制网页的时间。这是我们在网络开发中面临的问题。上页很简单。但是，我们的重新加载逻辑可以极大地影响具有许多元素的复杂页面的加载速度。

在推动野生动物园之前调试网站至关重要。在本文中，我们研究了如何使用 Developer tools for Safari 。

调试网站。

什么是CSS包含属性？

css包含属性不会阻止进入子树的事物；它阻止了泄漏的东西'tab atkins

上述语句可以用简单的单词重申和解释。我们如何让浏览器了解各种元素的独立性，以便知道要绘制哪些元素以及从服务器收到请求何时绘制？答案是 css包含属性。

CSS包含的属性可以暗示浏览器的一个与另一个元素无关的元素。因此，如果我们想重新加载，浏览器可以节省重新绘制完整页面并重新计算布局的额外工作。例如，具有许多小部件的网站，如下所示：

image

这些元素是独立的，并且在不同时间不断重新加载。但是，请注意，它们的布局，即它们的尺寸将保持不变。

CSS的语法包含

由于包含是CSS属性，因此可以分配一个值：

element {
contain: <value>;
}

< value >可以容纳任何一个支持的值，这将在下一部分中进行讨论。

CSS支持的值包含属性

CSS包含属性的行为尚未概括。这取决于您在开发网页时分配此属性的价值。 CSS遏制支持以下属性：

尺寸

CSS包含属性的尺寸值在不影响其后代或其大小的情况下尺寸。预计将在样式表中提到所应用的元素的尺寸。否则，它可能会崩溃到0。因此，浏览器仅重新粉刷元素而不是外部元素。

image

在第一个，外部虚线盒有望根据内部的元素进行调整：

image

，当我们增加元素大小的包含： size 。

时，预计将保持相同的大小。。

image

此属性通常不用作单个实现，而是与他人混合以提高效率。

布局

CSS包含属性的布局值对开发人员来说是一个流行的选择，因为行为改变了它介绍了元素以及浏览器如何感知它们。

要清楚地了解布局属性，让我们在定义它之前先查看一个简单的演示。由于布局属性很容易，并且可以通过博客页面有效地解释，因此我将用一篇文章构造一个：

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>The contain layout property</title>
</head>
<style>
    article {
      border: 1px solid black;
      contain: layout;
    }
</style>
<body>
<article>
      <h2>This is blog one.</h2>
      <p>I am the content of blog 1.</p>
      <img src="wooden_box.png" alt="Hello I am a wooden box">
</article>
</body>
</html>

这将在Google Chrome上产生以下渲染：

image

到目前为止，这还可以。现在，让我们在现有样式中添加以下样式元素：

img {
        float: left;
        }

这将如下渲染：

image

我已经省略了完整的屏幕视图，以关注图像及其位置，该图像现在已经不在框了。由于没有使用其他安排来纠正浮子，因此它的行为是按预期的，并将图像移出。

检查Web元素，以帮助开发人员和测试人员调试UI缺陷或在HTML或CSS文件中进行修改。学习 how to inspect on Mac 书。

让另外一篇文章在其下方的同一图像。因此，我们的新代码变为如下：

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>The contain layout property</title>
</head>
<style>
    img {
        float: left;
        }
    article {
      border: 1px solid black;
    }
</style>

<body>
<article>
      <h2>This is blog one.</h2>
      <p>I am the content of blog 1.</p>
      <img src="wooden_box.png" alt="Hello I am a wooden box">
</article>

<article>
      <h2>This is blog two.</h2>
      <img src="wooden_box.png" alt="Hello I am also a wooden box">
      <p>I am the content of blog 2.</p>
</article>
</body>
</html>

此代码的渲染如下：

image

由于我们使用了Float：float for Images，因此在空间可用的情况下将下一篇文章放在其旁边。方框2。但是，如果我们分析代码，尤其是文章块，我们会看到这些图像在此块内部编码，但在浏览器上渲染时在外面进行了绘制。

<article>
      <h2>This is blog one.</h2>
      <p>I am the content of blog 1.</p>
      <img src="wooden_box.png" alt="Hello I am a wooden box">
</article>

这是因为浏览器无法分析哪些东西是一个单元，哪些是不同的。结果，我们在上面看到了这种未对准，浏览器必须重新粉刷完整的网页以进行更改。这两件事是我们通过CSS中包含属性的布局值来解决的。

布局值指定浏览器，即我们所在的元素将值完全独立于其外部元素。简而言之，我们在此元素中所做的任何更改都不应在外面反映出来，而我们在外部进行的任何更改都不应在此元素中反映出来。结果，重新粉刷变得越来越少，因为浏览器知道，如果在此元素中进行更改，则只有此元素需要重新粉刷，反之亦然。

在上面的代码中，将以下属性添加到样式元素中的文章块：

contain: layout;

所以，我们的样式块现在变为：

<style>
    img {
        float: left;
        }
    article {
      border: 1px solid black;
      contain: layout;
    }
</style>

此更改会导致浏览器上的以下渲染：

image

这正是我们想要在网页上渲染的内容。属于一个文章块的所有元素都包含在边界内。外面进行的任何更改都不会反映出此处的其他文章块。如上所述，浮子也包含在里面。

。

此外，预计边界不会沿边界崩溃，并且包含的​​框会产生堆叠的上下文。因此，可以使用z索引。

画

我们可以在CSS包含属性中使用的下一个属性是油漆。此属性类似于上面讨论的布局属性，除了一小部分。如果我们将包含：油漆应用于元素，则其工作方式类似于溢出：普通HTML中的隐藏属性。但是，特征仍然与布局值相似。

油漆属性指示浏览器，如果该元素的任何后代（具有涂料属性的元素的后代）脱离界限，将其夹紧并将其显示在边界内。或让溢出的元素在那里，但在盒子外面不应该可见。

让我们分析上面使用的相同代码，除了两个小更改。这次，我们将其作为油漆包含，文章的高度为150px，因此它比盒子的高度短，这是其后代。

最终代码变为如下：

 <!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>The contain paint property</title>
    <style>
        img {
          float: left;
        }

        article {
          border: 1px solid black;
          contain: paint;
          height: 150px;
        }
    </style>
</head>
<body>
<article>
      <h2>Heading of a nice article</h2>
      <p>Content here.</p>
      <img src="wooden_box.png" alt="I just showed up">
</article>
<article>
      <h2>Another heading of another article</h2>
      <img src="wooden_box.png" alt="placeholder">
      <p>More content here.</p>
</article>
</body>
</html>

最终渲染如下：

image

请注意，即使盒子应该溢出（如果您删除包含：油漆线），它也不是由于油漆值所致。因此，在此元素内部，即使用户看不到所有内容，一切都将保留在其中。

需要一个很好的解决方案 Safari browser for Windows ？忘记模拟器或模拟器 - 使用真实的在线浏览器。免费尝试lambdatest。

风格

CSS中包含属性的最终属性是样式。与CSS合作时，由于其实现范围狭窄，该样式值不普遍使用。 风格仅与CSS中的报价和计数器一起使用。

CSS遏制模块2级别指出，当我们将此值与计数器和报价一起使用时，这些属性必须范围为子树，并最终创建一个新的计数器。然后，该规范通过开放式引号和封闭式属性表示相同的效果。

规范谈论了计数器和引号。当我们必须逐步编号某些东西时，例如编号子弹列表中的列表中，计数器将在CSS中使用。在这里，我们使用计数器来初始化计数器，定义值，然后使用反插入将其在我们的代码中递增。这有助于我们跟踪计数器，类似于变量。

引用只是我们想使用的符号。例如，我可以在CSS中定义我的引号：

element {
   quotes: “<”, “>”;
}

那么，风格如何在其中发挥作用？当我们将CSS容量中的样式值与任何元素中使用时，我们将此元素与已经运行的计数器和引号的外部范围分离。该元素将启动其新计数器和引号，一旦我们关闭了此元素，外部代码就会知道其运行。因此，在CSS包含属性中，具有样式的元素不知道柜台和引用在外面运行的计数器，反之亦然。

让S分析相同的效果，如下所示。

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>The contain style property</title>
    <style>
        body {
          quotes: "<<" ">>" "<" ">";
        }
        .left-quote:before {
          content: open-quote;
        }
        .right-quote:after {
          content: close-quote;
        }
    </style>
</head>
<body>
  <center>
      <div>
          <span class="left-quote">
              Hi
              <span style="contain: style;">
                  <span class="left-quote">
                        Bye
                  </span>
              </span>
          </span>
          <span class="right-quote"></span>
      </div>
    </center>
</body>
</html>

在这里，由于在最后一个跨度，我们正在使用类右引号，因此我们希望它将关闭最后一个打开的报价，即<<。相反，它给出以下渲染：

image

这表示尚未将外部跨度视为内部跨度。

此属性很少用于实际实施。

CSS支持的速记值包含属性

上述CSS值包含的属性可以帮助我们在单个维度中优化我们的网站。因此，我们必须在我们的网页上实现这些价值的组合并利用它们。出于相同的原因，CSS遏制提供了两个速记值：

  • 内容

  • 严格

在这里，内容值是布局和涂料的速记，而严格的尺寸，布局和油漆是速记。如果需要，您可以直接在代码中直接使用这些速记。

测试您的CSS在多个浏览器上包含代码

计划您的web design，以及CSS所包含的值的零件仅是工作的一半。考虑一下，如果一个浏览器未在布局部分显示预期结果，将会发生什么。如果它在元素边界外显示框怎么办？

这种错误可能对业务造成毁灭性。最好的选择始终是确保您的website is compatible across various platforms。这可以使用在线cross browser testing平台（例如Lambdatest）来实现。它允许您执行web testing，并提供3000多个浏览器和OS组合的online browser farm。

订阅LambdaTest YouTube Channel，以获取有关测试自动化的更多教程，Cypress test automation，Playwright automation等。

步骤1 ：开始测试，sign up on the LambdaTest platform如果您没有帐户。

image

步骤2 ：导航到实时测试>浏览器测试左工具栏面板。

image

步骤3 ：输入您希望在其上检查CSS包含属性的网站URL。您可以选择浏览器，版本， OS 和分辨率在此处。以相同规范启动网站。

image

步骤4 ：按开始启动测试会话。

image

现在，您可以像浏览器上的用户和其他选择的其他规格一样通过网站上冲浪。从测试人员的角度来看，它非常快速和方便。

需要一个很好的解决方案 Safari browser online 在Windows上测试吗？忘记模拟器或模拟器 - 使用真实的在线浏览器。免费尝试lambdatest。

结论

更常见的是，开发人员面临与溢出，未对准和甚至不逻辑的问题有关的问题。事情不合时宜，这很难解码，尤其是在从事大型项目的工作时。但是CSS包含财产有助于我们展望未来，并预测我们的确切元素的精确布置，几乎是100％的概率。

css包含属性可以帮助我们优化渲染器，并让浏览器知道要重新粉刷哪些内容，哪些内容不要进行。这可以更快地加载页面，除了重新粉刷外，它确实有助于我们控制可能需要特别安排的东西。 CSS包含属性接受实施的四个值 - 大小，布局，油漆和样式。

这些值带来了不同的东西，在实用情况下实施时适合不同的用例。在此唯一CSS包含属性的详细讨论结束时，请在评论部分中知道您的想法。感谢您给这篇文章的宝贵时间。