Key Takeaways

• HTML5 und CSS3 sollen mit ?lteren Browsern die Kompatibilit?t rückw?rts sicherstellen, was bedeutet, dass ?nderungen des Markups keine Layoutprobleme oder Fehler verursachen. Auch wenn ?ltere Browser neue Funktionen nicht vollst?ndig unterstützen, werden sie keine Seiten brechen oder sichtbare Probleme verursachen.
• HTML5 und CSS3 sind in vielen mobilen Webbrowsern gut unterstützt, was sie ideal für den schnell wachsenden mobilen Markt macht. Einige neue Technologien, die in HTML5 und CSS3 eingeführt wurden, wie Offline -Web -Apps und Webspeicher, wurden speziell mit mobilen Ger?ten entwickelt.
• HTML5 und CSS3 erm?glichen die Schaffung leistungsstarker, leicht zu machender, zukunftssicherer Webseiten. Wenn ?ltere Browser aus dem Gebrauch fallen, müssen Entwickler einfach alle Fallbacks und Polyfills entfernen und eine Codebasis für moderne Browser abzielen.

Das Folgende ist ein Auszug aus unserem Buch, HTML5 & CSS3 für die reale Welt, 2. Ausgabe, geschrieben von Alexis Goldstein, Louis Lazaris und Estelle Weyl. Kopien werden weltweit in Gesch?ften verkauft, oder Sie k?nnen es hier in eBook -Form kaufen.

Obwohl HTML5 signifikante ?nderungen in der Art und Weise vorsieht, wie der Inhalt gekennzeichnet ist, ist es erw?hnenswert, dass diese ?nderungen weder ?ltere Browser zum Chokieren bringen noch zu Layoutproblemen oder Seitenfehlern führen.

Was dies bedeutet, dass Sie jedes alte Projekt mit gültigem HTML4- oder XHTML -Markup aufnehmen k?nnen, den DocType in HTML5 ?ndern (das wir in Kapitel 2 behandeln werden), und die Seite wird im Browser genauso angezeigt wie es getan vor. Die ?nderungen und Erg?nzungen in HTML5 wurden so in die Sprache implementiert, um mit ?lteren Browsern nach hinten die Kompatibilit?t zu gew?hrleisten-sogar ?ltere Versionen von Internet Explorer! Dies ist natürlich keine Garantie dafür, dass die neuen Funktionen funktionieren. Dies bedeutet einfach, dass sie Ihre Seiten nicht brechen oder sichtbare Probleme verursachen.

