如何检测用户的浏览器并应用特定的 CSS 文件？

发布于 2024-10-31 17:11:46 字数 299 浏览 4 评论 0原文

我需要检测浏览器并应用匹配的 CSS 文件。

我创建了 3 个 css 文件：__ie.css、ff.css、opera.css。现在我需要检测浏览器以便包含好的浏览器。

我知道这一点

<!--[if IE]>
     <link rel="stylesheet" href="css/ie.css" type="text/css"/>
<![endif]-->

，但是我该如何对 Firefox 和 Opera/Chrome 执行同样的操作呢？

原文

I need to detect the browser and apply the matched CSS file.

I have created 3 css files: __ie.css, ff.css, opera.css. Now I need to detect the browser in order to include the good one.

I know this

<!--[if IE]>
     <link rel="stylesheet" href="css/ie.css" type="text/css"/>
<![endif]-->

But how do I do the same with Firefox and Opera/Chrome?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

谁把谁当真 2024-11-07 17:11:46

最接近纯 CSS 的是使用功能查询。它允许您检查浏览器是否支持特定的属性/值组合，而不是检测浏览器类型/版本。

下面是使用transform属性进行垂直居中的示例。如果浏览器不支持transform，那么我们不想调整其定位：

@supports (transform: translateY(-50%)) {
    .foo {
        position: relative;
        top: 50%;
        transform: translateY(-50%);
    }
}

Browser support for Feature查询

The closest you can come with pure CSS is with feature queries. Instead of detecting the browser type/version, it allows you to check if a specific property/value combinations are supported by the browser.

The following is an example of using the transform property for vertical centering. If the browser doesn't support transform, then we don't want to adjust its positioning:

@supports (transform: translateY(-50%)) {
    .foo {
        position: relative;
        top: 50%;
        transform: translateY(-50%);
    }
}

Browser support for Feature Queries

回复收藏 0 原文

听，心雨的声音 2024-11-07 17:11:46

如果您必须检测浏览器才能应用 CSS，那么您可能需要在使用特定于浏览器的样式表之前重新考虑您的 CSS。所需要的只是一个浏览器模仿另一个浏览器的用户代理字符串，或者发布一个新版本，然后一切都会崩溃。使用当前标准并验证您的代码 (http://validator.w3.org/)，您将不得不担心跨浏览器问题少得多。即使仅使用不带版本号的也可能会破坏更高版本中的布局。

话虽这么说，如果您想根据可用的 CSS 功能来设置不同的页面样式，请查看 Modernizr。这样，您只需检查功能，即使新版本的浏览器发布，这些功能也不会被破坏。

如果所有其他方法都失败并且您确实需要检测访问者的浏览器，请尝试jquery.browser。它内置于 jQuery 中，并且使用起来很简单。 http://api.jquery.com/jQuery.browser/。

回复收藏 0 原文

眼眸 2024-11-07 17:11:46

我需要添加纯 CSS 来在我的应用程序中显示细滚动条，这应该适用于每个浏览器，所以我用这种方式做到了。此代码将检测浏览器并将样式设置为整个应用程序中的滚动条。

// Scroll bar css settings in global css file like styles.css

/*IE*/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  html,
  body,
  div {
    scrollbar-face-color: #d1d8da;
    scrollbar-track-color: #dcd5d5;
    scrollbar-3dlight-color: #dcd5d5;
    scrollbar-darkshadow-color: #dcd5d5;
    scrollbar-arrow-color: #dcd5d5;
    -ms-overflow-style: -ms-autohiding-scrollbar; // this one will hide scroll-bars after sometime
    scrollbar-width: thin;
  }
}

/* for chrome */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  ::-webkit-scrollbar {
    width: 8px;
    height: 5px;
    border-radius: 10px;
  }
  ::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: #dcd5d5;
  }
  ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: #d1d8da;
  }
  ::-webkit-scrollbar-thumb:hover {
    background-color: #767979;
  }
}

/* for firefox */
@-moz-document url-prefix() {
  html,
  body,
  div {
    scrollbar-width: thin;
    scroll-behavior: smooth;
  }
}

<div style="height: 150px;width: 400px;overflow: auto;">
<ul style="list-style-type:circle;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul> 
</div>

I got a requirement of adding pure CSS to show thin scrollbars in my application which should apply for every browser, so I did it in this way. This code will detect the browser and sets the style to the scrollbars in entire application.

// Scroll bar css settings in global css file like styles.css

/*IE*/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  html,
  body,
  div {
    scrollbar-face-color: #d1d8da;
    scrollbar-track-color: #dcd5d5;
    scrollbar-3dlight-color: #dcd5d5;
    scrollbar-darkshadow-color: #dcd5d5;
    scrollbar-arrow-color: #dcd5d5;
    -ms-overflow-style: -ms-autohiding-scrollbar; // this one will hide scroll-bars after sometime
    scrollbar-width: thin;
  }
}

