I've always used the notation border: 0 none, presumably that means border-width: 0 and border-style: none.
Does anybody else use write it this way? Is it really necessary to declare both style and width for safe removal?
border:none; should achieve the same effect according to the spec.
The border property can be set with the following values:
<line-width> || <line-style> || <color>
When one of these values is omitted its value is set to its initial value. So border:none; will actually have the initial line-width value added:
border: medium none;
However, the line-style value of none will cause the color and width values to be ignored as stated in the CSS Specification:
‘none’
No border. Color and width are ignored (i.e., the border has width 0).
Just having border: none; or border: 0; is enough. You can find more information about the border shorthand here.
Related
In CSS I have found that omitting border-style did not matter when coding as:
input{
/*here border style is not mentioned*/
border-width: 3px;
border-color: red;
}
The border was still appearing in this case. However border would not appear if coded as below:
input{
border: 3px red; /*here border style is not mentioned*/
}
I also tested on w3school editors please see the screen shots with border style removed. Why is border appearing in the 3rd screenshot?
What am I missing?
https://www.w3schools.com/css/tryit.asp?filename=trycss_border-color1
https://imgur.com/xgTVpmN
https://www.w3schools.com/css/tryit.asp?filename=trycss_border
https://imgur.com/b7blLMH
https://www.w3schools.com/css/tryit.asp?filename=trycss_form_focus2
https://imgur.com/1wxD5OG
The input elements have a default border definition so when you overwrite each property like in the first example you still see it because you aren't changing the style but with the shorthand you are overwriting the entire default value, and if you don't set any value for style on the shorthand it will take the initial value of the property that in this case is none.
The border CSS property is a shorthand property for setting all individual border property values at once: border-width, border-style, and border-color. As with all shorthand properties, any individual value that is not specified is set to its corresponding initial value.
&
Note: The default value of border-style is none.
From MDN Source
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?
According to MDN:
The CSS outline property is a shorthand property for setting one or more of the individual outline properties outline-style, outline-width and outline-color in 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:
When the outline is 0, the outline-width is 0px
When the 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).
According to w3schools, the syntax of outline is:
outline: <color> <style> <width>; and either of the three can be missing.
And the value inherit is a valid value of either three, or a single outline: inherit means that it should inherit all three.
I'm asking this because I'm working on property optimizer for a CSS minifier. According to the above link,
outline: inherit none 3px is equivalent to outline: inherit 3px, and
outline: invert inherit 3px is also equivalent to outline: inherit 3px,
but the result seems too ambigous.
So the question is, how do browsers interpret outline: inherit 0px? Do they assign inherit to the color or the style?
It is ignored. This is current browser practice and the intended principle in CSS: for a shorthand notation like outline, the keyword inherit is allowed as a value (making all the sub-properties inherited), but not in conjunction with any other value. The reason is rather obvious: otherwise the value would not have an unambiguous interpretation. In the value inherit 0, the value 0 can only be a value for outline-width, but inherit could be a value for outline-style or outline-color.
The principle is mentioned in an appendix of the CSS 2.1 specification, at C.3.1. In theory, appendix C is an informative description of changes, not normative, and here it does not reflect an actual change. That is, this was goofed up: the intent was described, but normatively CSS 2.1 does not have this principle and would regard outline: inherit 0 as valid (but the W3C CSS Validator rejects it). Cf. to Is this font: shorthand property syntax valid? (My reading of the spec says yes, but half of my installed browsers disagree.) (which deals with the same issue regarding the font shorthand).
If you want all outline properties to be inherited but width set to zero (which would be somewhat odd), you need two declarations
outline: inherit;
outline-width: 0;
It should be noted that w3schools definition for order is not complete. All of the following are valid
outline: <color> <style> <width>
outline: <color> <width> <style>
outline: <width> <style> <color>
outline: <width> <color> <style>
outline: <style> <width> <color>
outline: <style> <color> <width>
Because the ordering doesn't matter. This in turn becomes the reason for outline: inherit none 3px to become invalid, as 3px could signify color as well.
Similarily outline: inherit 0px is equivalent to outline: inherit initial 0px and thus could refer to outline-color: 0px.
I usually put 0 as value when i want to remove something in css. For example:
border: 0;
background: 0;
Is there any difference between 0 and none?
When used with composite styles like border and background, the values will correspond to different properties.
border: 0 will set border-width: 0 while border: none will set border-style: none.
background: 0 will set background-position: 0 while background: none will set background-image: none.
So, there is a difference. In the case of the border, the difference doesn't make any visual difference as both remove the border, but for the background it can make a difference if you also set any other background properties.
Is there a way to set the border-color in CSS to be the same as the text color?
For instance having a class which adds a bottom dotted border, but leaving the color of said border to match the color of the text in much the same way as the color of text-decoration:underline is the color of the text (color property)?
You actually get this behavior for free; it's mentioned in the spec:
If an element's border color is not specified with a border property, user agents must use the value of the element's 'color' property as the computed value for the border color.
So all you have to do is omit the color when using the border shorthand property:
.dotted-underline {
border-bottom: dotted 1px;
}
Or only use the border-style and border-width properties, and not border-color:
.dotted-underline {
border-bottom-style: dotted;
border-bottom-width: 1px;
}
Or, in browsers that support the new CSS3 keyword currentColor, specify that as the value for border-color (useful for overriding existing border-color declarations):
.dotted-underline {
border-bottom-color: currentColor;
border-bottom-style: dotted;
border-bottom-width: 1px;
}
The color that the border takes on will be the same as the text color by default.
This:
border-bottom: 1px dotted currentColor;
From the spec:
currentColor
The value of the ‘color’ property. The computed value of the ‘currentColor’ keyword is the computed value of the ‘color’ property.
If the ‘currentColor’ keyword is set on the ‘color’ property itself,
it is treated as ‘color: inherit’.
See here: http://www.w3.org/TR/css3-color/#currentcolor
(doesn't work in IE8 though)
Update: So, it seems that explicitly setting the color value is not necessary, since the default value already is the value of the color property.
So, this works just fine:
border-bottom: 1px solid;
You will have to set these to be the same color yourself.
If you want your CSS to be more programmatic and DRY, you should use something like LESS. It can save you a lot of work, so you only have to declare that color once.