HTML中的"hidden"属性

hidden属性允许我们隐藏HTML页面中的元素。它以一种非常简单的方式工作:它将CSSdisplay属性设置为none

许多人对此表示担忧,因为我们又一次在标签中混合了样式。公平地说,这是在框架兴起之前的一个时期,人们的思维方式发生了变化,关注点分离变得不再是一个容易争论的问题。也有其他人反对该属性,因为它很容易被CSS覆盖。一个避免隐藏元素意外显示的解决方案是将以下代码段添加到样式表中,以确保它覆盖同一元素上使用的其他规则。

[hidden] {
  display: none !important;
}

关于使用!important声明存在不同意见,一些作者认为它破坏代码规则。后来,在类中使用!important变得更加被接受。

减少使用!important的现代方法是使用CSS级联规则。CSS级联规则通过使用@layer指令实现,允许我们为样式定义特定的层。这使我们能够控制CSS规则的特异性和排序,而无需使用!important。这种方法促进了更易维护和可扩展的代码库,减少了对!important声明的依赖,并使跨不同组件和元素管理样式变得更容易。我们只需将前面的代码段添加到实用层中,并将该层移动到最后。这样我们就可以确保它们的样式具有优先权,而无需使用!important

让我们举个例子,假设我们需要切换元素的显示。我们可以通过使用JavaScript和内联CSS将其display属性设置为none来实现。这是许多人用来立即隐藏元素的常见方法。要再次显示元素,我们可以将display更改回我们想要的任何值。

// 隐藏元素
el.style.display = 'none';

// 通过设置display为另一个值来再次显示元素
el.style.display = 'block';

display设置为除none之外的其他值的问题在于,我们可能正在处理根据媒体大小等不同显示值的元素(例如,blockflex等)。在这种情况下,如果显示类型不匹配,将其设置为特定值可能会引入一些问题。

另一种方法是使用元素的style属性上提供的removeProperty方法,该方法可删除特定的内联样式。

// 通过删除内联声明的属性来再次显示元素
el.style.removeProperty('display');

支持hidden属性的一个论点是它的语义价值。它清楚地表示使用该属性的元素意图隐藏不显示。另一个论点是,我们可以在HTML中隐藏内容而无需使用CSS。因此,我们可以根据需要在元素上添加和删除属性,而无需设置内联样式。

// 隐藏元素
el.hidden = true;
// 我们也可以使用addAttribute
el.setAttribute('hidden', '');

// 显示元素
el.hidden = false;
// 我们也可以使用removeAttribute
el.removeAttribute('hidden');

hidden属性的未来

最初,hidden属性被认为是一个bool属性。如果HTML元素上存在该属性,则该属性无论其值如何都会生效:

<div hidden>此元素将被隐藏</div>
<div hidden="hidden">此元素也被隐藏</div>
<div hidden="false">这个也被隐藏了</div>

规范最近已更改,hidden属性现在是一个枚举属性。这意味着它可以具有特定的命名值。规范中引入的新值是until-found,它触发了一个称为“Until Found”状态的新状态。

如果hidden属性存在但没有值,或者具有除until-found之外的任何值,则其行为将与以前相同。但是,如果值是until-found,则元素将处于“Until Found”状态。在此状态下,元素将隐藏,直到被用户代理找到为止。

隐藏属性的until-found状态

until-found状态是为了解决一个常见问题而创建的。例如,让我们看一下标签页和手风琴。这些用户界面组件包含在某些操作(例如点击按钮)之前无法发现的元素。这使得内容对于屏幕阅读器、搜索引擎和浏览器内置的页面搜索功能都不可用。

