[err4nt]

Not having constraint-based algorithms isn't what's holding CSS back, if we used @media queries on the widths of elements themselves instead of browser dimensions we could implement really REALLY advanced layouts with the CSS we already have.

I wish I could do CSS like this:

.container .headline { font-size: 14pt; }

@media .container (min-width > 500px) {

  .headline {
    font-size: 18pt;
  }

}

@media .container (min-width > 900px) {

  .headline {
    font-size: 24pt;
  }

}

I don't really care how wide the browser itself is. I don't care how big the device is or the orientation. If I know in the layout this element is going to be squished below 300px at some point,easily let me make styles for when that ELEMENT is below 300px and I can build layouts that will look pixel-perfect at any size on any screen

No GSS or constraint-based languages necessary

[joaren]

So how do you make it so that text always sizes to fit its container, vertically and horizontally? i.e. Sliding font size and letter spacing. Pixel perfect on any screen?

[err4nt]

To be honest, here's how I tackled that very problem last week using JavaScript to supercharge my CSS.

Here's the layout challenge: There's an account settings page with a Page title, underneath that there's the user's avatar, name, and team name, and then below that we have a number of settings tabs sorted by function (general, notifications, social, funding, etc.)

I wanted the avatar + names to remain center-aligned at all times, and I need this layout to work from 320px up to 1200px. What do I do? Usernames are 3 characters minimum, and 20 characters maximum. That's quite a range.

So, I wrapped the Avatar and Names inside a container. Used JavaScipt to measure the container, at at page load (and any time the browser is resized) it does something like this:

.avatarContainer { position: absolute; top: 0; left: 50%; margin-left: (minus half of the current width of .avatarContainer); }

Woo, okay, so now no matter how long the name is, that avatar and name will stay visually centered. So my next challenge is to find three font-sizes (as we do phone, tablet, and desktop breakpoints) that will display the name large enough that it's legible with a three-letter name, but that can still fit a 20-letter name without cutting it off.

Second challenge: Automatically resize the text to 'squish' it, if the number of characters is greater than 15. So at any of my breakpoints JavaScript will also watch the element that holds the username, and if at any point that count goes higher, the font-size decreases to squish it all in.

Add the two together and you've got a resilient layout that looks perfect at any size between 320px and 1200px wide, even as the user changes the dimensions of the browser or the content on the page after it has loaded.

I wish I could have done that 100% in CSS but CSS makes you DECLARE things, which presupposed that you can anticipate their exact dimensions. I want to use the full power of CSS for layout after the page has loaded as the content adapts, so I needed a more clever way to define more styles and the cases during which they apply than CSS @media queries allowed.

If what I'm saying is intruiguing, check out my experiments in using JavaScript to boost CSS here, maybe even suggest a few things! https://github.com/tomhodgins/alijn and http://staticresource.com/alijn/demo

[joaren]

No, what you're saying is the opposite of intriguing. It was exactly what I expected: an admission that CSS is insufficient for "really advanced layouts" without JavaScript.