»Neues« (?) vom Webdesign: Iframe responsive
Da ich doch recht froh war, mit meinem Umzug zu Quarto diese Seiten doch weitestgehend responsiv gestaltet zu haben, hatte ich von den noch offenen Baustellen erst einmal die Finger gelassen. Ich bin kein Webdesigner und wollte einfach das Erreichte nicht wieder gefährden.
Zu den noch offenen Baustellen gehören insbesondere die Iframes – bisher hielt ich die ihre responsive Gestaltung für doch recht kompliziert (vor allem, da ich alle diese CSS-Klassen auch noch irgendwie Quarto beibringen müßte). Daher hatte ich mich im großen und ganzen bei den Iframes auf die Einbindung von Videos beschränkt und es einfach hingenommen, daß in diesem Fall die Darstellung auf meinem Smartphone-Monitor (zumindest im Hochformat) doch recht suboptimal war.
Mit meiner frisch erwachten Liebe zu JavaScript jedoch wurde das Problem wieder dringender: Programme erstellt mit P5.js (-Widget), Tuesday JS, microStudio und nicht zuletzt all die einbindbaren Apps von Itch.io – sie sie und noch vieles mehr schreit alles nach IFrames. Daher habe ich die Suchmaschine unserer aller Datenkrake noch einmal angeworfen und nachgeschaut, ob sie dafür eine Lösung in petto hat. Und wenig überraschend – sie hatte:
Der Aufsatz »Responsive iframes: Native CSS aspect-ratio Guide« von Ben Marshall sagt, daß es eine »neue« aspect-ratio Eigenschaft in CSS gäbe und damit würde es genügen, in die CSS-Datei
einzugeben und schon wäre alles gelaufen. Die Eigenschaft würde mittlerweile von allen wichtigen Browsern unterstützt, so daß man sich in dieser Hinsicht keine Gedanken machen müßte.
Ich muß jetzt noch ausprobieren, ob aspect-ratio auch mit CSS-Klassen funktioniert, da bei mir Iframes unterschiedliche Seitenverhältnisse haben können (neben 16:9 zumindest auch noch 4:3, aber auch andere wären vorstellbar). In einem der nächsten Beiträge werde ich das mal an einem YouTube-Video testen. Still digging!
Bild: Schlange erschrickt vor responsiven Design-Anforderungen, erstellt mit DreamStudio. Prompt: »A python stands in front of an easel in a laboratory with strange technical devices and paints colorful pictures. colored steampunk style«, Modell: Stable Diffusion XL, Style: Comic Book.