Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What does mean [hidden] { ... } class in css?

Tags:

css

hidden

I've found such code in html5boilerplate:

/**
 * Address styling not present in IE 7/8/9, Firefox 3, and Safari 4.
 * Known issue: no IE 6 support.
 */

[hidden] {
  display: none;
}

What address? What does it affect? Elements with attribute hidden like following example?

<div hidden></div>
like image 244
avasin Avatar asked Sep 01 '25 10:09

avasin


1 Answers

Yes, exactly like your example. The selector will match any element with a hidden attribute (there's an implied universal selector before the attribute selector).

The hidden attribute is a new addition to the HTML specification, and is therefore not supported in older browsers. By adding that rule to your stylesheet, you effectively polyfill the native behaviour of that attribute (which is, fairly obviously, to hide the element, similar to setting display: none).

The "known issue" in IE6 is caused by the fact that it doesn't support attribute selectors.

like image 192
James Allardice Avatar answered Sep 02 '25 23:09

James Allardice