不是您典型的水平规则

HTML＆lt; hr＆gt;元素在放置它的情况下添加水平规则（或行）。水平规则用于提供视觉中断和划分内容。与其他HTML元素一样，可以使用CSS（和SVG）来打造水平规则。这意味着它们不必看起来像无聊，普通水平线。您可以与他们有一点创意，为您的内容和设计添加了一个很好的少量个人触摸。

如果你是这个博客的常客，那么你最有可能已经看到了一个水平规则在这里看起来像什么。事实上，如果你之前没有看到它，那么你可能刚刚完成了这一点。上面段落的鸟类插图是一个风格的＆lt; hr＆gt;元素。

如果您＆＃39;在阅读应用程序Web浏览器中阅读本文＆＃39; S读者模式，那么上述水平规则不会出现在我的自定义样式中，而您＆＃39; ll只是看到水平线。这是水平规则看起来的图片：

在创建此水平规则样式之前，我的水平规则看起来像你可能想象的那样无聊。直到有一天，我看着那个无聊的线，想象一群鸟儿坐在上面。然后点击了！我在电线上得到了一束鸟（剪影）的SVG形象，修改了它看起来像我想要的那样，并用它来改变我的＆lt; hr＆gt;元素看起来像你可以看到的东西。

在这篇文章中，我会越过我是如何做到的，以及如何进一步提高水平规则，以便它们适应各种上下文，同时剩下语义和可访问。

定义，HTML水平规则不仅仅是视觉分频器。它有语义，在其周围内容的背景下发挥有意义的作用：

HTML＆lt; hr＆gt;元素代表段级主题休息，例如，故事中的场景发生变化，或者在参考书的一部分中转换到另一个主题。

HR元素具有分离器的隐式作用。因此，＆lt; hr＆gt;被屏幕读者理解并宣布。 MACOS上的VICEOVER宣布为“水平分离器”。 HR也通过读取应用程序和读取器模式显示为水平线，其中CSS通常被剥离，而HTML语义用于确定元素是如何由读取应用程序打造的。

有趣的是，水平规则具有隐式方向，默认情况下是水平的。这意味着如果您使用垂直规则来拆分内容，则可以通过将aria方向属性值设置为垂直：

＆lt; hr aria定向=＆＃34;垂直＆＃34;＆gt;＆lt;！ - 请注意，您不需要＆amp;不应该明确设置'角色=＆＃34;分隔符＆＃34;`在`hr`元素上，因为它的语义是隐含的 - ＆gt;

MacOS上的VoiceOver宣布，垂直方向为“垂直分离器”。

除了在一篇文章中分离段落外，例如，可以使用水平规则来分离菜单中的菜单项组。它们也可以是互动的。

由于水平规则是屏幕读取器宣布的语义元素，因此除非您使用水平规则进行语义划分内容，否则您应该使用aria-hidden =＆＃34将其隐藏它屏幕读者;真实＆＃34;换句话说：使用aria-hidden =＆＃34;真＆＃34;隐藏装饰水平线。如果他们提供语义，主题内容休息，请不要隐藏它们。

与其他空HTML元素一样，＆lt; hr＆gt;元素可以使用CSS限制。例如，您可以更改其宽度和高度，边框和背景颜色，以及使用渐变或应​​用背景图像等，即使它是一个更少的内容元素，似乎您似乎可以创建简单的HR样式使用::之前和::伪元素之后。

要创建本网站上使用的鸟类线路水平规则，我所做的就是设置HR的尺寸，并将SVG图像应用于CSS中的背景图像：

hr {width：..;高度： ..;背景图片：URL（＆＃34;数据：图像/ svg + XML，...＆＃34;）;背景 - 重复：无重复;背景 - 大小：100％自动; / * .. * /}

CSS上没有任何东西太想要。但是自从我写过它们以来，上述款式让我感到厌烦。一般来说，我试图避免使用背景图像，以便任何不纯粹装饰的东西。如前所述，水平规则不是纯粹的装饰。我也更愿意避免使用SVGS作为背景图像，并且只要我能够充分利用他们与CSS的可悲地联系它们。

作为背景图像实现的SVG不能从包含（或参考）样式表中的风格。我希望人力资源保持自适应。我希望能够为不同的主题定制它，并且能够在我想要的情况下通过CSS来修改和控制它的颜色。我也想粉碎它，以便它在用户控制的环境中仍然可以访问。虽然我不打算动画这个博客上的水平规则，但我仍然希望可以选择添加一个微妙的动画。毕竟，SVGS很方便，因为它们是如此强大和灵活性 - 它们大约超过清晰的线条和插图。

