I guess it all depends on in which contents you are trying to use but a
simple code such as:
.mystyle {
display: hidden;
}
Will hide the block which has a class called "mystyle" . when you want to
unhide it, you just need to comment it out like this:
.mystyle {
/* display: hidden; */
}
-----Original Message-----
From: Rick Lecoat
Sent: Monday, August 03, 2015 9:14 AM
To: CSS-D list
Subject: [css-d] Rules for making content hidden and visually hidden
For the last few years I've been using a bunch of content visibility rules,
which I think I originally extracted from Andy Clarke's 320-and-up
framework. I'm wondering if the methods that they use are still considered
best practice for achieving the desired goals, and whether anyone has better
rulesets that I could update them with (I've googled, but the results have
not been conclusive). A particular reason for addressing this now is that
two of the classes use !important declarations. I'm increasingly moving to a
modular, SASS-based CSS structure and I'm not comfortable having !important
so early on in the specificity cascade.
Here are the rules I'm using (I'm showing them as classes for simplicity,
but in fact they are SASS mixins and get applied in a variety of ways):
/* hide from visual and speaking browsers */
.hidden {
display : none !important;
visibility : hidden;
}
/* hidden but available to speaking browsers */
.visuallyhidden {
overflow : hidden;
position : absolute;
clip : rect(0 0 0 0);
height : 1px;
width : 1px !important;
margin : -1px;
padding : 0;
border : 0;
}
As you can see each contains an !important declaration, which means that I
need to include a similar declaration in my css whenever I want to 'turn
off' either of the above rules. My two 'reversal' rules are currently as
follows:
.unhidden {
display : block !important;
visibility : visible;
}
.visuallyhiddenoff {
overflow : visible;
position : static;
clip : none;
height : auto;
width : auto !important;
margin : 0;
padding : 0;
border : 0;
}
Negating the .visuallyhidden rule, in particular, feels cumbersome -- too
many rules to 'undo' and I worry that it has too many opportunities to end
up with an unintended result. With this in mind, I'd like to know if anyone
has:
a) an improvement on the .hidden rule, ideally getting rid of the !important
declaration but remaining robust;
b) a less verbose/complex rule for making something visuallyhidden;
or
c) confirmation that these are the best rules and that I should leave them
alone.
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
