Quoi de neuf en HTML5 / CSS3?


23

J'ai vu ce site et ce site , mais c'est beaucoup à digérer. Quelles sont les principales caractéristiques de HTML5 qui le rendent différent / meilleur que l'ancien (X) HTML / CSS ordinaire?

Réponses:


33

HTML5 est énorme , mais aussi génial .

À mon avis, il s'agit principalement d' interopérabilité . La spécification va et spécifie les cas de bord pairs pour essayer de s'assurer que tous les navigateurs lisent le balisage de la même manière .

En deuxième place, HTML5 propose la vidéo et l'audio, qui font exactement ce que son nom l'indique. Si vous souhaitez inclure de la vidéo ou de l'audio, HTML5 devrait réduire vos besoins en plugins.

En troisième position, HTML5 comprend de nombreuses fonctionnalités d'accessibilité et d'aide sémantique. Par exemple, des éléments comme <section>et <article>aident les machines à comprendre ce que le contenu est censé être. De nouveaux types d'entrée comme <input type=email>peuvent également être utiles pour les mêmes raisons, bien que les nouveaux types d'entrée incluent des interfaces utilisateur personnalisées qui les rendent utiles même pour les lecteurs humains "courants".

Notez que les nouvelles fonctionnalités des formulaires sont bien plus que de nouveaux types d'entrée. Il inclut également la prise en charge du texte d'espace réservé et de plusieurs autres attributs.

HTML5 comprend <canvas>, qui permet de dessiner des formes 2D (et, avec WebGL, 3D) comme des graphiques ou même de rendre des jeux.

L'ancien comportement est désormais standardisé, comme l'ancien d'Internet Explorer contentEditable.

Le DOCTYPE est enfin décent! Vous pouvez maintenant le mémoriser!<!DOCTYPE html>

La spécification de l'encodage est également plus simple, avec <meta charset=utf-8>.

Si vous souhaitez envoyer des données au client et les associer à des éléments, vous pouvez désormais le faire avec des attributs personnalisés. Par exemple, <div data-status=open>Open</div>est désormais enfin autorisé. Notez que les noms d'attributs personnalisés doivent être précédés de data-.

Vous pouvez désormais inclure SVG et MathML dans les documents HTML. Auparavant, vous ne pouviez le faire qu'avec des documents XHTML.

Parmi les multiples nouvelles fonctions et champs définis par HTML5, l'un des plus impressionnants est classList, qui vous permet de manipuler plus facilement l'attribut de classe. Au lieu d'avoir à obtenir getAttribute / setAttribute et à utiliser des hacks complexes pour déterminer quelles classes a un élément et supprimer une classe spécifique de cet élément, classList rend ces situations difficiles très simples.

Il existe également plusieurs spécifications connexes, telles que Web Workers, Web Sockets et IndexedDB, qui ne font pas vraiment partie de HTML5, mais tout le monde en parle comme si elles l'étaient. Ils sont très utiles pour tirer parti des ordinateurs multicœurs, communiquer avec les serveurs et stocker les données localement.

Quant à CSS3, il prend en charge les animations , les transitions , les bordures arrondies et le modèle de boîte flexible .

Autre nouveauté dans CSS3: les nouveaux sélecteurs, qui facilitent la mise en correspondance d'éléments spécifiques sur une page (comme uniquement les lignes impaires ou paires d'un tableau).

L'opacité, les nouvelles unités, le chapiteau et le rubis font également partie de CSS3.

Je pense que cela couvre à peu près toutes les parties importantes.


1
Excellent délabrement.
George Edison

Bon travail pour toucher tous les points majeurs.
Grant Palin

1
Il convient de mentionner que HTML5 n'est actuellement qu'un projet de travail et qu'il n'a pas encore été complètement finalisé.
Django Reinhardt

1
@Django Reinhardt Comme le dit WHATWG, toutes les fonctionnalités HTML5 ne sont pas au même stade. Certains sont déjà plus largement mis en œuvre, d'autres prendront plus de temps. L'implémentation est ce qui compte vraiment lors du développement de sites Web, et l'état des spécifications n'est pas une bonne mesure pour cela. Vous pouvez également consulter la FAQ WHATWG.
luiscubal

1
Se sont-ils débarrassés de la nécessité d'avoir des guillemets pour les attributs XHTML valides?
Lotus Notes

18

Pour suivre la prise en charge des fonctionnalités et des spécifications, vous pouvez vérifier quand puis-je l'utiliser . Il comprend des fonctionnalités HTML5 et CSS3 et des choses comme SVG, PNG, CSS2.1 et CSS2. Il suit également leur statut d'approbation (recommandation, proposition de recommandation, recommandation de candidat, projet de travail, norme IETF). FindMeByIP gère les matrices des fonctionnalités CSS3 prises en charge uniquement, par navigateur.

