您今天如何使用响应迅速的网络组件-css教程-PHP中文网

首页

web前端

css教程

您今天如何使用响应迅速的网络组件

Christopher Nolan

Feb 22, 2025 am 09:38 AM

您今天如何使用响应迅速的网络组件

几年前，我开始听到很多有关Web组件的信息。当噪音降低时，我感到非常兴奋，然后完全忘记了它们。事实证明，有一些良好的运动，并且支持开始增加。尤其是响应式的Web组件设置为真正简化我们如何处理响应设计的方式。听起来很有前途，许多开发人员今天开始使用它们之前，有四个问题要知道：

他们会…

在本文中，我们将探索每个问题的答案！

钥匙要点

> Web组件是W3规范，它允许开发人员构建自己的HTML元素，从而可以创建在浏览器中本来不存在的UI元素或将常用组件捆绑在社交按钮或订阅表单中。

使用Web组件的使用允许为每个组件的单个真实来源创建库，减少代码重复并允许与其他开发人员或网站所有者共享组件。这种方法促进了模块化代码并简化了响应式设计的方法。
>

我为什么要使用它们？

>一个很好的例子，说明您何时可能要使用Web组件，那就是当您在浏览器中构建不存在的UI时，例如彩色拾取器，旋转木马，手风琴或打字机等元素。另外，您可能会在各个站点上一直使用一些组件，这些组件每次都厌倦了重建。这些是社交按钮，订阅表格或通知之类的东西。使用Web组件，您可以使用HTML标签将标记，样式和脚本捆绑到封装的模块中，例如参考它们。如果您使用了角指令或反应组件，这似乎很熟悉，但是这里的好处是它是浏览器和框架不可思议的。

> Web组件使您可以构建一次UI零件并在任何地方使用它们。这对于像Living StyleGuide这样的项目是理想的选择，您想为每个组件构建一个带有真理来源的库。这种方法意味着重复更少的代码并拥有您或您的团队可以简单地将引用到界面中的便携式组件。

>使用Web组件的另一个重要优势是能够将这些组件包装好并与其他开发人员或网站所有者共享。本质上，消费者可以在其网页中放置一个导入语句，例如：

然后，使用该组件中定义的自定义元素标签。将此导入到他们的网页中，他们可以在页面上拥有自定义组件的许多实例。在订阅表单示例中，我们可以在页面上的多个位置使用标签。当然，如果您这样做，则需要确保制作的美丽组成部分非常灵活，并且可以在各种设备和屏幕尺寸上使用。>

<span><span><span><link> rel<span>="import"</span>
</span></span><span>      <span>href<span>="http://url.com/subscribe-form.html"</span>></span></span></span>

>将这些坏男孩变成响应式的网络组件

>我觉得最好的演示方法是例子，所以我将继续使用订阅表单，这是一个常见的UI，在不同的站点和实现之间不会改变太大。

>

这是我之前做过的：

在我的Web组件模板中，我有一些对表单的基本标记。

>我的标记和CSS被藏在我的组件内，利用了规范的阴影dom部分。这给了我封装，使我可以在代码中自由使用标签和输入选择器，而不必担心其他样式出血或矿山出血到父站点。为了清楚和简洁，我不会写出除布局所使用的样式以外的其他样式。我使用了Float：左图和显示的组合：桌子来实现此布局，以防止在任何宽度上破裂。

<span><span><span><ul> class<span>="form"</span>></ul></span> 
</span>  <span><span><span><li> class<span>="form__item"</span>></li></span>
</span>    <span><span><span><label> for<span>="name"</span>></label></span>Name:<span><span></span>></span>
</span>    <span><span><span><input> id<span>="name"</span> name<span>="name"</span> type<span>="text"</span>></span>
</span>  <span><span><span></span>></span>
</span>  <span><span><span><li> class<span>="form__item"</span>></li></span>
</span>    <span><span><span><label> for<span>="name"</span>></label></span>Email:<span><span></span>></span>
</span>    <span><span><span><input> id<span>="name"</span> name<span>="name"</span> type<span>="text"</span>></span>
</span>  <span><span><span></span>></span>
</span><span><span><span></span>></span></span></span></span></span></span></span></span></span>

>我将使用HTML导入将其拉入站点站点的演示：

