Soll ich HTML5 und / oder CSS3 verwenden, um meine Website zu erstellen?
16
Das neue HTML5 / CSS3 (Web8!) - Zeug klingt cool! Soll ich es jetzt verwenden oder bei CSS / XHTML bleiben und warten, bis weitere Browser es verwenden können?
HTML5 wird jetzt von allen Browsern unterstützt, sogar von IE5! (Wenn Sie das Skript html5shiv verwenden). Ich empfehle dringend, http://diveintohtml5.org zu lesen. Es ist eine der besten HTML5-Ressourcen, die es gibt.
Wenn Sie CSS3 verwenden, stellen Sie sicher, dass Sie zusätzlich zur regulären Syntax auch Vendor Predix verwenden. z.B
Grenzradius
-moz-border-radius
-webkit-border-radius
Ich glaube an eine fortschreitende Verbesserung. Die Unterstützung von IE9 für CSS3 klingt sehr vielversprechend.
Ich denke du willst den Randradius nach unten setzen, oder?
Grant Palin
1
Leider ist die ursprüngliche Dive Into HTML5-Site verschwunden. Es gibt viele Spiegel zur Verfügung. Hier ist eine: diveintohtml5.info
M. Dudley
12
Wahrscheinlich.
Es gibt Teile von HTML5, die Sie derzeit verwenden können. Formulare zum Beispiel. Wenn Sie <input type="email">einen Browser haben, der HTML5 nicht unterstützt (ja, sogar IE6), sehen Sie einfach das Gleiche, was Sie sehen würden, wenn Sie es verwenden würden <input type="text">. In einem Browser, der HTML5-Formularelemente unterstützt, profitieren Sie jedoch von den Vorteilen des emailTyps: Der Client überprüft den Wert fehlerfrei, ohne dass eine zusätzliche JS erforderlich ist. Ja, für Nicht-HTML5-Browser benötigen Sie weiterhin JS. In den unterstützten Browsern ist jedoch eine weitere Validierungsebene vorhanden.
Eine weitere Frage auf dieser Website bietet einen guten Überblick über die neuen Funktionen, die Ihnen über HTML5 und CSS3 zur Verfügung stehen. Auch in dieser Frage gibt es viele gute Daten zu Formularen.
Da Internet Explorer (und ältere Versionen von Safari und Firefox, wie selten sie auch sein mögen) viele dieser Funktionen nicht unterstützen, müssen Sie JavaScript-Bibliotheken verwenden, um die Lücke zu füllen. Dazu gehört ein Leistungseffekt (auch wenn dies nur für die Browser erforderlich ist). Achten Sie daher beim Einsatz auf Ihre Benutzer.
Verwenden Sie die folgenden Ressourcen, um die Probleme mit mangelnder Funktionsunterstützung zu beheben, falls Sie sich für diese neuen Funktionen entscheiden sollten:
html5shiv: Ein JavaScript-Shiv für den IE zum Erkennen und Gestalten der HTML5-Elemente.
CSS3 Pie: Ein IE-angefügtes Verhalten (eine.htcDatei), mit dem Internet Explorer 6-8 mehrere der nützlichsten CSS3-Dekorationsfunktionen rendern kann. Wenn auf ein Element angewendet, ermöglicht esIE zu erkennen und Anzeigeborder-radius,box-shadow,border-image, mehrere Hintergrundbilder undlinear-gradientals Hintergrundbild.
Modernizr: Eine Javascript-Bibliothek, die die Feature-Erkennung verwendet, um den aktuellen Browser auf bevorstehende CSS3 / HTML5-Features zu testen und dem <html> -Element Klassen für diejenigen hinzuzufügen, die unterstützt werden. Erstellt auch ein selbstbetiteltes globales JavaScript-Objekt, das eine boolesche Eigenschaft für jedes Feature enthält,truesofern dies unterstützt wird undfalsenicht. Fügt Unterstützung für das Stylen und Drucken von HTML5-Elementen hinzu, sodass Sie Elemente wie<section>,<header>und verwenden können<nav>.
ie-css3.js: Ermöglicht Internet Explorer, CSS3 -Pseudoklassen -Selektoren zu identifizieren und alle mit ihnen definierten Stilregeln zu rendern. Unterstützt verschiedene CSS3-Selektoren, je nachdem, welche JavaScript-Bibliothek Ihre Website verwendet.
DD_belatedPNG: Eine Javascript-Bibliothek, die dem IE6 die Unterstützung von PNG- Bildern hinzufügt. Sie können PNGs als die Verwendungsrceines<img />Elements oder alsbackground-imageEigenschaft in CSS. Im GegensatzAlphaImageLoader,background-positionundbackground-repeatwie vorgesehen, und Elemente auf die reagierta:hoverpseudo-Klasse.
TwinHelix IE PNG Fix: Ein an den IE angefügtes Verhalten (eine.htcDatei), das dem IE 6 PNG-Unterstützung mit Alpha-Deckkraft hinzufügt. Vollständige Positionierung und Wiederholung des CSS-Hintergrunds werden (einschließlich CSS-Sprites) mit zusätzlichem (enthaltenem) JavaScript unterstützt.
Was auch immer: Hover: Ein IE-angefügtes Verhalten (eine.htcDatei), das automatisch Patches für: Hover,: Active und: Focus für IE6-, IE7- und IE8-Macken erstellt, sodass Sie sie wie in jedem anderen Browser verwenden können. Ist mit AJAXUnterstützung, was bedeutetdass jeder HTMLCode, in das Dokument über Javascript eingefügt wird werden auch Auslöser:hover,:activeund:focusStile imExplorer.
Interessanterweise behebt DD_belatedPNG beide Probleme, die in Whatever: hover und TwinHelixs IE PNG Fix behoben wurden, mit reinem JavaScript. Whatever: hover und TwinHelixs IE PNG Fix verwenden eine Kombination aus JavaScript- und IE-angehängten Verhaltensweisen ( .htc files).
Im Allgemeinen aktualisieren Benutzer von Nicht-IE-Browsern diese, wenn sie dazu aufgefordert werden, und der IE trägt die Hauptlast von "Aber einige Browser unterstützen diese Funktion nicht!". Beschwerden. Modernizr wird die Möglichkeit hinzufügen, HTML5 / CSS3 in jedem Browser zu verwenden, den Sie wahrscheinlich sehen, und nicht nur in IE. ie-css3.js führt dasselbe aus, Sie müssen es nur ohne einen IE-bedingten Kommentar implementieren (was bedeutet, dass alle Browser es erhalten, es sei denn, Sie fügen es bei den serverseitigen Benutzeragentenprüfungen hinzu - dies verringert die Leistung erheblich für alle Ihre Besucher und nicht nur für Ihre IE-Benutzer.)
Tut mir leid, Bryson, aber diese Dinge, die Internet Explorer mit HTML5 unterstützen, sind aus praktischen Gründen ein wahrer Albtraum.
1
Ich habe meinen Beitrag mit ein paar weiteren Informationen aktualisiert und die Leistungseinbußen bei der Verwendung dieser JS-Bibliotheken bestätigt. Ich bin jedoch anderer Meinung als Sie, dass ihre Verwendung ein Albtraum ist. Ich habe alle diese mindestens einmal verwendet, und sie alle dienen einem Zweck. Sie haben mir auch keine zusätzlichen Kopfschmerzen bereitet. Was lässt dich sagen, dass es Albträume sind?
Bryson
OK, "völlige Alpträume" sind vielleicht eine zu starke Ausdrucksweise, aber die Leistung leidet oft so sehr, dass die Seite unbrauchbar wird. Ich denke, Sie übertreiben den Fall.
5
Verwenden Sie die Technologie, die Ihren Anforderungen am besten entspricht.
Eric Meyer hat einen schönen Artikel darüber geschrieben, warum der Einstieg in die Verwendung herstellerspezifischer Präfixe für CSS-Regeln nicht mehr so lahm ist wie früher die Verwendung von CSS-Filter-Hacks.
Ich denke, das gilt auch für HTML5. Wenn Sie die Browserunterstützung auf verschiedene Funktionen prüfen können, verwenden Sie sie. Solange sich die Site anmutig verschlechtert, lebe sie.
Einige andere nützliche Links, wenn Sie entscheiden, welche CSS3-Funktionen Sie verwenden möchten:
http://caniuse.com/ (enthält eine gute Aufschlüsselung der Elemente und Selektoren, die auf welchen Plattformen verwendet werden können)
http://css3please.com/ (eine in der Seite bearbeitbare Spielwiese, auf der Sie mit CSS3-Funktionen herumspielen können. Hier finden Sie auch Hinweise dazu, welche Techniken und Funktionen von welchen Plattformen für häufig angeforderte Stile wie abgerundete Ecken und Verlaufshintergründe unterstützt werden.) etc.)
Ich benutze es, um die Erfahrung auf modernen Browsern zu verbessern, so dass die Benutzer mit einem guten Browser mit besser aussehenden Benutzeroberflächen (abgerundete Ecken, Schatten, so etwas) "belohnt" werden. Ich denke, Sie sollten es nicht als Ersatz für Ihre aktuelle clientseitige Formularvalidierung verwenden, es sei denn, Sie haben eine Art JS-Fallback dafür.
Es verwendet HTML5 Boilerplate im Backend und fügt einige eigene Optionen hinzu, um Ihnen eine Vorlage zu geben, die Sie auf Ihrer eigenen Site bereitstellen können. Es enthält die Javascript-Bibliotheken (wie HTML Shiv oder Modernizr), die Ihre Site mit älteren Browsern kompatibel machen.
Hängt davon ab, was das Publikum ist und welche Funktionen Sie verwenden möchten. Ich gehe davon aus, dass es noch einige Jahre dauern wird, bis das durchschnittliche Projekt die Unterstützung für ie6 fallen lässt :(
Wenn es sich bei Ihrer Website um ein privates Intranet handelt und Sie entweder den Browser steuern oder nur über eine begrenzte Anzahl von Browsern verfügen, können Sie auf dem neuesten Stand der Technik arbeiten.
Wenn nicht, egal was Sie verwenden, müssen Sie immer den kleinsten gemeinsamen Nenner berücksichtigen. In diesem Fall handelt es sich wahrscheinlich um eine Kombination aus IE 6 und einer Reihe von mobilen Browsern. Wenn Sie also mit HTML 5 weitermachen, müssen Sie zusätzlich sicherstellen, dass sich Ihre Website gut verschlechtert.
Antworten:
HTML5 wird jetzt von allen Browsern unterstützt, sogar von IE5! (Wenn Sie das Skript html5shiv verwenden). Ich empfehle dringend, http://diveintohtml5.org zu lesen. Es ist eine der besten HTML5-Ressourcen, die es gibt.
Wenn Sie CSS3 verwenden, stellen Sie sicher, dass Sie zusätzlich zur regulären Syntax auch Vendor Predix verwenden. z.B
Grenzradius
-moz-border-radius
-webkit-border-radius
Ich glaube an eine fortschreitende Verbesserung. Die Unterstützung von IE9 für CSS3 klingt sehr vielversprechend.
quelle
Wahrscheinlich.
Es gibt Teile von HTML5, die Sie derzeit verwenden können. Formulare zum Beispiel. Wenn Sie
<input type="email">einen Browser haben, der HTML5 nicht unterstützt (ja, sogar IE6), sehen Sie einfach das Gleiche, was Sie sehen würden, wenn Sie es verwenden würden<input type="text">. In einem Browser, der HTML5-Formularelemente unterstützt, profitieren Sie jedoch von den Vorteilen desemailTyps: Der Client überprüft den Wert fehlerfrei, ohne dass eine zusätzliche JS erforderlich ist. Ja, für Nicht-HTML5-Browser benötigen Sie weiterhin JS. In den unterstützten Browsern ist jedoch eine weitere Validierungsebene vorhanden.Eine weitere Frage auf dieser Website bietet einen guten Überblick über die neuen Funktionen, die Ihnen über HTML5 und CSS3 zur Verfügung stehen. Auch in dieser Frage gibt es viele gute Daten zu Formularen.
Da Internet Explorer (und ältere Versionen von Safari und Firefox, wie selten sie auch sein mögen) viele dieser Funktionen nicht unterstützen, müssen Sie JavaScript-Bibliotheken verwenden, um die Lücke zu füllen. Dazu gehört ein Leistungseffekt (auch wenn dies nur für die Browser erforderlich ist). Achten Sie daher beim Einsatz auf Ihre Benutzer.
Verwenden Sie die folgenden Ressourcen, um die Probleme mit mangelnder Funktionsunterstützung zu beheben, falls Sie sich für diese neuen Funktionen entscheiden sollten:
.htcDatei), mit dem Internet Explorer 6-8 mehrere der nützlichsten CSS3-Dekorationsfunktionen rendern kann. Wenn auf ein Element angewendet, ermöglicht esIE zu erkennen und Anzeigeborder-radius,box-shadow,border-image, mehrere Hintergrundbilder undlinear-gradientals Hintergrundbild.truesofern dies unterstützt wird undfalsenicht. Fügt Unterstützung für das Stylen und Drucken von HTML5-Elementen hinzu, sodass Sie Elemente wie<section>,<header>und verwenden können<nav>.srceines<img />Elements oder alsbackground-imageEigenschaft in CSS. Im GegensatzAlphaImageLoader,background-positionundbackground-repeatwie vorgesehen, und Elemente auf die reagierta:hoverpseudo-Klasse..htcDatei), das dem IE 6 PNG-Unterstützung mit Alpha-Deckkraft hinzufügt. Vollständige Positionierung und Wiederholung des CSS-Hintergrunds werden (einschließlich CSS-Sprites) mit zusätzlichem (enthaltenem) JavaScript unterstützt..htcDatei), das automatisch Patches für: Hover,: Active und: Focus für IE6-, IE7- und IE8-Macken erstellt, sodass Sie sie wie in jedem anderen Browser verwenden können. Ist mit AJAXUnterstützung, was bedeutetdass jeder HTMLCode, in das Dokument über Javascript eingefügt wird werden auch Auslöser:hover,:activeund:focusStile imExplorer.Interessanterweise behebt DD_belatedPNG beide Probleme, die in Whatever: hover und TwinHelixs IE PNG Fix behoben wurden, mit reinem JavaScript. Whatever: hover und TwinHelixs IE PNG Fix verwenden eine Kombination aus JavaScript- und IE-angehängten Verhaltensweisen (
.htc files).Im Allgemeinen aktualisieren Benutzer von Nicht-IE-Browsern diese, wenn sie dazu aufgefordert werden, und der IE trägt die Hauptlast von "Aber einige Browser unterstützen diese Funktion nicht!". Beschwerden. Modernizr wird die Möglichkeit hinzufügen, HTML5 / CSS3 in jedem Browser zu verwenden, den Sie wahrscheinlich sehen, und nicht nur in IE. ie-css3.js führt dasselbe aus, Sie müssen es nur ohne einen IE-bedingten Kommentar implementieren (was bedeutet, dass alle Browser es erhalten, es sei denn, Sie fügen es bei den serverseitigen Benutzeragentenprüfungen hinzu - dies verringert die Leistung erheblich für alle Ihre Besucher und nicht nur für Ihre IE-Benutzer.)
quelle
Verwenden Sie die Technologie, die Ihren Anforderungen am besten entspricht.
Eric Meyer hat einen schönen Artikel darüber geschrieben, warum der Einstieg in die Verwendung herstellerspezifischer Präfixe für CSS-Regeln nicht mehr so lahm ist wie früher die Verwendung von CSS-Filter-Hacks.
Ich denke, das gilt auch für HTML5. Wenn Sie die Browserunterstützung auf verschiedene Funktionen prüfen können, verwenden Sie sie. Solange sich die Site anmutig verschlechtert, lebe sie.
quelle
Einige andere nützliche Links, wenn Sie entscheiden, welche CSS3-Funktionen Sie verwenden möchten: http://caniuse.com/ (enthält eine gute Aufschlüsselung der Elemente und Selektoren, die auf welchen Plattformen verwendet werden können)
http://css3please.com/ (eine in der Seite bearbeitbare Spielwiese, auf der Sie mit CSS3-Funktionen herumspielen können. Hier finden Sie auch Hinweise dazu, welche Techniken und Funktionen von welchen Plattformen für häufig angeforderte Stile wie abgerundete Ecken und Verlaufshintergründe unterstützt werden.) etc.)
quelle
Ich benutze es, um die Erfahrung auf modernen Browsern zu verbessern, so dass die Benutzer mit einem guten Browser mit besser aussehenden Benutzeroberflächen (abgerundete Ecken, Schatten, so etwas) "belohnt" werden. Ich denke, Sie sollten es nicht als Ersatz für Ihre aktuelle clientseitige Formularvalidierung verwenden, es sei denn, Sie haben eine Art JS-Fallback dafür.
quelle
Wenn Sie ein neues Projekt mit HTML5 starten, das auch in älteren Browsern unterstützt werden soll, ist die beste Option, Initializr - zu verwenden.
http://www.initializr.com/
Es verwendet HTML5 Boilerplate im Backend und fügt einige eigene Optionen hinzu, um Ihnen eine Vorlage zu geben, die Sie auf Ihrer eigenen Site bereitstellen können. Es enthält die Javascript-Bibliotheken (wie HTML Shiv oder Modernizr), die Ihre Site mit älteren Browsern kompatibel machen.
quelle
Hängt davon ab, was das Publikum ist und welche Funktionen Sie verwenden möchten. Ich gehe davon aus, dass es noch einige Jahre dauern wird, bis das durchschnittliche Projekt die Unterstützung für ie6 fallen lässt :(
quelle
Wenn es sich bei Ihrer Website um ein privates Intranet handelt und Sie entweder den Browser steuern oder nur über eine begrenzte Anzahl von Browsern verfügen, können Sie auf dem neuesten Stand der Technik arbeiten.
Wenn nicht, egal was Sie verwenden, müssen Sie immer den kleinsten gemeinsamen Nenner berücksichtigen. In diesem Fall handelt es sich wahrscheinlich um eine Kombination aus IE 6 und einer Reihe von mobilen Browsern. Wenn Sie also mit HTML 5 weitermachen, müssen Sie zusätzlich sicherstellen, dass sich Ihre Website gut verschlechtert.
quelle