[Résolu] Balise main

Bonjour

Je vois dans la doc https://developer.mozilla.org/fr/docs/Web/HTML/Element/main que Internet Explorer ne supporte pas la balise <main>

Je suppose quand même que s'il y a une balise de ce type est est au moins considérées par IE comme l'équivalent d'une <div>? Si j'ai bien compris c'est ce que sont sensés faire les navigateurs qui ne comprennent pas une balise? Je suppose également que si on met un style CSS sur la balise il sera pris en compte? Ou bien faut il mettre une classe et styler la classe au cas où?

Merci de vos avis

Salut PapyJP,

Simon-k a écrit :

Pour les versions antérieures à Internet Explorer 9, ces nouveaux éléments ne sont pas reconnus par l'analyseur syntaxique. C'est-à-dire qu'ils ne sont non seulement pas stylés en bloc par défaut, mais également qu'on ne peut leur appliquer aucun style de quelque manière que ce soit.

Une technique alternative consiste à déclarer ces éléments au préalable en JavaScript. Un script (nommé html5shim ou html5shiv) est prévu à cet effet et mis à disposition à cette adresse :

<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Étant muni d'un commentaire conditionel, il ne sera chargé que pour ces versions spécifiques (Internet Explorer 6 à 8 inclus).

Pour tous les autres moteurs de navigateurs récents, il ne sera pas nécessaire d'appliquer une telle astuce : même si ces éléments n'auront pas de signification particulière pour le moteur de rendu, il sera possible de leur appliquer des styles CSS s'ils ne sont pas affichés en bloc par défaut.

Si vous utilisez déjà une bibliothèque telle que Modernizr, il ne sera pas nécessaire d'appliquer un autre script (tel que html5shim) car celle-ci embarque déjà une déclaration équivalente.

src : http://www.alsacreations.com/article/lire/1376-html5-section-article-nav-header-footer-aside.html

La balise main n'échappe pas à la règle.

En espérant t'avoir éclairé.

Effectivement ce n'est pas reconnu par ces versions (mais cela passe mieux sur les plus récentes).

Une solution est d'ajouter ceci côté CSS

main {
    display: block
}

Par contre il faut oublier les versions inférieures à la 9 qui nécessitent un autre artifice passant par JavaScript et nommé html5shiv (ou html5shim).

dew a écrit :

Par contre il faut oublier les versions inférieures à la 9 qui nécessitent un autre artifice passant par JavaScript et nommé html5shiv (ou html5shim).

Oui, ce gadget est d'office dans toutes mes pages.
Je vais donc mettre un display:block; de précaution
Merci à tous.

Et cette balise n'est pas la seule à devoir être en display:block :

article
aside
details
figcaption
figure
footer
header
main
nav
section
summary
menu

Pas de hgroup évidement puisque cette balise a été retirée de la spécification HTML5...

Ouais! je croyais que le magique html5shiv.js faisait le nécessaire.
Mais bien entendu je suppose que les vielles versions de IE ne permettent pas de déclarer du CSS dynamiquement?
Bon, je mettrai ça dans la feuille CSS commune à tout le site.
Elle n'arrête pas de gonfler, ces temps-ci!

PapyJP a écrit :
Bon, je mettrai ça dans la feuille CSS commune à tout le site.
Elle n'arrête pas de gonfler, ces temps-ci!

C'est pourquoi je t'avais proposé t'utiliser il y a quelques temps une feuille de style de base telle que Normalize.css qui te donne d'emblée (presque) toutes les solutions courrantes

Olivier C a écrit :

C'est pourquoi je t'avais proposé t'utiliser il y a quelques temps une feuille de style de base telle que Normalize.css qui te donne d'emblée (presque) toutes les solutions courrantes

Merci, je vais regarder le contenu de ce fichier.
Je n'aime pas trop intégrer tels quels des fichiers externes, d'une part parce qu'on ne sait pas comment ils vont évoluer (mais tu me diras qu'il suffit d'en faire une copie locale), d'autre part parce que ça n'apprend rien en soi.
J'ai fait une section "reset" dans ma feuille de style, à partir essentiellement du contenu de knaccs, je vais la compléter.

Je n'intègre pas ces fichiers tels quels moi non plus. Mais le fait de les étudier donne des infos précieuses sur les différences entre navigateurs.