CSS中很多隐藏元素的方法,但这些方法的可访问性、布局、动画、性能和事件处理的方式有所不同。
下面就来看看CSS中隐藏元素的方式,以及每种方式的优缺点。
opacity: N 和 filter: opacity(N) 属性可以传递一个 0 到 1 之间的数字,或者 0% 和 100% 之间的百分比,对应地表示完全透明和完全不透明。
div {
opacity: 0;
}
div {
filter: opacity(0%);
}
复制代码
在现代浏览器中,这两者之间几乎没有实际的区别,但如果同时应用多种效果(模糊、对比度、灰度等)时,应该使用 filter 属性。
注意:opacity 可以设置动画并提供出色的性能,但页面上保留完全透明的元素可能会触发事件。
可以将元素的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 通道可以设置为:
transform 属性可以用于元素的平移、缩放、旋转或倾斜等。可以使用 scale(0) 或者 translate(-9999px, 0px) 属性值来将元素隐藏:
div {
transform: scale(0);
}
div {
translate(-9999px, 0px)
}
复制代码
transform 属性提供了出色的性能和硬件加速,因为元素被有效地移动到了单独的层中,并且可以在 2D 或 3D 中进行动画处理。原始的布局空间会保持原样,并不会受影响。使用这种方式隐藏的元素不会触发任何事件。
clip-path 属性可以创建一个剪辑区域,用于确定元素的哪些部分是可见的。使用 clip-path: circle(0) 可以将元素进行隐藏。
div {
clip-path: circle(0);
}
复制代码
clip-path为添加动画效果提供了空间,不过它只能在现代浏览器中使用。
visibility 属性可以设置为 visible 或 hidden 来显示和隐藏元素。
div {
visibility: hidden;
}
复制代码
除非使用collapse值,否则元素使用的空间保持不变。
display 可能是最常用的元素隐藏方法; 。当其值为 none 时元素就隐藏了。被隐藏的元素不会在页面中占据位置,也不会响应绑定的监听事件。
div {
display: none;
}
复制代码
然而,在大多数情况下,display 可能是最糟糕的 CSS 属性。除非使用 position:absolute 将元素移出文档流,或者采用contain属性,否则它的隐藏过程无法设置动画,并将触发页面重新布局。
可以通过将元素的 z-index 属性设置为负值,以实现元素的隐藏。这实际上就是将元素放在了我们看不到的层。
div {
z-index: -1;
}
复制代码
position属性允许使用top、bottom、left、right 从页面中的默认位置移动元素。因此,绝对定位的元素可以通过左键:-9999px 等值移出屏幕:
div {
position: absolute;
left: -999px;
}
复制代码
通过在元素的上面放置与背景颜色相同的元素,可以在视觉上隐藏一个元素。下面来使用::after伪元素来实现:
div::after {
position: absolute;
content: '';
top: 0;
bottom: 100%;
left: 0;
right: 0;
background-color: #fff;
}
复制代码
虽然这从技术上讲是可以实现的,但是这样做需要更多的代码。
可以通过使用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 开发中出于多种原因,我们需要隐藏元素。例如,一个按钮应该在移动中可见,而在桌面视口中隐藏。或者,在移动设备上隐藏但要在桌面上显示的导航元素。隐藏元素时有三种不同的状态:
在这篇文章中,我们将学习在html和css中隐藏元素,并涵盖易访问性、动画和隐藏用例等方面,让我们开始吧。
它是一个布尔 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将元素完全隐藏在web页面之外,因此屏幕阅读器无法访问它。一定要避免使用它来隐藏仅用于表示目的的元素。
每个元素都有一个默认的display值,比如inline-block、block、table等等。要隐藏具有display属性的元素,我们应该使用display: none。当一个元素使用display: none隐藏时,它的所有后代都将被删除。
考虑下面的例子:
img {
display: none;
}
@media (min-width: 400px) {
img {
display: block;
}
}
这将完全隐藏文档流和屏幕阅读器中的图像。也许你想知道文档流是什么?请参见下图:
注意,当蓝皮书被隐藏时,它已被完全从堆栈中删除。为它保留的空间已经消失了。同样的概念也适用于在HTML中隐藏元素时。元素的预留空间已经没有了,它更改了文档流,或者在我们的示例中,更改了图书流堆栈。
下面是一个动画,演示当移除书本时发生的情况:
是的,会的。例如,如果<image>被CSS隐藏,并且我们在某个断点处显示它,则它已经被加载。即使图片被CSS隐藏,该图片也会引起HTTP请求。
在下面的演示中,我只添加了一个图像,并使用CSS隐藏它。然后,我打开「DevTools」并检查networks选项卡,它显示图像已加载。
稍后我们将对此进行讨论,以解释如何在特定断点或视口大小中不需要HTTP请求时减少HTTP请求。
值得一提的是,有些元素的默认值是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时,它将对屏幕阅读器完全隐藏。
通过将opacity度设置为0,该元素及其所有后代将被隐藏,并且不会被继承, 但是,它仅从视觉角度隐藏它们。除此之外,opacity值为1以外的元素将创建一个新的堆叠上下文。
在上图中,蓝皮书仅在视觉上隐藏。与使用display: none时发生的情况相比,它的空间仍然保留,并且堆栈顺序没有变化。
img {
opacity: 0;
}
根据最初的示例,如果我们要隐藏不透明的图像,结果将如下所示:
该图像仍然存在,并且已保留其空间。它仅从视觉角度隐藏。
Dusan Milovanovic指出,pointer-events: none | auto可以用来禁用opacity为0的隐藏元素上的鼠标事件。这一点很重要,因为用户可能会对单击、悬停或选择隐藏元素的文本感到困惑。
事例:https://codepen.io/shadeed/pen/4900ddd4a4d324cc531c1980088f775a?editors=1100
一个元素以opacity: 0仍然可以被屏幕阅读器访问,并且可以用键盘进行聚焦。
通过使用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
该元素被隐藏,其后代将从可访问性树中删除,并且屏幕阅读器不会渲染该元素。
要隐藏带有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
屏幕阅读器可访问该元素,并且键盘可聚焦。它只是从视口中隐藏起来。
当在元素上使用clip-path时,它创建一个裁剪区域,该区域定义应该显示和隐藏哪些部分。
在上面的例子中,透明的黑色区域有clip-path。当clip-path应用于元素时,透明黑色区域下的任何内容都不会显示。
为了更直观地演示以上内容,我将使用clippy工具。在下面的GIF中,我有如下的clip-path:
将每个方向的多边形值设置为0 0,则裁剪区域的大小将调整为0。结果,图像将不会显示。同样,这也可以用一个圆来代替多边形:
img {
clip-path: circle(0 at 50% 50%);
}
元素仅在视觉上隐藏, 屏幕阅读器和键盘焦点仍然可以使用它。
事例源码: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属性时,它将从可访问性树中删除该元素,这可以增强屏幕阅读器用户的体验。注意,它并没有在视觉上隐藏元素,它只针对屏幕阅读器用户。
<button>
Menu
<svg aria-hidden="true"><!-- --></svg>
</button>
在上面的例子中,我们有一个带有标签和图标的菜单按钮。为了向屏幕阅读器隐藏图标,添加了aria-hidden。
根据Mozilla Developer Network (MDN),下面是属性的用例
是为屏幕阅读器设计的,因为它只对屏幕阅读器隐藏内容。然而,内容对于有视力的用户仍然是可见的,并且键盘是可聚焦的。
当我们想让一个隐藏的元素动起来时,例如,显示隐藏的移动导航,它需要以一种可访问的方式来完成。为了获得一种可访问的体验,我们将探索一些值得学习的好例子,以及一些不好的例子,以避免犯可能会给屏幕阅读器用户带来不好体验的错误。
#### 菜单动画-不好的例子
我们有一个菜单,在展开时需要有滑动动画。最简单的方法是在菜单中添加以下内容:
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/
*请认真填写需求信息,我们会在24小时内与您取得联系。