var b = document.documentElement;
b.className = b.className.replace('no-js', 'js');
b.setAttribute("data-useragent", navigator.userAgent);
b.setAttribute("data-platform", navigator.platform );
这将导致数据属性被添加到html元素,例如
<html
data-useragent="Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C)"
data-platform="Win32">
...
这使您能够使用CSS定位特定平台上的非常特定的浏览器
html[data-useragent*="Chrome/13.0"][data-platform="Win32"] {
...
}
这来自Rogie King的一篇帖子,该帖子现已下线。
这个非常有用!
真是太有帮助了。而且它比HTML标记中特定于IE的if语句好得多。您需要注意的唯一一点是,这仅适用于在该特定JavaScript代码运行后加载的CSS。它也不是完全可靠的,因为没有可靠的回退或不支持数据属性的浏览器,尽管您可能正在通过这种方式强制它们在旧版浏览器中使用元素。
Googlebot查看此页面时应该看到什么
您的CSS看到的与Chris上面显示的相同。
所以Google开发者实际上在推广糟糕的SEO——有趣的东西。
我去。当可以使用功能测试时,请不要使用用户代理嗅探。
阅读参考URL处的Rogie的文章。功能测试虽然显然更好,但在那里对他没有帮助。
它确实非常有用。CSS是否将在所有浏览器中工作?
在IE6中无法使用。我询问了HTMLDoctor的人员有关样式化data-元素的问题。
真是令人心碎的惊喜。
我相信超级极客Rogie现在在这里发布了参考文章
http://rog.ie/blog/html5-boilerplate-addon