- From: Tommy Hodgins via GitHub <sysbot+gh@w3.org>
- Date: Mon, 27 Nov 2017 20:52:17 +0000
- To: public-css-archive@w3.org
> Element queries are what would be necessary. They are already being investigated by the Responsive Images Community Group.
Haha no they're not. What have they done in the last 2-3 years? I see no activity at all that would indicate the RICG is even still alive.
During that time I have written what I believe to be [the only element query spec that contains new syntax ideas](http://github.com/tomhodgins/element-queries-spec) which was based on the features of the [EQCSS](https://github.com/eqcss/eqcss) syntax and plugin.
We included a 'lines' feature, but of all of the features it's the least reliable element-based breakpoint, and it was a real challenge to calculate! After being able to experiment with the `min-lines` and `max-lines` feature via EQCSS, I now consider it the least-useful of any of the possible element-query breakpoints, so much that I had believed I had already removed it from my spec. There are a lot of useful things element queries can do, but sniffing the number of lines inside an element hasn't proven very useful.
On the other hand, I believe I have a demo (using EQCSS) that illustrates _exactly_ what you seem to be describing wanting to be able to do: https://codepen.io/tomhodgins/pen/KNywpV
```css
.widget {
width: 500px;
height: 500px;
margin: 0 auto 2em auto;
border: 5px solid red;
text-align: center;
position: relative;
}
h2 {
width: 100%;
font-size: 50pt;
margin: 0;
line-height: 1.2;
}
@element .widget h2 {
eval('offsetHeight <= parentNode.offsetHeight && "$this"') {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
eval('offsetHeight >= parentNode.offsetHeight && "$parent"') {
overflow: auto;
overflow-y: scroll;
border-color: lime;
}
}
```
So what's interesting to note here, is that even though EQCSS has a `min-lines` and `max-lines` breakpoint that _could_ be used, the easiest way to build what you described instead uses knowledge of the element's own `offsetHeight` compared to its parent's `offsetHeight` as the 'test' or 'breakpoint' for applying different values. Perhaps this same functionality could be achieved in CSS today through CSS variables which are set (and re-set) by JS! JavaScript can measure an element and its child, and assign different values to these CSS variables based on what it sees.
Here's a rebuild of my EQCSS-powered demo using HTML, CSS (with CSS variables), and JS — I think a solution like this is what you're looking for and thankfully it doesn't require CSS to be extended beyond what it's already capable of doing today :D
```html
<div class=widget>
<h2>Example</h2>
</div>
<div class=widget>
<h2>Example sentence that's not too long</h2>
</div>
<div class=widget>
<h2>This is an example sentence that's too long to be displayed centred, so it needs to scroll inside the parent element and be positioned normally.</h2>
</div>
<style>
.widget {
width: 500px;
height: 500px;
margin: 0 auto 2em auto;
border: 5px solid red;
text-align: center;
position: relative;
overflow: var(--overflow);
overflow-y: var(--overflow-y);
border-color: var(--border-color);
}
h2 {
width: 100%;
font-size: 50pt;
margin: 0;
line-height: 1.2;
position: var(--position);
top: var(--top);
transform: var(--transform);
}
</style>
<script>
function OverflowOrCentered() {
var widget = document.querySelectorAll('.widget')
for (var i=0; i<widget.length; i++) {
var headline = widget[i].querySelector('h2')
if (headline.offsetHeight <= widget[i].offsetHeight) {
headline.style.setProperty('--position', 'absolute')
headline.style.setProperty('--top', '50%')
headline.style.setProperty('--transform', 'translateY(-50%)')
} else {
headline.style.setProperty('--position', '')
headline.style.setProperty('--top', '')
headline.style.setProperty('--transform', '')
}
if (headline.offsetHeight >= widget[i].offsetHeight) {
widget[i].style.setProperty('--overflow', 'auto')
widget[i].style.setProperty('--overflow-y', 'scroll')
widget[i].style.setProperty('--border-color', 'lime')
} else {
widget[i].style.setProperty('--overflow', '')
widget[i].style.setProperty('--overflow-y', '')
widget[i].style.setProperty('--border-color', '')
}
}
}
window.addEventListener('load', OverflowOrCentered)
</script>
```
--
GitHub Notification of comment by tomhodgins
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/2011#issuecomment-347324070 using your GitHub account
Received on Monday, 27 November 2017 20:52:19 UTC