HTML5 und CSS3 ohne Schuld

Natürlich verfügt nicht jedes HTML5- oder CSS3-Feature über eine weit verbreitete Browser-Unterstützung. Um dies zu kompensieren, haben unternehmungslustige Entwickler eine Reihe von Tools entwickelt, mit denen Sie diese Technologien heute verwenden können, ohne Benutzer zu verlassen, die noch in der Steinzeit leben.

---

Prolog

HTML5-semantische Elemente

Die gute Nachricht ist, dass Sie mit Ausnahme des Internet Explorers mehr semantische Markierungen erstellen können, indem Sie die neuen HTML5-Elemente verwenden - sogar in Browsern, die sie nicht offiziell unterstützen. Denken Sie daran, den richtigen Anzeigemodus einzustellen: Block. Das folgende Snippet sollte auf alle erforderlichen Elemente verweisen:

 Artikel, beiseite, Details, figcaption, figur, fußzeile, kopfzeile, hgruppe, menü, nav, abschnitt anzeige: block; 

IE Bedingte Kommentare

Bei der Implementierung vieler Lösungen in diesem Lernprogramm ist JavaScript für bestimmte Internet Explorer-Versionen erforderlich. Hier ein kurzer Überblick: Der Testausdruck ist in eckigen Klammern angegeben. Wir können nach bestimmten Versionen oder Versionen über oder unter einer angegebenen Version suchen. Es ist und gt bedeuten niedriger als und größer als, jeweils während lte und gte bedeuten niedriger als oder gleich und größer als oder gleich wie.

Hier einige schnelle Beispiele:

 [wenn IE 6]

Überprüft, ob der Browser Internet Explorer 6 ist.

 [wenn gt IE 6]

Sucht nach einer Version von Internet Explorer größer als 6.

---

Werkzeug 1: HTML5 Shiv

In allen IEs, mit Ausnahme der neuesten Version (IE9), können Sie keine Stile auf Elemente anwenden, die der Browser nicht erkennt. Ihre schlauen, neuen HTML5-Elemente in all ihrer Pracht sind den CSS-Regeln in dieser Umgebung nicht zugänglich. Dies ist, wo Remy Sharp html5shiv (manchmal als html5 Shim genannt) zur Rettung kommt. Fügen Sie es einfach in Ihre Seite ein Abschnitt und Sie können die neuen HTML5-Elemente perfekt gestalten.

Beachten Sie, dass die bedingten Kommentare nur den html5shiv-Code laden, sofern die Version von Internet Explorer niedriger als 9 ist. Andere Browser wie Firefox und Chrome ignorieren dieses Tag ebenfalls und führen das Skript nicht aus. Dadurch wird Bandbreite gespart.

html5 shiv basiert auf einer einfachen Problemumgehung: Es weist den IE an, die Elemente mit JavaScript zu erstellen (sie müssen nicht einmal in das DOM eingefügt werden)..

 document.createElement ('header');

Zu diesem Zeitpunkt können sie normal gestaltet werden. In den neueren Versionen ist außerdem IE Print Protector integriert, der einen Fehler behebt, bei dem die HTML5-Elemente beim Drucken der Seite verschwinden.

---

Werkzeug 2: Modernizr

Mit Modernizr können Sie in Browsern, die bestimmte HTML5- und CSS3-Funktionen nicht unterstützen, ein "Backup" -Stil bereitstellen.

Modernizr ist vielleicht das bekannteste dieser Werkzeuge, aber es wird auch ziemlich missverstanden (der Name hilft nicht). Atmen Sie tief ein: Entgegen dem weit verbreiteten Missverständnis tut Modernizr nicht Aktivieren Sie HTML5- und CSS3-Funktionen in Browsern, die sie nicht unterstützen (obwohl dies der Fall ist.) tut Include html5shiv, damit Sie HTML5-Elemente im IE verwenden können < 9).

Abgesehen von der html5shiv-Funktionalität führt Modernizr nur eine Sache aus: Sie führt beim Laden eine Reihe von Feature-Erkennungstests durch und fügt die Ergebnisse dann in die Klasse Attribut des Etikett.

Der Hauptzweck von Modernizr besteht darin, Ihnen das "Backup" -Stil in Browsern bieten zu können, die bestimmte HTML5- und CSS3-Funktionen nicht unterstützen. Dies unterscheidet sich etwas von der herkömmlichen anmutigen Verschlechterung, bei der wir in allen Browsern das gleiche CSS-Styling verwenden und es dann so gestalten, dass das Ergebnis immer noch akzeptabel ist, wenn bestimmte Funktionen fehlen.

