HTML5 et CSS3 pour le monde réel, deuxième édition

Les plats clés

• HTML5 et CSS3 sont conçus pour garantir la compatibilité en arrière avec les navigateurs plus anciens, ce qui signifie que les modifications de la majoration ne provoquera pas de problèmes de mise en page ou d'erreurs. Même si les navigateurs plus âgés ne prennent pas en charge les nouvelles fonctionnalités, ils ne casseront pas les pages ou ne causeront pas de problèmes visibles.
• HTML5 et CSS3 sont bien soutenus dans de nombreux navigateurs Web mobiles, ce qui les rend idéaux pour le marché mobile en croissance rapide. Certaines nouvelles technologies introduites dans HTML5 et CSS3, comme les applications Web hors ligne et le stockage Web, ont été spécialement conçues avec des appareils mobiles à l'esprit.
• HTML5 et CSS3 permettent la création de pages Web puissantes, faciles à entretenir et à l'épreuve des futurs. À mesure que les navigateurs plus âgés tombent en désaccord, les développeurs doivent simplement supprimer tous les secours et les polyfills, laissant une base de code destinée aux navigateurs modernes.

Ce qui suit est un extrait de notre livre, HTML5 & CSS3 pour le monde réel, 2e édition, écrit par Alexis Goldstein, Louis Lazaris et Estelle Weyl. Des copies sont vendues dans les magasins dans le monde entier, ou vous pouvez l'acheter sous forme de livre électronique ici.

Bien que HTML5 présente des changements significatifs dans la façon dont le contenu est marqué, il convient de noter que ces changements ne feront pas l'étouffer des navigateurs plus âgés, ni entraîner des problèmes de mise en page ou des erreurs de page.

Cela signifie que vous pouvez prendre n'importe quel ancien projet contenant un balisage HTML4 ou XHTML valide, changer le doctype en HTML5 (que nous couvrirons au chapitre 2), et la page apparaîtra dans le navigateur de la même manière que ce qu'elle l'a fait avant. Les changements et ajouts dans HTML5 ont été mis en œuvre dans la langue de manière à garantir la compatibilité arrière avec des navigateurs plus âgés - même des versions plus anciennes d'Internet Explorer! Bien sûr, cela ne garantit pas que les nouvelles fonctionnalités fonctionneront, cela signifie simplement qu'ils ne casseront pas vos pages ou ne causeront pas de problèmes visibles.

Même en ce qui concerne les nouvelles fonctionnalités plus complexes (par exemple, les API), les développeurs ont trouvé diverses solutions pour fournir l'expérience équivalente aux navigateurs non soutenus, tout en adoptant les nouvelles possibilités passionnantes offertes par HTML5 et CSS3 . Parfois, c'est aussi simple que de fournir du contenu de secours, comme un lecteur vidéo flash aux navigateurs sans support vidéo natif. À d'autres moments, cependant, il a été nécessaire d'utiliser des scripts pour imiter la prise en charge des nouvelles fonctionnalités.

Ces techniques de «remplissage des écarts» sont appelées polyfills. S'appuyer sur des scripts pour imiter les fonctionnalités natives n'est pas toujours la meilleure approche lors de la création d'applications Web de haute performance, mais c'est une douleur croissante nécessaire à mesure que nous évoluons pour inclure de nouvelles améliorations et fonctionnalités, telles que celles que nous discuterons dans ce livre . Heureusement, pour écrire, des navigateurs plus âgés tels que Internet Explorer 6 à 9 qui ne prennent pas en charge de nombreuses nouvelles fonctionnalités de HTML5 et CSS3 sont utilisés par moins de 10% des visiteurs du Web aujourd'hui. De plus en plus de gens utilisent ce qui a été appelé des navigateurs à feuilles persistantes; c'est-à-dire les navigateurs qui mettent automatiquement à jour. Cela signifie que les nouvelles fonctionnalités seront fonctionnelles pour un public plus large, et éventuellement à tous, car les partages de navigateur plus âgés déclineront.

Dans ce livre, nous pouvons parfois recommander des options de secours ou des polyfills pour combler les lacunes dans les incompatibilités du navigateur; Nous essaierons également de faire de notre mieux pour vous avertir des inconvénients potentiels et des pièges associés à l'utilisation de ces options.

