Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Add .visible class #1143

Closed
wants to merge 1 commit into from

6 participants

@simonsmith

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
@AlecRust

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

@necolas
Owner

Why not just remove the visuallyhidden class from the element?

@simonsmith

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;
}
@necolas
Owner

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?

@WraithKenny

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

@drublic
Owner

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 necolas closed this
@interactivellama

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
Commits on Jul 10, 2012
  1. Add .visible class

    simonsmith authored
    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.
This page is out of date. Refresh to see the latest.
Showing with 3 additions and 1 deletion.
  1. +3 −1 css/main.css
View
4 css/main.css
@@ -509,10 +509,12 @@ td {
/*
* Extends the .visuallyhidden class to allow the element to be focusable
* when navigated to via the keyboard: h5bp.com/p
+ * Visible class to allow override
*/
.visuallyhidden.focusable:active,
-.visuallyhidden.focusable:focus {
+.visuallyhidden.focusable:focus,
+.visible {
clip: auto;
height: auto;
margin: 0;
Something went wrong with that request. Please try again.