HTML5 & CSS3 für die reale Welt, zweite Ausgabe

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!