/* for chrome */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  ::-webkit-scrollbar {
    width: 8px;
    height: 5px;
    border-radius: 10px;
  }
  ::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: #dcd5d5;
  }
  ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: #d1d8da;
  }
  ::-webkit-scrollbar-thumb:hover {
    background-color: #767979;
  }
}

/* for firefox */
@-moz-document url-prefix() {
  html,
  body,
  div {
    scrollbar-width: thin;
    scroll-behavior: smooth;
  }
}

<div style="height: 150px;width: 400px;overflow: auto;">
<ul style="list-style-type:circle;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul> 
</div>

回复收藏 0 原文

薄暮涼年 2024-11-07 17:11:46

如果您需要检测 Firefox、Opera 和 Chrome 的浏览器，那么您就做错了。相同的 CSS 应该适用于所有这些。

当然也有例外——所有浏览器都缺少其他浏览器中不会出现的功能和错误。例如 text-overflow:ellipsis 不支持火狐。

但是，如果您坚持使用常用功能，那么这些情况很少见，而且一般来说，除了各种版本的 IE 之外，您现在确实不需要进行浏览器检测。

如果您不确定大多数浏览器是否支持您要使用的功能，您可以访问 CanIUse.com 或 Quirksmode。

如果您使用的是非常前沿的功能，那么是的，您将遇到跨浏览器支持的问题。但在这种情况下，通常最好使用 Modernizr 这样的产品进行功能检测，而不是浏览器检测，因为这将是确保覆盖所有浏览器和所有版本（包括未来版本）的更可靠方法（这是浏览器检测的固有弱点）。

回复收藏 0 原文

凉城已无爱 2024-11-07 17:11:46

有时您可以使用前缀属性，每个浏览器根据其前缀应用自己的属性并忽略其他属性。以下代码通过 CSS3 渐变填充背景：

