Bulletproof HTML5 <details> 使用 jQuery 回退

当前位置：主页 > 学无止境 > WEB前端 > HTML >

Vue React JavaScript Angular CSS HTML

Bulletproof HTML5 <details> 使用 jQuery 回退

作者：迹忆客最近更新：2023/01/11 浏览次数：

HTML5 <details> 元素目前不受 Chrome 12 及更高版本原生支持的任何浏览器的原生支持。这使得猜测这个新元素的确切行为有点困难，但阅读规范给了我们一个很好的主意。清楚的是：

details 元素表示一个公开小部件，用户可以从中获取其他信息或控件。

默认情况下隐藏此信息。可以通过将布尔 open 属性添加到 <details> 元素来使其可见。之后，用户可以通过单击 <summary> 来切换可见性。

summary 元素表示 summary 元素的父 details 元素（如果有）的其余内容的摘要、标题或图例。如果没有子摘要元素，用户代理应该提供自己的图例（例如“详细信息”）。

请注意 ，虽然规范描述了在 <summary> 元素被省略的情况下应该发生什么，但这样做仍然无效。

在我看来，summary元素也应该可以通过键盘访问。我们应该能够浏览所有不同的交互元素（例如链接、按钮、表单元素），然后猜猜是什么—— summary 就是其中之一。用键盘聚焦后，只需按 Enter 或 Space 即可切换 <details> 元素内容的可见性。不过，HTML 规范没有说明任何关于此事的内容。

请注意 ，细节已包含在 HTML5 中，因为它是网站和应用程序的常见行为——如此常见，应该可以做到这一点，而无需额外的脚本来使整个事情正常进行。然而，HTML5 仍在进行中。 <details> 元素甚至还没有实现。与此同时，在使用不（完全）支持跨浏览器的新功能时，提供回退/polyfill 很重要。

CSS、JavaScript 和 jQuery 助你一臂之力

幸运的是，使用 CSS、（纯）JavaScript 和 jQuery 的组合，很容易使 <details> 跨浏览器工作。

使用 JavaScript 检测本机

支持

首先，如果启用了 JavaScript 并且浏览器本身不支持 <details>，让我们将 class="no-details" 添加到 html 元素。这将允许我们专门为实际执行脚本的场合编写 CSS。添加类可以通过多种方式完成，但我更喜欢的一种是将以下代码片段放在 <head> 中：

<script>
    // Don’t use this! See note below.
    if (!('open' in document.createElement('details'))) {
         document.documentElement.className += ' no-details';
    }
</script>

更新 ：Chrome 10 可以识别 <details> 元素的 open 属性，尽管它还不支持正确渲染该元素。这意味着上述特征检测方法已经变得不可靠了。我现在为 <details>/<summary> 支持创建了一个更强大的功能测试：

var isDetailsSupported = (function(doc) {
    var el = doc.createElement('details');
    var fake;
    var root;
    var diff;
    if (!('open' in el)) {
        return false;
    }
    root = doc.body || (function() {
        var de = doc.documentElement;
        fake = true;
        return de.insertBefore(doc.createElement('body'), de.firstElementChild || de.firstChild);
    }());
    el.innerHTML = '<summary>a</summary>b';
    el.style.display = 'block';
    root.appendChild(el);
    diff = el.offsetHeight;
    el.open = true;
    diff = diff != el.offsetHeight;
    root.removeChild(el);
    if (fake) {
        root.parentNode.removeChild(root);
    }
    return diff;
}(document));

所以在那之后，我们可以做类似的事情：

<script>
    if (!isDetailsSupported) {
        document.documentElement.className += ' no-details';
    }
</script>

请注意，Modernizr 目前未检测到 <details> 支持。我相信它很快就会被包括在内。更新：我对 <details> 的特性测试现在包含在 Modernizr 存储库中。

添加一些基本样式

现在我们可以为 details 元素及其子元素添加一些基本样式。

/* Default browser styles for <details> and <summary> */
details { display: block; }
summary { display: list-item; }

/* The following styles will only get applied if JavaScript is enabled and <details> is not natively supported */

/* Add focus styles (for keyboard accessibility) */
.no-details summary:hover, .no-details summary:focus { background: #ddd; }

/* The following styles are not really needed, since the jQuery script takes care of hiding/displaying the elements. */
/* However, we’re still gonna use CSS as well to prevent FOUC in browsers that understand these selectors. */
/* Remember: by default (and probably most of the time), the contents of the <details> element are hidden. */

/* Hide all direct descendants of every <details> element */
/* Note that IE6 doesn’t support the child selector; we’ll work around that using jQuery later */
.no-details details > * { display: none; }

/* Make sure summary remains visible */
.no-details details summary { display: list-item; }

/* Apply a pointer cursor upon hover to indicate it’s a clickable element. These styles can be applied regardless of whether the fallback is needed */
summary { cursor: pointer; }

jQuery 魔法

有一个 jQuery 插件，可以很容易地在尚不支持这些元素的浏览器中模拟 <details>/<summary>。查看 GitHub 上的代码。

在包含 jQuery 和插件之后，你可以写这样的东西来模拟 <details>/<summary> 必要的地方：

$('details').details();

功能测试的结果存储在 $.fn.details.support 中，如果浏览器本身支持 <details> 和 <summary> 则为真，否则为假：

// Conditionally add a classname to the `<html>` element, based on native support
$('html').addClass($.fn.details.support ? 'details' : 'no-details');

该插件还将添加适当的 ARIA 注释以获得最佳可访问性。即使在本机支持 <details> 的浏览器中也会这样做，以防万一。

上一篇：HTML5 使用的三个层次

下一篇：HTML5 document.head DOM 树访问器

转载请发邮件至 1244347461@qq.com 进行申请，经作者同意之后，转载请以链接形式注明出处

本文地址：

迹忆客专注技术分享