整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

在 CSS 中隐藏元素的 10 种方法

CSS中很多隐藏元素的方法,但这些方法的可访问性、布局、动画、性能和事件处理的方式有所不同。

  • 动画: 一些CSS隐藏元素的方法一般是全有或者全无,元素要么是完全可见,要么是完全不可见,并且没有中间状态。其他的,比如透明度,可以是一个范围的值,所以在这中间过程插入动画成为可能;
  • 可访问性: 下面的每一种方法都会在视觉上隐藏一个元素,但不一样会真正的去除DOM元素。有一些方式隐藏元素后,屏幕阅读器仍然能读取到元素内容;
  • 事件处理: 隐藏元素之后,有些方式元素上的事件仍然能被触发,而有些方式就会导致元素上的事件触发无效;
  • 表现: 浏览器加载并解析 HTML DOM 和 CSS 对象模型后,页面将分三个阶段呈现:布局(生成每个元素的几何位置)、绘制(绘制每个元素的像素)、组合(以适当的顺序放置元素层)。仅导致构图变化的效果明显比影响布局的效果更好。在某些情况下,浏览器还可以使用硬件加速。

下面就来看看CSS中隐藏元素的方式,以及每种方式的优缺点。

1. opacity 和 filter: opacity()

opacity: N 和 filter: opacity(N) 属性可以传递一个 0 到 1 之间的数字,或者 0% 和 100% 之间的百分比,对应地表示完全透明和完全不透明。

  • opacity: N:该属性用来设置元素的透明度;
  • filter: opacity(N) :filter属性用来设置元素的滤镜,opacity是滤镜重的透明度,用来设置元素的透明度。
div {
    opacity: 0;
}

div {
    filter: opacity(0%);
}
复制代码

在现代浏览器中,这两者之间几乎没有实际的区别,但如果同时应用多种效果(模糊、对比度、灰度等)时,应该使用 filter 属性。

注意:opacity 可以设置动画并提供出色的性能,但页面上保留完全透明的元素可能会触发事件。



2. color alpha 透明度

可以将元素的color、background-color 和 border-color 等属性设置为rgba(0,0,0,0),这样就会使元素完全透明:

div {
	color: rgba(0,0,0,0);
  background-color: rgba(0,0,0,0);
}
复制代码

这三个属性都是支持设置动画效果的,需要注意,透明度不能应用于带有背景图片的元素,除非它们是使用 linear-gradient 或类似方法生成的。

Alpha 通道可以设置为:

  • transparent:完全透明(中间不能插入动画);
  • rgba(r, g, b, a):红色、绿色、蓝色和 alpha;
  • hsla(h, s, l, a):色相、饱和度、亮度和 alpha;
  • #RRGGBBAA 或 #RGBA。

3. transform

transform 属性可以用于元素的平移、缩放、旋转或倾斜等。可以使用 scale(0) 或者 translate(-9999px, 0px) 属性值来将元素隐藏:

div {
	transform: scale(0);
}

div {
	translate(-9999px, 0px)
}
复制代码

transform 属性提供了出色的性能和硬件加速,因为元素被有效地移动到了单独的层中,并且可以在 2D 或 3D 中进行动画处理。原始的布局空间会保持原样,并不会受影响。使用这种方式隐藏的元素不会触发任何事件。



4. clip-path

clip-path 属性可以创建一个剪辑区域,用于确定元素的哪些部分是可见的。使用 clip-path: circle(0) 可以将元素进行隐藏。

div {
	clip-path: circle(0);
}
复制代码

clip-path为添加动画效果提供了空间,不过它只能在现代浏览器中使用。



5. visibility: hidden

visibility 属性可以设置为 visible 或 hidden 来显示和隐藏元素。

div {
	visibility: hidden;
}
复制代码

除非使用collapse值,否则元素使用的空间保持不变。


6. display: none

display 可能是最常用的元素隐藏方法; 。当其值为 none 时元素就隐藏了。被隐藏的元素不会在页面中占据位置,也不会响应绑定的监听事件。

div {
  display: none;
}
复制代码

然而,在大多数情况下,display 可能是最糟糕的 CSS 属性。除非使用 position:absolute 将元素移出文档流,或者采用contain属性,否则它的隐藏过程无法设置动画,并将触发页面重新布局。



7. z-index

