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.
Thanks.
Rick
______________________________________________________________________
css-discuss [[email protected]]
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/
