Menu
I was reading this question on disabling the dashed borders around <a> links. Some answers used outline: none, while some used outline: 0
Is there any difference between using outline: none and outline: 0?
222
The WebAIM site underlines and changes the background color for focused links, in addition to maintaining the default outline. In most cases, particularly for text links, it is vital that visual focus indication be provided. The use of outline:0 or outline:none is not recommended.
In conclusion, using outline: none without proper fallbacks makes your site significantly less accessible to any keyboard only user, not only those with reduced vision. Make sure to always give your interactive elements a visible indication of focus.
Assigning outline a value of 0 or none will remove the browser's default focus style. If an element can be interacted with it must have a visible focus indicator. Provide obvious focus styling if the default focus style is removed.
The outline-style property specifies the style of the outline, and can have one of the following values: dotted - Defines a dotted outline. dashed - Defines a dashed outline. solid - Defines a solid outline.
According to MDN:
The CSS
outlineproperty is a shorthand property for setting one or more of the individual outline propertiesoutline-style,outline-widthandoutline-colorin a single declaration
So when you set outline to none or 0, you are actually telling the browser to set 3 properties (outline-style, outline-width and outline-color)
I used Firefox Developer Tools to find out the difference:
As you can see, they both use the default text color as the outline-color, and they both have outline-style set to none. The only difference is the outline-width:
outline is 0, the outline-width is 0px outline is none, the outline-width is medium That is the only difference between the two. You can use either one, they will both display the same way (since the outline-style is none, it does not matter how wide the outline is).
115
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With