65.9K
CodeProject 正在变化。 阅读更多。
Home

根据不同浏览器动态更改 Web 样式的简单方法

mheidari
starIconstarIconstarIcon
emptyStarIcon
starIcon
emptyStarIcon

3.73/5 (8投票s)

2009年7月4日

CPOL

3分钟阅读

viewsIcon

45958

downloadIcon

781

这是一个简单的 ASP.NET Web 应用程序，可以确定用户如何在多个浏览器中以自定义呈现和样式查看单个页面上的相同内容

se.png

引言

样式化 Web 应用程序最流行的方法之一是使用 ASP.NET 和 Visual Studio IDE 中的通用主题工具，并为每个网页或网站演示文稿构建一个或多个主题。另一种方法是不使用主题的样式表；这是 Web 开发人员以前使用的最古老的技术。 但是，ASP.NET 提供了一种新的 Web 应用程序样式化方法，以实现页面呈现的良好方式。 这个新工具是在您的页面中使用主题，因为主题比经典样式表具有更好的功能。

背景

ASP.NET 提供 HttpLink 类，该类可用于创建动态链接标记，然后将其添加到页面的标头中。

链接标记是将外部资源（例如 CSS（层叠样式表））链接到页面的最有用的标记之一

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

在此示例中，CSS 文件“mystyle.css”被静态附加到页面。
现在，我声明 HtmlLink 类的一个实例，然后填充对象的属性，然后将此控件动态添加到页面的标头中。

    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);
    }

现在，当 ASP 页面加载时，链接标记会动态添加到页面，并且可以呈现样式。

在此示例中，我在 AppStyles 目录中创建一个 CSS 文件，并将其命名为 StyleSheet.css，然后动态创建一个 HTML 控件 (HtmlLink)，并定义链接标记的属性，然后将其添加到页面的加载事件的标头中。

这种技术通常有效，但有时在具有不同版本的不同浏览器中，可能会出现一些难以解决的问题。

Using the Code

下一种技术是使用 ASP 主题来解决这些类型的差异

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

正如您在此示例中看到的，使用 Page 的 theme 属性既简单又实用。现在，我将通过使用此技术来解决不同浏览器 CSS 呈现的反感。我在页面的三个主题中创建了三种不同类型的 CSS 文件，然后检测用户浏览器，然后应用它们并使其适合该页面。

se.png

现在看看专门为 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;
}

我将更改一些颜色值、字体大小以及某些标记的位置，以更改 Internet Explorer 中页面的外观。当用户请求从 Internet Explorer 浏览器发送时，此样式表将附加到页面。

如果浏览器是 Firefox 或 Chrome，则另一个 CSS 文件将附加到页面，并且页面的视图将完全更改。

因此，客户端使用不同的浏览器以不同的样式查看您的页面。

例如，您可以在每个主题的 CSS 文件中看到不同的 body 选择器。

Chrome 样式表示例

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

Firefox 样式表示例

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

Internet Explorer 样式表示例

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

您可以使用这种样式化演示文稿的技术来查看具有单一内容的简单页面的外观差异。

Google Chrome 浏览器的呈现

chrome.png

Firefox 浏览器的呈现

firefox.png

Firefox 浏览器的呈现

ie.png

因此，ASP.NET 必须知道用户客户端的浏览器类型才能更改页面的样式。所以我编写了一段代码来检测浏览器，然后将合适的样式附加到页面，然后用户可以很好地查看请求者页面。

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";
    }

注意

您必须在每个需要更改样式的页面的 PreInit 事件中设置 Page 的 Theme 属性。

© . All rights reserved.