>现在我们都已设置，让我们看一些响应式技术。

<span><span>.form__item</span> {
</span>  <span>display: table;
</span>  <span>float: left;
</span>  <span>width: 50%;  
</span><span>}
</span>
<span>label {
</span>  <span>display: table-cell;
</span>  <span>width: auto;
</span><span>}
</span>
<span>input {
</span>  <span>display: table-cell;
</span>  <span>width: 100%;
</span><span>}</span>

>媒体查询

>我们所知道和爱的经典方法仍然活着，并且在响应式网络组件内都很好。如果您想在某些断点中烘烤组件，则可以在模板中应用这些模板，也可以将钩子（例如，使用类别使用类）应用于容器，如果您想将该决定留给消费者。在这种情况下，我们需要做的就是剥离浮子并将其调整为完全宽度。>

<span><span><span><link> rel<span>="import"</span>
</span></span><span>      <span>href<span>="http://url.com/subscribe-form.html"</span>></span></span></span>

但是，媒体查询这次不足以拯救我们。

>我对我的注册表格样式感到满意，并且在体内效果很好，但是当网站作者想将其塞入侧边栏中时会发生什么？突然，我的表格看起来被压扁了，并不是真正可用的。

这是因为组件不知道其边界 - 它没有上下文。

> Web组件的全部要点是您可以将它们放在任何地方，它们可以正常工作吗？因此，显然这不会做到，但是您可以使用一些技术来确保您的组件响应迅速且上下文。

> Flexbox Trickery

>如果您正在考虑使用Web组件，那么您只需要支持现代浏览器而不必担心IE9，在这种情况下，一些Flexbox Magic可能非常适合您将这些魔术转变为响应式的Web组件。这是我首选的方法，因为它不需要任何其他JavaScript。

再次，这里的代码示例纯粹显示了我使用过的布局样式：>

通过将容器设置为显示：flex; flex-inp：包装，.form__Item元素将出现并排，但是我们仍然需要进行一些调整，以便当容器变得太小时，它们会很好地堆叠。

> 在.form__Item内部，我使用了flex的flex速记：1 0 320px;它以柔性术语转换为 - 一个生长，柔性收缩为零，柔性基础为320像素。将Flex包装设置为包装，这意味着它不会比我们设置的基础小（320px）小，但是将其设置为Flex意味着它将占用其余可用空间。

我给出了与标签和输入元素类似的处理。他们的柔性柔性值总计320，这意味着它们在较小的容器尺寸下的行为将按照所需的方式行为。

<span><span><span><ul> class<span>="form"</span>></ul></span> 
</span>  <span><span><span><li> class<span>="form__item"</span>></li></span>
</span>    <span><span><span><label> for<span>="name"</span>></label></span>Name:<span><span></span>></span>
</span>    <span><span><span><input> id<span>="name"</span> name<span>="name"</span> type<span>="text"</span>></span>
</span>  <span><span><span></span>></span>
</span>  <span><span><span><li> class<span>="form__item"</span>></li></span>
</span>    <span><span><span><label> for<span>="name"</span>></label></span>Email:<span><span></span>></span>
</span>    <span><span><span><input> id<span>="name"</span> name<span>="name"</span> type<span>="text"</span>></span>
</span>  <span><span><span></span>></span>
</span><span><span><span></span>></span></span></span></span></span></span></span></span></span>

进行这些调整，让我们看一下Sitepoint的侧边栏中的同一形式：

好得多！但是，有多种方法可以使猫皮肤。

>元素查询

元素查询的想法是，您能够模拟媒体查询类型功能，但在组件级别 - 对于响应式Web组件非常方便。本质上，想象能够在您的CSS中写下类似的东西：

>具有元素查询，这正是我们可以做的。非常强大吗？

不幸的是，由于浏览器供应商关注导致无限循环的潜力，因此该技术不可用。但是，一些聪明的人已经编写了插件来启用此功能。

>在我的示例中，我使用了Marc J Schmidt的CSS元素查询，这是一个非常不错的实现。也有以下类似的项目：

>他们所做的就是使用JavaScript检测组件的宽度并修改属性，以便您能够在CSS中进行样式。有些是事件驱动的，有些是基于调整大小的。

