Wie liefere ich Fallbacks für ältere Browser in HTML5?

Verwenden Sie HTML5 Shiv für ältere IE -Unterstützung. 2. Wenden Sie Modernizr für die Erkennung von Merkmalen und den Fallback -Klassen an. 3. Bereitstellen Sie Fallbacks für neue Eingangstypen. 4. Verwenden Sie Polyfills für fehlende JavaScript -APIs. Kombinieren Sie diese, um die Kernfunktionalität über die Browser hinweg sicherzustellen.

Die Unterstützung älterer Browser in HTML5 bedeutet nicht, moderne Merkmale zu opfern - es bedeutet, sich im Hinblick auf eine anmutige Verschlechterung aufzubauen. Sie können sicherstellen, dass Ihre Website auch dann funktionsfähig und visuell akzeptabel bleibt, wenn bestimmte HTML5 -Funktionen nicht unterstützt werden.

Verwenden Sie semantische Elemente mit Fallbacks

Ältere Versionen von Internet Explorer (wie IE8 und unten) erkennen keine semantischen HTML5 -Elemente wie Header , NAV , Abschnitt oder Artikel . Um diese Elemente stilbar zu machen, müssen Sie sie über JavaScript aktivieren.

• <script> document.createelement ("article"); </script> - Erstellt das Element manuell
• Besser: Verwenden Sie das beliebte HTML5SHIV -Skript:
• Dieses Skript erstellt dynamisch HTML5 -Elemente, sodass sie in älteren IE -Versionen gestaltet werden können

Nutzen Sie Modernizr zur Erkennung von Funktionen

Anstatt den Browser zu erkennen, prüfen Sie, ob eine bestimmte Funktion verfügbar ist. Modernizr ist eine weit verbreitete Bibliothek, in der die Unterstützung für HTML5- und CSS3 -Funktionen getestet wird.

• Fügen Sie Ihrer Seite Modernizr hinzu:
• Es fügt dem HTML
• Verwenden Sie diese Klassen in CSS, um Fallback-Stile anzuwenden: .no-borderradius {Border: Keine; }
• Verwenden Sie JavaScript, um Polyfills nur bei Bedarf zu laden

Stellen Sie Alternativen für neue Eingangstypen und -attribute bereit

HTML5 führt neue Eingangstypen wie E -Mail , Datum und Nummer ein, aber ältere Browser behandeln sie als reguläre Texteingaben.

• Fügen Sie immer einen vernünftigen Fallback hinzu: Browser, die Typen = "E -Mail" nicht unterstützen, fällt auf type = "text" zurück
• Verwenden Sie die Platzhalterattribut vorsichtig - Ackerbrowser ignorieren es. Verlassen Sie sich also nicht darauf, um Anweisungen zu erhalten
• Implementieren Sie die grundlegende clientseitige Validierung mit JavaScript, wenn die native Validierung nicht unterstützt wird

Verwenden Sie Polyfills für fehlende JavaScript -APIs

Einige HTML5 -Funktionen hängen von JavaScript -APIs ab (wie Lokalstor , Geolokalisierung oder Fetch ). Polyfills ahmen diese APIs in älteren Umgebungen nach.

• Verwenden Sie für LocalStorage bei Bedarf einen Stoffback aus Cookie-basierten Fallback
• Laden Sie Polyfills bedingt mit Tools wie LoadCSs oder Polyfill.io
• Beispiel:

Kombinieren Sie im Grunde genommen die Erkennung von Merkmalen, die bedingte Belastung und intelligente Fallbacks, um ein solides Erlebnis für alle Browser zu bieten. Es geht nicht darum, alte Browser mit neuen identisch zu machen - es geht darum, dass Inhalte und Kernfunktionen zugänglich bleiben.

Das obige ist der detaillierte Inhalt vonWie liefere ich Fallbacks für ältere Browser in HTML5?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!