I believe you mean display:none; On Monday, August 3, 2015, John D <xfs...@hotmail.com> wrote:
> 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/ > -- Tom Livingston | Senior Front End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com #663399 ______________________________________________________________________ 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/