Verwenden von Modernizr-Bibliothek, warum Klassen zum html-Tag hinzufügen

Kann jemand erklären (weil die Github-Seite nicht), warum Modernizr das Bedürfnis, alle diese Klassennamen zum HTML-Tag hinzufügen? Nach dem Laden von Modernizr sieht es so aus:Verwenden von Modernizr-Bibliothek, warum Klassen zum html-Tag hinzufügen

<!doctype html> 
<html class=" js flexbox canvas canvastext webgl ~~~~ etc etc

Ich sehe keine Erklärung, warum es das tun will. Modernizr bietet Eigenschaften, um mich wissen zu lassen, ob zum Beispiel Canvas unterstützt wird (Modernizr.canvas == true?). Werden diese HTML-Klassennamen für einen einfacheren Test hinzugefügt?

Quelle

2012-12-17 Dee2000

Diese Klassennamen sollen in Ihrem CSS-Code verwendet werden. Sie können Fallback-Stile hinzufügen, falls eine Funktion nicht unterstützt wird. Beispiel von modernizr docs page:

/* Simulated box shadow using borders: */ 
.box { 
    border-bottom: 1px solid #666; 
    border-right: 1px solid #777; 
} 
.boxshadow div.box { 
    border: none; 
    -webkit-box-shadow: #666 1px 1px 1px; 
     -moz-box-shadow: #666 1px 1px 1px; 
      box-shadow: #666 1px 1px 1px; 
}

Quelle

2012-12-17 13:38:25 pawel

Sieht so aus, als müsste ich CSS lernen. Ich dachte, ich hätte immer genug über Stileigenschaften gewusst, aber das scheint etwas fortgeschrittenes Zeug zu sein. – Dee2000

Ich sehe jemanden diese Antwort gewählt. Ich denke, das bedeutet, dass es die Antwort ist. Ich klicke auf das Häkchen, um es als Antwort zu markieren, auch wenn ich nicht verstehe, wie/warum es die Antwort ist :) – Dee2000

@ Dee2000, ich habe es gewählt, weil es Sinn macht. In diesem Beispiel wird angenommen, dass Ihr Browser keine Schlagschatten unterstützt. .boxshadow div.box "sollte" niemals zielgerichtet sein, daher wird .box als Fallback verwendet – series0ne

Ich könnte falsch liegen (und bitte korrigieren Sie mich, wenn ich bin), die Klassen hier zeigen die Funktionen, die Modernizr erkannt hat, die im angegebenen Browser unterstützt werden (oder tatsächlich NICHT).

Blick auf die docs hier: http://modernizr.com/docs/

dieses Beispiel nehmen:

<html class="no-js">

wenn JavaScript deaktiviert ist, dann kann modernizr nicht ausgeführt, und daher wird die Klasse "no-js" bleiben, aber wenn JavaScript aktiviert ist , Modernizr ersetzt "no-js" durch "js", und in ähnlicher Weise wird Ihnen sagen, welche anderen Funktionen unterstützt werden

Quelle

2012-12-17 13:21:16 series0ne

Ich werde die "no-js" ignorieren, weil es ein seltsames Beispiel ist. Aber was ich nicht verstehe ist, warum es sinnvoll ist, diese Klassen zum HTML-Tag hinzuzufügen, wenn eine Methode bereits existiert. Wenn zum Beispiel erkannt wird, ob Video unterstützt wird, stellt es sicher, dass (a) die Eigenschaft Modernizr.video verfügbar ist, die Sie in Ihrem JS zum Testen verwenden können, und (b) die Klasse "Video" zum HTML-Tag hinzugefügt wird (aus einem unbekannten Grund). Die Dokumentation erklärt nicht warum. – Dee2000

@ Dee2000 - siehe "Wie es funktioniert ..." hier: http://modernizr.com/ – series0ne

@ Dee2000, ich denke, die Idee ist, dass Sie html.flexbox zum Beispiel in Ihrem CSS haben, die durch Ihr Dokument kaskadiert . Aber wenn Modernizr niemals "flexbox" in dein html-Tag einfügt, wird es niemals in deinem CSS angesprochen ... lass es mich wissen, wenn das keinen Sinn ergibt – series0ne

Verwenden von Modernizr-Bibliothek, warum Klassen zum html-Tag hinzufügen

Antwort

Verwandte Themen