Forum Moderators: open

Message Too Old, No Replies

"hidden" attribute

         

csdude55

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

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



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 }

lucy24

12:18 am on Aug 5, 2018 (gmt 0)

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



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.

csdude55

6:01 am on Aug 5, 2018 (gmt 0)

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



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.