基础 CSS 可见性类 可访问性介绍

什么是 CSS 可见性类？

CSS 可见性类用于控制 HTML 元素是否可见或是否占用空间。它主要包括以下几个类：

display

控制元素的显示方式，常用值有：

• block：元素呈块级显示，占用整个父容器的宽度，可以设置宽、高等属性。
• inline：元素呈行内显示，只占用正文流中需要的宽度，不可以设置宽、高等属性。
• inline-block：元素呈行内块级显示，只占用正文流中需要的宽度，可以设置宽、高等属性。
• none：元素不可见，不占用空间。

visibility

控制元素是否可见，常用值有：

• visible：元素可见。
• hidden：元素不可见，但仍占用空间。
• collapse：用于表格元素的行或列，将行或列折叠起来。

opacity

控制元素的不透明度，值为 0 到 1 之间的数字，0 表示完全透明，1 表示完全不透明。

可访问性注意事项

在使用 CSS 可见性类时，需要注意以下几点：

• 不要使用 display: none，这会让屏幕阅读器无法读取该元素的内容。
• 不要使用 opacity: 0，这只是让元素透明而已，但仍然占用空间，也无法被屏幕阅读器读取。
• 不要使用 font-size: 0，这会让元素的字体大小变为 0，但仍然占用空间，也无法被屏幕阅读器读取。
• 在需要完全隐藏某个元素时，使用 visibility: hidden 或移除元素。
• 如果使用 visibility: hidden，需要在 CSS 中同时加入 aria-hidden="true" 属性，这样就能让屏幕阅读器知道该元素是被隐藏的并无需读取它其中的内容。

示例代码

.element {
  display: inline-block;
  visibility: hidden;
  opacity: 0;
  /* font-size: 0; */  /* 不要使用 */
}
.element-hidden {
  display: none;
}
.element-collapsed {
  visibility: collapse;
}

/* 完全隐藏的元素 */
.hidden {
  visibility: hidden;
  /* 移除元素 */
  /* display: none; */
  /* aria-hidden="true"; */
}