On 4 Aug 2015, at 02:04, John D <xfs...@hotmail.com> wrote:
> .mystyle {
> display: none;
> }
>
> 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: none; */
> }
(For clarity, I've updated the above-quoted text from 'display: hidden' as per
earlier posts in this thread).
John: In this case I'm talking about *overriding* a rule later on (rather than
simply commenting it out in the first instance). Although I realise that I
didn't specify in my original post, I'm working in a responsive context so
elements that might be hidden at one breakpoint may need to be made visible
again at a later breakpoint. Hence the need to override, and another reason to
avoid !important where possible.
On 4 Aug 2015, at 02:04, Tom Livingstone <tom...@gmail.com> wrote:
> 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.
Tom: yes, I actually have an extra mixin/class called .invisible which is a
simple 'visibility: hidden' declaration. I didn't mention it because it's not
one of the 'problematic' ones -- ie. it's not complicated, nor does it include
the !important declaration. It's worth noting however that visibility: hidden
also hides the content from screen readers, so it should be used with care,
just like display: none.
No doubt the 'visibility: hidden !important' line in my .hidden rule is
included to cover some edge cases (as I say, these classes were cribbed
originally from 320-and-up) but I can no longer find a reference to what that
edge case might be, so I'm unsure whether I can remove it with impunity.
> I have not ever used elaborate methods of hiding elements, not that they
> don't have a use. Display:none is quite effective.
It is, unless you want to hide content from sighted users whilst still making
it available to assistive technologies. Examples: a 'Search' label beside a
search field, or 'skip to main content' links.
Thanks, both, for your input on this.
--
Rick Lecoat
Designer. Coder. Writer. Curmudgeon.
______________________________________________________________________
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/