background-color: green;
background-image: url(my-img.png);
background-image: -webkit-linear-gradient(top right, #b51111, #eeeeee);
background-image: -moz-linear-gradient(top right, #b51111, #eeeeee);
background-image: -ms-linear-gradient(top right, #b51111, #eeeeee);
background-image: -o-linear-gradient(top right, #b51111, #eeeeee);
background-image: linear-gradient(top right, #b51111, #eeeeee);

在此代码中：

-webkit- 适用于基于 WebKit 的浏览器（Chrome 和 Safari）
-moz- 适用于 Firefox
-ms- 适用于 Internet Explorer
-o- 适用于 Opera

但一般来说，浏览器嗅探并不是最好的方法，因为它在较新的浏览器中很容易失败。这样，您必须获取浏览器的用户代理字符串并解析它。然后根据每个浏览器支持的功能应用特定的 CSS 规则。如果浏览器的用户代理字符串在新版本中发生变化，您必须修改浏览器嗅探代码。想象一下，您想要支持多种浏览器，并且每个浏览器都可能在一年内发布一些新版本！
您可以查询浏览器是否支持给定的功能。例如HTML5视频：

if(!!document.createElement('video').canPlayType === true) {
// run some code that relies on HTML5 video
} else {
// do something else
}

有一个基于JavaScript编写的特征检测库，名为Modernizr。您可以下载它并将其包含在您的 html 页面中。此外，您还必须将“no-js”类添加到您的元素中。 Modernizer 运行其所有功能检测测试和一些元素类；像这样的：

<html lang="en-gb" class=" js no-flexbox no-flexbox-legacy canvas canvastext 
webgl no-touch geolocation postmessage websqldatabase no-indexeddb
hashchange history draganddrop no-websockets rgba hsla multiplebgs
backgroundsize borderimage borderradius boxshadow textshadow opacity
cssanimations csscolumns cssgradients no-cssreflections csstransforms 
no-csstransforms3d csstransitions fontface generatedcontent video audio  
localstorage sessionstorage webworkers applicationcache svg inlinesvg 
smil svgclippaths">

所以，你可以有选择地应用 CSS 规则。例如，您想要在支持的浏览器中应用动画 3D 变换或在其他浏览器中显示某些内容。考虑以下代码：

#my-div:hover {
  transform: rotateY(90deg);
}

对于默认情况，下面的替代代码：

.no-csstransforms3d #my-div:hover {
  position: relative;
  right: 200px;
}

这是一篇很好的文章< /a> 描述这个概念。

Sometimes you can use prefixed properties that each browser apply their own properties based on their prefixes and ignore others. Following code fills a background by CSS3 gradient:

background-color: green;
background-image: url(my-img.png);
background-image: -webkit-linear-gradient(top right, #b51111, #eeeeee);
background-image: -moz-linear-gradient(top right, #b51111, #eeeeee);
background-image: -ms-linear-gradient(top right, #b51111, #eeeeee);
background-image: -o-linear-gradient(top right, #b51111, #eeeeee);
background-image: linear-gradient(top right, #b51111, #eeeeee);

In this code:

The -webkit- is for WebKit-based browsers (Chrome and Safari)
The -moz- is for Firefox
The -ms- is for Internet Explorer
The -o- is for Opera

But generally speaking, browser sniffing is not the best way, because it can easily fail in newer browsers. In that way, you have to get User Agent string of the browser and parse it. Then apply specific css rules for each browser based on its supported features. If User Agent string of the browser change in newer versions, you must modify your browser sniffing code. Imagine that you want to support multiple browsers and each of them may release some new versions in one year!
You can query the browser that if it supports a given feature. e.g. HTML5 video:

if(!!document.createElement('video').canPlayType === true) {
// run some code that relies on HTML5 video
} else {
// do something else
}

There is a feature detection library named Modernizr that is written based on JavaScript. You can download it and include it using in your html page. Also you must add 'no-js' class to your element. Modernizer runs all of its feature detection tests and and some classes to element; something like this:

<html lang="en-gb" class=" js no-flexbox no-flexbox-legacy canvas canvastext 
webgl no-touch geolocation postmessage websqldatabase no-indexeddb
hashchange history draganddrop no-websockets rgba hsla multiplebgs
backgroundsize borderimage borderradius boxshadow textshadow opacity
cssanimations csscolumns cssgradients no-cssreflections csstransforms 
no-csstransforms3d csstransitions fontface generatedcontent video audio  
localstorage sessionstorage webworkers applicationcache svg inlinesvg 
smil svgclippaths">

So, you can apply CSS rules selectively. For instance, you want to apply an animated 3D transform in supporting browsers or display something in others. Consider the following code:

#my-div:hover {
  transform: rotateY(90deg);
}

for default case and below for alternative:

.no-csstransforms3d #my-div:hover {
  position: relative;
  right: 200px;
}

This is a good article describing the concept.

回复收藏 0 原文

遗弃Ｍ 2024-11-07 17:11:46

除 IE 之外的浏览器没有条件注释。

但你可以用javascript来做到这一点： http://www.quirksmode.org/js/detect.html

回复收藏 0 原文

熊抱啵儿 2024-11-07 17:11:46

也许我来得太晚了，但是。更好的解决方案是使用 CSS/JS 浏览器确定器（缩小为 4kb）。 免责声明：这是我销售的商业产品。

要分离 CSS 和 JS 文件，请将此代码粘贴到您的标记中：

<head><script src="js/cssjs-browser-determiner.min.js"></script>

<!-- Old Browsers -->
<script>
browser.is_old && document.writeln(
  '<link href="styles/old-browser.css" rel="stylesheet">'
);
</script>

该文件只会为旧浏览器加载（默认情况下，那些不支持 CSS3 转换的浏览器）。如果您想为每个特定浏览器分离文件，您可以执行相同的操作，但将 browser.is_old 更改为 browser.chrome 或 browser.webkit 等...

然后，在 old-browser.css （或任何其他 CSS 文件）中为特定浏览器编写一些 CSS：

.opera9 .my-el { ... }
.firefox1_5 .my-el { ... }
.ie8- .el { ... } // IE8 or less
.ios .el { ... } // iPhone, iPad, iPod
etc...

Maybe I'm too late, but. The better solution is to use CSS/JS Browser Determiner (4kb minified). Disclaimer: This is a commercial product that I sell.

To separate CSS and JS files, past this code to your <html> tag:

<head><script src="js/cssjs-browser-determiner.min.js"></script>

<!-- Old Browsers -->
<script>
browser.is_old && document.writeln(
  '<link href="styles/old-browser.css" rel="stylesheet">'
);
</script>

This file will be only loaded for old browsers (by default, those that does not support CSS3 transition). If you want to separate files for each specific browser you can do the same but change browser.is_old to browser.chrome or browser.webkit etc...

Then, write some CSS for specific browser inside old-browser.css (or any other CSS file):

.opera9 .my-el { ... }
.firefox1_5 .my-el { ... }
.ie8- .el { ... } // IE8 or less
.ios .el { ... } // iPhone, iPad, iPod
etc...

回复收藏 0 原文

~没有更多了~

关于作者

始于初秋

暂无简介

0 文章

0 评论

23 人气

关注发私信

友情链接

文江博客

如何检测用户的浏览器并应用特定的 CSS 文件？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（7）

关于作者

相关话题

热门标签

推荐作者

胡图图

zt006

z祗昰~

冰葑

野の

天空

友情链接

如何检测用户的浏览器并应用特定的 CSS 文件？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（7）

关于作者

相关话题

热门标签

推荐作者

胡图图

zt006

z祗昰~

冰葑

野の

天空

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。