Des modifications et une simplification de la syntaxe ont eu lieu dans les écrous et les boulons:

  • Chaîne de doctype simplifiée: <!DOCTYPE html>
  • languageAttribut simplifié pour la <html>balise: <html lang="en">
    (peut toujours inclure xmlnset xml:langsi vous voulez la conformité XML)
  • <meta>Tag dédié pour charset:<meta charset="utf-8" />
  • scriptn'accepte plus d' typeattribut, nécessite charsetdes scripts distants:
    <script src="/media/js/jquery.js" charset="utf-8"></script>(les scripts en ligne ne nécessitent aucun attribut supplémentaire)

HTML5 apporte la possibilité pour votre balisage d'être beaucoup plus sémantique , et globalement beaucoup plus facile à lire / écrire et à avoir des tailles de fichier plus petites. Au lieu d'avoir <div id="nav">, vous avez juste <nav>. Cela ne semble pas beaucoup, mais ça s'additionne.

De nombreux éléments de XHTML1 et HTML4 sont obsolètes. Les éléments suivants sont pas pris en charge HTML5: <acronym>, <applet>, <basefont>, <big>, <center>, <dir>, <font>, <frame>, <frameset>, <noframes>, <s>, <strike>, <tt>, <u>et <xmp>.

Plusieurs nouveaux éléments en HTML5 ne sont censés ajouter que du balisage sémantique supplémentaire et ne feront rien d'autre que fournir une alternative plus significative à <div>. Ces nouveaux éléments sont les suivants: <article>, <section>, <aside>, <hgroup>, <header>, <footer>, <nav>, <time>, <mark>, <figure>et <figcaption>.

Les formulaires HTML5 sont considérablement améliorés.

Nouveaux types d'entrée

Nouveaux attributs:

De nouveaux éléments

Nous pourrions entrer dans les formulaires toute la journée, mais voici quelques ressources pour mieux expliquer toutes ces nouvelles choses.

CSS3 apporte le merveilleux de Media Queries . Les requêtes média sont tellement, tellement, tellement géniales. Non disponible dans IE8 et ci-dessous, mais sera pris en charge par IE9.

CSS3 a des compteurs incrémentiels . Vous pouvez les utiliser pour numéroter automatiquement les éléments sans liste ordonnée à l'aide du :beforepseudo-sélecteur et du contentstyle lorsqu'une liste ordonnée ou une numérotation serait sémantiquement incorrecte. (Par exemple, numéroter les étapes de remplissage des champs du formulaire.)

Si vous êtes un fan des réinitialisations CSS, une réinitialisation CSS HTML5 est disponible auprès de HTML5 Doctor. J'ai fait trois ajouts à cette réinitialisation pour mes pages personnelles:

  • text-rendering: optimizeLegibility; ajouté aux styles dans la définition de <body>
  • labelinclus dans la définition avec inputet selectpuisqu'il a besoinvertical-align: middle;
  • styles pour inset à :focuspartir de la réinitialisation CSS d' Eric Meyer ajoutés à nouveau dans

Une réinitialisation concurrente appelée reset5 est disponible, mais je ne l'ai pas encore évaluée personnellement. Il est basé sur les réinitialisations d'Eric Meyer et HTML5 Doctor.

La feuille de sécurité de sécurité HTML5 suit les bogues dans les fonctionnalités HTML5 telles qu'implémentées dans divers navigateurs, et inclut également les bogues des fonctionnalités existantes qui sont également utiles pour le suivi.

Cependant, l'utilisation d'éléments HTML5 ne rend pas automatiquement votre code sémantique. Le WHATWG a écrit un article intitulé <section> n'est pas seulement un "sémantique <div>" expliquant qu'il ne s'agit pas simplement d'un élément conteneur.

En HTML 5, il existe un algorithme pour construire une vue d'ensemble des documents. Cela peut être utilisé, par exemple par AT, pour aider un utilisateur à naviguer dans un document. Et <section> et amis sont une partie importante de cet algorithme. Chaque fois que vous imbriquez une <section>, vous augmentez la profondeur du contour de 1 (au cas où vous vous demandez quels sont les avantages de ce modèle par rapport au modèle traditionnel <h1> - <h6>, envisagez un lecteur de flux Web qui souhaite intégrer la structure du document du contenu syndiqué à celle du site environnant. En HTML 4, cela signifie analyser tout le contenu et renuméroter tous les titres. En HTML5, les titres se retrouvent gratuitement à la bonne profondeur).

