it-swarm.com.de

Soll ich HTML5 und / oder CSS3 verwenden, um meine Website zu erstellen?

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?

16
Jason

HTML5 wird jetzt von allen Browsern unterstützt, sogar von IE5 (wenn Sie das Skript html5shiv verwenden). Ich empfehle dringend zu lesen http://diveintohtml5.org Es ist eine der besten HTML5-Ressourcen da draußen.

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 css3-Unterstützung von IE9 klingt sehr vielversprechend.

13
Jin

Wahrscheinlich.

Es gibt Teile von HTML5, die Sie derzeit verwenden können. Formulare zum Beispiel. Wenn Sie <input type="email"> in einem Browser haben, der HTML5 nicht unterstützt (ja, sogar IE6), sehen Sie einfach das, was Sie sehen würden, wenn Sie <input type="text"> verwendet hätten. In einem Browser, der HTML5-Formularelemente unterstützt, profitieren Sie jedoch von den Vorteilen des Typs email: Der Client überprüft den Wert fehlerfrei, ohne dass ein zusätzliches 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.

Ein weiteres Frage auf dieser Site 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 IE, um die HTML5-Elemente zu erkennen und zu formatieren.
  • CSS3 Pie: Ein IE angefügtes Verhalten (eine .htc Datei), das das Internet erzeugt Der Explorer 6-8 ist in der Lage, einige der nützlichsten CSS3-Dekorationsfunktionen zu rendern. Wenn es auf ein Element angewendet wird, ermöglicht es IE, border-radius, box-shadow, border-image, mehrere Hintergrundbilder und linear-gradient als Hintergrundbild zu erkennen und anzuzeigen .
  • Modernizr: Eine Javascript-Bibliothek, die die Feature-Erkennung verwendet, um den aktuellen Browser auf kommende CSS3/HTML5-Features zu testen und Klassen zum Browser hinzuzufügen <html> -Element für diejenigen, die unterstützt werden. Erstellt auch ein selbstbetiteltes globales JavaScript-Objekt, das eine boolesche Eigenschaft für jedes Feature enthält, true, falls unterstützt, und false, falls nicht. Fügt Unterstützung für das Stylen und Drucken von HTML5-Elementen hinzu, sodass Sie Elemente wie <section>, <header> und <nav> verwenden können.
  • ie-css3.js: ermöglicht es 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 PNG-Bildunterstützung hinzufügt. Sie können PNGs als src eines <img /> -Elements oder als background-image -Eigenschaft in CSS verwenden. Im Gegensatz zu AlphaImageLoader funktionieren background-position und background-repeat wie vorgesehen, und Elemente reagieren auf die Pseudoklasse a:hover.
  • TwinHelix IE PNG Fix: ein IE angefügtes Verhalten (ein .htc -Datei), die IE PNG-Unterstützung mit Alpha-Deckkraft hinzufügt. 6. Vollständige Positionierung und Wiederholung des CSS-Hintergrunds (einschließlich CSS-Sprites) mit zusätzlichem (eingeschlossenem) JavaScript.
  • Egal: hover: ein IE angefügtes Verhalten (eine .htc Datei) das automatisch patches: hover,: active und: focus für IE6-, IE7- und IE8-Macken, sodass Sie sie wie in jedem anderen Browser verwenden können. Beinhaltet AJAX Unterstützung, was bedeutet, dass jeder HTML-Code, der per Javascript in das Dokument eingefügt wird, auch die Stile :hover, :active und :focus im IE auslöst.

Interessanterweise behebt DD_belatedPNG beide Probleme, die in Whatever behoben wurden: Hover und TwinHelixs IE PNG Fix mit reinem JavaScript, während Hover und TwinHelixs IE PNG Fix eine Kombination aus JavaScript und _ verwenden.IE angehängte Verhaltensweisen (.htc files).

Im Allgemeinen aktualisieren Benutzer von Nicht-IE-Browsern diese, wenn sie dazu aufgefordert werden, und daher trägt IE 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 macht dasselbe, Sie müssen es nur ohne IE bedingten Kommentar implementieren (was bedeutet, dass alle Browser es bekommen Wenn Sie es nicht in die serverseitigen Benutzeragentenprüfungen einbeziehen, wird die Leistung aller Ihrer Besucher und nicht nur Ihrer IE Benutzer erheblich beeinträchtigt.)

12
Bryson

Verwenden Sie die Technologie, die Ihren Anforderungen am besten entspricht.

Eric Meyer schrieb ein netter Artikel darüber, warum es nicht mehr so ​​lahm ist, herstellerspezifische Präfixe für CSS-Regeln zu verwenden, wie es früher bei CSS-Filter-Hacks der Fall war.

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.

5
jessegavin

Einige andere nützliche Links, wenn Sie entscheiden, welche CSS3-Funktionen Sie verwenden möchten: http://caniuse.com/ (gibt eine gute Aufschlüsselung, welche Elemente und Selektoren auf welchen Plattformen verwendet werden können)

http://css3please.com/ (eine in der Seite bearbeitbare Spielwiese, um sich mit CSS3-Funktionen zu beschäftigen. Hier erhalten Sie auch Ratschläge, welche Techniken und Funktionen von welchen Plattformen für häufig angeforderte Stile unterstützt werden.) wie abgerundete Ecken, Verlaufshintergründe usw.)

2

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.

1
D4V360

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.

1
Mozan Sykol

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 einstellen kann :(

0
theotherreceive

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 sich auf den neuesten Stand der Technik bringen.

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, haben Sie das zusätzliche Problem, sicherzustellen, dass sich Ihre Site gut verschlechtert.

0
Gary.Ray