HTML5 y frameborder

82

Tengo un iframe en un documento HTML5. cuando valido, iframe frameBorderaparece un error que me dice que el atributo en el es obsoleto y que use CSS en su lugar.

Tengo este atributo frameBorder="0"aquí porque era la única forma en que podía descubrir cómo deshacerme del borde en IE, lo intenté border:none;en CSS sin suerte. ¿Existe una forma compatible de solucionar este problema?

Gracias.

JD Isaacks
fuente

Respuestas:

58

HTML 5 no admite atributos como frameborder, scrolling, marginwidth y marginheight (que eran compatibles con HTML 4.01). En cambio, la especificación HTML 5 ha introducido el atributo sin costuras. El atributo sin costura permite que el marco en línea aparezca como si se estuviera renderizando como parte del documento que lo contiene. Por ejemplo, los bordes y las barras de desplazamiento no aparecerán.

Según MDN

frameborder Obsoleto desde HTML5

El valor 1(predeterminado) dibuja un borde alrededor de este marco. El valor 0elimina el borde alrededor de este marco, pero debería usar el borde de la propiedad CSS para controlar los bordes.

Como dice la cita anterior, debe eliminar el borde con CSS;
ya sea en línea ( style="border: none;") o en su hoja de estilo ( iframe { border: none; }).

Dicho esto, no parece haber un solo proveedor de iframe que no utilice frameborder="0". Incluso YouTube todavía usa el atributo y ni siquiera proporciona un atributo de estilo para hacer que los iframes sean compatibles con versiones anteriores cuando ya no se admite frameborder. Es seguro decir que el atributo no desaparecerá pronto. Esto te deja con 3 opciones:

  1. Sigue usando frameborder, solo para asegurarte de que funciona (por ahora)
  2. Usa CSS para hacer lo "correcto"
  3. Utilice ambos. Aunque esto no resuelve el problema de incompatibilidad (al igual que la opción 1), sí funciona y funcionará en todos los navegadores que han sido y serán

En cuanto al estado anterior de esta respuesta de una década:

El seamlessatributo ha sido admitido durante tan poco tiempo (o no lo han admitido algunos navegadores), que MDN ni siquiera lo enumera como una característica obsoleta. No lo use y no se confunda con los comentarios a continuación.

Sotiris
fuente
31
Entonces, ¿hay alguna manera de producir frameBorder = 0 en CSS?
JD Isaacks
1
Eso es realmente molesto, estoy usando la última versión de Chrome y simplemente no funciona. Aunque frameborder = "0" lo hace.
RGBK
1
revisando esto, seamless funciona en chrome ff y safari. Ponlo en el iframe así: <iframe seamless
RGBK
8
Se supone que debes usarlo border-width: 0px;, pero me temo que tampoco es compatible con todos los navegadores iframes. seamlesstodavía no es compatible con todos los navegadores. Este es uno de esos pocos problemas de HTML5 que debe aceptar. ¡Usa frameborder="0"y al diablo con la validación!
Solomon Closson
2
seamlessse ha eliminado de la especificación HTML5, por lo que nunca será compatible. La respuesta de @ ForTheWatch es ahora la mejor.
rvighne
48

Según la otra publicación aquí , la mejor solución es usar la entrada CSS de

style="border:0;"
csharpforevermore
fuente
6
Creo que recomiendan: border-width: 0pxTBH. border: none;no trabajará.
Solomon Closson
5
@ cnotethegr8: no funciona en IE y Opera (versión actual), no se ha probado en Chrome, Safari y / o Firefox. Pruebo los navegadores de mierda, porque si funciona en ellos, es casi seguro que funcione en los demás.
Solomon Closson
2
@SolomonClosson I test for the crappy browsers, because if it works in them, than it is almost sure to work in the others.Dios mío, ese ingenuo. Si desea asegurarse de que su aplicación funcione en un navegador, debe probar en ese navegador, simple y llanamente. No hay garantías, solo peculiaridades.
Jonathan Dumaine
1
La nota rápida es que la unidad en 0px es redundante. Prefiero margen: 0; o borde: 0; porque 0px == 0em == 0% == 0 cuando se trata de CSS.
csharpforevermore
1
Ahora que seamlessse ha eliminado de la especificación, esta es la única respuesta correcta
rvighne
17

Dado que el frameborderatributo solo es necesario para IE, hay otra forma de sortear el validador. Esta es una forma liviana que no requiere Javascript ni ninguna manipulación DOM.

<!--[if IE]>
   <iframe src="source" frameborder="0">?</iframe>
<![endif]-->
<!--[if !IE]>-->
   <iframe src="source" style="border:none">?</iframe>
<!-- <![endif]-->
Señor lister
fuente
3
Esta es la mejor respuesta a la pregunta formulada. Sin embargo, el objetivo del cumplimiento de HTML5 (que es un trabajo en progreso y puede cambiar y cambiará sin previo aviso) no es útil, especialmente cuando te hace usar trucos que no sirven para otro propósito que el cumplimiento y que hacen que el código sea más complicado. . Es mejor seguir usándolo frameBorder="0"si no desea un borde alrededor de un marco en línea.
Jukka K. Korpela
Totalmente cierto. Solo quiero señalar que como el atributo frameborder es puramente de presentación, no hay muchas posibilidades de que alguna vez vuelva al estándar HTML, sin importar cuánto esté cambiando el estándar.
Mr Lister
El atributo está en el "estándar" HTML5: w3.org/TR/html5/rendering.html#frames-and-framesets
Jukka K. Korpela
@ JukkaK.Korpela Espera, ¿qué? Entonces, ¿por qué el OP obtendría un error de validación? Oh, lo siento, la página a la que enlazas trata sobre framey framesetno iframe. El atributo está obsoleto en el iframeelemento; ver w3.org/TR/html5/obsolete.html#attr-iframe-frameborder
Mr Lister
El error de validación se emite porque la característica se declara obsoleta, lo que realmente no significa mucho más que emitir el mensaje. El atributo todavía está definido en HTML5 y se espera que los navegadores, de acuerdo con HTML5 CR, sigan admitiéndolo.
Jukka K. Korpela
6

Esto funciona

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

¿Qué tal si usamos la misma técnica para "engañar" al validador con Javascript pegando un atributo de destino en XHTML <a onclick="this.target='_blank'">?

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

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

O getElementsByTagName]("iframe")1 añadiendo este atributo para todos los marcos flotantes en la página?

¡No he probado esto porque hice algo que significa que nada funciona en IE menos de 9! :) Entonces, mientras estoy resolviendo eso ... :)

Harry Alffa
fuente
0

Encontré una buena solución que le permitirá funcionar en IE7 aquí . Omite el validador para el atributo frameBorder pero mantiene css para futuros navegadores como se explica en la publicación.

Sarid
fuente
utilizar JavaScript para generar el iframe? aplazará aún más el tiempo de carga de los contenidos del iframe simplemente por eliminar un mensaje de advertencia de CSS. Como dice la respuesta aceptada, se recomienda usar seamlessatributo en su lugar.
Raptor
Sí, sin embargo, la fluidez no funcionaba para mí en IE7, de ahí mi publicación.
sareed
-5
style="border:none; scrolling:no; frameborder:0;  marginheight:0; marginwidth:0; "
Anton esencial
fuente
11
Por lo que vale: este es un código inválido. scrolling, frameborder, marginheight / width no son propiedades de CSS.
Patrik Affentranger