Wie erkenne ich den browser des Benutzers, und anwenden eines bestimmten CSS-Datei?

Wenn Sie haben, um zu erkennen, Browsern, nur um CSS anzuwenden, dann möchten Sie vielleicht überdenken Sie Ihre CSS-bevor Sie zu browser-spezifischen stylesheets. Alles was es braucht ist einen browser zu imitieren, einen anderen user-agent-string, oder eine neue version freigegeben werden, und alles bricht. Verwenden Sie den aktuellen Stand und überprüfen Sie Ihren code (http://validator.w3.org/), und Sie haben zu sorgen über weit weniger cross-browser-Probleme. Auch nur mit <!--[if IE]><![endif]--> ohne eine Versionsnummer zu brechen könnte das layout in späteren Versionen.

That being said, wenn Sie wollen Stil die Seite anders, basierend auf welche CSS-Funktionen verfügbar sind, werfen Sie einen Blick auf Modernizr. Auf diese Weise können Sie nur prüfen Funktionen, die nicht gebrochen werden, wenn eine neue version des Browsers veröffentlicht.

Wenn alle Stricke reißen und Sie wirklich brauchen, um zu erkennen den browser des Besuchers, versuchen jquery.browser. Es ist aufgebaut in jQuery, und ist einfach zu bedienen. http://api.jquery.com/jQuery.browser/.

Wenn Sie benötigen, um browser-Erkennung für Firefox, Opera und Chrome, dann machen Sie etwas falsch. Die gleichen CSS-sollten die arbeiten in allen von Ihnen.

Ausnahmen gibt es dabei natürlich-alle Browser haben fehlende features und bugs, die nicht in den anderen Browsern. Ein Beispiel wäre text-overflow:ellipsis, das nicht von Firefox unterstützt.

Allerdings, wenn Sie kleben, um Häufig verwendete Funktionen, diese Fälle sind wenige und weit zwischen, und im Allgemeinen, sollten Sie wirklich nicht tun müssen browser-Erkennung in diesen Tagen, außer für verschiedene IE-Versionen.

Wenn Sie nicht sicher sind, ob die Funktionen, die Sie verwenden möchten, werden von den meisten Browsern unterstützt, können Sie herausfinden, an CanIUse.com oder Quirksmode.

Wenn Sie ernsthaft cutting-edge-features, dann ja, Sie haben Probleme mit cross-browser-Unterstützung. Aber in diesem Fall ist es in der Regel besser zu tun, feature-Erkennung, mit einem Produkt wie Modernizr, sondern als browser-Erkennung, da dies ein zuverlässiger Weg, um Sie decken alle Browser und alle Versionen, auch zukünftige Versionen (das ist eine inhärente weakeness von browser detection).

Manchmal können Sie Präfix-Eigenschaften, die jeder browser Ihre eigenen Eigenschaften, basierend auf deren Präfixe und die anderen ignorieren. Folgende code füllt ein hintergrund von 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 diesem code:

• Die -webkit - für WebKit-basierten Browsern (Chrome und Safari)
• Die -moz - für Firefox
• Die-ms - für Internet Explorer
• - O - für Opera

Aber im Allgemeinen, browser-sniffing ist nicht der beste Weg, denn es kann leicht scheitern in neueren Browsern. Auf diese Weise haben Sie, um Benutzer-Agent-string des Browsers aus und analysieren es. Dann gelten bestimmte css-Regeln für die einzelnen browser-basiert auf die unterstützten Funktionen. Wenn die Benutzer-Agent-Zeichenfolge des Browsers ändern, in neueren Versionen, müssen Sie ändern Sie Ihre browser-sniffing-code. Angenommen, Sie möchten Unterstützung für mehrere Browser und jeder von Ihnen kann die Freigabe einige neue Versionen in einem Jahr!
Sie können die Abfrage der browser, dass, wenn es unterstützt eine bestimmte Funktion. z.B. HTML5-video:

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

Es ist ein feature-Erkennung Bibliothek namens Modernizr geschrieben wird, basiert auf JavaScript. Sie können es herunterladen und es mit in Ihre html-Seite. Auch müssen Sie hinzufügen 'no-js' - Klasse zu Ihrem element. Modernizer führt alle seine feature-detection tests und einige Klassen-element; so etwas wie dieses:

<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, können Sie die CSS-Regeln selektiv. Zum Beispiel, Sie wollen, um eine animierte 3D-verwandeln in unterstützende Browser oder display etwas bei anderen. Betrachten Sie den folgenden code:

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

für Standard-Fall und unten für alternative:

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

Dies ist eine gute Artikel Beschreibung des Konzepts.