Accentsconagua

Schneller Tipp CSS3-Unterstützung in Browsern mit JavaScript erkennen

Code
Share

Ist es nicht lustig, dass wir mit den neuesten CSS-Techniken wie Schatten und Übergängen spielen? Es gibt nur ein Problem: Wie kompensieren wir die Browser, die sie nicht unterstützen, oder, was noch wichtiger ist, sie erkennen? Nun, es gibt ein paar Lösungen. In diesem Tutorial und in diesem Screencast erstellen wir jedoch eine JavaScript-Funktion, die einen CSS-Eigenschaftsnamen als Parameter akzeptiert und eine zurückgibt boolean, Gibt an, ob der Browser die übergebene Eigenschaft unterstützt.

Bevorzugen Sie ein Video-Tutorial?

Drücken Sie die HD Taste für ein klareres Bild.

Abonniere unsere YouTube-Seite, um alle Video-Tutorials anzusehen!

Schritt 1

Beginnen wir mit der Bestimmung Wie wir möchten unsere anrufen Funktion. Wir werden es hier einfach halten. Etwas wie das Folgende sollte den Trick tun: 

 if (unterstützt ('textShadow')) document.documentElement.className + = 'textShadow';

Das sollte das Finale sein Funktion Anruf. Wenn wir einen CSS-Eigenschaftsnamen an den übergeben unterstützt () Funktion, es wird ein zurückkehren boolean. Ob wahr, wir werden eine anhängen Klassenname zum documentElement, oder . Dadurch erhalten Sie einen neuen 'Klassennamen', den Sie von unserem Stylesheet aus anhängen können.

Schritt 2

Als nächstes konstruieren wir die Unterstützungsfunktion (). 

 var unterstützt = (function () ) ();

Warum machen wir nicht? unterstützt gleich einer Standardfunktion? Die Antwort ist, weil wir ein bisschen haben prep Sie müssen zuerst arbeiten, und es gibt absolut keinen Grund, diese Aufgaben immer wieder zu wiederholen jeden Einmal wird die Funktion aufgerufen. In solchen Fällen ist es am besten zu machen unterstützt gleich dem, was von der selbstausführenden Funktion zurückgegeben wird.

Schritt 3

Um zu testen, ob der Browser bestimmte Eigenschaften unterstützt, müssen Sie zum Testen ein * dummy * -Element erstellen. Dieses generierte Element wird niemals tatsächlich in das DOM eingefügt. Betrachten Sie es als Testattrappe! 

 var div = document.createElement ('div');

Wie Sie wahrscheinlich wissen, gibt es eine Handvoll Herstellerpräfixe, die wir verwenden können, wenn Sie mit CSS3-Eigenschaften arbeiten:

  • -moz
  • -Webkit
  • -O
  • -Frau
  • -khtml

