Recipe 21.6. Dynamically Creating Browser-Specific Stylesheets

Problem

You need to vary the look and feel of your application pages depending on the platform (Mac or Windows) being used.

Solution

Place an asp:Literal control in the head section of the .aspx file, and then set the text property of the control to an HTML style element created programmatically in the code-behind. Use the properties of the Request.Browser object to determine the platform type and control the generation of the style element.

In the .aspx file, place an asp:Literal control in the head section.

In the code-behind class for the page, use the .NET language of your choice to:

Use the Platform property of the Request.Browser object to obtain the browser's platform.
Check the platform string for the presence of the substring, such as "mac", which indicates whether the browser is running on a Mac platform.
Based on the platform, programmatically create the HTML style element.
Set the Text property of the asp:Literal control in the head section of the .aspx file to the created HTML style elements.

The .aspx file used for this example is shown in Example 21-13. The code-behind is shown in Examples 21-14 (VB) and 21-15 (C#).

Discussion

HTML is not always rendered the same. Different browsers and platforms render the HTML in various ways. This sometimes requires using a different stylesheet as a function of the browser or platform the browser is running on (Windows, Mac, etc.) to get the same visual effect. Refer to the Platform property of the HttpBrowserCapabilities class in the MSDN Library for a complete list of platforms detected.

For instance, the displayed size of a font of a given point size is larger on the Windows platform than on the Mac platform. This is caused by the difference in screen resolution. The Mac platform uses a display resolution of 72 dots/inch (DPI), resulting in 1 point being equivalent to 1 pixel. The Windows platform uses a display resolution of 96 DPI, resulting in 1 point being equivalent to 1 1/3 pixels. To display a font the same size on both platforms, the point size must change as a function of the platform.

Our example programmatically generates a different stylesheet depending on whether the browser is running on a Windows or a Mac platform. It creates a stylesheet in the HTML that has four classes defined for a small, regular, large, and extra-large font. This technique is not new to ASP.NET, but the method of generating the stylesheet dynamically is much easier. Figure 21-3 shows the output of our example on a PC platform. Figure 21-4 shows the output on a Mac platform without generating a stylesheet specific to the Mac (the fonts are smaller than the ones in Figure 21-3). Figure 21-5 shows the output on a Mac platform using a specific stylesheet (the fonts are the same size as the ones in Figure 21-3).

Figure 21-3. Example program output for PC platform

Figure 21-4. Example program output for Mac platform without specific stylesheet

Figure 21-5. Example program output for Mac platform with specific stylesheet

Server controls can be placed almost anywhere in an .aspx file and are not restricted to the body section of the page. In our example, an asp:Literal control is placed in the head section of the .aspx file to provide a mechanism to output a stylesheet in the HTML sent to the browser.

 <head> <title>Dynamically Generating Stylesheet</title> <link rel="Stylesheet" href="css/ASPNetCookbook.css" /> <asp:Literal  runat="server" /> </head>

Any control that returns data when a form is submitted must be within the open and close form elements.

In the Page_Load method of the code-behind, the platform the browser is running on is obtained from the Platform property of the Request.Browser object. The platform name is converted to lowercase to simplify the check for the specific platform.

The platform string is checked for the presence of the substring mac, which indicates the browser is running on a Mac platform.

After determining the platform, four variables are set to indicate the point size to use for the small, regular, large, and extra-large fonts.

Next, a StringBuilder is used to create the HTML style element. The style element includes a class for smallFont, regFont, largeFont, and xLargeFont. Each class contains a font-family style along with a font-size style. The font size is set using the variables described earlier.

Finally, the Text property of the asp:Literal control placed in the head section of the .aspx file is set to the style element.

Here is the resulting style element rendered in the HTML for the Windows platform:

 <style type='text/css'> .smallFont   {font-family: Verdana, Arial, Helvetica, sans-serif; font-size:8pt;} .regFont   {font-family: Verdana, Arial, Helvetica, sans-serif; font-size:10pt;} .largeFont   {font-family: Verdana, Arial, Helvetica, sans-serif; font-size:14pt;} .xLargeFont   {font-family: Verdana, Arial, Helvetica, sans-serif; font-size:18pt;} </style>

Here is the resulting style element rendered in HTML for the Mac platform:

 <style type='text/css'>   .smallFont     {font-family: Verdana, Arial, Helvetica, sans-serif; font-size:11pt;}   .regFont     {font-family: Verdana, Arial, Helvetica, sans-serif; font-size:13pt;}   .largeFont     {font-family: Verdana, Arial, Helvetica, sans-serif; font-size:19pt;}   .xLargeFont     {font-family: Verdana, Arial, Helvetica, sans-serif; font-size:24pt;} </style>

The classes in the stylesheet can be used like any other class that is hardcoded in the HTML or provided in a cascading stylesheet (CSS):

 <table width="90%" align="center" border="0"> <tr> <td align="center" > This is the small font. </td> </tr> <tr> <td align="center" > This is the regular font. </td> </tr> <tr> <td align="center" > This is the large font. </td> </tr> <tr> <td align="center" > This is the extra large font. </td> </tr> </table>

The solution provided in this recipe can be placed in a user control, giving you the ability to reuse the code in all pages of your application. Refer to Chapter 5 for examples of user controls.

An alternate solution to generating the stylesheet programmatically would be to place a link element in the head section and set the href attribute to a different prebuilt cascading stylesheet as a function of the browser and/or platform. This approach will yield better performance because the stylesheet would not be built for each page request.

To implement the alternate solution, place the following link element in the head section of the .aspx file. Add the / at the end to close the element or an exception will be thrown when ASP.NET parses the page.

 <link  runat="server" rel="stylesheet" />

In the Page_Load method of the code-behind, add the href attribute to the linkCSS control setting the value to the required cascading stylesheet. The href attribute must be added using the Add method of the Attributes collection because the generic HTML server control does not have an href property.

 
 check the users platform platform = Request.Browser.Platform.ToLower() 'set font sizes as a function of the platform If (platform.IndexOf("mac") > -1) Then 'platform is a Mac so add Mac CSS linkCSS.Attributes.Add("href", _    "css/Mac.css") Else 'since not a Mac, assume Windows and add Windows CSS '(production app may want to do additional checks if 'required for styles) linkCSS.Attributes.Add("href", _    "css/Windows.css") End If 
 string platform = null; // check the users platform platform = Request.Browser.Platform.ToLower(); // set font sizes as a function of the platform if (platform.IndexOf("mac") > -1) { 
 // platform is a Mac so add Mac CSS linkCSS.Attributes.Add("href",    "css/Mac.css"); } else { // since not a Mac, assume Windows and add Windows CSS // (production app may want to do additional checks if // required for styles) linkCSS.Attributes.Add("href",    "css/Windows.css");  }

The resulting link element for the Windows platform is shown next. An href attribute has been added to the rendered HTML, with the value set to the required cascading stylesheet:

 <link  rel="stylesheet" href="Windows.css"></link>

The code for this alternate example can be placed in a user control to provide easy reuse in all of the pages in your application. Refer to Chapter 5 for examples of user controls.

 <%@ Page Language="VB" AutoEventWireup="false" CodeFile="CH21DynamicallyGeneratingStyleSheetVB.aspx.vb" Inherits="ASPNetCookbook.VBExamples.CH21DynamicallyGeneratingStyleSheetVB" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>Dynamically Generating Stylesheet</title> <link rel="Stylesheet" href="css/ASPNetCookbook.css" /> <asp:Literal  runat="server" /> </head> <body> <form  runat="server"> <div align="center" > <img src="/books/1/505/1/html/2/images/ASPNETCookbookHeading_blue.gif" alt="book"/> </div> <div align="center" > Dynamically Generating A Stylesheet (VB) </div> <br /> <table width="90%" align="center" border="0"> <tr> <td align="center" > This is the small font. </td> </tr> <tr> <td align="center" > This is the regular font. </td> </tr> <tr> <td align="center" > This is the large font. </td> </tr> <tr> <td align="center" > This is the extra large font. </td> </tr> </table> </form> </body> </html>

Example 21-14. Dynamically generated stylesheet code-behind (.vb)

 Option Explicit On Option Strict On Namespace ASPNetCookbook.VBExamples ''' <summary> ''' This class provides the code-behind for  ''' CH21DynamicallyGeneratingStyleSheetVB.aspx  ''' </summary> Partial Class CH21DynamicallyGeneratingStyleSheetVB Inherits System.Web.UI.Page '''*********************************************************************** ''' <summary> ''' This routine provides the event handler for the page load event. It ''' is responsible for initializing the controls on the page. ''' </summary> ''' ''' <param name="sender">Set to the sender of the event</param> ''' <param name="e">Set to the event arguments</param> Private Sub Page_Load(ByVal sender As Object, _   ByVal e As System.EventArgs) Handles Me.Load Const FONT_FAMILY As String = _ "font-family: Verdana, Arial, Helvetica, sans-serif;" Dim platform As String Dim smFontSize As String Dim regFontSize As String Dim largeFontSize As String Dim xLargeFontSize As String Dim styleTag As StringBuilder 'check the users platform platform = Request.Browser.Platform.ToLower() 'set font sizes as a function of the platform If (platform.IndexOf("mac") > -1) Then 'platform is a Mac smFontSize = "11" regFontSize = "13" largeFontSize = "19" xLargeFontSize = "24" Else 'since not a Mac, assume Windows (production app may want to  'do additional checks if required for styles)  smFontSize = "8"  regFontSize = "10"  largeFontSize = "14"  xLargeFontSize = "18" End If 'create style tag styleTag = New StringBuilder("<style type='text/css'>" & _ Environment.NewLine) 'output the smallFont class styleTag.Append(".smallFont {" & FONT_FAMILY & _ " font-size:" & smFontSize & "pt;}" & _ Environment.NewLine) 'output the regFont class styleTag.Append(".regFont {" & FONT_FAMILY & _    " font-size:" & regFontSize & "pt;}" & _    Environment.NewLine) 'output the largeFont class styleTag.Append(".largeFont {" & FONT_FAMILY & _  " font-size:" & largeFontSize & "pt;}" & _  Environment.NewLine) 'output the xLargeFont class styleTag.Append(".xLargeFont {" & FONT_FAMILY & _   " font-size:" & xLargeFontSize & "pt;}" & _   Environment.NewLine) 'close the style tag styleTag.Append("</style>" & Environment.NewLine) 'set literal in Head section to output style sheet litStylesheet.Text = styleTag.ToString() End Sub 'Page_Load End Class 'CH21DynamicallyGeneratingStyleSheetVB End Namespace

Example 21-15. Dynamically generated stylesheet code-behind (.cs)

 using System; using System.Text; namespace ASPNetCookbook.CSExamples { /// <summary> /// This class provides the code-behind for  /// CH21DynamicallyGeneratingStyleSheetCS.aspx  /// </summary> public partial class CH21DynamicallyGeneratingStyleSheetCS : System.Web.UI.Page { ///*********************************************************************** /// <summary> /// This routine provides the event handler for the page load event. /// It is responsible for initializing the controls on the page. /// </summary> /// /// <param name="sender">Set to the sender of the event</param> /// <param name="e">Set to the event arguments</param> protected void Page_Load(object sender, EventArgs e) { const string FONT_FAMILY =    "font-family: Verdana, Arial, Helvetica, sans-serif;"; string platform = null; string smFontSize = null; string regFontSize = null; string largeFontSize = null; string xLargeFontSize = null; StringBuilder styleTag = null; // check the users platform platform = Request.Browser.Platform.ToLower(); // set font sizes as a function of the platform if (platform.IndexOf("mac") > -1) { // platform is a Mac smFontSize = "11"; regFontSize = "13"; largeFontSize = "19"; xLargeFontSize = "24"; } else { // since not a Mac, assume Windows (production app may want to // do additional checks if required for styles) smFontSize = "8"; regFontSize = "10"; largeFontSize = "14"; xLargeFontSize = "18"; } // create style tag styleTag = new StringBuilder("<style type='text/css'>" + Environment.NewLine); // output the smallFont class styleTag.Append(".smallFont {" + FONT_FAMILY + " font-size:" + smFontSize + "pt;}" + Environment.NewLine); // output the regFont class styleTag.Append(".regFont {" + FONT_FAMILY + " font-size:" + regFontSize + "pt;}" + Environment.NewLine); // output the largeFont class styleTag.Append(".largeFont {" + FONT_FAMILY + " font-size:" + largeFontSize + "pt;}" + Environment.NewLine); // output the xLargeFont class styleTag.Append(".xLargeFont {" + FONT_FAMILY + " font-size:" + xLargeFontSize + "pt;}" + Environment.NewLine); // close the style tag styleTag.Append("</style>" + Environment.NewLine); // set literal in Head section to output style sheet litStylesheet.Text = styleTag.ToString(); } // Page_Load } // CH21DynamicallyGeneratingStyleSheetCS }