gked / editor Goto Github PK

We probably need to step back a little and think about the usecases we can think of and not think about syntax etc
This week I have some responsive ads to design so I'm only doing what I need to do and keeping you all posted. But whatever it is I'm doing, it shouldn't prevent anybody else from brainstorming in any direction they feel like!
The syntax I've been describing on elements ((orientation: ) and (min-aspect-ratio: ) and (max-aspect-ratio: )) is already defined and currently supported on @media queries..
(I just deleted all my response about how useful nativeWidth would be etc..)
…for what benefit?
Just a reminder I built this demo, perhaps we could build some similar ones that demo other use cases?
What other use-cases do you envision? I'm a designer, and when I started thinking about making responsive ads this week I wrote down a few things:
Element orientation? (tall? long?)
Ad-based styles, or sub-element?
Locked aspect ratio?
Here's the sheet of paper with my questions on it that motivated my experiments yesterday.
If I knew I needed a 250x250 version, and a 600x100 version of an ad I could already do different form factors with predefined dimensions, but that wouldn't help me if the ad needs to scale with a locked aspect ratio sometimes as well!
Imagine (like I have to design today) that you are building an ad that will go in the middle of an article of text. It will be advertising 1 of 6 books (I have 6 ads to make for this). If this were an image-based ad we would have to drop that into the page and scale it so its text was always legible. If it is the full-column-width for phone users that ad will have to be a certain height. If we visit the same page on desktop there's a lot more room. We would either need to:
scale up the ad so it fills the column on desktop (which would be too tall at that width)
or give the ad a max-width and float or center it once it hits that max size (that's the text wrapping decisions, etc)
…but I'm thinking, “What if we can design this ad so it can scale with a locked aspect ratio sometimes, but also allow it to be as wide as there is horizontal room, and still be able to target it with styles and layout changes based on the dimensions it finds itself with, instead of predefined widths”.
I think being able to sniff an element's (orientation:) will come in handy, but not as useful as being able to define a range of responsive aspect ratios! So here's another demo, showing both a min-aspect-ratio and max-aspect-ratio showing how versatile aspect-ratio-detecting element queries can be!
This demo has an element you can resize. The element itself knows when it's roughly square, very wide, or very tall. This is the use-case I had in mind yesterday!. Note that the 'square' aspect ratio in this demo isn't stricly 1/1 like (orientation: square) would be, its what might be considered square_ish_ and covers