Bien sûr, il convient de noter que parfois aucun repère ou polyfillage n'est nécessaire du tout; Par exemple, lorsque vous utilisez CSS3 pour créer des coins arrondis sur des boîtes dans votre conception, il n'y a souvent aucun mal aux utilisateurs de navigateurs vraiment anciens qui voient des boîtes carrées à la place. La fonctionnalité du site n'a pas de dégradation, et ces utilisateurs ne seront pas plus sages sur ce qui leur manque.

Au fur et à mesure que nous progressons à travers les leçons et introduisons de nouveaux sujets, si vous prévoyez d'utiliser l'un de ceux-ci dans un projet, nous vous recommandons fortement de consulter une référence de support de navigateur telles que celle susmentionnée puis-je utiliser… de cette façon, vous Sachez comment fournir des replies ou des polyfills. Si nécessaire, nous discuterons occasionnellement des moyens de vous assurer que les navigateurs non soutenus ont une expérience acceptable, mais la bonne nouvelle est que cela devient de moins en moins un problème au fil du temps.

Le marché mobile en croissance

Une autre raison convaincante de commencer à apprendre et à utiliser HTML5 et CSS3 aujourd'hui est le marché mobile qui explose. Selon une source, en 2009, moins de 1% de toute l'utilisation du Web était sur des appareils mobiles et des tablettes. Au milieu de 2014, ce nombre était passé à plus de 35%! C’est un taux de croissance étonnant en un peu plus de cinq ans. Alors qu'est-ce que cela signifie pour ceux qui apprennent HTML5 et CSS3?

HTML5, CSS3, et les technologies de pointe connexes sont très bien prises en charge dans de nombreux navigateurs Web mobiles. Par exemple, Mobile Safari sur les appareils iOS tels que l'iPhone et l'iPad, l'Opera Mobile, le navigateur Android et le navigateur UC fournissent tous des niveaux solides de support HTML5 et CSS3. Les nouvelles fonctionnalités et technologies prises en charge par certains de ces navigateurs comprennent les animations CSS3, CSS Flexbox, l'API Canvas, le stockage Web, SVG, les applications Web hors ligne, et plus encore.

En fait, certaines des nouvelles technologies que nous allons introduire dans ce livre ont été spécialement conçues avec des appareils mobiles à l'esprit. Des technologies telles que les applications Web hors ligne et le stockage Web ont été conçues, en partie, en raison du nombre croissant de personnes qui accédaient aux pages Web avec des appareils mobiles. Ces appareils peuvent souvent avoir des limites avec l'utilisation des données en ligne et bénéficier donc grandement de la possibilité d'accéder aux applications Web hors ligne.

Nous aborderons ces sujets du chapitre 11, ainsi que d'autres tout au long du livre, fournissant les outils dont vous aurez besoin pour créer des pages Web pour une variété d'appareils et de plateformes.

sur le vrai truc

Il n'est pas réaliste de faire avancer les nouvelles technologies et de s'attendre à des pages et des applications pour un seul niveau de navigateur. Dans le monde réel et dans un monde où nous désirons HTML5 et CSS3 pour faire de nouvelles percées, nous devons être prêts à développer des pages qui fonctionnent dans un paysage varié. Ce paysage comprend des navigateurs modernes, toutes les plus anciennes versions restantes d'Internet Explorer et un marché explosif d'appareils mobiles.

Oui, à certains égards, la fourniture d'un ensemble différent d'instructions pour différents agents des utilisateurs ressemble aux premiers jours du Web avec son reniflement de navigateur désordonné et sa charge de code. Mais cette fois-ci, le nouveau code est beaucoup plus à l'épreuve de l'avenir: lorsque les navigateurs plus âgés tombent d'une utilisation générale, tout ce que vous avez à faire est de supprimer tous les retombées et les polyfills, ne laissant que la base de code qui s'adresse aux navigateurs modernes.

HTML5 et CSS3 sont les principales technologies qui ont inauguré un monde beaucoup plus excitant de la création de pages Web. Parce que tous les navigateurs modernes fournissent d'excellents niveaux de prise en charge pour un certain nombre de fonctionnalités HTML5 et CSS3, la création de pages Web puissantes et simples à faire à l'épreuve des futurs est plus facile que jamais.

donc, assez sur le «pourquoi», commençons à creuser dans le «comment»!

Les questions fréquemment posées sur HTML5 et CSS3

Quelles sont les principales différences entre HTML5 et CSS3?

