Frage zum Wiki-Artikel „iframe“

[Matthias Scharwies]

Servus!

Hallo, ich möchte einen Fehler in ihren Beispiel melden.

Danke für Ihre Mitarbeit!

Als width-Parameter kann keine Prozentzahl stehen - es muss zwingend eine Pixel-Angabe erfolgen -> width="1024px".

Ich denke, Sie beziehen sich auf folgenden Passus:

"The width and height attributes on img, iframe and object are no longer allowed to contain percentages. They are also not allowed to be used to stretch the image to a different aspect ratio than its intrinsic aspect ratio."

https://www.w3.org/TR/html5-diff/#changed-attributes

In der MDN steht noch die Angabe, dass auch Prozentwerte möglich sind.

Im ausführlicheren Tutorial haben wir ein Beispiel, es funktionierte, warf aber einen Fehler im Validator.

Auf SO habe ich folgende Diskussion gefunden: https://stackoverflow.com/questions/26100484/what-are-the-consequences-of-using-percentage-for-width-height-attributes-of-an

Es wird auch kein style= akzeptiert und schon gar kein class= oder id=.

Das sollte mich wundern. So wie ich es verstanden habe, wurde die Möglichkeit der Prozentangabe entfernt, damit jegliche Gestaltung eben durch CSS erfolgen kann.

Ich habe das Frickl-Beispiel entsprechend angepasst:

• Die Breitenangabe im width-Attribut ist jetzt in Pixel; zusätzlich wird es über CSS formatiert. Funktioniert!

Fragen an alle anderen:

1. Der Fallback-Text im iframe erzeugt einen Fehler im Validator - wie würdet ihr das lösen?
2. Soll man alles zum iframe in eine eigene Seite packen? Die Inhalte zu object und embed werden doch eher selten benötigt. Oder sollen diese in eine Unterseite?

Hierzu wäre ich für einen tipp dankbar, wie ich den width-Parameter mit einem Pixelwert bestücken könnte, der aus einer Abfrage der tatsächlichen Anzeigebreite ermittelt wird.

Ich weiß zwar wie ich diese aktuelle Anzeigebreite mit Javascript ermitteln kann, aber das Ergebnis als Parameter im iframe-tag wie benötigt und erlaubt einzubauen, scheitert daran, dass hier zwischen den Anführungszeichen keine Ausgabe von Javascript erlaubt ist. Hier scheint die Interpretation besonders strikt nach extrem enger Vorschrift zu erfolgen.

Da das Formatieren mit CSS ja doch geht, würde ich den aus JS ausgelesenen Wert mit setProperty() als custom property setzen.

Im CSS hast du das dann so:

:root {
--mywidth: 90%;
}

#iframe {
  width: var(--mywidth);
}

Wie also könnte das Problem gelöst werden? Gruß Herbert

Herzliche Grüße

Matthias Scharwies