Do CSS files get sent to brower for the browser to render the page, or are CSS files processed server side, with only the HTML page being sent to browser?
CSS is processed client-side by the browser. So yes, it is downloaded by the browser along with HTML, images, Javascript etc.
Yes, the CSS file is sent to the browser to render the page.
This image will help you to understand, where the CSS file gets downloaded to the client browser.
alt text http://www.lokalisointi.org/~magi/itmill/book/polish/book-pl/img/intro/firebug.png
You can use Firefox and the Firebug plugin to check this.
They are sent to browsers, along with JS files and other resources referenced in your HTML page. Of course, browser may never actually request these files (for example, if you disabled images display), but nothing gets applied server-side.
CSS files are sent to the browser as well (unless they are already cached client side)
CSS is processed by the browser, client-side.
Css behaves like html files, they get fetched by the browser and then the browser does all the rendering.
The same thing happens with image files and javascript. That is why you have different behaviors for different browsers, each browser interprets the css files as they want and that's why you have to tune up your css files for IE, Firefox, chrome, opera, etc...
The best way to make your css files work in almost all the browsers (apart from IE6) is writing the css file using the w3c standards, Firefox, Chrome, opera and IE9 are supposed to be W3cCompliant.
Everything is sent to the browser what is supposed to design your page including CSS, HTML, Javascript.
Related
When page of my application is loaded font in some html tags is default one and when you mouse over it, proper font immediately shows. I made a list of things that probably matters:
Position of element doesn't matter, it occurs on absolute and static.
Font of my choice if assigned to body tag so there is no way some stylesheets don't get loaded.
I load fonts via #import from fast.fonts.net. This line of code is almost on the top of my stylesheets, above is only reset.
I load my assets from s3, minified in one file.
It never occurs locally and the only browser that this bug was seen is Chrome.
It is rare bug, maybe 1% of all page refresh, so reproducing when you want to see it is difficult
Once I have seen this issue in bugsnag.com
App is heavy on front-end side
Do you have any ideas how I could fix it?
I discovered that injecting fonts via JS script tag and not css #import works best. After that client stopped reporting me this issue.
It's simple change and the reason why it works must be connected with some Chrome bug.
I've got a project that needs to be able to save; but cannot include server side code to do so.
I've structured the code to make sure that it has no external libraries or CSS files, and can simple press CTRL+S on all browsers, EXCEPT IE, and have the page look just the way it should.
In IE however it just looks like the default page, without any of the changes.
TL;DR: Can you save the computed page in IE (8+ preferably but 9+ is fine too.)
A friend of mine threw a website I made through the tool at http://analyze.websiteoptimization.com/ . When he came back to me, he insisted that my browser was preloading tons of unrelated images on only the homepage of the site.
I came back to him, insisting that YSlow (and other 'network' tabs in browsers) prove that only specifically-displayed images and content gets loaded on the homepage-- nothing else. I insisted that the statistics from that site are only for a complete visiting of the site, and downloading all the required images.
However, he's not convinced, believing that some browsers (i.e. IE) will pre-load that unrelated content regardless. For that reason, he uses a global CSS stylesheet, and then applies changes to individual pages by loading a separate stylesheet.
I thought it was best practice to minimize requests to the server, not to add more, which is why we have CSS sprites. I also thought browsers never load images unless they're needed to display the page.
I don't believe I can accept an answer without healthy discussion.
Am I correct in that the browser's not loading EVERYTHING on every page?
Is the above tool incorrect?
Is the lesson my friend's learning from the tool's results incorrect?
Thanks.
The browser will generally only load what's actually shown in the page. (There may however be exceptions in some exotic browsers, like Opera Mini.)
The WebSiteOptimization tool will only look at what images are referenced in the HTML and in the CSS, not which images are actally used in the page.
When I analyse my own webpage, which has eight different background images that are shown one at a time by random pick, the tool says that all eight images are loaded, just because they are in the CSS. Checking the network traffic in Firebug and IE developer tools shows that they aren't.
According to me
Browsers do load cached images at time but newer updates can check if the image has changed. Also there are permissions which coders can set to allow browser caching or not.
when using yslow or Google page speed which is a better tool try and use control+f5 to refresh your page so the site is forced reloaded without any offline files.
You can also set Brower permissions based on your preferences.
I also want to add a little about your last line a browser will load all images linked in the code even if there css property is hidden.
It always loads thing in the img tags first and then all images in the css code.
It will also process the image request in sequential order ie first come first server
I hope this help.
Is it at all possible to assign css styles to only display in sepcific browsers? I know IE can be but Im meaning safari and google chrome? The problem is I have currently set some CSS styles to my site which looks great in firefox but seems to look totally ugly in safari and chrome and I'd really like to change that if possible
I agree that you probably should fix your CSS and HTML. Chrome and FF should render the same generally.
Make sure your HTML validates.
However, if you are in a pinch -- this script works great: http://rafael.adm.br/css_browser_selector/
Some CSS3 properties are with the prefix -moz, -webkit, -ms. Other than that it's only possible to detect the user browser version, type and then serve the different css sheet accordingly. Remember, a stylesheet does not necessarily have to have a .css extension, so you could write a PHP script that prints out different CSS for different browsers when included.
Wouldn't recommend it, though. You should simply fix your CSS, before relying on browser detection.
Will the browser still download the image?
<img src="/myimage.jpg" style="display:none;" />
Yes, at least according to the Net console in Firebug.
As stated by thethimble, CSS is the presentation layer and affects rendering, not the actual processing of the page.
It wouldn't be outside the realm of possibility for some browsers, especially mobile, to potentially not download this in an attempt to optimize performance.
Yes. The rendering of the image has nothing to do with the downloading of the image.
Edit:
Try using Chrome or Firefox to perform a timing-test of a page's resources. Notice that all images get downloaded. Even ones whose display style is set to none.
Yes.
However, as a sidenote, some browsers won't download images with width and height attributes of 0. Can't find the source now, and just tested Firefox and Safari and they do download it. Must be IE, can anyone test for me? Thanks.
When in doubt, sniff the line, or use a browser specific tool (Firebug for Firefox, Web Inspector for Webkit, etc)
Quirks Mode: images and display: none
When image has display: none or is inside an element with
display:none, the browser may opt not to download the image until the display
is set to another value.
Only Opera downloads the image when you switch the display to block.
All other browsers download it immediately.