This is a clever use of the
srcdoc attribute on iframes.
The title is somewhat misleading—currently it’s about native lazy-loading for Chrome, which is not (yet) the web.
I’ve just been adding
loading="lazy" to most of the iframes and many of the images on adactio.com, and it’s working a treat …in Chrome.
Chris succinctly describes the multiple-
iframes-with-multiple-codebases approach to web development, AKA “micro frontends”:
Scott writes up that super smart transclusion trick of his.
Woah! This is one smart hack!
Scott has figured out a way to get all the benefits of pointing to an external SVG file …that then gets embedded. This means you can get all the styling and scripting benefits that only apply to embedded SVGs (like using
The fallback is very graceful indeed: you still get the SVG (just not embedded).
loading attribute for images and iframes is coming to Chrome. The best part:
You can also use
loadingas a progressive enhancement. Browsers that support the attribute can get the new lazy-loading behavior with
loading=lazyand those that don’t will still have images load.
First of all, don’t panic—this browser vulnerability has been fixed, so the headline is completely out of proportion to the reality. But my goodness, this was a clever technique!
The technique relies on luring users to a malicious site where the attacker embeds iframes to other sites. In their example, the two embedded iframes for one of Facebook’s social widgets, but other sites are also susceptible to this issue.
The attack consists of overlaying a huge stack of DIV layers with different blend modes on top of the iframe. These layers are all 1x1 pixel-sized, meaning they cover just one pixel of the iframe.
Habalov and Weißer say that depending on the time needed to render the entire stack of DIVs, an attacker can determine the color of that pixel shown on the user’s screen.
The researchers say that by gradually moving this DIV “scan” stack across the iframe, “it is possible to determine the iframe’s content.”
Here’s the CSS and markup you need to make third-party iframes responsive. Handy!
A bookmarklet version of that handy multiple-iframe page I linked to the other day. Even more useful for testing responsive designs!
A handy little document to load pages into differently-sized iframes—useful for testing responsive designs.
I never expected to see a cross between responsive design and AR, but here ya go:
A silly mashup of HTML5 technologies: We use the canvas to capture the contents of a video element. The canvas then identifies the blue markers and overlays an iframe on top of it. The iframe contains our website (upperdog.se) which has a responsive design.