This isn't possible using pure responsive styling and only the open
attribute.
But you can use media queries and other CSS styling to hide the element when the screen has the width you want. See: http://css-tricks.com/logic-in-media-queries/
سؤال
I'm refactoring my site to use the HTML5 details
tag, as described here, in order to improve accessibility.
This is my question: I know that I can add the "open"
attribute to the details
tag to ensure that the contents are displayed by default:
<details open>
<summary>Show/Hide me</summary>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</details>
But is there a way I can set this responsively in CSS, so that the open
attribute is automatically applied for pages with a width greater than 640px, and automatically removed for pages with a width below 640px?
Update: To be clear, I know I can do it with other CSS styling. I'm interested in understanding whether it's possible to do this with only the open
attribute.
المحلول
This isn't possible using pure responsive styling and only the open
attribute.
But you can use media queries and other CSS styling to hide the element when the screen has the width you want. See: http://css-tricks.com/logic-in-media-queries/