css - 在 CSS 术语中，在 <details> 标签上设置 "open"实际上有什么作用？

Question

我正在升级我的网站以使用 <details>标签，用于可访问性目的。

我的问题是这样的。在 <details> 上设置“打开”属性时标签，如下:

<details open>  
    <summary>more info</summary>  
    <ul>        
        <li>blah</li>        
    </ul>
</details>

关于 <ul> 的 CSS 术语有什么不同吗？标签？好像有display: block设置是否可见。

我正在尝试编写前端测试来检查 <ul>单击元素时变得可见，我不确定如何在 CSS 中没有实际不同的情况下执行此操作。

JSFiddle 在这里:http://jsfiddle.net/6x2Kc/

Answer 1

就如何检测可见性而言，Mathijs Flietstra 的回答似乎符合要求。

关于 CSS 实际做什么的更广泛的问题，HTML5 规范在这里有话要说:http://www.w3.org/html/wg/drafts/html/master/rendering.html#the-details-element-0

它说:

... the [details] element is expected to render as a 'block' box with its 'padding-left' property set to '40px' for left-to-right elements (LTR-specific) and with its 'padding-right' property set to '40px' for right-to-left elements. The element's shadow tree is expected to take the element's first child summary element, if any, and place it in a first 'block' box container, and then take the element's remaining descendants, if any, and place them in a second 'block' box container.

The first container is expected to contain at least one line box, and that line box is expected to contain a disclosure widget (typically a triangle), horizontally positioned within the left padding of the details element. That widget is expected to allow the user to request that the details be shown or hidden.

The second container is expected to have its 'overflow' property set to 'hidden'. When the details element does not have an open attribute, this second container is expected to be removed from the rendering.

换句话说，摘要元素以外的细节元素的内容被放入一个匿名 block 框。 (这有点类似于如果你制作一个元素 display:table-cell 然后它会被包裹在匿名框中，用于 table-row，table-row-group 和 table。)就是这个隐藏或显示的匿名框(及其内容)，这就是为什么您看不到您选择的任何元素的 CSS 指定值发生变化，只能看到计算值。

不过要提醒一句。我们对细节元素的实现还不多，上面的规范文本也没有要求浏览器那样做，它只是说“期望”，所以其他浏览器可能会选择通过其他方式实现效果.我们只能等待找出答案。