<span><span><span><link> rel<span>="import"</span>
</span></span><span>      <span>href<span>="http://url.com/subscribe-form.html"</span>></span></span></span>

>与以上类似的这些插件和小型代码段的组合结合在一起，我们能够获得与侧边栏中的flexbox实现完全相同的结果。

属性

>我们可以为响应式Web组件的消费者提供的很酷的东西之一是通过属性的API。例如，您可以设置一个称为布局的属性，并具有“小”和“大”的尺寸。然后，我们的组件消费者可以使用它如下：

<span><span><span><ul> class<span>="form"</span>></ul></span> 
</span>  <span><span><span><li> class<span>="form__item"</span>></li></span>
</span>    <span><span><span><label> for<span>="name"</span>></label></span>Name:<span><span></span>></span>
</span>    <span><span><span><input> id<span>="name"</span> name<span>="name"</span> type<span>="text"</span>></span>
</span>  <span><span><span></span>></span>
</span>  <span><span><span><li> class<span>="form__item"</span>></li></span>
</span>    <span><span><span><label> for<span>="name"</span>></label></span>Email:<span><span></span>></span>
</span>    <span><span><span><input> id<span>="name"</span> name<span>="name"</span> type<span>="text"</span>></span>
</span>  <span><span><span></span>></span>
</span><span><span><span></span>></span></span></span></span></span></span></span></span></span>

这将触发小型实现的样式。

在阴影dom中，包含的元素被称为：主机。一个例子看起来像：

然后，这将允许组件消费者编写一些简单的JavaScript，以在您提供的不同尺寸之间翻转。这意味着您可以将其留给消费者，以决定如何将其挂在模块中。这使您的组件能够成为更多的未来证明。

<span><span>.form__item</span> {
</span>  <span>display: table;
</span>  <span>float: left;
</span>  <span>width: 50%;  
</span><span>}
</span>
<span>label {
</span>  <span>display: table-cell;
</span>  <span>width: auto;
</span><span>}
</span>
<span>input {
</span>  <span>display: table-cell;
</span>  <span>width: 100%;
</span><span>}</span>

>自己尝试！

如果您有兴趣查看我在自己的机器上使用此演示中所指的flexbox版本，则可以在Chrome中进行以下操作：

>安装CORS Chrome Extension并将其打开。这是为了允许HTML导入从外部站点工作。

>刷新此页面，要么在新标签或窗口中打开任何网站，因此扩展名启动。
在 tag中添加它：

<span><span>@media (max-width: 30em)</span> {
</span>  <span><span>.form__item</span> {
</span>    <span>float: none;
</span>    <span>width: 100%;
</span>  <span>}
</span><span>}</span>

>最后，添加：

<span><span>.form</span> {
</span>  <span>display: flex;
</span>  <span>flex-wrap: wrap;
</span><span>}
</span>
<span><span>.form__item</span> {
</span>  <span>align-items: center;   
</span>  <span>display: flex;
</span>  <span>flex: 1 0 320px;
</span>  <span>flex-wrap: wrap;
</span>  <span>max-width: 100%;
</span><span>}       
</span>
<span>label {
</span>  <span>flex: 1 0 90px;
</span><span>}
</span>
<span>input {
</span>  <span>flex: 1 0 230px;
</span>  <span>width: 100%;
</span><span>}</span>

>上面的方法实际上可以用于任何UI开发，但由于其可重复使用和可共享的性质，它们特别适合响应式的网络组件。

>如果您尚未查看Web组件，但我强烈建议您这样做。虽然目前只有在Chrome和Opera中本地可用的规格，但其他浏览器供应商不远。

>如果您在了解有关响应式网络设计的更多方面有趣 >响应式Web组件上的经常询问问题（FAQ）

>设计良好的响应式Web组件的关键要素是什么？

>设计良好的响应式Web组件应该具有灵活性，适应性和高效。它应该具有一个流体网格系统，允许布局根据屏幕尺寸进行调整。它还应该具有灵活的图像和介质，可以调整大小以适合屏幕。此外，它应该具有媒体查询，该查询允许网站根据屏幕尺寸，分辨率和方向等特征（例如屏幕尺寸，分辨率和方向）为不同设备使用不同的CSS样式规则。最后，它应该在加载时间和性能方面有效。

> CSS容器查询如何有助于响应式组件？