Wie schreibt man rückwärts kompatibel HTML5?

Question

Ich möchte mit HTML5 die grundlegenden Funktionen starten, aber zur gleichen Zeit, halten Sie meinen Code rückwärtskompatibel mit älteren Browsern (Graceful Degradation). Zum Beispiel würde Ich mag die kühlen CSS3-Eigenschaften verwenden, um abgerundete Ecken zu machen. Gibt es eine verfügbare Tutorial für graziös abbaubaren HTML5 schreiben?

Darüber hinaus, welcher Browser soll ich unterstützen, so dass mein App. funktionelle mindestens 95% der Besucher für? Was sind die Möglichkeiten schmerzlos diesen Browser zu testen?

Answer 1

Wenn man über HTML5 oder CSS3, sollten Sie den Kopf über:

Wann kann ich ...

Wie man sehen kann, sind wir noch weit weit weg von der Verwendung.

Da auch alte Versionen des Browser nicht HTML5 oder CSS3 unterstützen, jedoch können Sie tun, was bekannt ist als:

Progressive Enhancement und Graceful Degradation

Hier sind einige Ressourcen, auch:

• Galerie von HTML5 Seiten (Sie können die Idee von ihnen lernen und bekommen)
• erstellen moderne Websites mit HTML5 und CSS3

Answer 2

Browser, die kollektiv Abdeckung 95% der Welt: Firefox, Chrome, IE6 / 7/8. Der beste Weg, um sie zu testen, ist sie auf Ihrem Computer zu installieren.

Answer 3

Sie möchten HTML verwenden Tags und CSS kompatibel mit mobilen Browsern.

Für alles CSS3 es in bedingtem Javascript wickeln. Ich mache immer sicher, dass die Gerätebreite atleast 240px ist, dann alles unter das ist der alte, crappy, mobile Look.

Sie können einen kleinen mobilen Textvorschlag für CSS verwenden, die grundlegenden Tags, die Sie verwenden, um Reset (damit sie sie in verschiedenen Browsern gleich aussehen). Wie bei jedem Textvorschlag, sollten Sie bei der CSS sehen, ob es den Weg trieben.

Für eine umfassende Anleitung Schauen Sie sich die W3 Mobil CSS2-Richtlinien: http: //www.w3.org/TR/2000/WD-css-mobile-20001013

Eine weitere gute Ressource ist diese Kompatibilitätstabelle: http://www.quirksmode.org/m/ css.html

Answer 4

Graceful Degradation ist alles über Kompromisse - wenn man alles in der niedrigeren Version tun könnte, haben Sie wahrscheinlich würden. Um auf dem Beispiel von abgerundeten Ecken holen Sie zitieren, kann es für Sie akzeptabel (oder Ihren Kunden) zu leben, ohne sie, wo es nicht existiert Renderer spezifische CSS-Erweiterungen, sie zu unterstützen (das ist, wie http://www.ipswich-angle.com/ Griffe es, zum Beispiel, glaube ich). Weitere Optionen Bilder beinhalten, sind da, aber es ist weitgehend abhängig von welchen Kompromissen Sie und Ihre Kunden bereit sind, zu machen.

Answer 5

Ein Dienst wie browsershots.org ist sehr nützlich, um zu überprüfen, wie Ihre Website auf verschiedenen Browsern rendert und Betriebssysteme. Sie haben eine Zeit lang in einer Warteschlange warten, aber es lohnt sich, das zu tun.

Answer 6

Ich würde dies einen Kommentar machen, aber dann habe ich mich mitreißen ..

w3schools hat Vorschläge für die auf Ihrer Website semantische Web-Elemente verwenden. Es schlägt vor, eine Javascript-Bibliothek namens html5shiv.js Styling unterstützen IE8 hinzuzufügen und unten, so dass Sie finden Sie Javascript-Dateien, die eingebaut in HTML5 spezifische Funktionalität emulieren wie json2.js und Webforms2.js .

Schließlich dieser Artikel gibt ein vollständiges Beispiel eine HTML5-Form mit vielen neuen Eigenschaften / Funktionalität emulieren.

Wie für die Website bauen, würde ich den Aufbau einer HTML4 Seite empfehlen erste semantische Elemente frei verwenden (mit html5shiv) und Tests mit IE7. Dann, wie Sie Teile der Website bauen, die neuen Funktionen benötigen, erforschen eine Javascript-Datei, die mit der gleichen Funktionalität älteren Browser zur Verfügung stellt, zum Beispiel: Wenn es Zeit ist Ihre erste abgerundete Ecke hinzuzufügen oder Steigung vielleicht hinzufügen CSS3Pie . Denken Sie immer daran, wie gut, dass Ihr Box-Modell; border-radius und Gradienten werden auch in Webkit unterstützt als API mozilla so viele css3 Attribute Sie 3 mal hinzufügen müssen:

border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;

Leider habe ich nicht über eine gute Ressource für die, wie die Webkit / mozilla APIs vergleichen mit HTML5-Funktionalität.

Die einzige Funktionalität, die ich zu finden gekämpft habe, ist die Unterstützung für CSS3-Selektoren in älteren Browsern, die oft Sie damit durchkommen können, ich meine, wenn Sie sind nicht gonna Ihren Browser IMHO aktualisieren Sie mit wenigen doppelten Dicken Grenzen leben können oder fehlende alternative Reihe Styling in Tabellen.

Vielleicht einen Tag wird es eine Website sein, dass Sie Ihren Code laden können, dass man die Dinge sagen wie „Chrom 20.xyz nicht abgerundete Ecken nicht unterstützt, fügen Sie -webkit-border-radius Unterstützung hinzufügen“ aber bis dahin Hinzufügen von Rückwärtskompatibilität nach dem Tatsache wird nahezu unmöglich für komplexe Websites.