Would both these images be downloaded? Is the browser smart and only downloads the last one? Will it start to download the first one and then cancel it, or will it wait until all css is loaded and then download the last image?
body { background:url(img/bg/bg1.png) }
body { background:url(img/bg/bg2.png) }
Test it out: http://fiddle.jshell.net/8xZNY/show/
And the results:
You overwrite the background property with your second declaration, so no, they aren't downloaded twice. Only the last one is actually used.
I actually didn't know, so I tested it out:
body { background:url(http://placekitten.com/200/300) }
body { background:url(http://placekitten.com/g/200/300) }
It probably depends on the browser, but it seems that at least for Chrome (and logically) it parses the stylesheet first to determine rules that get applied, then downloads the images for applied rules. This means that only the second image gets downloaded (the Network tab confirms this).
EDIT: Same result testing in Firefox
MORE EDIT: Same result even using the style attribute to set the background. It will only download the one with the highest specificity it seems.
CSS is an interpreted language. It will execute line by line until it is finished, so yes -- it will grab both.
Edit:
By nature of an interpreted language, this is how it should work...
It seems though that there are intelligent preproccessors baked into browsers to look for things like this.
Related
For the past two hours I've been trying to figure out a strange behavior when trying to override bootstrap in Django.
At the beginning, without any custom css file, the result was this:
Then I created a custom css file: my_site/css/master.css
.index-jumbotron {
background-color: #006DB0;
}
#main-title {
text-align: center;
color: white;
}
It resulted in this:
So far, so good.
But now, if I change anything on that same file (even when putting !important and taking good care of the specificity system), the result is always the same as the image immediately above.
However, when I indicate my template to point to another file my_site/css/master2.css or css/master.css, indeed the result is as I would have expected:
I can't get my head around this. Do you have any idea? Do you know if the package django-bootstrap3 could have anything to do with that? I installed it in between my two different version of the custom css file.
Looks like a browser caching issue - did you say 'disable cache' in the developer toolbar (network tab) of your browser? This is usually the easiest solution.
Another option is to open the styles file in your browser and hit 'ctrl+r' to force reload of the css file.
If I comment a line ex.
/* background: url(images/header_overlay.png) */
on CSS on page load on browser does this image get downloaded?
What if I let it as it is and include a second CSS that take priority with a second image
background: url(images/header_overlay2.png)
During the load time on user browser does this images downloaded both and then the second get priority? I want to be carefully and precise on css to reduce the page load time. I am interested on big pages where I can't get the fully ideal clean css and css overwrite it's necessary.
It is useless to have commented code in your css. It is not parsed, therefore the image will not be downloaded, but if you have some code which might be useful later, then write some notes to yourself somewhere and remove the commented code. This reduces file size as well, so it is also a micro optimization.
Also, if you have two conflicting rules referring to two different images, then the one with greater priority will take effect and the other will be ignored, therefore only one image from the conflicting two will be extracted.
You can check what image is downloaded in your browser. For instance, with chrome, click inspect element anywhere and in your console click on the network tab and see what images are downloaded. Make sure you clear your cache before such tests.
CSS don't parse commented lines, it's just a text and no image can be inside.
If you see in your dev tools that header_overlay.png was downloaded, probably is define elsewhere.
No- anything within comments is not parsed within the scope of CSS, images within comment wrappers will not be downloaded, nor will it impact any other (uncommented) rules- this can be found in the spec
(...)their contents have no influence on the rendering
When in the Element section, in the right panel, a CSS set of properties is detected twice:
Same CSS file, same line number, I have only one file named commonCSS. It happens for some elements but not for all. What is going on?
EDIT: I tried it with Firefox & Chrome so it's not browser related.
Stupid me: it was called twice in the source... Jeez, this code I'm maintaining is so awfully badly written.
Unsure how to test this but are there any performance gains from loading in a CSS stylesheet via a query with Modernizer.load as oppose to just overwriting the rule with a CSS classname in the same stylesheet.
For example, if a device has touch support then I have a different layout to load, is it faster to do...
{
test: Modernizr.touch,
yep : 'css/touch.css',
nope: 'css/base.css'
}
Or overwrite the styles in the same stylesheet...
.container { width: 50% }
.touch .container { width: 100% }
Seems the difference comes down to the speed of the extra query Vs the weight of having one big CSS file?
you need to understand you have 3 details here.
the call to the server.
the browser time to calculate all your parent style's
the weight of the files.
so the answer is.
if you write the css without the line break's between the property the 1 big file will be more big from the 2 files. and is answer to the weight cause 1 file is better.
if you have whole page to make with .touch class is more calculate to came the file with the classes.
so, what i'm do is to call to server just one time and make one file cause is better to load all style's together and the call to server (the important time value) will be shortly
I think both options are perfectly valid.
If there's a large amount of CSS code specific to touch, then I would say yes, pull them in with Modernizr to avoid the extra burden on non-touch browsers.
However, my preference would be to generally use override styles for this kind of thing.
The reason for this is that with the Modernizr option, you'll be delaying the loading of the touch styles, because it can't do the Modernizr test until the Modernizr script is loaded and ready to run.
So in comparison to being loaded as part of the main page load and being ready for the initial rendering, it is only loaded after page load, and may not be ready straight away.
The result of this could be that the page may be loaded and displayed before the touch styles are loaded. Not ideal.
This isn't to knock Modernizr -- it's a great tool -- but if you can do what you need to without using it, it's generally better.
I have a custom cursor that is using an image. My original code:
cursor:url(../images/drag_mini_bg.png);
I then discovered that Firefox requires you to define a default backup in case the image is not found, and changed it to:
cursor:url(../images/drag_mini_bg.png), default;
This worked for Firefox and Chrome, but not IE. I read that IE uses a different source for the path than other browsers and implemented this solution:
cursor:url(../images/drag_mini_bg.png),url(/images/drag_mini_bg.png),default;
(The second url is relative to the html file rather than the css file that this code is included in.)
This didn't seem to help, so I found out about this bug and changed the image to a .cur file:
cursor:url(../images/drag_mini_bg.cur),url(/images/drag_mini_bg.cur),default;
However, it is still not showing up in IE. Anything else I can try?
Most of what you've read is correct, but I'll make a few amendments:
Firefox does indeed require the additional parameter to be added. My understanding is that the ideal value for this is auto. But if default works for you, use it.
As you've been told, IE can only display cursors of the .cur file type. PNGs and GIFs do not work.
However, I've never heard anything about IE using a different path; the same path has always worked fine for me in all browsers (when using a CUR file, of course). You might want to provide a reference to where you heard this, but I'd suggest that dropping the second URL may solve your problems.
There's a good site called Quirksmode that has a lot of browser compatibility tables. In particular, they have a very thorough table covering CSS cursors, which shows exactly how to format it to make it work in all browsers, with examples and notes about the quirks.
Hope that helps.
If you're still trying to figure this out 8 years later...I'll add that some browsers have a maximum image size, so maybe yours was too big. I believe you want to keep it under 32x32 pixels.