Welcome to WebmasterWorld Guest from 34.204.171.108

Forum Moderators: open

Message Too Old, No Replies

"hidden" attribute

     
11:28 pm on Aug 4, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month

joined:Mar 15, 2013
posts: 1193
votes: 119


Nobody told me about this one, but apparently there's a "hidden" attribute in HTML5 that works just like display: none:

<div hidden>You can't see this :-P</div>


But apparently it doesn't work with IE < 11.

Anybody know if I can just put this in my CSS and be OK?

hidden { display: none }
12:18 am on Aug 5, 2018 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:15892
votes: 876


Anybody know if I can just put this in my CSS and be OK?
Well, it depends on your precise definition of “OK” doesn’t it. If you just mean “Will it work with all human browsers I am ever likely to meet?” then yes. According to caniuse dot com--with intervening redirect to quirksmode dot org--“display: none” is recognized by MSIE 5.5 (they don't go earlier), which probably conforms to most people’s notion of “OK”.

:: insert obligatory reminder that search engines can (a) see the entire HTML, including things marked as “display: none” or “visibility: hidden” and (b), conversely can see that they are styled to “display: none” (which is one of the reasons they want to see your CSS) ::

Edit: Oh, wait, did you mean can you definite the otherwise-not-recognized element “hidden”? No, you’re safer using a classname, so that would be .hidden rather than hidden. MSIE, unlike some browsers, is also cranky about styling elements whose names it doesn't know.
6:01 am on Aug 5, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month

joined:Mar 15, 2013
posts: 1193
votes: 119


Yeah, that's what I meant... for the most part I use a .hidden class for display: none when I have a placeholder for a menu that I intend to open via ajax, so I'm more concerned with the appearance to the end user than to search engines.

But if I can't hack it to make it work with at least IE9 and 10 then it's no good for me :-/

I read that I can style it using *[hidden] { display: none }, but I'm gonna have to do some testing on that one.