Quoi de neuf dans HTML5 / CSS3?
HTML5 est énorme, mais aussi génial .
À mon avis, il s’agit principalement de interopérabilité. La spécification va même jusqu'à spécifier les cas Edge pour s'assurer que tous les navigateurs lisent le balisage de la même manière .
En second lieu, HTML5 a la vidéo et l’audio, qui font exactement ce que le nom dit. Si vous souhaitez inclure de la vidéo ou de l'audio, HTML5 devrait réduire les besoins de votre plugin.
En troisième lieu, HTML5 inclut de nombreuses aides en matière d'accessibilité et sémantique. Par exemple, des éléments tels que <section> et <article> aident les machines à déterminer le contenu supposé être. De nouveaux types d'entrée tels que <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 des lecteurs humains "courants".
Notez que les nouvelles fonctionnalités de formulaire sont bien plus que de nouveaux types d’entrée. Il inclut également la prise en charge du texte de substitution et de plusieurs autres attributs.
HTML5 inclut <canvas>, qui permet de dessiner des formes 2D (et avec WebGL, 3D) telles que des graphiques ou même des jeux de rendu.
L'ancien comportement est maintenant normalisé, tel que l'ancien contentEditable d'Internet Explorer.
Le DOCTYPE est enfin décent! Vous pouvez maintenant réellement le mémoriser! <!DOCTYPE html>
La spécification du codage est également plus facile avec <meta charset=utf-8>.
Si vous souhaitez envoyer des données au client et les associer à des éléments, vous pouvez maintenant le faire avec des attributs personnalisés. Par exemple, <div data-status=open>Open</div> est enfin autorisé. Notez que les noms d'attributs personnalisés doivent être précédés de data-.
Vous pouvez maintenant inclure SVG et MathML dans des 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 class. Au lieu d'avoir à obtenir getAttribute/setAttribute et à utiliser des hacks complexes pour déterminer les classes d'un élément et supprimer une classe spécifique de cet élément, classList simplifie ces situations difficiles.
Il existe également de nombreuses spécifications associées, 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 inclut le support de animations, transitions, bordures arrondies et du modèle de boîte flexible .
Les nouveaux sélecteurs sont également nouveaux dans CSS3. Ils facilitent la mise en correspondance d'éléments spécifiques sur une page (par exemple, uniquement les lignes impaires ou paires d'un tableau).
Opacité, nouvelles unités, Marquee et Ruby font également partie de CSS3.
Je pense que cela couvre à peu près toutes les parties importantes.
Pour suivre les fonctionnalités et spécifications prises en charge, vous pouvez vérifier Quand puis-je utiliser . Il inclut les fonctionnalités HTML5 et CSS3 et des éléments tels que SVG, PNG, CSS2.1 et CSS2. Il suit également leur statut d'approbation (recommandation, recommandation proposée, recommandation candidate, brouillon de travail, norme IETF). FindMeByIP conserve les matrices des fonctionnalités CSS3 prises en charge, par navigateur.
Quelques modifications et simplifications de la syntaxe ont eu lieu dans les rouages:
- Chaîne de doctype simplifiée:
<!DOCTYPE html> - Attribut
languagesimplifié pour la balise<html>:<html lang="en">
(peut toujours inclurexmlnsetxml:langsi vous souhaitez une conformité XML) - Balise dédiée
<meta>pourcharset:<meta charset="utf-8" /> scriptn'accepte plus l'attributtype, requiertcharsetpour les 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 beaucoup plus facile à lire/écrire et d'avoir des fichiers plus petits. Au lieu d'avoir <div id="nav">, vous avez simplement <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 ne sont pas pris en charge dans HTML5: <acronym>, <applet>, <basefont>, <big>, <center>, <dir>, <font>, <frame>, <frameset>, <noframes>, <s>, <strike>, <tt>, <u> et <xmp>.
Plusieurs nouveaux éléments dans HTML5 sont uniquement destinés à ajouter du balisage sémantique et ne feront rien sauf fournir une alternative plus significative à <div>. Ces nouveaux éléments incluent: <article>, <section>, <aside>, <hgroup>, <header>, <footer>, <nav>, <time>, <mark>, <figure> et <figcaption>.
Les formulaires HTML5 sont grandement améliorés.
Nouveaux types d'entrée
- couleur , email , date , mois , semaine , heure , date/heure , date/heure local , numéro , plage , recherche , tel , et rl
Nouveaux attributs:
- requis , autofocus , motif , liste , saisie semi-automatique et espace réservé
Nouveaux éléments
<keygen>,<datalist>,<output>,<meter>et<progress>
Nous pourrions utiliser des formulaires toute la journée, mais voici quelques ressources pour mieux expliquer toutes ces nouvelles choses.
- ne forme de folie
- L’avenir du Web: comment créer un formulaire en HTML5
- types de saisie HTML5
- Organisez une journée sur le terrain avec des formulaires HTML5
- Repenser les formulaires en HTML5
- les formulaires HTML5 sont à venir
CSS3 apporte le merveilleux de requêtes de médias . Les requêtes multimédia sont tellement, donc, donc super. Non disponible dans IE8 et inférieur, mais sera pris en charge par IE9.
CSS3 a incrémentation de compteurs . Vous pouvez les utiliser pour numéroter automatiquement des éléments sans liste ordonnée à l'aide du pseudo-sélecteur :before et du style content lorsqu'une liste ordonnée ou une numérotation serait sémantiquement incorrecte. (Par exemple, numérotez les étapes de remplissage des champs de formulaire.)
Si vous êtes un fan des réinitialisations CSS, il existe un réinitialisation CSS HTML5 disponible dans HTML5 Doctor. J'ai effectué 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 avecinputetselectpuisqu'il nécessitevertical-align: middle;- styles pour
inset:focusà partir de réinitialisation CSS d'Eric Meyer ajouté 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 deux les réinitialisations Eric Meyer et HTML5 Doctor.
HTML5 Security Cheatsheet surveille les bogues dans les fonctionnalités HTML5 telles qu’implémentées dans divers navigateurs, et inclut également des bogues dans les fonctionnalités existantes qu'il convient également de surveiller.
L'utilisation d'éléments HTML5 ne rend toutefois pas automatiquement votre code sémantique. Le WHATWG a écrit un article intitulé <section> n'est pas simplement 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 globale des documents. Ceci peut être utilisé, par exemple par AT, pour aider un utilisateur à naviguer dans un document. Et <section> et ses amis sont une partie importante de cet algorithme. Chaque fois que vous imbriquez une <section>, vous augmentez la profondeur du contour de 1 (si vous vous demandez quels sont les avantages de ce modèle par rapport au modèle <h1> - <h6> traditionnel, considérez un lecteur de flux basé sur le Web qui intégrer la structure de document du contenu souscrit avec celle du site environnant (en HTML 4, cela signifie l’analyse de tout le contenu et la renumérotation de tous les en-têtes. En HTML5, les en-têtes se retrouvent à la bonne profondeur gratuitement).
...
Si vous convertissez aveuglément tous les <div> de vos pages en <sections>, il est peu probable que votre page présente le contour que vous attendiez. Et, en plus d'être un faux-pas sémantique, cela confondra l'enfer des personnes qui comptent sur les titres pour la navigation.
Comme tout le reste du monde, il existe un cadre pour les applications Web HTML5 appelé SproutCore , construit par un ex-ingénieur Apple nommé Charles Jolley.
En plus de html5rocks.com , vous pouvez suivre html5doctor.com et html5gallery.com .
Il y a la mise en page de base comme border-radius, les ombres (box/text), le support de rgba, etc. C’est ce pour quoi CSS3 est le plus connu. Plus intéressants sont les balises canvas, vidéo, le stockage local, les websockets, etc., qui créeront des expériences beaucoup plus riches en HTML/JS/CSS. Ces fonctionnalités peuvent constituer une excellente alternative à Flash sur le Web, sans nécessiter de plug-ins supplémentaires.
Je trouve les nouveaux éléments HTML plutôt intéressants ... certains d'entre eux promettent des remplacements sémantiques pour les génériques divs. Les nouveaux éléments prometteurs incluent article, section, aside, figure, nav, header et footer, entre autres . J'aime beaucoup l'idée que des éléments sémantiques remplacent des conteneurs sans signification.
Oh oui, un élément connexe: le beaucoup simplifié doctype - enfin, quelque chose que je peux taper de mémoire!
( Ceci est ma réponse à une question similaire sur webapps.stackexchange.com )
Les toiles et Web Worker Threads sont les aspects les plus intéressants de HTML5 pour moi. J'ai écrit des applications Web qui utilisent ces fonctionnalités:
GioAUTHor [sic] utilise beaucoup le canevas pour vous permettre de tracer des chemins sur une carte, puis de trouver le chemin le plus court du début à la fin (via l'algorithme de Dijkstra en JavaScript).
Démo de threads JavaScript utilise le canevas de manière limitée, mais indique l'utilisation de threads de travail, avec code de démonstration. Il utilise également le contrôle de curseur HTML5 input = "range" .
La prise en charge du navigateur HTML5 est aussi variée que les navigateurs eux-mêmes. Il y a un site sympa (en HTML5, natch) à propos de compatibilité HTML5 qui indique qui est prêt à quoi.
En ce qui concerne CSS3 - alook à http://css3please.com/ pour voir ce que vous pouvez faire.
Plus votre navigateur est récent, plus vous serez en mesure de voir les effets.
Cela n’offre pas d’opinion sur l’importance, mais c’est un delta utile entre 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 my 2 ¢)- nouveaux éléments de formulaire, par exemple
<input type=email> data-*attributs- stockage côté client
- natif
<audio>et<video>
Les balises audio et vidéo permettent de présenter des médias sans avoir recours à un plugin tel que Flash ou Silverlight, et fonctionnent surtout sur les navigateurs iPhone et iPad. Il reste quelques problèmes à résoudre concernant les codecs et la gestion des droits numériques.
Jeremy Kieth vient de publier un très bon livre sur le sujet, "HTML5 for Web Designers". vous voudrez peut-être vérifier cela.
C'est le premier livre de A Book Apart. Je le recommande vivement aux concepteurs de niveau intermédiaire à avancé. A ++
NOTE: vous devrez peut-être attendre pour obtenir une copie papier
Parce que personne n'a encore mis ceci:
Le format HTML5 convient parfaitement à ce que tout le monde a répertorié, mais il inclut é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 que cela se produise.