CODEWITHSUNDEEP
csshidden
avasin
avasin

Reputation: 9736

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

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>

Upvotes: 3

Views: 1138

Answers (3)

Day
Day

Reputation: 349

You can also create your own attributes using the prefix "data-". For example Jquery Mobile uses it.

Example :

Your HTML

<div data-role="header" data-position="top">
   // content here
</div>

Your CSS

[data-role=header] 
{
     font-family:arial;
     font-size:20px;
}

[data-position=top]
{
     top:5px;
}

A good explanation is available here.

The W3C documentation

Upvotes: 2

James Allardice
James Allardice

Reputation: 166021

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.

Upvotes: 5

Hanky Panky
Hanky Panky

Reputation: 46900

hidden is an attribute in HTML5

Read Detailed description here. Also read a good explanation here

The comment would seem to suggest that that CSS solution is to address those browsers which are not compatible with the new hidden behavior by default

Upvotes: 3

Related Questions