Add .visible class #1143

Closed
wants to merge 1 commit into
from

Conversation

Projects
None yet
6 participants

Often it is necessary to show an element that was hidden with .visuallyhidden - Useful
in situations where JS is hiding/showing an element and the display property is not favourable.

simonsmith Add .visible class
Often it is necessary to show an element that was hidden with .visuallyhidden - Useful
in situations where JS is hiding/showing an element and the display property is not favourable.
7e883aa
Contributor

AlecRust commented Jul 10, 2012

I certainly agree with this, surprised there isn't a class to undo .visuallyhidden already.

Owner

necolas commented Jul 10, 2012

Why not just remove the visuallyhidden class from the element?

Not easy with responsive design. An element may want to be hidden at a smaller size and visible at a larger. Doesn't make sense to have a visuallyhidden class in the HTML for this.

Particularly evident with something like LESS where you can just use the class in the .less file

.element {
    .visible;
}
Owner

necolas commented Jul 11, 2012

An element may want to be hidden at a smaller size and visible at a larger.

A simple visible class isn't going to help with that.

Doesn't make sense to have a visuallyhidden class in the HTML for this.

Then why have a visible class too?

Contributor

WraithKenny commented Jul 13, 2012

Set your less cascade in your responsive file not use visually hidden.

Owner

drublic commented Jul 21, 2012

I don't think adding a visible-class to the default styles solves this case properly. As @necolas suggested I'd rather remove visuallyhidden instead of adding yet another class to the markup.

In my own styles I often use a class is-shown or current to apply certain styles to an element to show it. When using visuallyhidden I really want this element to be hidden (all the time) mostly.

What abut the relevance of visuallyhidden? Combined with focusable we clearly have a good use-case for visuallyhidden: keyboard-access for certain links (like skip-link) which improves accessibility.

necolas closed this Jul 29, 2012

I know this issue is closed, but I use a .visuallyshown class, also and wanted to post my solution for what I think was the original request.

I don't insert the class into the HTML markup (this request has nothing to do with HTML markup, but CSS only). It's added to the element's "semantic class" via a CSS preprocessor. One typical use case for me is form labels. For instance, if you want to hide the labels for mobile users (I know many UX people probably don't like this). You call a .visuallyhidden in the mobile layout (Mobile first, that is!) and a .visuallyshown in the tablet/desktop media query.

For this to work properly though, I think you'd have to change the original .visuallyhidden class, because you can't "reset" all the attributes in the current .visuallyhiden class (width, margin, padding...) to what they were before the .visuallyhiden was mixed-in in the cascade--that is padding: auto isn't going to return it to what it was before .visuallyhidden was applied in the media queries.

Therefore, I just clip and absolute position and reset those back within .visuallyshown

/* Hide only visually, but have it available for screenreaders */
.visuallyhidden {
    clip: rect(0 0 0 0);
    overflow: hidden;
    position: absolute;
}

/* Override visuallyhidden */
.visuallyshown {
    position: static;
    clip: auto;
    overflow: auto;
}

Mobile (Small screen) First / LessCSS / Media Query Example:

@desktop: ~"screen and (min-width: 992px)";

label {
    .visuallyhidden; /* small screen layout */

    @media @desktop {   
        .visuallyshown;
    }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment