Tags: max

New CSS that can actually be used in 2024 | Thomasorus

Logical properties, container queries, :has, :is, :where, min(), max(), clamp(), nesting, cascade layers, subgrid, and more.

This is a little follow-up to my post about web components for date inputs.

If you try the demo on iOS it doesn’t work. There’s nothing stopping you selecting any date.

That’s nothing to do with the web components. It turns out that Safari on iOS doesn’t support min and max on date inputs. This is also true of any other browser on iOS because they’re all just Safari in a trenchcoat …for now.

I was surprised — input type="date" has been around for a long time now. I mean, it’s not the end of the world. You’d have to do validation on inputted dates on the server anyway, but it sure would be nice for the user experience of filling in forms.

Alas, it doesn’t look like this is something on the interop radar.

What really surprised me was looking at Can I Use. That shows Safari on iOS as fully supporting date inputs.

Maybe it’s just semantic nitpickery on my part but I would consider that the lack of support for the min and max attributes means that date inputs are partially supported.

Can I Use gets its data from here. I guess I need to study the governance rules and try to figure out how to submit a pull request to update the currently incorrect information.

Designing a Utopian layout grid: Working with fluid responsive values in a static design tool. | Utopia

James describes his process for designing fluid grid layouts, which very much involves working with the grain of the web but against the grain of our design tools:

In 2022 our design tools are still based around fixed-size artboards, while we’re trying to design products which scale gracefully to suit any screen.

Min-Max-Value Interpolation

Here’s a really nice little tool inspired by Utopia for generating one-off clamp() values for fluid type or spacing.

Contextual Spacing For Intrinsic Web Design | Modern CSS Solutions

To complement her talk at Beyond Tellerrand, Stephanie goes through some of the powerful CSS features that enable intrinsic web design. These are all great tools for the declarative design approach I was talking about:

• clamp()
• min() and max()
• fit-content, min-content, and max-content
• grid functions like repeat() and minmax()
• custom properties for spacing

Hybrid positioning with CSS variables and max() – Lea Verou

Yet another clever technique from Lea. But I’m also bookmarking this one because of something she points out about custom properties:

The browser doesn’t know if your property value is valid until the variable is resolved, and by then it has already processed the cascade and has thrown away any potential fallbacks.

That explains an issue I was seeing recently! I couldn’t understand why an older browser wasn’t getting the fallback I had declared earlier in the CSS. Turns out that custom properties mess with that expectation.

Southern Mosaic

A beautiful audio and visual history of the Lomax’s journey across:

On March 31 1939, when John and Ruby Lomax left their vacation home on Port Aransas, Texas, they already had some idea of what they would encounter on their three-month, 6,502 mile journey through the southern United States collecting folk songs.

Intrinsically Responsive CSS Grid with minmax() and min()

When min() gets better support (it’s currently in Safari), we’ll be able to create container queryish declarations like this:

grid-template-columns: repeat(auto-fill, minmax(min(10rem, 100%), 1fr));

CSS Grid: More flexibility with minmax() by Michelle Barker on CodePen

A good use case for using minmax with CSS grid to dispense with a media query.

It had been a while since we had a movie night at Clearleft so I organised one for last night. We usually manage to get through two movies, and there’s always a unifying theme decided ahead of time.

For last night, I decided that the broad theme would be …transport. But then, through voting on Slack, people could decide what the specific mode of transport would be. The choices were:

• taxi,
• getaway car,
• truck, or
• submarine.

Nobody voted for submarines. That’s a shame, but in retrospect it’s easy to understand—submarine films aren’t about transport at all. Quite the opposite. Submarine films are about being trapped in a metal womb/tomb (and many’s the spaceship film that qualifies as a submarine movie).

There were some votes for taxis and trucks, but the getaway car was the winner. I then revealed which films had been pre-selected for each mode of transport.

Taxi

• Collateral, Michael Mann, 2004 (86% 🍅)
• Night On Earth, Jim Jarmusch, 1991 (73% 🍅)
• Taxi Driver, Martin Scorsese, 1976 (99% 🍅)

Getaway car

Shorts: Getaway Driver, The Getaway

• Baby Driver, Edgar Wright, 2017 (93% 🍅)
• Wheelman, Jeremy Rush, 2017 (88% 🍅)
• Drive, Nicolas Winding Refn, 2011 (93% 🍅)
• The Driver, Walter Hill, 1978 (80% 🍅)

Truck

• Fury Road, George Miller, 2015 (97% 🍅)
• Duel, Steven Spielberg, 1971 (88% 🍅)

Submarine

• Below, David Twohy, 2002 (64% 🍅)
• Crimson Tide, Tony Scott, 1995 (87% 🍅)
• The Hunt For Red October, John McTiernan, 1990 (86% 🍅)

I thought Baby Driver would be a shoe-in for the first film, but enough people had already seen it quite recently to put it out of the running. We watched Wheelman instead, which was like Locke meets Drive.

So what would the second film be?

Well, some of those films in the full list could potentially fall into more than one category. The taxi in Collateral is (kinda) being used as a getaway car. And if you expand the criterion to getaway vehicle, then Furiosa’s war rig surely counts, right?

Okay, we were just looking for an excuse to watch Fury Road again. I mean, c’mon, it was the black and chrome edition! I had the great fortune of seeing that on the big screen a while back and I’ve been raving about it ever since. Besides, you really don’t need an excuse to rewatch Fury Road. I loved it the first time I saw it, and it just keeps getting better and better each time. The editing! The sound! The world-building!

With every viewing, it feels more and more like the film for our time. It may have been a bit of stretch to watch it under the thematic umbrella of getaway vehicles, but it’s a getaway for our current political climate: instead of the typical plot involving a gang driving at full tilt from a bank heist, imagine one where the gang turns around, ousts the bankers, and replaces the whole banking system with a matriarchal community.

“Hope is a mistake”, Max mansplains (maxplains?) to Furiosa at one point. He’s wrong. Judicious hope is what drives us forward (or, this case, back …to the citadel). Watching Fury Road again, I drew hope from the character of Nux. An alt-warboy in thrall to a demagogue and raised on a diet of fake news (Valhalla! V8!) can not only be turned by tenderness, he can become an ally to those working for a better world.

Witness!

Paperclip Maximizer

Play the part of an AI pursuing its goal without care for existential threats. This turns out to be ludicrously addictive. I don’t want to tell you how long I spent playing this.

Keep your eye on the prize: remember that money (and superintelligence) is just a means to an end …and that end is making more paperclips.

Breaking Down a CSS Grid Layout, an article by Tim Wright

A deep dive into the CSS declaration that Jen told me she wants on a T-shirt.

How the minmax() Function Works

A great description of one of the most powerful features in CSS Grid.

This function opens the door to us being able to write much more powerful and succinct CSS by allowing us to set, as a value for a grid track, a function including both a minimum and maximum value.

Amazon.com: Wilton Silver Color Mist: Kitchen & Dining

Oh, what a spray! What a lovely spray!

The Vuvalini | A Working Library

The best description of Mad Max: Fury Road. Read.

Jessica and I went to see Mad Max: Fury Road at the Dukes At Komedia last week. We both thoroughly enjoyed it. There’s the instant thrill of being immersed in a rollicking good action movie but this film also stayed with me long after leaving the cinema.

This isn’t really Max’s movie at all—it’s Furiosa’s. And oh, what a wonderful protagonist she is.

Max’s role in this movie is to be an ally. And for that reason, I see him as a role model—one who offers a shoulder, not to cry on, but to steady a rifle’s aim.

Internet Archive Search: collection:”thesoundofyoungamerica”

Thanks to Jason Scott, every episode of The Sound Of Young America ever recorded is now stored on the Internet Archive. Get huffduffing!