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.
Related
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).
Consider the following CSS stylesheet:
#start_experiment_button
{
display: inline-block;
color: black;
border: 3px outset gray;
background-color: #CCCCCC;
padding: 8px;
text-decoration: none;
font-family: Arial, Helvetica;
font-weight: bold;
}
#start_experiment_button:hover
{
border: 3px inset gray;
}
#start_experiment_button:active
{
border: 3px inset gray;
}
#start_experiment_button
{
display: none;
}
Notice that the display property of #start_experiment_button is defined twice. Does this serve a purpose? Does the second definition simply over-ride the first, such that the first need not have been written at all? Or do the intervening definitions for hover and active somehow influence when the two display values take effect?
The last rule
#start_experiment_button {
display: none;
}
overrides the first one. Hence the element is not shown at all. Because the element is invisible both :hover and :active are not applied.
Note that as more specific the selector as higher priority the rule has. So if the element was visible the rules defined by the selectors #start_experiment_button:hover and #start_experiment_button:active would have higher priority then the rule defined by #start_experiment_button.
Does the second definition simply over-ride the first, such that the first need not have been written at all?
Yes, and only for the display property. The other properties are unaffected.
Or do the intervening definitions for hover and active somehow influence when the two display values take effect?
No, they don't, because neither of those rules have their own display declarations, and even if they did, those states would be impossible to reach because the element is never rendered.
It's not clear why that last rule exists and why it appears in that spot unguarded by either a media query or a more qualified selector, because with its display: none declaration, it makes all the other three rules redundant by preventing the element from ever being rendered.
Yes it will override..
#start_experiment_button
{
display: none;
}
This code will override your first code, as the code reads from first line to the last while its executed.. hope you got your answer..
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.
I have found the following css declaration in twitter bootstrap (link and source). Basically it declares the following:
background-color: #eee;
background-color: rgba(86,61,124,.15);
border: 1px solid #ddd;
border: 1px solid rgba(86,61,124,.2);
As far as you see - there is a duplicated background color and border. If it would be anywhere else, I would ignore it thinking 'these guys just do not know css'.
But because this is highly used open-source project, done by professionals, I have a pending question: is it really a bug or does it make sense (if so can someone explain to me why someone would use it?).
rgba() color value has been introduced in CSS level 3 specification.
It declares colors in Red-green-blue model including alpha, allowing specification of the opacity of colors.
rgba() is not supported in old web browsers such as IE8, Opera9, ... Thus, developers use a solid color as a fallback.
In this particular instance, the primary declarations treat as fallback for the next ones:
background-color: #eee; /* The Fallback */
background-color: rgba(86,61,124,.15);
border: 1px solid #ddd; /* The Fallback */
border: 1px solid rgba(86,61,124,.2);
If a web browser supports rgba() the second declaration will override the first one. But if the web browser doesn't understand rgba() color, the second declaration will be ignored, Thus the first one will be appled to the element(s).
However there are some alternatives you might want to consider:
Bulletproof, cross-browser RGBA backgrounds, today
CSS Transparency Settings for All Browsers
I am using the following code for border radius:
.box {
width:250px;
height:250px;
background:#ce0000;
border-top-left-radius: 15px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border-top-right-radius: 15px;
behavior:url(images/PIE.htc);
}
It worked fine in IE 9. But it's not working in IE 8. What am I doing wrong?
Per the docs, PIE only supports shorthand border-radius rules:
For all CSS properties which PIE parses, only the shorthand versions of those properties will be recognized. For example, while
border-radius is supported, the individual longhand
border-top-left-radius etc. properties are not.
The reason for this is the same reason URLs are not resolved relative
to the CSS file (see above): PIE does not have visibility into where
each style property comes from. If there is both a shorthand and a
longhand property present, PIE cannot determine the order in which the
CSS author specified those properties, nor can it determine the
specificity of the selector for each property. It cannot therefore
make an informed decision about which property should take precedence.
To avoid making dumb guesses, we have opted to only support shorthand
properties. Shorthand was chosen over longhand to keep file size small
and avoid tedious repetition.
http://css3pie.com/documentation/known-issues/#shorthand
So try changing your CSS to this:
.box {
width:250px;
height:250px;
background:#ce0000;
border-radius : 15px 15px 5px 5px;
behavior:url(images/PIE.htc);
}