On Thu, 17 May 2012 15:13:58 +0100, Matthew Wilcox
<m...@matthewwilcox.com> wrote:
I'd also point out I'm not claiming this is a replacement for srcset
or <picture>. I think it's a useful additional tool for web
developers, but it is aimed at *site wide* generalised uses to make
life a lot easier - I can't see a way to make it also cater to
specific individual instances without fundamentally breaking the
benefits of the generalisation.
I see. So we could proceed with the spec without it, and add it later.
What if you're creating WYSIWYG editor for CMSes and want to have
button for inserting adaptive images, but have no access to <head>?
This is not a valid use case (to my mind). You'd not be choosing
response points for individual pictures, it is the design that has
response points and it's the CSS (and JS/HTML) which fit into the
design's breakpoints.
OK.
I see no nice solution for case when authors put <meta breakpoint> in
<body>
— it'd either have re-evaluate and potentially reload images (wasted
requests) or ignore the meta (annoying gotcha when HTML5 parser
unexpectedly
closes <head> or when people want to work around lack of access to the
<head>)
This solution does not allow for <meta> in the body, and nor does the
HTML5 spec unless I'm mistaken?
What spec allows and what happens on the web are separate things :)
HTML needs to define all error cases and be prepared for markup to be
abused (lots of such cases had to be defined already).
How do you work with URLs you have no control over? e.g. you'd have to
name
your breakpoints "40" and "80" to have adaptive size of gravatar.com
URLs.
I'm not sure I understand this point. However you cook it, you have no
access to those images so you can't do anything with them regardless
of the method of adaption, be it this method, srcset, or <picture>.
Yes, you can. gravatar.com allows you to specify desired size:
gravarar.com/avatar/hash?s=40 # gives 40x40px image
gravarar.com/avatar/hash?s=80 # gives 80x80px image
What do you do when you have only two breakpoints for sidebar, but more
for the main content? (mostly fixed-width sidebar with fluid main
column) or if your page header adapts to portrait orientation, but
images in main content only adapt to width?
Breakpoints are not something that apply to individual components,
they apply to the page as a whole?
In my designs I use it mainly for components. I don't think of pages as
separate phone/tablet/desktop designs, but as fluid designs which fold and
unfold component by component.
Let's say my fancy header logo is quite tall, and that doesn't look well
in landscape orientation, so I want to use short/wide version of the
design in landscape orientation.
And I have a square illustration in my content. It doesn't flip on
orientation, but I want it to be 500x500px on 1000px+ screens, and
320x320px on smaller ones.
In some srcset-source pseudocode I'd say:
<header>
<img src="logo-tall" srcset="logo-short (orientation:landscape)">
</header>
<acticle>
<img src="illustration-big" srcset="illustration-small
(max-width:1000px)">
</article>
How would you do that with breakpoints?
--
regards, Kornel Lesiński
