![]() ![]() So there it is, 5 different variations of fully accessible, CSS only mobile menu. Mark is using my Images Responsiver plugin for Eleventy with Netlify Large Media and PhotoSwipe to build an image gallery, and it's really great!Ī new nice responsive layout trick built upon Heydon Pickering's Flexbox Holy Albatross. Shouldn't we try to first list requirements, and then maybe find a single solution for everyone, if possible?Įleventy: Building an Image Gallery with CSS Grid and PhotoSwipe I bet I can find 10 different ways people handle responsive images in Markdown, for example in #Eleventy projects… I'm part of the problem. Maarten shows here (only in Chrome Canary for now) how Container Queries will allow us to have responsive SVG images inline in the HTML.Ĥ329 is a long discussion about how people are really, really, REALLY unhappy how on mobile the viewport units don't represent the size of the viewport - Ħ years later, this is still my most read article… Responsive SVGs - container vs media queries It was "intentional" according to webkit/Safari team, and other browsers followed… □♂️ I have yet to find if this behavior with HTML entities is an issue.Ħ years ago I reported a bug about 100vh being larger than the viewport height in Safari. This migration from basicHTML to LinkeDOM in images-responsiver looks good! □ My own site build is for example 30 % faster. I'm happy to announce that will now help maintain and improve jekyll-cloudinary, my plugin to use #Cloudinary for responsive images in sites built with #Jekyll: Įleventy-plugin-images-responsiver, my #Eleventy plugin for responsive images, is now available in a much faster v1.9.0! □ so the browser downloads an image 414 % bigger. ![]() ![]() but the sizes says the image is full width.Looks like could improve #WebPerf for their readers and reduce bandwidth invoices… You have a Surface Duo? Feedback is welcome! □ Other foldable devices will come if it makes sense. I started updating my photography site with new Media Queries and CSS environment variables to make sure Surface Duo owners enjoy it even more! □ How will they mix? They currently can't, as explained: The layout of my #Eleventy project uses it to get a responsive layout without any media query.Īlso 2022: most people still don't understand srcset-w/ sizes I have screen resolutions on StatCounter - good enough proxy for viewports? -, but nothing for screen densities… □ĭon't have this masterpiece yet? Get it now, it will prevent headaches when creating CSS layouts! Is there any public data about most common viewport widths and screen densities on the Web? Layout shifts are a real annoyance on most sites, so please, read this new gem from Jake, about preventing images layouut shifts the right way… or the right ways actually.īe careful if you use Chrome's device emulation to test responsive images, there's a bug on DPR emulation! I had the honor to review the Media chapter of the 2022 edition of The Web Almanac by HTTP Archive, "a comprehensive report on the state of the web, backed by real data and trusted web experts".Īvoiding layout shifts: aspect-ratio vs width & height attributes Media chapter of the 2022 Web Almanac by HTTP Archive They would benefit a lot from an image CDN: resize, compression, modern formats, etc. But most images are currently not or badly optimized. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |