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

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

他们会…

适合网络的当前状态？
• >
工作交叉浏览器？
>适应它们被掉入的空间？
• >
促进模块化代码？

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

钥匙要点

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

可以使用媒体查询，Flexbox，Element查询和属性等技术使响应式Web组件更加灵活和适应性。这些技术使组件可以适应不同的屏幕尺寸和上下文，从而真正响应它们。
• 使用Web组件的使用允许为每个组件的单个真实来源创建库，减少代码重复并允许与其他开发人员或网站所有者共享组件。这种方法促进了模块化代码并简化了响应式设计的方法。
>
什么是Web组件？
• >
本质上，它们是W3规范，使您能够构建自己的HTML元素。如果您从字面上不了解它们，那么可能值得对它们进行快速阅读，因为我在本文中使用的一些术语需要基本的理解。

>

我为什么要使用它们？

>

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

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

>

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

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

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

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

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

>

这是我之前做过的：

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

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

<span><span><span><ul</span> class<span>="form"</span>></span> 
</span>  <span><span><span><li</span> class<span>="form__item"</span>></span>
</span>    <span><span><span><label</span> for<span>="name"</span>></span>Name:<span><span></label</span>></span>
</span>    <span><span><span><input</span> id<span>="name"</span> name<span>="name"</span> type<span>="text"</span>></span>
</span>  <span><span><span></li</span>></span>
</span>  <span><span><span><li</span> class<span>="form__item"</span>></span>
</span>    <span><span><span><label</span> for<span>="name"</span>></span>Email:<span><span></label</span>></span>
</span>    <span><span><span><input</span> id<span>="name"</span> name<span>="name"</span> type<span>="text"</span>></span>
</span>  <span><span><span></li</span>></span>
</span><span><span><span></ul</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</span> rel<span>="import"</span>
</span></span><span>      <span>href<span>="http://url.com/subscribe-form.html"</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</span> class<span>="form"</span>></span> 
</span>  <span><span><span><li</span> class<span>="form__item"</span>></span>
</span>    <span><span><span><label</span> for<span>="name"</span>></span>Name:<span><span></label</span>></span>
</span>    <span><span><span><input</span> id<span>="name"</span> name<span>="name"</span> type<span>="text"</span>></span>
</span>  <span><span><span></li</span>></span>
</span>  <span><span><span><li</span> class<span>="form__item"</span>></span>
</span>    <span><span><span><label</span> for<span>="name"</span>></span>Email:<span><span></label</span>></span>
</span>    <span><span><span><input</span> id<span>="name"</span> name<span>="name"</span> type<span>="text"</span>></span>
</span>  <span><span><span></li</span>></span>
</span><span><span><span></ul</span>></span></span>

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

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

>元素查询

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

>

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

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

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

>基本
>元素查询
> eq.js

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

>

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

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

>

属性

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

<span><span><span><ul</span> class<span>="form"</span>></span> 
</span>  <span><span><span><li</span> class<span>="form__item"</span>></span>
</span>    <span><span><span><label</span> for<span>="name"</span>></span>Name:<span><span></label</span>></span>
</span>    <span><span><span><input</span> id<span>="name"</span> name<span>="name"</span> type<span>="text"</span>></span>
</span>  <span><span><span></li</span>></span>
</span>  <span><span><span><li</span> class<span>="form__item"</span>></span>
</span>    <span><span><span><label</span> for<span>="name"</span>></span>Email:<span><span></label</span>></span>
</span>    <span><span><span><input</span> id<span>="name"</span> name<span>="name"</span> type<span>="text"</span>></span>
</span>  <span><span><span></li</span>></span>
</span><span><span><span></ul</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导入从外部站点工作。

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

3. <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>

   >最后，添加：
内的某个地方，您应该看到我的订阅表格自动磨损。享受！

4. <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容器查询如何有助于响应式组件？

CSS容器查询，也称为元素查询，允许样式为根据父容器而不是视口的大小应用。这意味着组件可以根据自己的大小调整其布局，从而真正响应其响应。这对于在不同情况下重复使用并且需要适应其周围环境的组件特别有用。

> JavaScript在创建响应式Web组件中的作用是什么？创建响应迅速的Web组件。它可用于操纵DOM，处理事件并创建动态内容。它也可以与CSS媒体查询一起使用以创建更复杂的响应行为。例如，JavaScript可用于根据屏幕尺寸或设备功能来加载不同的脚本或内容。

>

>我如何确保可以访问我的响应式Web组件？设计响应式Web组件时的关键考虑。这包括确保在所有屏幕尺寸上都可以阅读文本，交互式元素足够大，可以轻松地在触摸屏上挖掘，并且该站点可为无法使用鼠标的人提供键盘。此外，您应该使用语义HTML为屏幕读者提供上下文和含义，并确保对视觉障碍的人的颜色对比足以。

>在创建响应式Web组件以及如何成为什么方面有什么共同的挑战克服？

一些常见的挑战包括处理不同的屏幕尺寸和分辨率，确保与不同的浏览器和设备的兼容性以及优化性能。可以通过使用移动优先方法，在各种设备上进行测试，使用功能检测来确保兼容性以及优化性能的图像和脚本。

>响应迅速的Web组件如何影响SEO？

响应式Web组件可以对SEO产生积极影响。 Google的算法喜欢移动友好的网站，而响应式设计是其中的关键方面。此外，拥有一个单个响应网站而不是单独的桌面和移动版本避免了重复内容的问题，这可能会对SEO产生负面影响。

>

>如何测试网络组件的响应能力？是测试Web组件响应能力的几种工具和技术。这些包括调整浏览器窗口的大小，以查看布局如何使用浏览器开发人员工具中的设备仿真功能以及使用Google的“移动移动友好型测试”（

）的在线工具如何适应。响应式Web组件的未来可能涉及更先进的技术和技术。这可能包括当前正在开发的容器查询之类的内容，以及更多地使用AI和机器学习根据用户行为和偏好调整布局。

>

>我如何了解有关创建响应式Web组件的更多信息？

>有许多资源可用于了解响应式Web组件。其中包括在线教程和课程，书籍和社区论坛。此外，尝试创建自己的响应组件并研究他人的代码可能是一种学习的好方法。

我可以使用框架或库来创建响应式Web组件吗？有许多可用的框架和库可以帮助您创建响应式Web组件。这些包括引导，基础和反应等。这些工具提供了已经响应迅速的预设组件和布局，从而节省了时间和精力。但是，了解有效使用这些工具的响应式设计的基本原则仍然很重要。

>

以上是您今天如何使用响应迅速的网络组件的详细内容。更多信息请关注PHP中文网其他相关文章！