HTML5 et CSS3 sont tous deux des outils essentiels pour le développement Web, mais ils servent des fins différentes. HTML5 est un langage de balisage utilisé pour structurer et présenter du contenu sur le Web. Il introduit de nouveaux éléments et attributs qui reflètent l'utilisation typique des sites Web modernes. D'un autre côté, CSS3 est un langage de feuille de style qui est utilisé pour décrire l'apparence et le formatage d'un document écrit en HTML. Il présente de nouvelles fonctionnalités comme les coins arrondis, les ombres, les gradients, les transitions, les animations et bien plus encore.

Comment puis-je commencer à apprendre HTML5 et CSS3?

Il existe plusieurs ressources disponibles en ligne pour commencer à apprendre HTML5 et CSS3. Des sites Web comme Codecademy, Udemy et Khan Academy proposent des cours interactifs. Vous pouvez également vous référer à la documentation en ligne et aux tutoriels. La pratique est essentielle pour maîtriser ces langues, alors essayez de créer votre propre site Web ou d'améliorer un existant.

Quels sont les avantages de l'utilisation de HTML5 et CSS3?

HTML5 et CSS3 sont livrés avec plusieurs avantages. Ils permettent un codage plus propre et plus efficace, des performances améliorées et une meilleure accessibilité. Ils offrent également des fonctionnalités plus avancées et une plus grande flexibilité dans la conception et la personnalisation des sites Web. De plus, ils sont pris en charge par tous les navigateurs modernes.

Puis-je utiliser HTML5 et CSS3 pour le développement Web mobile?

Oui, HTML5 et CSS3 sont d'excellents outils pour le développement Web mobile. Ils offrent des fonctionnalités telles que la balise Meta Meta, qui permet de contrôler la taille et l'échelle de la fenêtre, et les requêtes multimédias, qui permettent au rendu de contenu de s'adapter à des conditions telles que la résolution d'écran. Ils prennent également en charge les événements tactiles, qui sont essentiels pour les interfaces mobiles.

Quels sont les défis courants lorsque vous travaillez avec HTML5 et CSS3?

Certains défis courants incluent les problèmes de compatibilité des navigateurs, car tous les navigateurs ne supportent pas Toutes les fonctionnalités HTML5 et CSS3. De plus, comme ceux-ci sont encore des technologies en évolution, le suivi des derniers changements peut être difficile. De plus, la réalisation de la disposition et de la conception souhaitées peut parfois être complexe et chronométrique.

Comment puis-je m'assurer que mon code HTML5 et CSS3 est valide et sans erreur?

Vous pouvez utiliser des outils en ligne en ligne Comme le service de validation de balisage W3C pour vérifier votre code HTML5 et le service de validation CSS pour votre code CSS3. Ces outils identifieront toutes les erreurs ou problèmes dans votre code.

Quelles sont les meilleures pratiques pour écrire le code HTML5 et CSS3?

Certaines meilleures pratiques incluent l'utilisation d'éléments sémantiques dans HTML5 pour une meilleure accessibilité et un référencement , garder votre code CSS3 sec (ne vous répétez pas) et organiser votre code d'une manière qui le rend facile à lire et à maintenir. Assurez-vous également que votre code est valide et sans erreur.

Puis-je utiliser HTML5 et CSS3 avec d'autres langages de programmation?

Oui, HTML5 et CSS3 peuvent être utilisés en conjonction avec d'autres langages de programmation Comme JavaScript, PHP et Ruby. Ils sont utilisés pour structurer et styliser le contenu, tandis que les autres langues gèrent la fonctionnalité et le comportement du site Web.

Comment puis-je rendre mon site Web réactif à l'aide de HTML5 et CSS3?

Vous pouvez faire Votre site Web réactif à l'aide des requêtes multimédias de CSS3. Ceux-ci vous permettent d'appliquer différents styles en fonction de la taille de l'écran de l'appareil. Vous pouvez également utiliser des dispositions flexibles et des images flexibles pour vous assurer que vos échelles de contenu et vos redimensions correctement.

Quelles sont les fonctionnalités avancées de HTML5 et CSS3?

HTML5 introduit des fonctionnalités avancées comme des éléments vidéo et audio pour Multichéa, élément de toile pour le dessin et commandes de formulaire comme les sélecteurs de date, les cueilleurs de couleurs et les curseurs. CSS3 présente des fonctionnalités telles que les transitions et les animations, les gradients et les transformations 2D / 3D.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!