web-dev-qa-db-fra.com

HTML5 et frameborder

J'ai un iframe sur un document HTML5. lorsque je valide, une erreur me dit que l'attribut sur le iframe frameBorder est obsolète et qu'il faut utiliser CSS à la place.

J'ai cet attributframeBorder="0"ici parce que c'était le seul moyen de comprendre comment se débarrasser de la frontière dans IE, j'ai essayé border:none; en CSS sans succès. Y at-il un moyen conforme pour résoudre ce problème?

Merci.

cssinternet-explorerhtml5
67
JD Isaacks

HTML 5 ne prend pas en charge des attributs tels que frameborder, scrolling, marginwidth et marginheight (qui étaient pris en charge dans HTML 4.01). Au lieu de cela, la spécification HTML 5 a introduit l'attribut seamless. L'attribut seamless permet au cadre en ligne d'apparaître comme s'il était rendu dans le document contenant. Par exemple, les bordures et les barres de défilement n'apparaîtront pas.

Selon MDN

frameborderobsolète depuis HTML5

La valeur 1 (valeur par défaut) dessine une bordure autour de ce cadre. La valeur 0 supprime la bordure autour de ce cadre, mais vous devez plutôt utiliser la bordure de la propriété CSS pour contrôler les bordures.

Comme le dit la citation ci-dessus, vous devriez supprimer la bordure avec CSS;
soit en ligne (style="border: none;") ou dans votre feuille de style (iframe { border: none; }).

Cela étant dit, il ne semble pas y avoir un seul fournisseur d'iframe qui n'utilise pas frameborder="0". Même YouTube utilise toujours l'attribut et ne fournit même pas d'attribut de style pour rendre les iframes rétrocompatibles lorsque le frameborder n'est plus pris en charge. Il est prudent de dire que l'attribut ne va pas n'importe où bientôt. Cela vous laisse avec 3 options:

  1. Continuez à utiliser frameborder, juste pour être sûr que cela fonctionne (pour le moment)
  2. Utiliser CSS, pour faire le "bon" truc
  3. Utilise les deux. Bien que cela ne résolve pas le problème d'incompatibilité (tout comme l'option 1), cela fonctionne et fonctionnera dans tous les navigateurs qui ont été et seront


En ce qui concerne l'état antérieur de cette réponse vieille de dix ans:

L'attribut seamless a été pris en charge depuis si peu de temps (ou pas du tout par certains navigateurs), que MDN ne l'a même pas répertorié comme une fonctionnalité obsolète. Ne l'utilisez pas et ne vous laissez pas troubler par les commentaires ci-dessous.

36
Sotiris

Comme dans l’autre billet ici , la meilleure solution consiste à utiliser l’entrée CSS de 

style="border:0;"
45
csharpforevermore

Étant donné que l'attribut frameBorder n'est nécessaire que pour IE, il existe un autre moyen de contourner le validateur. C'est un moyen léger qui ne nécessite ni Javascript ni aucune manipulation du DOM.

<!--[if IE]>
   <iframe src="source" frameBorder="0">?</iframe>
<![endif]-->
<!--[if !IE]>-->
   <iframe src="source" style="border:none">?</iframe>
<!-- <![endif]-->
16
Mr Lister

Cela marche

iframe{
    border-width: 0px;
}
6
Harry Bosh

Pourquoi ne pas utiliser la même technique pour "tromper" le validateur avec Javascript en collant un attribut cible dans XHTML <a onclick="this.target='_blank'">?

  • onsomething = "this.frameborder = '0'"

<iframe onload = " this.frameborder='0' " src="menu.html" id="menu"> </iframe>

Ou getElementsByTagName]("iframe")1 ajout de cet attribut pour tous les iframes de la page?

Je n’ai pas testé cela parce que j’ai fait quelque chose qui signifie que rien ne fonctionne dans IE de moins de 9! :)

2
Harry Alffa

J'ai trouvé un bon travail autour qui lui permettra de fonctionner dans IE7 ici . Il contourne le validateur pour l'attribut frameBorder mais conserve le css pour les futurs navigateurs, comme expliqué dans l'article.

0
sareed