Nun ein Beispiel für die Funktionsweise von Modernizr: Wenn ein Browser dies unterstützt Grenzradius und das Spaltenanzahl Eigenschaft werden die folgenden Klassen angewendet:

Wenn die gleichen Eigenschaften jedoch nicht unterstützt werden - beispielsweise im IE7 -, werden Sie Folgendes finden:

An dieser Stelle können Sie diese Klassen dann verwenden, um in Browsern mit unterschiedlichen Funktionen ein eindeutiges Styling anzuwenden. Wenn Sie beispielsweise einen Absatz auf einen Absatz anwenden möchten, können Sie abhängig davon, ob CSS-Spalten unterstützt werden, Folgendes tun:

 .csscolumns p / * Stil, wenn Spalten verfügbar sind * / .no-csscolumns p / * Stil, wenn Spalten nicht verfügbar sind * /

Wenn ein Browser keine Spalten unterstützt, wird die .Csspalten Klasse wird nicht im Hauptteil vorhanden sein, und der Browser hat niemals die Möglichkeit, die Regel anzuwenden, die ihn verwendet.

Einige mögen einwenden, dass dies uns zu den alten Zeiten des Erstellens einer anderen Website für jeden Browser zurückführt. Es ist wahr, dass nichts Sie daran hindert, so viele Stildeklarationen zu schreiben, die erweiterte CSS3-Funktionen verwenden, dass Ihr Stylesheet praktisch leer wird, wenn diese Regeln nicht angewendet werden können.

Wenn Sie Modernizr auf sinnvolle Weise einsetzen möchten, müssen Sie sich auf Ihr Designtalent verlassen, um alternative Stile zu entwickeln, die das Design nicht beschädigen und den Rest des Stylesheets nicht wegwerfen. Sie können beispielsweise versuchen, Schlagschatten auf Buchstaben, wenn diese nicht verfügbar sind, durch eine fette Schrift oder Transparenz mit einer anderen Farbe zu ersetzen.

Verwendungszweck

Um Modernizr zu verwenden, schließen Sie die minimierte Datei ein und wenden Sie eine Klasse von an no-js zum Element. Mit dieser letzten Vorsichtsmaßnahme können Sie Stile angeben, wenn JavaScript vollständig deaktiviert ist. In diesen Fällen kann Modernizr Ihnen natürlich nicht helfen. Wenn JavaScript aktiviert ist, tritt Modernizr ein und ersetzt das no-js mit den Ergebnissen seiner Merkmalserkennungsoperationen.

    … 

Wenn Sie bereit sind zu akzeptieren, dass nicht alle Websites in allen Browsern identisch angezeigt werden müssen, werden Sie feststellen, dass Modernizr ein unverzichtbares Werkzeug in Ihrem Webentwickler ist!

---

Werkzeug 3: IE 6 Universal CSS

Der Designer Andy Clarke hat eine elegante Lösung entwickelt, um die mangelnde Einhaltung von Standards durch IE6 zu beheben. Dieses Stylesheet mit dem Namen "Universal IE6" konzentriert sich ausschließlich auf Typografie. Der Schlüssel ist, bedingte Kommentare zu verwenden, um alle anderen Stylesheets im IE 6 auszublenden.

  / * Stylesheets für andere Browser als Internet Explorer 6 * /  

Wichtige Notiz: Denken Sie daran, die neueste Version beizufügen, da die Anweisungen für ältere Versionen immer noch im Web schwimmen. Das Endergebnis sieht so aus:

Sie haben keine Arbeit zu tun, um IE 6 auf einer neuen Site zu unterstützen.

Dieser Ansatz hat gegenüber herkömmlichen alternativen Stylesheets einen offensichtlichen Vorteil: Sie müssen keine Arbeit für die Unterstützung von IE 6 auf einer neuen Site ausführen. Der Nachteil ist natürlich, dass die Website nur sehr wenig von Ihrem Design zeigt. Außerdem müssen Ihre HTML-Fundamente absolut solide sein, damit die Seite auch bei deaktiviertem Styling verwendet werden kann.

Beachten Sie, dass Universal IE6 CSS keine Formatierung für nur HTML5-Elemente wie z

oder