What is the purpose of this csslint error and how can I get rid of it?


Tags: css,csslint

Problem :

I added the following CSS code to get rid of the outline that was appearing after click on a link HTML element.
CSS Code:

.window-leveling-btn:focus {
  outline: 0;
}

Afterwards I get the following csslint error message. I don't understand why I shouldn't be doing this or how I should do it correctly.
Error Msg: WARNING: Outlines shouldn't be hidden unless other visual changes are made. Use of outline: none or outline: 0 should be limited to :focus rules. (outline-none)



Solution :

According to the CSSLint page for outline-none:

The focus outline is important for accessibility because it gives a visual indication as to where the focus is on the page. For keyboard-only users, tracking the focus on a web page is impossible without the visual indication given by the focus outline.

Basically, the CSSLint team believes you shouldn't be doing that because it makes it harder for users to navigate the page.

As for suppressing the error, it would depend on the application you're coding in (command line, or a text editor). According to this CSSLint GitHub issue you can turn off the linting for a rule in a comment, which should cover most cases.


    CSS Howto..

    Hide and show when click a button

    how to make 2 fixed-width sidebar div and 1 flexible-width main div?

    Images not showing up in correct spot [closed]

    How can I create this shape in CSS? [closed]

    How can I have floated list items display their bullet in IE7?

    div not showing above text box

    How do I use CSS and JS files within a HTML file being sent with Express?

    How to Make a Pentagram with CSS Border Attributes

    How to overlay/overlap two div's designed with css to look like text bubbles?

    How to read contents of an external script/style?

    How to give option to add css classes/IDs to content to in CMS's WYSIWYG content builder/editor to non-technical client?

    How do I get my links to glow on :hover with CSS3? [duplicate]

    How to check a css propert is supported?

    How to make div disappear when image is placed over it?

    How to style a 3rd-party iFrame [duplicate]

    How use hash tag (“a name”) to go to spot on page but account for a fixed element at top?

    How to check if element contains specific class attribute

    CSS - how to trim text output?

    Web page not responsive: how to use position absolute and relative?

    How to hide the information, just only show when button is clicked html, css. javascript?

    Internet Explorer 10 menu item shows focus outline unexpectedly

    how to prevent shifting when changing border width

    How to animate my header to slide in horizontally from left to page view on load?

    How do I programmatically change the CSS link for HTML files in C#?

    how to select css class attributes from mootools,getStyle()?

    How do I use a pre-defined CSS style for a programmatically drawn TextField?

    How to add links to tabbing order when they're made visible with CSS?

    How to pre-complie css style sheets in rails 2.3?

    Where Can I Learn How To Fit A Website To Fit Many Android Resolutions?

    How to Format text boxes with Css