可以通过将元素的 z-index 属性设置为负值,以实现元素的隐藏。这实际上就是将元素放在了我们看不到的层。

div {
  z-index: -1;
}
复制代码


8. position

position属性允许使用top、bottom、left、right 从页面中的默认位置移动元素。因此,绝对定位的元素可以通过左键:-9999px 等值移出屏幕:

div {
  position: absolute;
  left: -999px;
}
复制代码



9. 覆盖另一个元素

通过在元素的上面放置与背景颜色相同的元素,可以在视觉上隐藏一个元素。下面来使用::after伪元素来实现:

div::after {
  position: absolute;
  content: '';
  top: 0;
  bottom: 100%;
  left: 0;
  right: 0;
  background-color: #fff;
}
复制代码

虽然这从技术上讲是可以实现的,但是这样做需要更多的代码。



10. 缩小尺寸

可以通过使用width、height、padding、border-width 或 font-size 来缩小元素的尺寸以实现元素的隐藏。可能还需要应用 overflow: hidden; 来确保内容不会溢出。

div {
  height: 0;
  padding: 0;
  overflow: hidden;
}
复制代码

使用这种形式我们可以在隐藏过程中使用动画效果,并且他的性能会比 transform 好很多。


分类:

页编程之图片、隐藏。

同学们好,这里是免费少儿编程知识分享,每天一行代码谁都能学会。今天分享的知识是为网页添加图片控件和隐藏控件,用到的是input标签的type属性值,image和hidden。这两个控件太过于简单,所以我就放在一起讲了,同时介绍了image控件button的image内容,以及IMG控件之间的区别。演示了hidden控件在实际编程中的作用。

先来看看今天实例的运行效果。网页上分为两段。

·第一段中有三张图片,第一张就是type属性等于image的效果,第二张是button中包含IMG标签的效果,第三张是纯IMG标签的效果。这三张图片的共同点是图片完全一致。不同点是type=image,直接将整张图片做成了提交按钮,点击之后即可提交整张表单,但外观表现时仍然和普通的图片是没有任何差别的。

·第二张是button按钮中使用了IMG标签,虽然它也有提交和图片,但是它最外面仍然保留了按钮的外边框,看上去是以按钮为主。

·第三章中直接使用IMG标签,它没有提交功能就是一普通的图片,但是我们仍然可以通过JS的submit函数来使其提交表单。

·第二段是一个密码框一个提交按钮。这一句话只是为了方便你们找到隐藏空间的位置,我还做了两个hidden的隐藏控件,但是你们看不到,我随便在这里输入密码,然后点击按钮时,JS就会取出(密码)控件的值和隐藏控件中的值并且弹出对话框提示。

这里有两点需要注意,可以看到密码控件中的值在这里仍然是明文显示的,证明它只是视觉上是*或者圆点,实际在数据传输中仍然是明文并没有加密。

·第二点是隐藏控件中的值被成功读取,看不到并不代表不存在,效果各位同学都已经看到了。

在我们来看看实现的代码,先讲image值,它的关键属性就是src和ID,也就是引用地址和命名,没有什么好讲的。我其实是不建议你们使用这个控件的,因为一般表单提交前,都会加上一层一层的验证,比如说是必填、b7手势、数字、格式是否正确。这个时候除了最基础的控件类型验证外还会用到 gs验证。而如果使用 gs验证就需要用到自定义函数,在提交到服务器前就验证好。

如果用户数据是正确的就提交,如果不正确就终止提交操作提示用户修改流程,这样看上去没有问题,但因image控件讨厌也就讨厌在这里。

·若用这种方式提交可能会发生表单提交两次的现象,经常会造成表单元素被重复提交,数据库被写入异常,所以尽量不用或者少用。

·至于hidden控件常用来保存一些不需要或者不希望展示给用户的数据,他的常用属性就是无这个Value和这个id。

我举个例子帮助你们理解,现在客户要求建立一个注册新用户的界面,但是要求将注册步骤分为两步。第一步,需要用户填写手机和昵称,然后跳转至第二页,输入密码和其他的信息,第二页肯定就不需要显示出来用户在第一页的时候输入的数据了。但这些数据又必须在第二页的时候一起提交至服务器。