与标准的“隐藏”状态不同,后者通过将其display属性设置为none来完全隐藏内容,而“隐藏直到找到”状态使用content-visibility属性来隐藏内容,同时仍然使其可以被搜索引擎、页面搜索功能和链接发现。考虑以下示例(目前仅在ChromeEdge中支持)。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h1>Banana</h1>

    <h2>Index</h2>
    <ul>
    <li><a href="#intro">Introduction</a></li>
        <li><a href="#description">Description</a></li>
        <li><a href="#etymology">Etymology</a></li>
    </ul>

  <div id="intro" hidden="until-found">
    <p>A banana is an elongated, edible fruit – botanically a berry[1][2] – produced by several kinds of large herbaceous flowering plants in the genus Musa.[3] In some countries, bananas used for cooking may be called "plantains", distinguishing them from dessert bananas. The fruit is variable in size, color, and firmness, but is usually elongated and curved, with soft flesh rich in starch covered with a rind, which may be green, yellow, red, purple, or brown when ripe. The fruits grow upward in clusters near the top of the plant. Almost all modern edible seedless (parthenocarp) bananas come from two wild species – Musa acuminata and Musa balbisiana. The scientific names of most cultivated bananas are Musa acuminata, Musa balbisiana, and Musa × paradisiaca for the hybrid Musa acuminata × M. balbisiana, depending on their genomic constitution. The old scientific name for this hybrid, Musa sapientum, is no longer used</p>
  </div>

    <div id="description" hidden="until-found">
        <h2>Description</h2>
        <p>The banana plant is the largest herbaceous flowering plant.[10] All the above-ground parts of a banana plant grow from a structure usually called a "corm".[11] Plants are normally tall and fairly sturdy with a treelike appearance, but what appears to be a trunk is actually a "false stem" or pseudostem. Bananas grow in a wide variety of soils, as long as the soil is at least 60 centimetres (2.0 ft) deep, has good drainage and is not compacted.[12] Banana plants are among the fastest growing of all plants, with daily surface growth rates recorded of 1.4 square metres (15 sq ft) to 1.6 square metres (17 sq ft).[13][14]</p>
    </div>

    <div id="etymology" hidden="until-found">
        <h2>Etymology</h2>
        <p>The word "banana" is thought to be of West African origin, possibly from the Wolof word banaana, and passed into English via Spanish or Portuguese.[34][35]</p>
    </div>

    <button type="button">Reset Display</button>
</body>
</html>
if (!('onbeforematch' in document.body)) {
  const warning = document.createElement('p');
  warning.innerText = `This browser does not support the 'until-found' value for the hidden attribute.`;
  document.body.prepend(warning)
}

const button = document.querySelector('button');

button.addEventListener('click', () => {
        document.querySelectorAll('[id]').forEach((el) => {
            el.setAttribute('hidden', 'until-found');
    })
})

在此示例中,尝试使用浏览器的搜索功能(页面搜索)并键入单词“banana”。在第一个结果被突出显示后,尝试导航到下一个结果将会显示“Introduction”部分。随后,后续部分将按顺序变得可见。请注意,一旦元素被显示,该属性就会被移除,使元素保持可见。单击“重置显示”按钮将再次隐藏部分,使您可以重新尝试该过程。此外,单击任何链接将自动显示相应的部分。

请注意,此示例不依赖JavaScript,除了用于重置显示的功能之外。相反,这种行为纯粹通过HTML实现。随着相应部分的“找到”,隐藏属性将自动从元素中移除,触发它们的可见性。

浏览器支持

目前,此功能可在ChromeEdge中应用。虽然Firefox已表达了将其纳入的意愿,但目前尚无来自Safari的应用迹象。目前,该功能标记为“实验性”,这意味着其功能在未来可能会发生变化。

总结

对隐藏属性的预期增强将对使用浏览器中的页面搜索功能的用户体验产生积极影响和增强。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 157,298评论 4 360
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 66,701评论 1 290
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 107,078评论 0 237
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,687评论 0 202
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,018评论 3 286
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,410评论 1 211
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,729评论 2 310
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,412评论 0 194
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,124评论 1 239
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,379评论 2 242
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,903评论 1 257
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,268评论 2 251
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,894评论 3 233
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,014评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,770评论 0 192
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,435评论 2 269
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,312评论 2 260

推荐阅读更多精彩内容