ASP.NET Web Server Controls and Browser Capabilities
Different browsers, and different versions of the same browser, support different features. ASP.NET server controls will automatically determine the browser that has requested the page and render the appropriate markup 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.
Autodetection 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 configuration files and browser definition files.
.gif "Note") Note |
|---|
The browserCaps Element (ASP.NET Settings Schema) section of configuration files (.config) has been deprecated in the .NET Framework version 2.0. For backward compatibility, the configuration settings in this section are still effective if they are set at the application level, but are merged with the information contained in browser definition files (.browser) located in the machine-level %SystemRoot%\Microsoft.NET\Framework\versionNumber\CONFIG\Browsers folder and any existing application-level App_Browser folders. For more information, see Browser Definition File Schema (browsers Element). |
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 appropriate markup, such as XHTML, HTML 3.2, and so on. If ASP.NET is rendering HTML, it can determine whether to render recent (cascading style sheet-compliant) or earlier (non-CSS-compliant) versions of HTML elements. For older browsers, ASP.NET renders formatting information using tags (for example, a <font> tag) rather than using CSS styles.
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 set the property declaratively as an attribute of the @ Page directive for that page, or you can set it programmatically.
The value of the ClientTarget property is an alias for the type of browser you want to render the page for. For example, to force the page to render for Microsoft Internet Explorer 6.0, you can use the alias uplevel. The alias must be defined in the clientTarget Element (ASP.NET Settings Schema) section of the configuration file. The predefined defaults are ie5, ie4, uplevel, and downlevel.
By specifying the alias downlevel, you can force the page to render HTML 3.2-compatible elements no matter what browser has requested the page. Similarly, by specifying uplevel, you can force the page to render CSS style attributes even for older browser versions.
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 Configuration Settings.
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 ASP.NET Web Pages.
"Uplevel" and "Downlevel" Browser Capabilities
Browsers for desktop computers are split into two distinctive groups: "uplevel" (newer versions) and "downlevel" (earlier versions). 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 server control properties listed in the following table render differently in uplevel and downlevel browsers.
| Server control property | Rendering behavior in uplevel and downlevel browsers |
|---|---|
AccessKey |
This property does not work on any downlevel browsers for any controls. It is not HTML 4.0 and works only in Internet Explorer 4.0 or later. |
BackColor |
This property works on downlevel browsers for only certain controls: Table, Panel, GridView, Calendar, and ValidationSummary. It also works for CheckBoxList, RadioButtonList, and DataList if the layout is in a Table control. 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 Label controls, validator controls, and list controls in Flow mode, BackColor works in Internet Explorer 5 or later but not in Internet Explorer 4.0. |
BorderColor |
This property works 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 |
This property does not work on any downlevel browsers. There is no equivalent to it in HTML 3.2. |
BorderWidth |
This property works only in controls that render as an HTML <table> element (Table, Panel, GridView, and Calendar) or as an <img> element (Image, AdRotator). BorderWidth only works on downlevel browsers if specified in pixels; otherwise, it is always 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 Label controls, validator controls, and list controls in Flow mode, BorderWidth works in Internet Explorer 5 or later, but not in Internet Explorer 4.0. |
CssClass |
This property is always rendered as the class attribute, regardless of the browser. Most uplevel browsers recognize the class attribute. |
Enabled |
This property is used to specify whether a control raises its events and functions. In Internet Explorer 4.0 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 |
These 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 |
This property works 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 |
This property does not work on any downlevel browser. |
ForeColor |
This property works on downlevel browsers for all controls except Image, AdRotator, HyperLink, and LinkButton. For downlevel browsers, ForeColor is rendered in <font> tags. |
Height |
This property does not work on downlevel browsers for Label controls, validator controls, HyperLink controls, or LinkButton controls. Height also does not work for CheckBoxList, RadioButtonList, and DataList controls if the layout for those controls is set to Flow. Only pixel and percentage measurements work. For table-based controls, height on inner tables is not rendered for downlevel browsers because the Height attribute has been deprecated in HTML 4.01. This results in a slightly different appearance between the uplevel and downlevel rendering. The most obvious difference will be if BackColor is set on the SideBarStyle property: in uplevel the BackColor appears to be the entire length of that column and in downlevel browsers it will only be as long as required to accommodate the text buttons. |
TabIndex |
This property does not work on any downlevel browsers for any controls. It is not HTML 4.0 and only works in Internet Explorer 4.0 or later. |
ToolTip |
This property does not work on any downlevel browsers. |
Width |
This property does not work on downlevel browsers for Label, HyperLink, LinkButton, or validator controls. Width also does not work for CheckBoxList, RadioButtonList, and DataList controls if the layout is set to Flow. Only pixel and percentage measurements work. |
See Also
Tasks
How to: Detect Browser Types in ASP.NET Web Pages
Walkthrough: Developing and Using a Custom Server Control
Reference
clientTarget Element (ASP.NET Settings Schema)
ClientTarget
HttpBrowserCapabilities
Browser
UserAgent
WebControl
Other Resources
Programming ASP.NET Web Pages
Developing Custom ASP.NET Server Controls