Unser JavaScript muss diese Präfixe filtern und testen. Lass uns sie in eine Array; wir nennen es, Anbieter.

 var div = document.createElement ('div'), Anbieter = 'Khtml Ms O Moz Webkit'.split (");

Verwendung der Teilt() Funktion zum Erstellen eines Array von einem Schnur ist zwar faul, aber es spart eine Handvoll Sekunden!

Da filtern wir durch Array, lasst uns gute Jungs und Mädchen sein und das zwischenspeichern Länge des Array auch.

 var div = document.createElement ('div'), hersteller = 'Khtml Ms O Moz Webkit'.split ("), len = vendors.length;

Das prep Die oben genannte Arbeit ist von Natur aus statisch und muss nicht bei jedem Aufruf wiederholt werden unterstützt (). Deshalb führen wir es nur einmal aus, wenn die Seite geladen wird. Jetzt lass uns Rückkehr das Funktion das wird eigentlich dem zugeordnet unterstützt Variable.

 Rückkehrfunktion (Eigenschaft) ;

Die Schönheit von Verschlüsse ist das auch wenn unterstützt () ist gleich dem zurückgegeben Funktion, Es hat immer noch Zugriff auf die div, Anbieter, und len Variablen.

Schritt 4

Der sofortige Test: Wenn die übergebene Eigenschaft für den Benutzer verfügbar ist div's Stil Attribut wissen wir, dass der Browser die Eigenschaft unterstützt; so zurückkehren.

 return-Funktion (prop) if (prop in div.style) gibt wahr zurück; ;

Denken Sie etwa an die Text-Schatten CSS3-Eigenschaft Die meisten modernen Browser unterstützen dies, ohne dass ein Herstellerpräfix erforderlich ist. Warum sollten wir alle Präfixe filtern, wenn wir es nicht brauchen? Deshalb stellen wir das hier prüfen oben.

Schritt 5

Sie sind wahrscheinlich daran gewöhnt, CSS3-Eigenschaftsnamen einzugeben. -Moz-Box-Schatten. Wenn Sie jedoch in Firebug die Stil Objekt, Sie werden feststellen, dass es buchstabiert ist, MozBoxShadow. Als solches, wenn wir testen:

 'mozboxShadow' in div.style // false

Falsch Wird zurückgegeben. Dieser Wert unterscheidet zwischen Groß- und Kleinschreibung.

Dies bedeutet, wenn der Benutzer besteht Box Schatten zum unterstützt () Funktion, es wird fehlschlagen. Lassen Sie uns vorausdenken und prüfen, ob der erste Buchstabe des Arguments Kleinbuchstaben ist. Wenn dies der Fall ist, beheben wir den Fehler für sie. 

 return-Funktion (prop) if (prop in div.style) gibt wahr zurück; prop = prop.replace (/ ^ [a-z] /, Funktion (val) return val.toUpperCase ();); ;

Reguläre Ausdrücke zur Rettung! Wir prüfen oben, ob sich am Anfang der Zeichenfolge ein einzelner Kleinbuchstabe befindet (^). Nur wenn eins gefunden wird, verwenden wir die toUpperCase () Funktion, um den Buchstaben groß zu schreiben.

Schritt 6

Als nächstes müssen wir durch das filtern Anbieter Array und testen, ob es eine Übereinstimmung gibt. Zum Beispiel wenn Box Schatten bestanden ist, sollten wir testen, ob die Stil Attribut des div enthält eines der folgenden:

  • MozBoxShadow
  • WebkitBoxShadow
  • MsBoxShadow
  • OBoxShadow
  • KhtmlBoxShadow

Wenn eine Übereinstimmung gefunden wird, können wir zurückkehren, weil der Browser tatsächlich Box-Schatten unterstützt!

 return-Funktion (prop) if (prop in div.style) gibt wahr zurück; prop = prop.replace (/ ^ [a-z] /, Funktion (val) return val.toUpperCase ();); while (len--) if (Verkäufer [len] + prop in div.style) return true; ;

Obwohl wir eine verwenden könnten zum Anweisung zum Filtern durch Array, In diesem Fall besteht keine Notwendigkeit.

  • Die Reihenfolge ist nicht wichtig
  • während Anweisungen lassen sich schneller eingeben und erfordern weniger Zeichen
  • Es gibt eine winzige Leistungsverbesserung

Sei nicht verwirrt von Verkäufer [len] + prop; Ersetzen Sie einfach diese Namen durch ihre tatsächlichen Werte: MozBoxShadow.

Schritt 7

Was aber, wenn keiner dieser Werte übereinstimmt? In diesem Fall scheint der Browser die Eigenschaft nicht zu unterstützen. In diesem Fall sollten wir dies tun falsch zurückgeben. 

 while (len--) if (Verkäufer [len] + prop in div.style) return true;   falsch zurückgeben;

Das sollte es für unsere Funktion tun! Testen wir es, indem Sie ein Klassenname zum html Element, wenn der Browser beispielsweise das unterstützt Textanschlag property (was nur das Webkit tut).

 if (unterstützt ('textStroke')) document.documentElement.className + = 'textStroke';

Schritt 8: Nutzung

Mit einer Klasse Namen, die wir jetzt können Haken auf, lass es uns in unserem Stylesheet ausprobieren.

 / * Fallback * / h1 Farbe: schwarz;  / * Unterstützung für Textstriche * / .textStroke h1 color: white; -webkit-text-hub: 2px schwarz;

Finaler Quellcode 

 var unterstützt = (function () var div = document.createElement ('div'), hersteller = 'Khtml Ms O Moz Webkit'.split ("), len = vendors.length; return function (prop) if (prop.) in div.style) return wahr; prop = prop.replace (/ ^ [az] /, function (val) return val.toUpperCase ();); while (len--) if (Anbieter [len] + + prop in div.style) // Browser unterstützt Box-Shadow. Tun Sie, was Sie brauchen. // Oder testen Sie mit einem Knall (!), ob der Browser dies nicht tut. return true; return false;;) (); if (unterstützt ('textShadow')) document.documentElement.className + = 'textShadow';

Eine umfassendere Lösung finden Sie in der Modernizr-Bibliothek.

Code
×