Click here to Skip to main content
Click here to Skip to main content
Go to top

A Simple Way to Dynamically Change Style of Web for Each Browser

, 6 Jul 2009
Rate this:
Please Sign up or sign in to vote.
This is a simple ASP.NET web application that can determine how users can view a single page with single content in the many browsers with custom presentation and styling
se.png

Introduction

One of the most popular ways of styling a web application is by using general theme tools in ASP.NET and Visual Studio IDE and building one or more themes for each web pages or web site presentation. Another way is using style sheets without themes; this is the oldest technique which the web developers used before. But ASP.NET serves a new method of styling web application to performing a nice means of presentation of the page. This new tool is using Themes in your pages because the themes have a better feature than classic style sheets.

Background

ASP.NET provides HttpLink class that can be useful for creating a dynamical link tag and then adding them to the header of the page.

Link tag is one of the most useful tags for linking the external resource to the page such as CSS (Cascading Style Sheet) for example:

<HTML>
    <HEAD>
        <TITLE>Welcome To My Web Site</TITLE>
        <LINK href="mystyle.css" type="text/css" rel="Stylesheet" />
    </HEAD>
    <BODY>
       .
       .
       .
    </BODY>
</HTML>

In this example, a CSS file "mystyle.css" is attached to the page statically.
Now, I declare an instance of the HtmlLink class and then fill the attributes of the object and then add this control to the header of the page dynamically.

    protected void Page_Load(object sender, EventArgs e)
    {
        //A link tag to external CSS file
        HtmlLink linkCss = new HtmlLink();

        //Defining attributes and values of the link tag
        linkCss.Attributes.Add("href", "AppStyles/StyleSheet.css");
        linkCss.Attributes.Add("type", "text/css");
        linkCss.Attributes.Add("rel", "Stylesheet");

        //Add HtmlLink instance to the header of the current page
        Page.Header.Controls.Add(linkCss);
    }

Now when the ASP page is loaded, the link tag is dynamically added to the page and style can be rendered.

In this example, I create a CSS file in the directory of the AppStyles and name it to StyleSheet.css and then dynamically create an HTML control (HtmlLink) and define attributes of the link tag and then add them to the header of the page in the load event of the page.

This technique usually works, but sometimes in different browsers with different versions, it can have some problems which are difficult to solve.

Using the Code

The next technique is using the ASP Themes for the pages and solving these types of discord:

    protected void Page_PreInit(object sender, EventArgs e)
    {
        Page.Theme = "MyThemeName";
    }

As you see in this example, using the theme property of the Page is simple and useful. Now I will solve a repugnance of the different browser CSS rendering by using this technique. I make three types of different CSS files in the three themes of the page and then detect users browser and then apply and fit them to the page.

se.png

Now look at the CSS style that is defined just for the Internet Explorer:

body 
{
	background-color:Fuchsia;
	font-family:'Times New Roman';
	font-size:medium;
	font-weight:normal;
	margin:0px;
}
#mainContent
{
	padding-top:10px;
	padding-left:20px;
	padding-bottom:10px;
	background-color:Orange;
}
#header
{
	float:none;
	background-color:Silver;
	font-style:normal;
	font-size:large;
	margin:20px;
	padding:10px;
}
#info
{
	background-color:#fc4322;
	font-size:small;
	float:left;
	color:Black;
	width:500px;
	height:100px;
	padding:10px;
	margin:10px;
}

I will change some of the color values and font sizes and the position of some of the tags to change the face of the page in Internet Explorer. This style sheet is appended to the page when the user request is sent from Internet Explorer browser.

If the browser is Firefox or Chrome, another CSS file will be attached to the page and the view of the page is fully changed.

Thereupon client views your page in different styles with different browsers.

For example, you can see the different body selectors in the CSS files of each theme.

Chrome Style Sheet Example

body 
{
	background-color:White;
	font-family:'Times New Roman';
	font-size:medium;
	font-weight:normal;
	margin:0px;
}

Firefox Style Sheet Example

body 
{
	background-color:Maroon;
	font-family:Tahoma;
	font-size:small;
	font-weight:bold;
	margin:0px;
}

Internet Explorer Style Sheet Example

body 
{
	background-color:Fuchsia;
	font-family:'Times New Roman';
	font-size:medium;
	font-weight:normal;
	margin:0px;
}

You can view the difference between the face of the simple page with single content by using this technique of styling the presentation.

Presentation of Google Chrome Browser

chrome.png

Presentation of Firefox Browser

firefox.png

Presentation of Firefox Browser

ie.png

Therefore ASP.NET must know the browser types of the user client for changing the style of the page. So I write a snippet code for detecting the browser and then append a fit style to the page and then the user can view requester page nicely.

protected void Page_PreInit(object sender, EventArgs e)
    {
        if (Request.Browser.Browser.Equals("Firefox"))
            Page.Theme = "Firefox";
        else if (Request.Browser.Browser.Equals("IE"))
            Page.Theme = "IE";
        else if (Request.Browser.Browser.Equals("AppleMAC-Safari"))
            Page.Theme = "Chrome";
    }

NOTE

You must set the Theme property of the Page in the PreInit Event of each page for which you have to change the style.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

mheidari
Software Developer Atra Inc
Iran (Islamic Republic Of) Iran (Islamic Republic Of)
Software developer and programming with .Net framework tech.
Managing Director of the Atra Inc in Tabriz/Iran that serves some Software Solution's.
Follow on   Twitter

Comments and Discussions

 
QuestionHow to Replace it dynamically using the first HTMLlink method PinmemberMember 1041636620-Nov-13 23:38 
Generalno need to code it, this is already built in since asp.net 2.0 Pinmemberstemu200114-Jul-09 21:43 
GeneralRe: no need to code it, this is already built in since asp.net 2.0 Pinmembermheidari17-Jul-09 23:21 
GeneralMy vote of 5 PinmemberPascal Ganaye6-Jul-09 20:42 
General[Message Deleted] Pinmemberalex_kl4-Jul-09 15:49 
GeneralMy vote of 1 Pinmembertaxexile4-Jul-09 13:09 
GeneralRe: My vote of 1 Pinmembermoh-heidari6-Jul-09 1:40 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web03 | 2.8.140916.1 | Last Updated 6 Jul 2009
Article Copyright 2009 by mheidari
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid