🌍 Support des navigateurs ✨ Nouvelles fonctionnalités 🔄 Compatibilité ascendante

🌍 1. Support des navigateurs

HTML5 est supporté par tous les navigateurs modernes :

🌐  Chrome  Version 10+  ✅ Compatible
🦊 Firefox Version 4+      ✅ Compatible
🧭  Safari  Version 5+     ✅ Compatible
🌍  Edge  Version 12+   ✅ Compatible
⚡  Opera  Version 11+  ✅ Compatible
📱  Navigateurs mobiles  - iOS, Android  ✅ Compatible
💡 Astuce : Pour vérifier si un navigateur supporte une fonctionnalité HTML5, utilisez le site caniuse.com.
<!-- Détection simple de support HTML5 avec JavaScript -->
<script>
    if (document.createElement('canvas').getContext) {
        console.log("Canvas est supporté !");
    } else {
        console.log("Canvas n'est PAS supporté");
    }
</script>

✨ 2. Nouvelles fonctionnalités

HTML5 apporte de nombreuses nouvelles fonctionnalités qui enrichissent le web :

📐  Éléments sémantiques

<header>, <footer>, <nav>, <article>, <section>, <aside>

🎬 Multimédia intégré

<audio> et <video> sans plugins (fini Flash !)

🎨 Canvas

Dessiner des graphiques 2D/3D dynamiquement avec JavaScript

📝 Formulaires avancés

Nouveaux types : email, url, date, range, color, etc.

💾  Stockage local

LocalStorage et SessionStorage (jusqu'à 10 Mo)

📍. Géolocalisation

Accéder à la position GPS de l'utilisateur

🚀  Web Workers

Exécuter du JavaScript en arrière-plan

🔌. WebSockets

Communication temps réel bidirectionnelle

📝 Exemple : Élément vidéo HTML5

<video width="320" height="240" controls>
    <source src="video.mp4" type="video/mp4">
    <source src="video.ogg" type="video/ogg">
    Votre navigateur ne supporte pas la balise vidéo.
</video>
📖 Voir l'explication
✅ Explication
  • controls : Affiche les contrôles de lecture
  • <source> : Permet plusieurs formats (MP4, OGG, WebM)
  • Le texte "Votre navigateur..." s'affiche si le navigateur ne supporte pas la vidéo

🔄 3. Compatibilité ascendante

HTML5 a été conçu pour être rétrocompatible avec les anciennes versions des navigateurs.

✅
Les anciens navigateurs ignorent les nouvelles balises

Les navigateurs anciens ignorent simplement les balises HTML5 qu'ils ne comprennent pas.

✅
Fallbacks (solutions de repli)

On peut inclure du contenu alternatif pour les navigateurs non supportés.

✅
Polyfills

Des scripts JavaScript ajoutent le support manquant pour les anciens navigateurs.

✅
Shiv HTML5

Permet aux anciens IE (Internet Explorer) de reconnaître les éléments HTML5.

📝 Exemple : Gestion de la compatibilité avec HTML5 Shiv

<!-- HTML5 Shiv pour Internet Explorer 8 et inférieur -->
<!--[if lt IE 9]>
    <script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
📖 Voir l'explication
✅ Explication

Les commentaires conditionnels IE :

  • <!--[if lt IE 9]> → "Si Internet Explorer version inférieure à 9"
  • <![endif]--> → Fin de la condition
  • Le script HTML5 Shiv permet à IE d'interpréter les nouvelles balises HTML5
💡 Bonnes pratiques :
  • Toujours fournir des alternatives (texte ou contenu) pour les fonctionnalités avancées
  • Tester vos pages sur plusieurs navigateurs
  • Utiliser des polyfills si nécessaire

📝 Résumé du chapitre

  • ✅ HTML5 est supporté par tous les navigateurs modernes
  • ✅ Apporte nouvelles balises sémantiques, multimédia intégré, Canvas, formulaires avancés
  • ✅ Rétrocompatible avec les anciens navigateurs (ignorent les nouvelles balises)
  • ✅ HTML5 Shiv pour Internet Explorer
  • ✅ Des polyfills existent pour ajouter le support manquant

📌 Quiz de vérification

Question 1 : Quelle version de Chrome supporte HTML5 ?

📖 Voir la réponse
✅ Réponse

Chrome version 10+ supporte HTML5.

Question 2 : Citez 3 nouvelles balises HTML5.

📖 Voir la réponse
✅ Réponse

<header>, <footer>, <nav>, <article>, <section>, <aside>, <audio>, <video>, <canvas>...

Question 3 : À quoi sert HTML5 Shiv ?

📖 Voir la réponse
✅ Réponse

HTML5 Shiv permet aux anciennes versions d'Internet Explorer de reconnaître et styliser les nouvelles balises HTML5.