Shulou(Shulou.com)06/02 Report--

This article mainly introduces "what are the advantages and disadvantages of element methods in the Web". In daily operation, I believe many people have doubts about the problems of element methods and advantages and disadvantages in the Web. Xiaobian consulted all kinds of materials and sorted out simple and easy to use operation methods. I hope to help you answer the doubts of "what are the advantages and disadvantages of element methods in the Web"! Next, please follow the small series to learn together!

HTML5 Hidden Properties

It is a Boolean HTML attribute that hides elements attached to it. When a browser loads a web page, it does not render elements with hidden attributes unless the element is manually overridden by CSS, similar to the effect of applying display: none.

Consider the following example:

We have a title, a figure and a description. The plot appears only if the viewport width is greater than 400px. I added the hidden`attribute to the element.

In CSS, I use the hidden attribute to display elements only in the viewport size I want.

img[hidden] { display: none; } @media (min-width: 400px) { img[hidden] { display: block; } }

You may be wondering why you don't use display: none. That's a good question. When the image selector is invoked through its hidden attribute, we can be sure that the element will be hidden even if CSS is not loaded for some reason.

1. Accessibility impact on hidden

From an accessibility perspective, hidden hides the element completely outside the web page, so screen readers cannot access it. Be sure to avoid using it to hide elements that are only used for presentation purposes.

CSS display properties

Each element has a default display value, such as inline-block, block, table, and so on. To hide elements with the display attribute, we should use display: none. When an element is hidden with display: none, all its descendants are deleted.

Consider the following example:

img { display: none; } @media (min-width: 400px) { img { display: block; } }

This will completely hide images in document streams and screen readers. Maybe you want to know what document flow is? Please refer to the following figure:

Note that when the Blue Book is hidden, it has been completely removed from the stack. The space reserved for it has disappeared. The same concept applies when hiding elements in HTML. Element is out of reservation, it changes the document flow, or in our example, the book flow stack.

Here's an animation showing what happens when a book is removed:

1. If resources are hidden in CSS, will they load?

Yes, it will. For example, if it is hidden by CSS and we show it at a breakpoint, it is already loaded. Even if the image is hidden by CSS, the image will cause HTTP requests.

In the demo below, I just added an image and hid it using CSS. Then I open DevTools and check the networks tab, which shows that the image is loaded.

We'll discuss this later to explain how to reduce HTTP requests when they're not needed in a particular breakpoint or viewport size.

2. style element

It is worth mentioning that some elements have a default value of display: none. To add an element to an HTML page, we can change its display attribute to block so that we can see it.

「css」

style { display: block; }

This is useful if you want style blocks to always be visible and editable. You can edit the style tag by adding the attribute contenttedible =true to it.

3. Accessibility impact on display: none

When display: none is used, it is completely hidden from screen readers.

(1) Opacity

By setting opacity to 0, the element and all its descendants are hidden and not inherited, but it hides them only visually. In addition, elements with opacity values other than 1 create a new stacking context.

In the image above, the Blue Book is only visually hidden. Compared to what happens when display: none is used, its space is still preserved and the stacking order is unchanged.

img { opacity: 0; }

According to the initial example, if we wanted to hide an opaque image, the result would look like this:

The image still exists and its space has been reserved. It's hidden only from view.

4. Update: January 13, 2020

Dusan Milovanovic pointed out that pointer-events: none| Auto can be used to disable mouse events on hidden elements with opacity of 0. This is important because users may be confused about clicking, hovering, or selecting text for hidden elements.

5. Accessibility impact on opacity: 0

An element with opacity: 0 is still accessible to screen readers and can be focused with the keyboard.

(1) Visibility

By using visibility: hidden, we can show or hide elements similar to using opacity: 0 without affecting the visual flow of the document.

Notice how Blue Book is hidden from the visual stream, but it doesn't affect the order of the book stack.

When visibility: hidden is used on a parent element, everything is hidden, but when a child element of the parent element has visibility: visible, the child element is displayed.

「html」

Spring is on the way

「CSS」

article { visibility: hidden; } img { visibility: visible; }

要将链接放置在屏幕之外，我们应该添加以下内容

「css」

.skip-link { position: absolute; top: -100%; }

值-100%将推动元素100%的视口高度。结果，它将被完全隐藏。一旦它聚焦在键盘上，它就会像这样显示出来

.skip-link:focus { position: absolute; top: 0; }

7. 可访问性对position: absolute | fixed的影响

屏幕阅读器可访问该元素，并且键盘可聚焦。它只是从视口中隐藏起来。

Clip Path当在元素上使用clip-path时，它创建一个裁剪区域，该区域定义应该显示和隐藏哪些部分。

在上面的例子中，透明的黑色区域有clip-path。当clip-path应用于元素时，透明黑色区域下的任何内容都不会显示。

为了更直观地演示以上内容，我将使用clippy工具。在下面的GIF中，我有如下的clip-path:

将每个方向的多边形值设置为0 0，则裁剪区域的大小将调整为0。结果，图像将不会显示。同样，这也可以用一个圆来代替多边形:

img { clip-path: circle(0 at 50% 50%); }

8. 可访问性对clip-path的影响

元素仅在视觉上隐藏， 屏幕阅读器和键盘焦点仍然可以使用它。

三、控制颜色和字体大小

虽然这两种技术不像我们前面讨论的那样常见，但它们可能对某些用例有用。

1. 颜色透明

通过使文本的颜色透明，它将隐藏在视觉上。这对于只有图标的按钮非常有用。

2. 字体大小

此外，将字体大小设置为0也很有用，因为这会在视觉上隐藏文本。考虑下面的示例，其中有一个具有以下结构的按钮：

Like

我们的目标是以可访问的方式隐藏文本。为此，我添加了以下CSS

.button span { color: transparent; font-size: 0; }

这样，文本就被隐藏了。它甚至可以在不更改颜色的情况下工作，但是我出于解释目的添加了它。

3. Aria Hidden

当向元素添加aria-hidden属性时，它将从可访问性树中删除该元素，这可以增强屏幕阅读器用户的体验。注意，它并没有在视觉上隐藏元素，它只针对屏幕阅读器用户

Menu

在上面的例子中，我们有一个带有标签和图标的菜单按钮。为了向屏幕阅读器隐藏图标，添加了aria-hidden。

根据Mozilla Developer Network (MDN)，下面是属性的用例

隐藏装饰性的内容，如图标、图像。

隐藏复制文本。

隐藏屏幕外或折叠的内容。

4. 可访问性对aria-hidden="true"的影响

是为屏幕阅读器设计的，因为它只对屏幕阅读器隐藏内容。然而，内容对于有视力的用户仍然是可见的，并且键盘是可聚焦的。

(1) 动画与互动

当我们想让一个隐藏的元素动起来时，例如，显示隐藏的移动导航，它需要以一种可访问的方式来完成。为了获得一种可访问的体验，我们将探索一些值得学习的好例子，以及一些不好的例子，以避免犯可能会给屏幕阅读器用户带来不好体验的错误。

菜单动画-不好的例子

我们有一个菜单，在展开时需要有滑动动画。最简单的方法是在菜单中添加以下内容：

ul { opacity: 0; transform: translateX(100%); transition: 0.3s ease-out; } ul.active { opacity: 1; transform: translateX(0); }

有了上述内容，菜单将根据.active类展开和折叠，该类将通过 JavaScript 如下添加:

menuToggle.addEventListener('click', function(e){ e.preventDefault(); navMenu.classList.toggle('active'); });

结果可能看起来不错，但它有一个很大的错误。使用opacity: 0不会隐藏可访问性树的导航。即使导航在视觉上是隐藏的，它仍然可以通过键盘聚焦，并且可以被屏幕阅读器访问。必须将其隐藏以避免混淆用户。

下面是来自Chrome开发工具的 accessibility tree 的截图:

简而言之，accessibility tree是屏幕阅读器用户可以访问的所有内容的列表。在我们的例子中，导航列表在那里，而它在视觉上是隐藏的。我们需要解决两个问题:

菜单隐藏时避免用键盘聚焦

当导航隐藏时，避免通过屏幕阅读器告知导航

下面的屏幕截图显示了Mac OS上的VoiceOver转子是如何看到页面的。导航列表在那里，而它是隐藏的

菜单动画-好的例子

为了修正这个错误，我们需要使用visibility: hidden作为导航菜单。这将确保菜单是隐藏的视觉和屏幕阅读器。

「css」

ul { visibility: hidden; opacity: 0; transform: translateX(100%); transition: 0.3s ease-out; } ul.active { visibility: visible; opacity: 1; transform: translateX(0); }

添加后，菜单将从屏幕阅读器中隐藏。让我们再次测试，看看VoiceOver将显示什么：

5. 自定义复选框

默认的复选框设计很难自定义，因此，我们需要为复选框创建自定义设计。让我们看看基本的 HTML：

Custom checkbox

要自定义复选框，我们需要以一种可访问的方式隐藏输入。为此，应该使用position和其他属性。有一个常见的CSS类，称为sr-only或visual -hidden，它只在视觉上隐藏一个元素，并让键盘和屏幕阅读器用户可以访问它。

.sr-only { border: 0; clip: rect(0 0 0 0); -webkit-clip-path: polygon(0px 0px, 0px 0px, 0px 0px); clip-path: polygon(0px 0px, 0px 0px, 0px 0px); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; white-space: nowrap; }

隐藏按钮

到此，关于"Web中的元素方法及优缺点是什么"的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧!若想继续学习更多相关知识，请继续关注网站，小编会继续努力为大家带来更多实用的文章!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.