这时候就可以使用到隐藏控件--接收第一页提交过来的数据并且不显示,用户也感受不到。直接填好信息提交时第一页的数据也以隐藏空间的方式一起提交了。这仅仅是hidde空间的一个使用场景,还可以收集用户信息、确定用户身份、判断提交源,在多个form表单中建立关节联、做全局变量等,总的来说应用方式还是很广的。

在目前这个阶段就只需要知道这两控件能干什么和基础写法,计算完成后面到具体的使用场景时会再详细讲解。

好了,今天的分享就到这里,希望各位同学下去能够照着写三遍,做到不看视频也能够写出来,所有的案例及相关文档均可以向我获取。下期见。网页编程·服务端编程·数据库·算法,点赞点关注吧!

Web 开发中出于多种原因,我们需要隐藏元素。例如,一个按钮应该在移动中可见,而在桌面视口中隐藏。或者,在移动设备上隐藏但要在桌面上显示的导航元素。隐藏元素时有三种不同的状态:

  • 元素完全隐藏并从文档流中删除。
  • 元素只是隐藏在视觉上,而且仍然可以被辅助技术(AT)访问,比如屏幕阅读器。
  • 元素是可见的,但仅对屏幕阅读器隐藏。

在这篇文章中,我们将学习在html和css中隐藏元素,并涵盖易访问性、动画和隐藏用例等方面,让我们开始吧。

HTML5 隐藏属性

它是一个布尔 HTML 属性,隐藏了附加到它的元素。当浏览器加载一个web页面时,它不会渲染带有hidden属性的元素,除非该元素被CSS手动覆盖,这与应用display: none的效果类似。

考虑下面的例子:

我们有一个title、一个figure和一个描述。只有当视口宽度大于400px时,才会显示该图。我向元素添加了hidden`属性。

在CSS中,我使用hidden属性仅在所需的视口大小中显示元素。

img[hidden] {
  display: none;
}

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

事例源码:https://codepen.io/shadeed/pen/373c8a132e5d72201b935689d6990d16?editors=1100

那么,你可能会问为什么不使用display: none呢?这是个好问题。当通过其hidden属性调用图像选择器时,我们可以确定即使CSS因为某种原因没有加载,元素也会被隐藏。

可访问性对hidden的影响

从可访问性的角度来看,hidden将元素完全隐藏在web页面之外,因此屏幕阅读器无法访问它。一定要避免使用它来隐藏仅用于表示目的的元素。

CSS display 属性

每个元素都有一个默认的display值,比如inline-block、block、table等等。要隐藏具有display属性的元素,我们应该使用display: none。当一个元素使用display: none隐藏时,它的所有后代都将被删除。

考虑下面的例子:

img {
  display: none;
}

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

这将完全隐藏文档流和屏幕阅读器中的图像。也许你想知道文档流是什么?请参见下图:

注意,当蓝皮书被隐藏时,它已被完全从堆栈中删除。为它保留的空间已经消失了。同样的概念也适用于在HTML中隐藏元素时。元素的预留空间已经没有了,它更改了文档流,或者在我们的示例中,更改了图书流堆栈。

下面是一个动画,演示当移除书本时发生的情况:

如果资源隐藏在CSS中,它们会加载吗?

是的,会的。例如,如果<image>被CSS隐藏,并且我们在某个断点处显示它,则它已经被加载。即使图片被CSS隐藏,该图片也会引起HTTP请求。

在下面的演示中,我只添加了一个图像,并使用CSS隐藏它。然后,我打开「DevTools」并检查networks选项卡,它显示图像已加载。

稍后我们将对此进行讨论,以解释如何在特定断点或视口大小中不需要HTTP请求时减少HTTP请求。

style 元素

值得一提的是,有些元素的默认值是display: none。可以将<style>元素添加到HTML页面中,我们可以将其display属性更改为block,这样就可以看到它了。

「html」

<body>
    <style>
       .title { color: #000; }
    </style>
</body>

「css」

style {
    display: block;
}

如果您希望样式块始终可见且可编辑,这是非常有用的。可以通过向style标签添加属性contentteditable =true来编辑它。

事例:https://codepen.io/shadeed/pen/3c1e8d7d69bcf03aa875e3e50d0ffe02?editors=1100

可访问性对display: none的影响

使用display:none时,它将对屏幕阅读器完全隐藏。

Opacity

通过将opacity度设置为0,该元素及其所有后代将被隐藏,并且不会被继承, 但是,它仅从视觉角度隐藏它们。除此之外,opacity值为1以外的元素将创建一个新的堆叠上下文。

在上图中,蓝皮书仅在视觉上隐藏。与使用display: none时发生的情况相比,它的空间仍然保留,并且堆栈顺序没有变化。

img {
    opacity: 0;
}

根据最初的示例,如果我们要隐藏不透明的图像,结果将如下所示:

该图像仍然存在,并且已保留其空间。它仅从视觉角度隐藏。

更新:2020年1月13日

Dusan Milovanovic指出,pointer-events: none | auto可以用来禁用opacity为0的隐藏元素上的鼠标事件。这一点很重要,因为用户可能会对单击、悬停或选择隐藏元素的文本感到困惑。

事例:https://codepen.io/shadeed/pen/4900ddd4a4d324cc531c1980088f775a?editors=1100

可访问性对opacity: 0的影响

一个元素以opacity: 0仍然可以被屏幕阅读器访问,并且可以用键盘进行聚焦。

Visibility

通过使用visibility: hidden,我们可以显示或隐藏类似于使用opacity: 0的元素,而不会影响文档的视觉流。

请注意,蓝皮书是如何从可视流中隐藏的,但是它并没有影响图书堆栈的顺序。

当在父元素上使用visibility: hidden时,所有内容都是隐藏的,但是当该父元素的子元素具有visibility: visible时,将显示该子元素。

「html」

<article>
  <h1>Spring is on the way</h1>
  <img src="landscape.jpg" alt="">
  <p><!-- Desc --></p>
</article>

「CSS」

article {
    visibility: hidden;
}

img {
    visibility: visible;
}


在上面的例子中,<article>元素具有visibility: hidden。但是,添加visibility: visible可以让图片显示。同样,这是因为visibility应用于元素的后代,但是可以从具有该元素的子元素重写它。

事例源码:https://codepen.io/shadeed/pen/03caf6b36727accb692eecbc38f95d39?editors=1100

可访问性对visibility: hidden的影响

该元素被隐藏,其后代将从可访问性树中删除,并且屏幕阅读器不会渲染该元素。

Positioning

要隐藏带有position属性的元素,我们应该将它移到屏幕外,并将其大小设置为0(宽度和高度)。个例子就是跳转导航链接。考虑下面的图:

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

「css」

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

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

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

事例源码:https://codepen.io/shadeed/pen/707992e7c98ea633fc6606e576ef8a04?editors=0100

可访问性对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%);
}


可访问性对clip-path的影响

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

事例源码:https://codepen.io/shadeed/pen/9fdbd7be9fd9dac17a614c96ba7f64b1?editors=0100

控制颜色和字体大小

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

颜色透明

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

字体大小

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

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

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

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

事例源码:https://codepen.io/shadeed/pen/4eacdf50c3339fced7f787156c569372?editors=1100

Aria Hidden

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

<button>
    Menu
    <svg aria-hidden="true"><!-- --></svg>
</button>

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

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

  • 隐藏装饰性的内容,如图标、图像。
  • 隐藏复制文本。
  • 隐藏屏幕外或折叠的内容。

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

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

动画与互动

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

#### 菜单动画-不好的例子

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

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是屏幕阅读器用户可以访问的所有内容的列表。在我们的例子中,导航列表在那里,而它在视觉上是隐藏的。我们需要解决两个问题:

1.菜单隐藏时避免用键盘聚焦 2.当导航隐藏时,避免通过屏幕阅读器告知导航

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

事例源码:https://codepen.io/shadeed/pen/e94f377dae6104fe45a71c80d59bb58d?editors=0100

菜单动画-好的例子

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

「css」


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

事例源码:https://codepen.io/shadeed/pen/e94f377dae6104fe45a71c80d59bb58d?editors=0110

自定义复选框

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

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

事例源码:https://codepen.io/shadeed/pen/b722aa72dbe3574617f6506d14e5ac03?editors=1100

### 隐藏按钮

在Twitter上,有一个名为“查看新推文”(See New Tweets)的按钮,对于带有aria-hidden内容的屏幕阅读器来说是隐藏的,只有在有新推文可用时才会显示出来。


作者:Ahmad shaded 译者:前端小智 来源:sitepoint

原文:https://www.sitepoint.com/hide-elements-in-css/