浏览器资源嗅探器_浏览器嗅探条件注释

news/2024/7/19 14:24:33 标签: java, python, css, javascript, js
浏览器资源嗅探器

浏览器资源嗅探器

Browser sniffing is bad. But sometimes unavoidable. But doing it on the server is bad, because UA string is unreliable. The solution is to use conditional comments and let IE do the work. Because you're targeting IE most of the times anyway.

浏览器嗅探是不好的。 但有时不可避免。 但是在服务器上这样做很不好,因为UA字符串不可靠。 解决方案是使用条件注释,然后让IE完成工作。 因为无论如何,大多数情况下都是以IE为目标。

In fact IE8 is a decent browser for the most practical purposes and often you're just targeting IE before 8.

实际上,对于大多数实际用途而言,IE8是一款不错的浏览器,通常您只是将目标指向8之前的IE。

Conditional comments in practice use the following pattern:

实际上,条件注释使用以下模式:

  1. Load the decent browsers CSS

    加载体面的浏览器CSS
  2. Conditionally load IE6,7 overrides

    有条件地加载IE6,7覆盖

The drawback is that IE6,7 get two HTTP requests. That's not good. Another drawback is that having a separate IE-overrides stylesheet is an excuse to get lazy and instead of solving a problem in a creative way, you (and the team) will just keep adding to it.

缺点是IE6,7获得两个HTTP请求。 这不好。 另一个缺点是拥有一个单独的IE覆盖样式表是懒惰的借口,您(和团队)不会继续以创造性的方式解决问题,而是会继续添加它。

We can avoid the extra HTTP request by creating our CSS bundles on the server side and having two browser-specific but complete stylesheet files:

我们可以通过在服务器端创建CSS捆绑包并拥有两个特定于浏览器但完整的样式表文件来避免额外的HTTP请求:

  1. The decent browsers CSS

    体面的浏览器CSS
  2. The complete CSS for IE6,7 not only the overrides

    IE6,7的完整CSS不仅覆盖

Then the question is loading one of the two conditionally without server-side UA sniffing. The trick (courtesy of duris.ru) is to use conditional comments to comment out the decent CSS so it's not loaded at all:

然后问题是有条件地加载两个服务器之一,而无需服务器端UA嗅探。 技巧(由duris.ru提供)是使用条件注释来注释出不错CSS,因此根本不会加载它:

<!--[if lte IE 7]>
  <link href="IE67.css" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if gt IE 7]><!-->
  <link href="decent-browsers.css" rel="stylesheet" type="text/css" />
<!--<![endif]-->

The highlighting suggests what the decent browsers see.

突出显示了不错的浏览器看到的内容。

IE6,7 see something like this after the conditional comments are processed:

在处理条件注释后,IE6,7会看到类似以下内容:

  <link href="IE67.css" rel="stylesheet" type="text/css" />
<!--
  <link href="decent-browsers.css" rel="stylesheet" type="text/css" />
-->

Tell your friends about this post on Facebook and Twitter

在Facebook和Twitter上告诉您的朋友有关此帖子的信息

翻译自: https://www.phpied.com/browser-sniffing-with-conditional-comments/

浏览器资源嗅探器


http://www.niftyadmin.cn/n/1307129.html

相关文章

dojo中的下拉框

1、设计思路 &#xff08;1&#xff09;利用dojo设计三种不同的下拉框&#xff0c;Select、ComboBox和FilteringSelect&#xff1b; &#xff08;2&#xff09;再取下拉框中的option中的value和描述。 2、设计步骤 &#xff08;1&#xff09;dijit/form/Select <label f…

渲染:重绘,重排/重新布局,重设样式

2010 update: Lo, the Web Performance Advent Calendar hath moved 2010年更新&#xff1a; Lo&#xff0c; Web Performance Advent Calendar已移动 Dec 17 This post is part of the 2009 performance advent calendar experiment. Stay tuned for the articles to come. 12…

dojo之TabContainer篇

1、设计思路 &#xff08;1&#xff09;利用TabContainer设计出三个Tab页&#xff0c;分别显示三种水果&#xff1b; &#xff08;2&#xff09;根据dijit中的Dialog&#xff0c;设计出三个弹窗出来。 2、设计步骤 &#xff08;1&#xff09;设计总体Tab页框架 <div dat…

JSP自定义标签库

文章目录JSP自定义标签库Shiro标签shiro标签的shiro.tld文件principal TagShiro principal Tag实现类自定义标签main.jspmytag.tldMyTag实现类运行结果JSP自定义标签库 Shiro标签&#xff08;如 shiro:principal shiro:hasRole shiro:hasPermission&#xff09;可以在JSP页面中…

dojo之Button篇

1、设计关键 &#xff08;1&#xff09;设置Button背景图片 &#xff08;2&#xff09;设计Button点击事件 2、设计步骤 &#xff08;1&#xff09;设置Button背景图片 A、样式设置 .btnIcon{width:30px;height:32px;background:url("../images/search.png") cen…

yui怎么使用啊_使用YUI和BOSS搜索站点书签

yui怎么使用啊Ever wanted to search only the web site youre currently on? Not the page, but the whole site. And only this site, not the rest of the web. This bookmarklet does just that. 是否曾经想只搜索您当前所在的网站&#xff1f; 不是页面&#xff0c;而是整…

NetBeans快捷键积累

NetBeans快捷键 1、Alt Enter &#xff1a;错误提示 2、Shift F6 &#xff1a; 运行文件 3、Ctrl W &#xff1a;关闭窗口 4、Alt Shift F &#xff1a; 格式 5、Alt F6 &#xff1a; 运行测试项目 6、Ctrl R &#xff1a;重命名 7、Alt Shift Enter &#xff…

PHP认证书–示例章节

php|architects "Zend PHP Certification Practice Book" http://www.phparch.com/cert/ZPCPB_sample.pdf php | architect的“ Zend PHP认证实践手册” http://www.phparch.com/cert/ZPCPB_sample.pdf Zends official PHP certification study guide http://phpcert…