PostCSS Hidden

PostCSS plugin for hiding things.

There are a few things to think about when hiding things via css. Do you want your item hidden completely? Do you want it to be seen by screen readers? Should it be invisible but still take up space? Based on what you need there are three options you can use with this plugin.

1. display: disappear;

Use disappear when you want to remove something completely from the page. This includes hiding the item screen readers and assistive technology. It will do this with display: none !important;.

h1 {
    display: disappear;
}

Will output:

h1 {
    display: none !important;
    visibility: hidden;
}

2. display: hidden;

Use hidden when you want to hide something but keep it available to screen readers and assistive technology. It will not use up space in the document flow.

h2{
    display: hidden;
}

Will output:

h2{
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
}
 
h2.focusable:active,
h2.focusable:focus {
    display: table;
    position: static;
    clear: both;
}

3. display: invisible;

Use invisible when you want to hide something while keeping it available to screen readers and assistive technology along with letting it take up space in the document. The block will only be visually hidden.

h3{
    display: invisible;
}

Will output

h3{
    visibility: hidden;
}

Usage

npm install postcss-hidden --save-dev

Gulp

var postcss = require('gulp-postcss');
var hidden = require('postcss-hidden');
 
gulp.task('css', function () {
    var processors = [
        hidden
    ];
    return gulp.src('./src/*.css')
        .pipe(postcss(processors))
        .pipe(gulp.dest('./dest'));
});