Skip to content

Instantly share code, notes, and snippets.

@matthewbeta

matthewbeta/visuallyhidden.css

Forked from sousk/gist:1280108
Last active August 29, 2015 14:25
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save matthewbeta/dea892311c4bcee7f3ef to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save matthewbeta/dea892311c4bcee7f3ef to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. matthewbeta revised this gist Jul 22, 2015. No changes.
  2. matthewbeta revised this gist Jul 17, 2015. 2 changed files with 34 additions and 0 deletions.
    0 visually-hidden.css → visuallyhidden.css
    View file
    File renamed without changes.
    34 changes: 34 additions & 0 deletions visuallyhidden.less
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,34 @@
    // Accessibly hide things

    /* Hide only visually, but have it available for screenreaders: h5bp.com/v */

    .visuallyhidden(){
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    }

    .visuallyhidden(@focusable) when (@focusable){
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    &:active,
    &:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
    }
    }
  3. matthewbeta renamed this gist Jul 17, 2015. 1 changed file with 0 additions and 1 deletion.
    1 change: 0 additions & 1 deletion visually-hidden → visually-hidden.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,3 @@


    /* Hide only visually, but have it available for screenreaders: h5bp.com/v */
    .visuallyhidden {
  4. matthewbeta renamed this gist Jul 17, 2015. 1 changed file with 1 addition and 7 deletions.
    8 changes: 1 addition & 7 deletions gistfile1.css → visually-hidden
    View file
    Original file line number Diff line number Diff line change
    @@ -1,10 +1,4 @@
    .element-invisible {
    position: absolute !important;
    height: 1px; width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
    }


    /* Hide only visually, but have it available for screenreaders: h5bp.com/v */
    .visuallyhidden {
  5. matthewbeta revised this gist Jul 17, 2015. 1 changed file with 20 additions and 2 deletions.
    22 changes: 20 additions & 2 deletions gistfile1.css
    View file
    Original file line number Diff line number Diff line change
    @@ -7,7 +7,25 @@
    }

    /* Hide only visually, but have it available for screenreaders: h5bp.com/v */
    .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
    .visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    }

    /* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
    .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
    .visuallyhidden.focusable:active,
    .visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;

    }
  6. @sousk sousk created this gist Oct 12, 2011.
    13 changes: 13 additions & 0 deletions gistfile1.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,13 @@
    .element-invisible {
    position: absolute !important;
    height: 1px; width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
    }

    /* Hide only visually, but have it available for screenreaders: h5bp.com/v */
    .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

    /* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
    .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }