translate

postcss-focus


PostCSS Focus Build Status

PostCSS plugin to add :focus selector to every :hover
for keyboard accessibility.

See also postcss-pseudo-class-enter for more explicit way.

*:focus {
    outline: 0;
}
.button:hover {
    background: red;
}
*:focus {
    outline: 0;
}
.button:hover, .button:focus {
    background: red;
}

If there is a :focus selector, it will be excluded from the processing.

.a:hover, .b:hover {
    outline: 0;
}
.b:focus {
    background: red;
}
.a:hover, .b:hover, .a:focus {
    outline: 0;
}
.b:focus {
    background: red;
}

Usage

postcss([ require('postcss-focus') ])

See PostCSS docs for examples for your environment.

Rating

ABOUT

LESS COMMENTS

MESSAGE REVIEW OK

Ok