...

Si vous convertissez simplement à l'aveugle tous les <div> s de vos pages en <sections>, il est peu probable que votre page ait le contour que vous attendiez. Et, en plus d'être un faux pas sémantique, cela confondra l'enfer des personnes qui dépendent des titres pour la navigation.

Comme tout le reste de ce monde, il existe un cadre pour les applications Web HTML5 appelé SproutCore , construit par un ancien ingénieur d'Apple nommé Charles Jolley.

En plus de html5rocks.com, vous pouvez suivre html5doctor.com et html5gallery.com .


+1 Belle réponse! Vous pensez peut-être manquer une fermeture sur l'une de vos sections de code quelque part.
JasonBirch

+1 Merci pour les liens vers les tableaux de compatibilité du navigateur! FindMeByIP était particulièrement soigné. De plus, en plus de SproutCore, ExtJS vient de relancer en tant que Sencha et ils semblent donner leur poids derrière HTML 5.
Sharpie

4

Il y a la disposition de base comme le rayon de la bordure, les ombres (boîte / texte), le support rgba, etc. C'est pour cela que CSS3 est le plus connu. Plus intéressants sont la balise canvas, la balise vidéo, le stockage local, les websockets et ainsi de suite qui créeront des expériences utilisateur beaucoup plus riches en HTML / JS / CSS ordinaire. Ces fonctionnalités ont le potentiel pour être une excellente alternative pour Flash sur le web sans avoir besoin de plugins supplémentaires.


4

Je trouve les nouveaux éléments HTML plutôt intéressants ... certains d'entre eux sont des remplacements sémantiques prometteurs pour les génériques div. Les nouveaux éléments prometteurs comprennent article, section, aside, figure, nav, header, et footer, entre autres. J'aime vraiment l'idée que des éléments sémantiques remplacent des conteneurs sans signification.

Oh ouais, un élément connexe: le très simplifié doctype- enfin quelque chose que je peux taper de mémoire!


4

( Ceci est ma réponse à une question similaire sur webapps.stackexchange.com )

Les threads Canvas et Web Worker sont pour moi les aspects les plus intéressants de HTML5. J'ai écrit quelques applications Web qui utilisent ces fonctionnalités:

GioAUTHor [sic] utilise largement le canevas pour vous permettre de tracer des chemins sur une carte, puis de trouver l'itinéraire le plus court du début à la fin (via l'algorithme de Dijkstra en JavaScript).

JavaScript Thread Demo utilise de manière limitée le canevas mais montre l'utilisation des Worker Threads, avec le code de démonstration. Il utilise également le contrôle de curseur HTML5 input type = "range" .


La prise en charge du navigateur HTML5 est aussi variée que les navigateurs eux-mêmes. Il y a un bon site (en HTML5, natch) sur la préparation HTML5 qui montre qui est prêt pour quoi.


J'avais déjà vu ce site de préparation HTML5, mais je ne me souvenais pas où - merci pour le lien! Vraiment bien, le double objectif du site sert.
Grant Palin


1

Les balises audio et vidéo permettent de présenter des médias sans avoir besoin d'un plugin comme Flash ou Silverlight, et fonctionnent surtout sur les navigateurs iPhone et iPad. Il y a des problèmes à régler concernant les codecs et la gestion des droits numériques.


1

Jeremy Kieth vient de publier un très bon livre sur le sujet, "HTML5 pour les concepteurs Web". vous voudrez peut-être vérifier cela.

Il s'agit du premier livre de A Book Apart. Je le recommande vivement aux concepteurs intermédiaires à avancés. A ++

http://books.alistapart.com/

REMARQUE : vous devrez peut-être attendre pour obtenir une copie papier


1

Cela ne donne pas d'opinion sur l'importance, mais c'est un delta utile entre les HTML 4 et 5.

Mes 2 ¢ sur les principales améliorations:

  • <section>et le nouvel algorithme décrivant l'en-tête (j'ai dit que c'était juste mon 2 ¢)
  • nouveaux éléments de formulaire, par exemple <input type=email>
  • data-* les attributs
  • stockage côté client
  • natif <audio>et<video>

0

Parce que personne ne l'a encore dit:

HTML5 est idéal pour ce que tout le monde a répertorié, mais il comprend également la géolocalisation standard, les travailleurs Web, le socket Web, le canevas et le stockage local. Tous ces outils font partie de la spécification HTML5, qui utilise beaucoup de JavaScript dans les coulisses pour y arriver.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.