ASP.NET Server Controls and Browser Capabilities

Article
10/07/2008

Different browsers, and different versions of the same browsers, support different features. ASP.NET server controls will automatically determine the level of browser that has requested the .aspx page and format the HTML it generates correctly for that browser. However, some control features cannot be rendered on older browsers, so it is a good idea to look at the output of your pages on as many browser types as you can to make sure that the pages are presented to all browsers the way you want them to be.

Auto-detection of Browser Types

By default, the ASP.NET page framework determines browser capabilities by reading the user-agent information passed from the browser to the server during a request. (This information is available as the UserAgent property of the HttpRequest object.) The page matches the user-agent information against agent entries in the application, site, or machine configuration (.config) file. When the page finds a match between the current user-agent information and user agents listed in the file, it can read the corresponding browser capabilities, such as whether the browser supports scripting, styles, frames, and so on. Based on these capabilities, the controls on the page render Web controls using either uplevel (CSS-compliant) or downlevel (non-CSS) HTML elements.

Overriding Browser Type Detection

If you want to explicitly control how the page is rendered — instead of relying on automatic browser detection — you can set the page's ClientTarget property. You can do this in the Property window or in HTML view. The property setting is stored as an attribute of the @ Page directive for that page.

The value of the ClientTarget property is an alias for the type of browser you want to render for. By default, the following aliases are available:

ie4 Renders with Internet Explorer 4 capabilities.
ie5 Renders with Internet Explorer 5 capabilities.
uplevel Renders with Internet Explorer 4 capabilities.
downlevel Renders with HTML 3.2 capabilities; that is, no CSS support.

The above aliases are defined in the <clientTarget> element of the machine.config file for the server and map to specific user-agent information. For example, the alias "ie5" is mapped to the user-agent information that is normally returned by Internet Explorer 5.

By specifying "downlevel," you can force the page to render HTML 3.2-compatible elements no matter what browser has requested the page. Similarly, by specifying "ie5," you can force the page to render CSS style attributes even for downlevel browsers.

You can create additional aliases by defining them in the machine.config or Web.config file, which enables you to create custom browser definitions. For more information, see ASP.NET Settings Schema.

Note The page's ClientTarget property allows you to specify how the page is rendered at run time, but it is not used at design time in the Visual Studio Web Forms Designer. To specify a browser type for generating HTML elements, validating HTML, and providing the appropriate HTML choices for statement completion, set the page's targetSchema property.

Client Script

Some functionality of ASP.NET server controls depends on being able to run client script. The client script is automatically generated and sent as part of the page, if the browser is capable of executing script. Even so, some users might have turned off script execution in their browsers, and will therefore not be able to fully use the control's capabilities. For more information, see Client Script in Web Forms Pages.

Uplevel and Downlevel Browser Capabilities

Browsers and client devices are split into two distinctive groups: uplevel and downlevel. These groups define the type of native support a browser or client device offers, and they generally determine the presentation and behavior of a loading page from a Web server.

Browsers and client devices that are considered uplevel usually support at least the following:

ECMAScript (JScript, JavaScript) version 1.2.
HTML version 4.0
The Microsoft Document Object Model (MSDOM)
Cascading style sheets (CSS)

Downlevel browsers and client devices support the following only:

HTML version 3.2

The following server control properties render differently in uplevel and downlevel browsers:

AccessKey will not work on any downlevel browsers for any controls. It is not HTML 4.0 and will only work in Microsoft Internet Explorer 4 or later.
BackColor will work on downlevel browsers only for some controls: Table, Panel, DataGrid, Calendar, and ValidationSummary. It will also work for CheckBoxList, RadioButtonList and DataList if the layout is in a Table. In general, only controls that render as a <table> tag can output a background color in HTML 3.2, whereas almost anything can in HTML 4.0. For controls that render in <span> tags, including Labels, validator controls, and list controls in flow mode, BackColor will work in Internet Explorer 5 or later but not in Internet Explorer 4.
BorderColor will work on downlevel browsers only for the same table-based controls as BackColor. However, it is output as the "bordercolor" attribute, which is not part of the HTML 3.2 standard. Some browsers support this attribute, including Internet Explorer 3.0 and later, but not all browsers do.
BorderStyle will not work on any downlevel browsers. There is no equivalent to it in HTML 3.2.
BorderWidth will only work in controls that render as a <table> (Table, Panel, DataGrid, and Calendar) or as an <img> (Image, AdRotator). BorderWidth will only work on downlevel browsers if specified in Pixels, otherwise it will always be rendered as either border=1 or border=0. Also, BorderWidth only works with table-based controls if GridLines is set to a value other than None. This is because there is no way to specify a border without gridlines in HTML 3.2. For controls that render as <span> tags, including Labels, validator controls, and list controls in flow mode, BorderWidth will work in Internet Explorer 5 or later, but not in Internet Explorer 4.
CssClass will always be rendered as the class attribute, regardless of the browser. Most uplevel browsers recognize the class attribute.
Enabled is used to specify whether a control raises its events and functions. In Internet Explorer 4 or later, setting Enabled to false has the effect of making the control appear unavailable and locked from input, using the "disabled=true" attribute.
Font-Bold, Font-Italic, Font-Strikeout and similar properties are rendered as style attributes for uplevel browsers (for example, Font-Weight for bold and Font-Style for italic) and as independent elements (for example, <b> and <i>) for downlevel browsers.
Font-Size will work on downlevel browsers for all controls only if named font sizes are used (Small, Smaller and so on). In uplevel browsers, this property is rendered as a style attribute; in downlevel browsers, it is rendered as a <font> element.
Font-Overline will not work on any downlevel browser.
ForeColor will work on downlevel browsers for all controls except Image, AdRotator, HyperLink and LinkButton. For downlevel browsers, ForeColor will be rendered in <font> tags.
Height will not work on downlevel browsers for Labels, validator controls, HyperLinks, or LinkButtons. Height will also not work for CheckBoxLists, RadioButtonLists, and DataLists if the layout is set to Flow. Only Pixel and percentage measurements will work. For table-based controls, this is non-standard HTML and will only work in later uplevel browsers.
TabIndex will not work on any downlevel browsers for any controls. It is not HTML 4.0 and will only work in Internet Explorer 4 or later.
ToolTip will not work on any downlevel browsers.
Width will not work on downlevel browsers for Labels, validator controls, HyperLinks, or LinkButtons. Width will also not work for CheckBoxLists, RadioButtonLists and DataLists if the layout is set to Flow. Only Pixel and percentage measurements will work.

Table, Calendar, DataList, DataGrid, RadioButtonList and CheckBoxList

GridLines can only be on or off in HTML 3.2. Any value setting is rendered for both horizontal and vertical grid lines. As mentioned above, if GridLines is set to None, you cannot have a border.

Calendar

ForeColor will be carried through to links displayed by the Calendar control only in uplevel browsers of version 4.0 or later, because it uses a style attribute to assign the link color.