We have a custom skin (currently being converted for q1) and we also use master pages. To date, we have been placing all the css files in the master page head tag area so that everything is available skin-wise for the content pages.
However, this definitely means we are pulling in a LOT of css files for every page, even if they don't use all those controls on the page.
If we move the css file includes out of the master page and into the content pages (just stick the link right inside the content section - seems to work even though vs complains about it), and if we only pull in the css files we need based on the controls being used on the current page, will this result in enough performance improvement that it's worth doing? Or, do we stick with just linking all telerik css files in the master pages to centralize things?
Thx
However, this definitely means we are pulling in a LOT of css files for every page, even if they don't use all those controls on the page.
If we move the css file includes out of the master page and into the content pages (just stick the link right inside the content section - seems to work even though vs complains about it), and if we only pull in the css files we need based on the controls being used on the current page, will this result in enough performance improvement that it's worth doing? Or, do we stick with just linking all telerik css files in the master pages to centralize things?
Thx
2 Answers, 1 is accepted
0
Hello Kevin,
The dilemma here is whether to do things the easier way or the right way :)
When registering all CSS files in the MasterPage, you should keep in mind that IE is unable to handle more than 32 CSS files.
Adding CSS file references in the content pages (in the <body>) is not standard compliant and generally, does not guarantee that they will work as expected in all scenarios. <style> and <link> tags should be placed only in the <head> of the web page.
If you want to do things the right way, then you should do one of the following:
1) Add a placeholder in your master page, which is located inside the page <head>. In this way you will be able to insert CSS references to their proper place from the content pages.
2) Alternatively, you can register CSS files programmatically in the content pages and add them to the web page header at runtime.
3) Finally, you can consider adding your custom skin to an assembly and register the CSS files with RadStyleSheetManager. In this case you will not have to care about the CSS files' physical location and moreover, RadStyleSheetManager combines all CSS files into one, so that there is only 1 HTTP request:
http://www.telerik.com/community/code-library/aspnet-ajax/general/including-custom-stylesheets-as-webresources-to-radstylesheetmanager.aspx
Concerning your question about the performance benefit - yes, there is a performance improvement if you register fewer CSS files, for two reasons:
1) fewer HTTP requests
2) faster CSS code evaluation and style applying by the browser
Regards,
Dimo
the Telerik team
Check out Telerik Trainer , the state of the art learning tool for Telerik products.
The dilemma here is whether to do things the easier way or the right way :)
When registering all CSS files in the MasterPage, you should keep in mind that IE is unable to handle more than 32 CSS files.
Adding CSS file references in the content pages (in the <body>) is not standard compliant and generally, does not guarantee that they will work as expected in all scenarios. <style> and <link> tags should be placed only in the <head> of the web page.
If you want to do things the right way, then you should do one of the following:
1) Add a placeholder in your master page, which is located inside the page <head>. In this way you will be able to insert CSS references to their proper place from the content pages.
2) Alternatively, you can register CSS files programmatically in the content pages and add them to the web page header at runtime.
3) Finally, you can consider adding your custom skin to an assembly and register the CSS files with RadStyleSheetManager. In this case you will not have to care about the CSS files' physical location and moreover, RadStyleSheetManager combines all CSS files into one, so that there is only 1 HTTP request:
http://www.telerik.com/community/code-library/aspnet-ajax/general/including-custom-stylesheets-as-webresources-to-radstylesheetmanager.aspx
Concerning your question about the performance benefit - yes, there is a performance improvement if you register fewer CSS files, for two reasons:
1) fewer HTTP requests
2) faster CSS code evaluation and style applying by the browser
Regards,
Dimo
the Telerik team
Check out Telerik Trainer , the state of the art learning tool for Telerik products.
0
Kevin
Top achievements
Rank 2
Rank 2
answered on 26 Mar 2009, 03:39 PM
Thanks Dimo. I'm going to look at Option #3. Looks to be the most efficient and the best way to do it.
First, I need to get my custom skin working! Conversion from Q3 2008 to Q1 2009 didn't go seamlessly so seeing what you all can do to help us get it converted.
Thanks will start researching your third option.
First, I need to get my custom skin working! Conversion from Q3 2008 to Q1 2009 didn't go seamlessly so seeing what you all can do to help us get it converted.
Thanks will start researching your third option.