I have read some articles now on the internet and was wondering a bit whether to add the CSS reset file separately or whether to include it in the universal CSS file.
And if you must use it as a separate file, how will the browser know when to implement it?
Have not really gotten a clear answer from all the articles I've read ..
But If we say that we want to use it in a separately stylesheet, how do you do that? Like I have css-reset.css in my html file, how does the browser know when to use it?
The browser loads every declarated stylesheet (in head-section) in it's cache (memory), before the body is loaded, so it knows the css-rules you gave it. The only difference in making a single stylesheet is that it takes only one http-request to load the styles, each time a page is loaded instead of two http-requests if you use two separate stylesheets.
Rounded corner images shouldn't have any effect in your loading time. With that in mind, it also depends on how graphically designed they are as that will make the image file larger.
In my body section are the rounded corners. The white background is CSS. Notice it loads right with the code.
Yes shuma, each image means one more http-request, since it has to be brought on the page through a webserver thus has to be requested. Though CWDESIGN is right as well: the smaller size of the image in kbytes, the faster a page loads.
I would heavily disagree with you there. It is significantly more difficult to use images and a bunch of divs. Border-radius is for the future and shouldn't be necessary in any design. Those using a modern browser will see it, and for the rest of the IE6/7 world, they get a perfectly function website, sans rounded corners.
That's my point. It is not compatible with all versions of IE if one chooses to have rounded corners. If you have IE9, you will see it, if you don't, you will see edges. I think it is easier to use border-radius in code but to deal with compatibility, it is much easier to use images in the end. To be honest, I think all major browsers should have a mandatory update so developers don't have to deal with this.
@cwdesign I have to agree with TheDoc. Rounded corners aren't a functionality improvement, they are purely aesthetic. There is nothing wrong with displaying rounded corners to some and square to others. Why go through the extra work, server requests, and load time to support browsers that probably aren't going to render everything correctly anyway? Using border radius is far simpler than using images. It'll be easier to modify your design in the future should you decide you no longer like rounded corners, plus it's kind of like rewarding your visitors for using a modern browser.
Using rounded corners images for a few boxes wont really slow down a website, I think its still necessary to use them for now, border-radius is great and it will save me a crap load of time in the future, no slicing images, extra divs, background images, it will be a breeze, but clients often want the design to hold true as far down the IE line as possible, lots of large companies still are using ie6 in house. I'm more worried about terrible Javascript slowing down my sites rather than a few rounded corners images at like 600 bytes. Off topic from the original post sorry but I had to pipe in lol.
Exactly @zackw. My rounded corner images load right along with everything else. I agree that border-radius will save you working time down the road but that doesn't necessarily help the fact that when people want their site to look the same in all browsers they won't get that result using border-radius at this point.
Had a nice talk with a webbdev that drives a microblogging site that has about 10,000 users in Sweden. Discussed with him how he got round the edges on his website as well in all browsers.
He said, it does not work in all browsers ..
Then I understod that I got a placebo effect. His design for the site made so that you did not notice the different IE browser.
Then you can make one link to style.css and within that it will drag the others with it a little like a php include. It will keep your code nice and clean in the header too without having to have links to 5 sheets.
Rounded corners should be done with radius now - anyone who has a browser that will not support this feature should not factor in, because they are not needed for functionality. Hopefully if they see it in a browser that actually does support things, and then they can educate themselves.
I see @TheDoc's, @kipperc, and @robskiwarrior's point and its a valid one. The reason I mainly use my rounded corner images, is because of the gradient effect. It would look completely stupid if it had an edge so thats why I won't code the gradient in CSS. But, if you're using solid colors, I would definitely go with border-radius without question like they said.
I have read some articles now on the internet and was wondering a bit
whether to add the CSS reset file separately or whether to include it in the universal CSS file.
And if you must use it as a separate file, how will the browser know when to implement it?
Have not really gotten a clear answer from all the articles I've read ..
Like I have css-reset.css in my html file, how does the browser know when to use it?
The only difference in making a single stylesheet is that it takes only one http-request to load the styles, each time a page is loaded instead of two http-requests if you use two separate stylesheets.
Eclipse: Off-topic: If I use images to make rounded corners, more images more http-request?
or am I wrong?
In my body section are the rounded corners. The white background is CSS. Notice it loads right with the code.
LINK HERE
you can make image sprite and load just one image and make rounded corner's or use border-radius :)
I would heavily disagree with you there. It is significantly more difficult to use images and a bunch of divs. Border-radius is for the future and shouldn't be necessary in any design. Those using a modern browser will see it, and for the rest of the IE6/7 world, they get a perfectly function website, sans rounded corners.
I have to agree with TheDoc. Rounded corners aren't a functionality improvement, they are purely aesthetic. There is nothing wrong with displaying rounded corners to some and square to others. Why go through the extra work, server requests, and load time to support browsers that probably aren't going to render everything correctly anyway? Using border radius is far simpler than using images. It'll be easier to modify your design in the future should you decide you no longer like rounded corners, plus it's kind of like rewarding your visitors for using a modern browser.
I agree that border-radius will save you working time down the road but that doesn't necessarily help the fact that when people want their site to look the same in all browsers they won't get that result using border-radius at this point.
He said, it does not work in all browsers ..
Then I understod that I got a placebo effect.
His design for the site made so that you did not notice the different IE browser.
And I have to agree with @kipperc and @TheDoc.
For example:
style.css
Then you can make one link to style.css and within that it will drag the others with it a little like a php include. It will keep your code nice and clean in the header too without having to have links to 5 sheets.
Rounded corners should be done with radius now - anyone who has a browser that will not support this feature should not factor in, because they are not needed for functionality. Hopefully if they see it in a browser that actually does support things, and then they can educate themselves.
In short I agree with @kipperc and @TheDoc.