var b = document.documentElement;
b.className = b.className.replace('no-js', 'js');
b.setAttribute("data-useragent", navigator.userAgent);
b.setAttribute("data-platform", navigator.platform );Was zur Folge hat, dass Data-Attribute zum HTML-Element hinzugefügt werden, wie zum Beispiel
<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">
...Was es Ihnen ermöglicht, mit CSS sehr spezifische Browser auf sehr spezifischen Plattformen anzusprechen
html[data-useragent*="Chrome/13.0"][data-platform="Win32"] {
...
}Dies wurde aus einem Beitrag von Rogie King referenziert, der inzwischen offline gegangen ist.
Dieser ist sehr nützlich!
Verdammt, das ist hilfreich. Und es ist ein Riesenvorteil für die SEO gegenüber den IE-spezifischen if-Anweisungen in Ihrem HTML-Markup. Das Einzige, was Sie beachten müssen, ist, dass dies nur für CSS funktioniert, das geladen wird, nachdem dieser spezielle JavaScript-Code ausgeführt wurde. Es ist auch nicht völlig narrensicher, da es keine solide Fallback-Option oder Browser gibt, die Data-Attribute nicht unterstützen, obwohl Sie sie möglicherweise auf diese Weise auf Elemente erzwingen, selbst in älteren Browsern.
Was Googlebot sehen sollte, wenn er sich diese Seite ansieht
Was Ihr CSS zu sehen bekommt, ist dasselbe wie Chris oben zeigt.
Also fördern Google-Entwickler tatsächlich schlechte SEO – interessante Sache.
WTF. Verwenden Sie keine User-Agent-Sniffing, wenn Feature-Testing verwendet werden kann.
Lesen Sie Rogies Artikel unter der Referenz-URL. Feature-Testing, obwohl offensichtlich besser, hätte ihm dort nicht geholfen.
Es ist wirklich sehr nützlich. Wird dieses CSS in allen Browsern funktionieren?
Wird in IE6 nicht funktionieren. Ich habe die Leute von HTMLDoctor nach dem Styling von Data-Elementen gefragt.
Was für eine herzzerreißende Überraschung.
Ich glaube, der Uber-Geek Rogie hat den Referenzbeitrag jetzt hier
http://rog.ie/blog/html5-boilerplate-addon