What is the difference in efficiency between background-color: #BADA55; and background: #BADA55;? I realize it's quite trivial, but is there a difference in how the browser extracts the values of each. Also, on a slightly related note, on CSS3Please I noticed that for linear-gradients they specified them using background-image. Is there any reason not to simply use background?
The spec makes no mention of how browsers should implement parsing of properties, and in particular, shorthand properties. All there is to it is a grammar, and the grammar says nothing about its implementation. How a browser parses a shorthand declaration then, I suspect, is entirely implementation dependent and not easily answered (unless you have the source code, of course).
In fact, the main reason why we have numerous CSS hacks specifically catered to IE is because of how differently (and often poorly) it understands CSS.
Is there any reason not to simply use background?
The answer lies in your previous sentence:
Also, on a slightly related note, on CSS3Please I noticed that for linear-gradients they specified them using background-image.
Indeed; CSS gradients are considered images for use with backgrounds, and are documented in the Image Values module. The individual background property they apply to is background-image.
If you use the shorthand property to specify either only the color or only a gradient, it will use the initial value for the rest of the values. If this difference in used styles matters, then the difference in performance becomes completely out of the question, because it's no longer a fair comparison.
In this example, the second background shorthand declaration will completely override the first one, leaving you with a solid color and no gradient as the initial value of background-image is none:
background: radial-gradient(white, rgba(255, 255, 255, 0)) /* transparent */;
background: /* none */ green;
The purpose of the shorthand notation is to specify values for multiple related properties in a single declaration, so in order for both the gradient and the color to apply, it should be rewritten as:
background: radial-gradient(black, transparent) green;
You're second example should be: background: #BADA55;, but either way is fine and should not be something you need to worry about.
If you are curious how browser parse CSS I can tell you: it depends (ever worked with IE?). For Chrome you can see the source on GitHub and the Firefox source can be found here.
Related
Just run into something surprising. If you do this:
footer::selection {
color: white;
}
...it also removes the browser-default background-color for the highlighted text. It behaves as if you had also set background-color: transparent. (See demo below.)
Question: How can I retain or restore the system default text selection background-colour when setting a custom ::selection color?
(This answer lists various selection background colours used on different systems. But I don't just want to choose one, I want it to just be whatever the default is for the current system.)
Demo:
body {
background: navy;
color: gray;
}
p.custom::selection {
color: white;
}
<p>Regular paragraph</p>
<p class="custom">Paragraph with text color changed in ::selection</p>
This behavior has been codified in the spec, as follows:
The UA must use its own highlight colors for ::selection only when neither color nor background-color has been specified by the author.
(This used to say "should" until last year, when it was changed to "must". There aren't any browsers implementing some version of ::selection that don't already follow this rule anyway.)
System colors are only exposed to CSS as user-defined values (which may or may not be just the system default), and not the system-defined defaults, so can't be known in advance. Therefore, as CBroe implies, this rule is in place to ensure that changing just one doesn't cause it to clash with the user-defined value for the other, causing contrast issues. The actual codification of this rule in the spec is for legacy reasons, but this rationale for browsers behaving like this in the first place is cited in discussions such as this one.
There are a number of standardized as well as non-standard system colors that exist, but the behavior of these varies wildly from browser to browser, and from platform to platform. Attempting to use any of these may have unexpected results, ranging from unexpected colors used, to being ignored by the browser altogether. Plus, as I mentioned, system colors are only exposed as user-defined values anyway. The CSSWG has discussed potential ways to improve this before; here's a recent conversation.
You are encouraged to apply a custom selection background color that complements your custom selection foreground color.
CSS defines currentColor as a color equivalent to an element’s color property. It’s similar to a CSS variable, but on a per-element basis. When currentColor is used as a color value in any CSS property, it computes to whatever is the color value for the element to which it is applied.
So, my question is not whether something currentBackgroundColor exists—I have combed through the CSS Color specification and am fairly confident it does not—but whether it could exist.
Borrowing from the currentColor definition, I presume currentBackgroundColor would be defined as something like:
The value of the ‘background-color’ property. The computed value of the ‘currentBackgroundColor’ keyword is the computed value of the ‘background-color’ property. If the ‘currentBackgroundColor’ keyword is set on the ‘background-color’ property itself, it is treated as ‘background-color: inherit’.
Can anyone point to any implementation issues which I may not be considering?
Can anyone point to any implementation issues which I may not be considering?
Yes. There could be circular dependencies:
* {
background-color: currentColor;
color: currentBackgroundColor;
}
Moreover, currentcolor can be useful because text has a single color. But backgrounds can have additional things like background-images and such, which might counterintuitively leave background-color set to the default of transparent. And then currentBackgroundColor is not much useful.
Yes it could. For example, it would make it very easy to create an section of your text inverted-colour, ie you could swap the foreground and background colours to highlight something.
However, suggesting this as a CSS feature would be fighting against the tide. There used to be a whole bunch of CSS colour keywords, for things like the scrollbar colour, and the standard button colour, and the colours of the 3D shadows on the buttons... but they were all dropped from CSS some time ago.
There are lots of things in CSS that could be useful that aren't in there. Personally I'm more excited about CSS variables. When they become mainstream we are unlikely to be too worried about colour keywords like this
There are certainly many cases where currentBackgroundColor would be very useful.
Alternative techniques I've used are...
CSS Custom Properties (CSS Variables), eg --backgroundColor.
Make use of currentColor to set background-color. This approach is only possible on containers (and specific children) that are not using the foreground colour. Child elements can inherit color and set background-color:currentColor.
I've had luck using the Canvas system color, which is defined as the "background of application content or documents". Just to be safe, I also set the text color to CanvasColor to ensure I'm not accidentally implementing white-on-white or black-on-black.
However, this will not reflect the page's CSS—even body { background-color:purple; }. All it does is key on the system's configuration. It does seem to match the default "dark mode" coloring scheme, which solves my particular problem.
Example implementation:
p { padding:1ex; }
.purple { background-color:rebeccapurple; color:#fff; }
.canvas { background-color:Canvas; color:CanvasText; }
<p class="purple">
This block is white on purple.
<span class="canvas">This sentence uses "Canvas" coloring.</span>
This sentence does not.
</p>
<p>This is normal text.</p>
I'm wondering what happens if a CSS style is supplied for a property which the browser supports, but the style itself isn't supported.
Take for example the following in IE8;
background: url(../path/to/img.png);
background: rgba(0,0,0,0.8);
Does IE8 simply ignore the second style due to it's lack of supported for CSS3 colours?
Thanks :).
Does IE8 simply ignore the second style due to it's lack of supported for CSS3 colours?
The answer is YES, it will completely ignore that value, and hence it won't render any color, it's a common practice to use a fall back with a hex value like
.class_name {
background: #000;
background: rgba(0,0,0,.5);
}
So, when you write the background twice, it's completely valid, the browsers who understand the rgba() will render an opaque background, but the browsers who don't understand rgba() will use #000.
Though, there are various workarounds for that, like, you can use :before or :after, with filter property with a negative z-index, which can be used as an opaque background, or you can do is, use a normal 1x1 px opaque png image only for IE8.
For example
background: url("IMAGE_URL_HERE")\9; /* Targets IE8 and below */
I am reverse engineering a previous employee's work and noticed a number of css classes look like this...
.img-shadow {
float:left;
background: url(../images/shadowAlpha.png) no-repeat bottom right !important;
background: url(../images/shadow.gif) no-repeat bottom right;
}
Can anybody think of a reason for a css class to declare background twice like this (specifically with the !important)?
According to wikipedia, the second background rule is for IE6.
Internet Explorer 6 and below also
have a problem with !important
declarations when the same property of
the same element has another value
specified within the same code block,
without another !important
declaration. This should result in the
second value being overridden by the
first, but IE6 and lower do not honor
this.
It's a cheap PNG fix for IE6. Since IE6 won't recognize the !important tag, it will use the GIF background, while all other browsers will use the PNG.
Older versions of IE will use the last one.
These versions had problems with png transparency.
looks like he's attempting to support browsers that don't handle alpha .png's properly (cough IE6 cough)
When I see the border-top property used by different authors, they all say to use it a different way.
For example, at http://www.w3schools.com/css/pr_border-top.asp it is defined in this order:
width style color
If I define in another way, like color or style first, will I get problems?
I'm assuming you are asking what the problems could be if you don't use the correct order of properties when using a border shorthand tag. Additionally you seem to be thrown of by different definitions of the order of properties.
I'll just be quoting the W3 CSS reference for border shorthands here:
'border'
Value: [ <border-width> || <border-style> || <'border-top-color'> ]
So the only correct way to use border-top shorthand is to 1. set the width, 2. style, 3. color. incorrect
As pointed out by Paul, the double bar "||" means that the properties can appear in any order, so usually browsers don't have a problem no matter what order you throw at them.
However: I usually see definitions in the form of border-top: 1px solid red; - but that might just be "best practice" but doesn't matter in the end.
As moontear mentioned, the CSS 2 spec defines border-top’s accepted values like this:
[ <border-width> || <border-style> || <'border-top-color'> ] | inherit
The double bars mean than width, style and colour may be used in any order. So according to the spec, you shouldn’t get any problems if you use them in a different order.
I’ve never personally seen browsers have any issues with different orders for this property.
You usually won't get a problem: All browsers that I know will interpret your input as best as possible, even if it is not in the correct order.
That said, do stick with the official order. It will avoid problems with other, less lenient clients, parsers, and such.
Netbeans IDE 8+ only shows the color picker if you use this format:
Border: red 1px solid;
Anyone knows how to change the order to:
Border: 1px solid red;