为了使水平规则匹配以匹配各种主题，我可以为每个主题更改小时内的背景图像。这会起作用。但是如果图像在CSS中输入，那么我将以更大的CSS文件结尾。如果它们没有内饰，我将最终向多个图像的请求结束，这对性能并不重要。更不用说必须创建和维护多个图像，这不是可能更简单的东西的最佳工作流程。

此外，在Windows高对比度模式下，我们无法控制活动主题颜色。因此，如果我想确保水平规则始终有足够的对比度与后台，那么我需要能够在我的CSS中更改和控制它的颜色，如果SVG是背景图像，我就无法做到。这意味着我可能会以黑色背景上的黑色水平规则结束。

我可以在＆lt; hr＆gt上使用背景图像。并停在那个点。但如果我希望水平规则真正自适应，那么我需要更具灵活性的，即＆lt; hr＆gt;元素本身不提供...

获得SVG充分灵活性的最佳方法是通过引入它。但是＆lt; hr＆gt;元素是满足 - 少 - 它没有在其中放置其他元素的打开和结束标签。

围绕＆lt; hr＆gt的限制工作的唯一方法;虽然保留屏幕阅读器用户的语义是使用DIV并使用aria提供人力资源的语义。是的，我键入这个想法是键入这个问题。但听到我。如果您想使用横向规则创造创意，我认为这是值得探索和下降这条路，同时确保它们在各种情况和环境中保持视觉上可访问和可定制。

＆lt; div角色=＆＃34;分离器＆＃34;＆gt; ＆lt;！ - 隐藏屏幕阅读器的SVG，以避免他们宣布它 - ＆gt; ＆lt; svg aria-hidden =＆＃34;真实＆＃34;聚焦=＆＃34;假＆＃34;宽度=＆＃34; ...＆＃34;高度=＆＃34; ...＆＃34; viewbox =＆＃34; ...＆＃34;＆gt; ＆lt;！ - SVG含量 - ＆gt; ＆lt; / svg＆gt;＆lt; / div＆gt;

或者，正如我的朋友斯科特所指出的那样，分隔符角色可以直接应用于SVG，在这种情况下，无需使用aria-hidsid来隐藏svg：

我们创建了一个语义水平规则，屏幕读者和正确宣布

现在是Inline SVG的插图变得更容易用CSS进行样式和控制。

为方便起见，可以在自定义组件中包装上述水平规则标记，或者分成模板部分或短码，以便可以更有效地插入A＆lt; hr＆gt;否则会去。

使用SVG内联，我可以使用CSS自定义属性来控制SVG在不同上下文中的样子。例如，使用CSS自定义属性洒在SVG内，我可以使用CSS，修改和更改其颜色来控制该内容。例如，在Windows高对比度模式下，我可以将SVG的颜色设置为当前文本颜色的任何类型：

/ * IE和遗留边缘* / @媒体屏幕和（-ms-high-对比度：活动）{div [角色=＃34;分离器＆＃34;] svg { - 颜色：windowtext; }} / *使用新标准的强制颜色标准，目前支持Chromium Edge * / @媒体屏幕和（强制颜色：Active）{div [角色=＃34;分离器＆＃34;] svg { - hr-颜色：Canvastext; }}

这样，水平规则总是有足够的对比与它后面的背景。

如果SVG的内容是多彩色的，则可以以相同的方式定义和设置多个变量的值，从而为不同的上下文或环境创建水平规则的不同版本 - 或主题。

造型SVG＆lt;使用＆gt; CSS的内容，其中我使用CSS自定义属性详细说明了SVG图像的更多信息

即使在我的CSS被剥离的环境中，它将显示它意图（电线上的鸟类），例如阅读应用程序。因为它现在是一个图像，所以它将显示它的方式，而不是与＆lt; hr＆gt;这将由阅读应用程序显示和打造。

使用高对比度介质查询，它可以适用于始终可以随时随地访问，无论用户主题当前处于活动状态。

这是我使用Chrome DevTools更改了我的鸟类上跨越水平规则的颜色的视频。 这是可能的，通过内联SVG和CSS自定义属性可以将颜色应用于SVG内容： 就像使用内联SVG进行图标是最好的做法，以确保图标保持自适应和可访问，SVG可以同样可以为水平规则同样为水平规则提供更好的弹性，当您希望与它们一起获得更多创意时。 无论您是否使用此技术，在您的知识库中都很好，以防您需要它。