wicg / aspect-ratio Goto Github PK
View Code? Open in Web Editor NEWThis is a repo to explore, and hopefully define a way to maintain aspect ratio
This is a repo to explore, and hopefully define a way to maintain aspect ratio
This is being worked on at the CSSWG. Can we archive this repo?
Hi all, based on my comments in the other issue I have begun brainstorming and writing a polyfill for what an aspect-ratio
property might look like. I currently have the logic figured out, and a regex that can extract this custom property from formatted CSS, I think I'm close to a working polyfill I just need to figure out how to list all CSS rules that affect a chosen element and determine if a width:;
or height:;
value has been assigned already in CSS before calculating the aspect ratio.
In thinking through how it should work, here's what I came up with:
Width | Height | Aspect-Ratio | Calculated |
---|---|---|---|
✓ | height | ||
✓ | ✓ | height | |
✓ | ✓ | width | |
✓ | ✓ | ✓ | nothing |
✓ | ✓ | ✓ with !important | nothing |
This means any time there is both a width
and height
applied to the element in CSS, it would always take those values over the implied aspect-ratio
, even if that aspect-ratio
was marked !important
.
For extracting values from formatted CSS. I have the following regex which will look for rules that contain -eq-aspect-ratio
with the following syntax:
aspect ratio property
= property name
: width
/ height
property name
= -eq-aspect-ratio
width
= number with optional decimal and optional trailing digits
height
= number with optional decimal and optional trailing digits
So here's the regex that will extract this and give us: a CSS selector, the width value, the height value:
/^(.*){.*-eq-aspect-ratio:\s*(\d*\.?\d+)\/(\d*\.?\d+)/gm
And here's my test with formatted CSS using one rule per line and some other simple transformations JavaScript can apply to any CSS to get it ready for extraction: https://regex101.com/r/kSMEeT/1
I wrote an almost working plugin yesterday on the plane - I'm going to keep toying around with it until I can get it working (by checking not the computed styles, but what CSS properties apply to each given element) but it's looking really hopeful and came together a lot faster than I thought it would!
Any thoughts on the precedence I have set in the table above?
Any comments on the prefix I have chosen for development -eq-aspect-ratio
?
Any ideas about how such a plugin should be structured?
I'll post my polyfill here once I get it working!
Hi! This weekend I was experimenting with writing element queries based on the aspect ratio of an element. I learned that there is min-aspect-ratio
and max-aspect-ratio
support on @media
queries which does the exact behaviour (and syntax) that I had desired, the only issue is that @media
is limited to the browser's aspect ratio, and so these conditions can't be used to style elements based on their own aspect ratio.
I grabbed the source to EQCSS.js from http://elementqueries.com/EQCSS.js and added the following code:
// Min-aspect-ratio
case "min-aspect-ratio":
var el_width = EQCSS.data[i].conditions[k].value.split('/')[0],
el_height = EQCSS.data[i].conditions[k].value.split('/')[1];
if (!(el_width/el_height <= elements[j].offsetWidth/elements[j].offsetHeight)){
test = false;
break test_conditions;
}
break;
// Max-aspect-ratio
case "max-aspect-ratio":
var el_width = EQCSS.data[i].conditions[k].value.split('/')[0],
el_height = EQCSS.data[i].conditions[k].value.split('/')[1];
if (!(elements[j].offsetWidth/elements[j].offsetHeight <= el_width/el_height)){
test = false;
break test_conditions;
}
break;
Now the following syntax will work on @element
queries with EQCSS in all browsers IE8 and up:
@element "div" and (min-aspect-ratio: 16/9) {
$this {
background: red;
}
}
@element "div" and (max-aspect-ratio: 16/9) {
$this {
background: lime;
}
}
And here is an extreme example, what I had in mind when I was looking for support, showing how different container queries could be written to allow a layout to recognize the aspect ratio it has and apply styles to many elements when that condition is met:
I think if would be really cool if this sort of thing was in CSS!
I'm opening this based on the minutes from TPAC. @jonathanKingston and myself will need to provide usecases for when people utilize aspect ratio in the readme. Jonathan, if you could provide the rough use cases, I'm going to do a crawl where I find how often the % padding hack is utilized and on what types of elements.
One thing CSS does that's really cool is (orientation: portrait)
and (orientation: landscape)
on @media
queries. I use them when building full-screen animations with vmin
and vmax
units to ensure that stuff never goes outside the viewport and it's really handy to have that kind of information available - but I wish I could do the same on elements.
I grabbed the source code of EQCSS from http://elementqueries.com this weekend and added the following bit of JavaScript:
// Orientation
case "orientation":
// Square Orientation
if (EQCSS.data[i].conditions[k].value === 'square'){
if (!(elements[j].offsetWidth == elements[j].offsetHeight)){
test = false;
break test_conditions;
}
}
// Portrait Orientation
if (EQCSS.data[i].conditions[k].value === 'portrait'){
if (!(elements[j].offsetWidth < elements[j].offsetHeight)){
test = false;
break test_conditions;
}
}
// Landscape Orientation
if (EQCSS.data[i].conditions[k].value === 'landscape'){
if (!(elements[j].offsetHeight < elements[j].offsetWidth)){
test = false;
break test_conditions;
}
}
And now syntax like this is supported on @element
queries:
@element ".orientation" and (orientation: square) {
$this {
background: orchid;
}
}
@element ".orientation" and (orientation: portrait) {
$this {
background: darkturquoise;
}
}
@element ".orientation" and (orientation: landscape) {
$this {
background: greenyellow;
}
}
So now this is working with EQCSS in all browsers IE8 and up. Here's a video of me testing this in IE8:
I think it would be pretty cool if this was something normal CSS was aware of - I'll be able to put this to use right away!
During the discussion @yoavweiss brought up use cases in regards to loading perf with aspect ratio. Can you please provide these so that we can ensure whatever is designed, we actually solve all use cases. Additionally, if you're able to - determine how many people actually try/want to accomplish this use case?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.