For what it's worth, display:none; will render the page as if the element
doesn't exist.
visibility:hidden; will render the page with the element still taking up
space on the page, but not visible.
I have not ever used elaborate methods of hiding elements, not that they
don't have a use. Display:none is quite effective.
On Monday, August 3, 2015, Rick Lecoat <li...@sharkattack.co.uk> wrote:
> 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 [css-d@lists.css-discuss.org <javascript:;>]
> 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/