Selbst in Bezug auf die komplexeren neuen Funktionen (z. . Manchmal ist dies so einfach wie die Bereitstellung von Fallback -Inhalten, z. B. einen Flash -Video -Player für Browser ohne native Videounterstützung. Zu anderen Zeiten war es jedoch notwendig, Scripting zu verwenden, um die Unterstützung für neue Funktionen nachzuahmen.

Diese ?Gap-Filling“ -Techniken werden als Polyfills bezeichnet. Wenn Sie sich auf Skripte verlassen, um native Funktionen zu emulieren . Glücklicherweise werden nach dem Schreiben ?ltere Browser wie Internet Explorer 6 bis 9, die viele der neuen Funktionen in HTML5 und CSS3 nicht unterstützen, von weniger als 10% der Webbesucher verwendet. Immer mehr Menschen verwenden sogenannte Evergreen -Browser. Das hei?t, Browser, die automatisch aktualisieren. Dies bedeutet, dass neue Funktionen für ein gr??eres Publikum und schlie?lich für alle funktionieren, wie ?ltere Browser das Leges erlassen.

In diesem Buch k?nnen wir gelegentlich Fallback -Optionen oder Polyfills empfehlen, um die Lücken in Browser -Inkompatibilit?ten zu schlie?en. Wir werden auch versuchen, Ihnen das Beste zu geben, Sie vor potenziellen Nachteilen und Fallstricken zu warnen, die mit diesen Optionen verbunden sind.

Es ist natürlich erw?hnenswert, dass manchmal überhaupt keine Fallbacks oder Polyfills erforderlich sind. Wenn Sie beispielsweise CSS3 verwenden, um abgerundete Ecken für Kisten in Ihrem Design zu erstellen, schadet es bei Benutzern wirklich alter Browser oft keinen Schaden zu Square Boxes. Die Funktionalit?t der Website hat keinen Abbau, und diese Benutzer sind nicht klüger über das, was sie fehlen.

Wenn wir den Unterricht durchlaufen und neue Themen vorstellen, empfehlen wir, wenn Sie eines davon in einem Projekt verwenden m?chten Wissen Sie, wie und ob Fallbacks oder Polyfills bereitgestellt werden sollen. Wenn dies erforderlich ist, k?nnen wir gelegentlich sicherstellen, wie Sie sicherstellen k?nnen, dass nicht unterstützende Browser eine akzeptable Erfahrung haben. Die gute Nachricht ist jedoch, dass es im Laufe der Zeit immer weniger ein Problem wird.

Der wachsende mobile Markt

Ein weiterer zwingender Grund, heute mit HTML5 und CSS3 zu lernen und zu verwenden, ist der explodierende mobile Markt. Laut einer Quelle lag 2009 weniger als 1% aller Webnutzungen auf mobilen Ger?ten und Tablets. Mitte 2014 war diese Zahl auf mehr als 35%gestiegen! Das ist eine erstaunliche Wachstumsrate in etwas mehr als fünf Jahren. Was bedeutet das für diejenigen, die HTML5 und CSS3 lernen?

HTML5, CSS3 und verwandte hochmoderne Technologien werden in vielen mobilen Webbrowsern sehr gut unterstützt. Zum Beispiel bieten mobile Safari auf iOS -Ger?ten wie iPhone und iPad, Opera Mobile, Android Browser und UC -Browser einen starken HTML5- und CSS3 -Support. Neue Funktionen und Technologien, die von einigen dieser Browser unterstützt werden, umfassen CSS3 -Animationen, CSS Flexbox, die Canvas -API, Webspeicher, SVG, Offline -Web -Apps und mehr.

In der Tat wurden einige der neuen Technologien, die wir in diesem Buch einführen, speziell mit mobilen Ger?ten entwickelt. Technologien wie Offline -Web -Apps und Webspeicher wurden teilweise aufgrund der wachsenden Anzahl von Personen konzipiert, die mit mobilen Ger?ten auf Webseiten zugreifen. Solche Ger?te k?nnen h?ufig Einschr?nkungen bei der Online -Datennutzung haben und profitieren daher stark von der M?glichkeit, auf Webanwendungen offline zugreifen zu k?nnen.

Wir werden diese Themen in Kapitel 11 sowie andere im Laufe des Buches berühren und die Tools bereitstellen, die Sie für eine Vielzahl von Ger?ten und Plattformen erstellen müssen.

.

weiter zu dem echten Zeug

Es ist unrealistisch, neue Technologien voranzutreiben und zu erwarten, dass Seiten und Apps nur für eine Browserebene auftreten. In der realen Welt und in einer Welt, in der wir uns wünschen, dass HTML5 und CSS3 weitere Einführung in die Stra?e machen, müssen wir bereit sein, Seiten zu entwickeln, die in einer abwechslungsreichen Landschaft arbeiten. Diese Landschaft umfasst moderne Browser, verbleibende ?ltere Versionen von Internet Explorer und einen explodierenden Markt für mobile Ger?te.

Ja, in gewisser Weise ?hnelt das Bestehen anderer Anweisungen für verschiedene Benutzeragenten den frühen Tagen des Webs mit dem chaotischen Browser -Schnüffeln und Code -Gabeln. Aber diesmal ist der neue Code viel zukunftssicherer: Wenn ?ltere Browser aus dem allgemeinen Gebrauch ausfallen, müssen Sie lediglich alle Fallbacks und Polyfills entfernen und nur die Codebasis, die sich an moderne Browser richtet

HTML5 und CSS3 sind die führenden Technologien, die eine viel aufregendere Welt des Webseiten -Autorings eingeleitet haben. Da alle modernen Browser ein hervorragendes Ma? an Unterstützung für eine Reihe von HTML5- und CSS3-Funktionen bieten, ist es einfacher als je zuvor.

So genug über das "Warum", lassen Sie uns in das "Wie" eingraben [??>

h?ufig gestellte Fragen zu HTML5 und CSS3

Was sind die wichtigsten Unterschiede zwischen HTML5 und CSS3? HTML5 ist eine Markup -Sprache, die zum Strukturieren und Pr?sentieren von Inhalten im Web verwendet wird. Es führt neue Elemente und Attribute ein, die die typische Verwendung auf modernen Websites widerspiegeln. Auf der anderen Seite ist CSS3 eine Stilblattsprache, mit der das Aussehen und die Formatierung eines in HTML geschriebenen Dokuments beschrieben werden. Es führt neue Funktionen wie abgerundete Ecken, Schatten, Gradienten, überg?nge, Animationen und vieles mehr ein. HTML5 und CSS3. Websites wie Codecademy, Udemy und Khan Academy bieten interaktive Kurse an. Sie k?nnen sich auch auf Online -Dokumentation und Tutorials beziehen. Praxis ist der Schlüssel zur Beherrschung dieser Sprachen. Versuchen Sie daher, eine eigene Website zu erstellen oder eine vorhandene zu verbessern.

Welche Vorteile haben die Verwendung von HTML5 und CSS3?

HTML5 und CSS3 mit mehreren Vorteilen. Sie erm?glichen eine sauberere und effizientere Codierung, eine verbesserte Leistung und eine bessere Zug?nglichkeit. Sie bieten auch fortschrittlichere Funktionen und eine gr??ere Flexibilit?t beim Entwerfen und Anpassen von Websites. Darüber hinaus werden sie von allen modernen Browsern unterstützt.

Kann ich HTML5 und CSS3 für die Entwicklung mobiler Webs verwenden? Sie bieten Funktionen wie das Meta -Tag des Ansichtsfensters an, mit denen die Gr??e und Skalierung des Ansichtsfensters sowie die Abfragen des Mediens die Kontrolle über die Renderung des Inhalts erm?glichen, sich an Bedingungen wie die Bildschirmaufl?sung anzupassen. Sie unterstützen auch Touch -Ereignisse, die für mobile Schnittstellen von wesentlicher Bedeutung sind. Alle HTML5- und CSS3 -Funktionen. Da sich diese noch weiterentwickeln, kann es eine Herausforderung sein, mit den neuesten Ver?nderungen Schritt zu halten. Darüber hinaus kann das Erreichen des gewünschten Layouts und des gewünschten Designs manchmal komplex und zeitaufw?ndig sein.

Wie kann ich sicherstellen Wie der W3C -Markup -Validierungsdienst, um Ihren HTML5 -Code und den CSS -Validierungsdienst für Ihren CSS3 -Code zu überprüfen. Diese Tools identifizieren Fehler oder Probleme in Ihrem Code. , halten Sie Ihren CSS3 -Code trocken (wiederholen Sie sich nicht selbst) und organisieren Sie Ihren Code auf eine Weise, die das Lesen und Aufrechterhalten erleichtert. Stellen Sie auch immer sicher, dass Ihr Code gültig und fehlerfrei ist.

Kann ich HTML5 und CSS3 mit anderen Programmiersprachen verwenden? Wie JavaScript, PHP und Ruby. Sie werden verwendet, um den Inhalt zu strukturieren und zu stylen, w?hrend die anderen Sprachen mit der Funktionalit?t und dem Verhalten der Website umgehen. Ihre Website reagiert mit den Medienfragen von CSS3. Mit diesen k?nnen Sie je nach Bildschirmgr??e des Ger?ts unterschiedliche Stile anwenden. Sie k?nnen auch flexible Layouts und flexible Bilder verwenden, um Ihre Inhaltsskalen zu gew?hrleisten und die Gr??e korrekt zu ?ndern.

Was sind einige erweiterte Funktionen von HTML5 und CSS3? Multimedia-, Canvas -Element zum Zeichnen und Formularsteuerungen wie Datumspicker, Farbpflücker und Schieberegler. CSS3 führt Funktionen wie überg?nge und Animationen, Gradienten und 2D/3D -Transformationen ein.

Das obige ist der detaillierte Inhalt vonHTML5 & CSS3 für die reale Welt, zweite Ausgabe. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!