broken on iOS (iPad)
Minimal CSS-only blurry image placeholders
11–20 of 78 posts
Re: Minimal CSS-only blurry image placeholders
#12broken on iOS (iPad)
Worked for me in Mobile Safari in iOS on my iPhone.
Re: Minimal CSS-only blurry image placeholders
#13I suppose the existence of bad uses does not invalidate the good but it feels like 99% of blurry image placeholder behavior is actually just preventing people from seeing anything unless they also run the ad and spying javascript that monetizes the site. So a CSS-only way is neat and indisputably better but I think it's missing the point? The point of blurry placeholders isn't to make things easier or display better.…
The point of blurry placeholders is to support loading a page with potentially hundreds of images (maybe with additional lazy loading, which doesn't need JavaScript these days) without blocking display of the page on loading those full images.
I'm not sure why you think it has anything to do with forcing people to execute JavaScript?
Re: Minimal CSS-only blurry image placeholders
#14This is really cool, I love seeing folks use CSS in clever ways. :)
My one feedback would be to avoid using attr selectors on the style attribute like [style*="--lqip:"]. Browsers normally lazy compute that string version of the style attribute [1], but if you use a selector like this then on every style recalc it'll force all new inline styles (ex. element.style.foo = bar) to compute the string version.
Instead if you use a separate boolean attribute (or even faster a class) it'll avoid that perf foot gun. So write and match on that.
[1] https://source.chromium.org/chromium/chromium/src/+/main:thi...
Re: Minimal CSS-only blurry image placeholders
#15Love the website and article! Looks like even with CSS there's always new things to learn and do, good stuff.
Re: Minimal CSS-only blurry image placeholders
#16I know very little of css and to me it seems like a configuration file for rendering text, similar to changing default fonts ornsizes for matplotlib plots using plt.rcParams. How does this do inage blurring then?
> [It] seems like a configuration file for rendering text...
A more accurate mental model might be, "a declarative language for styling HTML elements," where "styling" is very broad. You can make user interfaces that show and hide elements, have animations, etc. triggered by clicking buttons without a single line of JavaScript. It's a lot more powerful than the configuration parameters to plotting functions, in my book it's a programming language rather than a configuration language.
Re: Minimal CSS-only blurry image placeholders
#17..or use tailwind - https://tailwindcss.com/docs/filter-blur
Re: Minimal CSS-only blurry image placeholders
#18Why is the page so sluggish on mobile?
Re: Minimal CSS-only blurry image placeholders
#19..or use tailwind - https://tailwindcss.com/docs/filter-blur
That's not at all equivalent to what the OP is doing. The point isn't just to blur an image, which is what those Tailwind classes do, the point is to render a very compact blurry version of an image which hasn't loaded yet.