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

mheidari

Rate me:

3.73/5 (8 votes)

6 Jul 2009CPOL3 min read

44.2K

749

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

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:

ASP.NET

<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.

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

CSS

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

CSS

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

Firefox Style Sheet Example

CSS

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

Internet Explorer Style Sheet Example

CSS

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

Presentation of Firefox Browser

Presentation of Firefox Browser

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)

Written By

mheidari

Software Developer Atra Inc

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.

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

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

Introduction

Background

Using the Code

Chrome Style Sheet Example

Firefox Style Sheet Example

Internet Explorer Style Sheet Example

Presentation of Google Chrome Browser

Presentation of Firefox Browser

Presentation of Firefox Browser

NOTE

License

Comments and Discussions