CSS Is Fun Again
pdx.su
pdx.su
https://developer.mozilla.org/en-US/docs/Web/API/CSS_Custom_...
Hopefully VSCode will be able to switch to using this API for syntax highlighting in the near future for a performance boost, instead of sticking to the current superposition approach:
I'll have a party though the day CSS Masonry layout is no longer hidden behind flags:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_la...
I've been in jail for a robbery when I was young, and I genuinely wanted to know the experience of the person who wrotes the comment.
That may be true, but most people don't update their browser every month[1][2] (data isn't readily available it seems, but I'm sure as a webmaster you'd be logging User-Agents and can see the long tail for yourself). So if you want or need to reach a wide audience—say, if you're writing a storefront for a business, or an e-government portal—the only new features you can use are those which fail gracefully, namely ones that are syntactically valid under the old spec+parsers.
[1]: https://www.stetic.com/market-share/browser/ [2]: https://gs.statcounter.com/browser-version-market-share/desk...
https://caniuse.com/?search=CSS%20nest
Aside: Shouldn't browsers update themselves these days? Any reason to turn this off? Seems silly from a security perspective.
They should. But in the same way, admins and guidelines in authorities and large corporations should now follow a more modern update strategy. "Never change a Running System" is unfortunately still a popular, lazy excuse.
Edit: not so much large corporations tbh.
I guess if they just put their machines to sleep and never fully quit Chrome, it never has a chance to self update.
Looking over the shoulder of a user who’s fairly savvy—but doesn’t understand just how horrifying browser security is—revealed at least one pitfall to me: an update needs a restart of the browser, and a prompt to restart appears specifically when the user turns to the browser, presumably, in order to use it, that is, at the worst possible moment. As a result, it gets postponed indefinitely.
(Forced restarts when the browser thinks you’re not using it are also a bad idea for reasons that are hopefully obvious to anybody who’s used a modern version of Windows. That is not even counting the general vibe of knowing better than the user what they want, which I just instinctively dislike.)
Obviously would be quite frustrating to debug a thing only to realize tab A is version 1 and tab B is version 2 of course. And it seems like it would require a massive amount of effort. Would be cool though!
The key feature would be to maintain the exact state of a tab between process restarts.
Then they could restart the whole browser without the user noticing
Firefox ESR is updated with new features about once per year, so that’s probably the minimum time one should assume for new features to become universally available.
That requires a mutable filesystem, which also seems silly from a security perspective. It would also require granting permission to mutate/replace executables to a program that's exposed to untrusted input (i.e. a browser).
They should. But we have iPhone users who get an update to their browser every 6 months(?) and even then, it's still behind on features most of the times.
Yes they do? All modern browsers are updated automatically with the OS. It's true that not everyone is on exactly the same cadence and there are always stragglers, but if you look at your second link the time to decay to near zero for any given browser release is almost always two months from the release of the next.
Sent from my iPhone running iOS 16.
Vanishingly few, though. Again, there's data in the upthread links, and it says that after two months a stale release has effectively disappeared.
Picking jut a couple of these specific features:
• CSS Nesting as a whole is only 4–8 months shipped, and the “relaxed nesting” only shipped earlier this month in Chromium and Safari. At this point, you should absolutely not “drop those extra &”, and almost certainly not depend on nesting at all yet. And since it’s syntax, it’s not really a progressive enhancement candidate. So this becomes just a “don’t ship nesting syntax for another year or two”. Author with it and transpile down to compatible syntax with something like Lightning CSS, by all means.
• color-mix() is only 7–12 months shipped, though as a saving grace it’s Safari that’s the oldest (Safari is the browser most commonly far out of date in features due to Apple’s tie-browser-updates-to-OS-updates approach). It’s not generally a good idea to depend on color-mix() yet, though there are some progressive enhancement cases where it’s reasonable. For example, `text-decoration-color: color-mix(in srgb, currentcolor, transparent 50%)` makes underlines semitransparent, and it probably doesn’t matter if the browser skips that.
So yes, you absolutely still need to care about compatibility. This isn’t about fine-tuning compilation artefacts by hand, this is about browsers lacking features that you’re trying to use.
I love Safari, it's my browser of choice, but this behavior must change. It's easy to miss an OS upgrade (it's a big deal, takes time, may break things, etc) and as a consequence, being 3-4 versions behind is not uncommon. People end up switching to Chrome on old systems because sites are broken in Safari. Evergreen browsers have been the future for more than a decade. It's the only way to go.
I get that it took some engineering changes on the parser front, but this is so much cleaner as far as syntax goes.
If you're running some fun unpaid sites like me, then screw everyone with an out-of-date browser, I'll do what I want.
(though 'read everything on MDN' is always an option)
This course came out somewhat recently and I think it's designed for people who came to Frontend development mostly from JS/Using React: https://css-for-js.dev
But I've been thinking about making a course that specifically focuses on helping people who have been doing web development for a long time update their skills. Because CSS has added so many modern features but it's easy to not notice if you're already tethered to a pre processor and have been using one for 10+ years
Who knows.
Muchas gracias.
For example, You might not need jQuery offers the following suggestions:
// toggle visibility
function toggle(el) {
if (el.style.display == 'none') {
el.style.display = '';
} else {
el.style.display = 'none';
}
}
// remove multiple elements
for (const el of document.querySelectorAll(selector)) {
el.remove();
}
// toggle visibility
function toggle(el) {
el.style.display = el.style.display === 'none' ? '' : 'none;
}
// remove multiple elements
document.querySelectorAll(selector).forEach(el => el.remove());The BEM approach in all is craziness is basically an attempt at scoping. And then tailwind too is trying to solve many if the same problems, from the opposite direction. In both cases people end up using their component frameworks and JavaScript libraries to build new abstractions atop the hacks to try and scope css, and the pile grows.
Real scoped css with @scope has actually landed in latest Chrome and Safari, but Firefox are dragging their feet.
.page1-card {
border-color: green;
}
.page2-card {
border-color: red;
}So you can cut holes in the selectivity, for say, letting blog post content have its own styles. That's the biggest advantage. There's also some minor utilities it's got, like not impacting selectivity and such, but it is one of those features that will have to see widespread use to actually grow an understanding of all it's intricacies
That's an interesting way of saying "Firefox is not backed by an unlimited pile of cash"
I personally think they are vastly underestimating the enormous potential upside for the whole Internet if devs can make style changes with confidence, and frameworks like Vue and Svelte don't have to keep bolting on bespoke, expensive JavaScript-based approximations.
I actually find this really obnoxious. Its super common to want a child component to change styles based on the parent component its wrapped by, sometimes far up the tree. The only way to do this is prop drilling to pass a class, or start putting vanilla selectors everywhere the parent can target. I don't really see the usefulness. CSS isn't naturally isolated like that.
Passing props or using state is the way to tell a child component to dress differently, even though it sometimes gets burdensome. Anytime I tried using global styles, at some point something went haywire I didn’t account for. On the other hand, for styling HTML generated or fetched from somewhere (e.g. CMS content, rendered Markdown), it’s obviously necessary.
I am starting to tolerate CSS as a set of style properties, but I still hate CSS as a stylesheet files with various rules with unclear dependencies. Very quickly they become extremely brittle. It is also hard to modularize them in any sensible way. Unless your web app is one SPA with one set of CSS files any change is risky and may affect multiple pages in surprising ways.
I don't use svelte much, but Vue, Lit, and Surface all have the same css scoping stuff too, and it's wonderful.
[1] https://pdx.su/blog/2023-07-26-tailwind-and-the-death-of-cra...
But to be honest? I think CSS was fun for a while, simply because all the stuff mentioned in the intro of the article removed many of its pain points. Flexbox, Grid, the is selector, cascade layers... all of this stuff just lets you simplify your CSS down to something that actually makes sense rather than a big ball of mud and browser hacks.
I will say however that I've never really got to use those fancy colour properties though. Feels like every time I've worked on a website or app for any remotely large company, the design team had some set in stone idea about what the branding should be and would accept zero deviation from that in terms of what colours could be used for text, backgrounds, etc.
A) color-mix(in srgb, var(--primary-color), white 50%)
B) #abcdef
I beat myself up about performance issues like that all the time and have to catch myself to go do something more useful instead.
https://www.smashingmagazine.com/2022/01/modern-fluid-typogr...
Such a nice property, makes responsiveness much easier to build in
See also:
“Tricks like clearfixes arose; bits of knowledge you just had to find and use, and then apply like cheap plaster in a house you intend to flip.”
And it keeps getting features I couldn't even imagine. Scopes are awesome and will make selectors less complex. Those color functions are going to be very useful too, I spent way too much time fiddling with colors on my website and I have no doubt they're going to make things much easier.
The problem with things that are not needed anymore is that they won't go away.
Finally CSS has also these nice QoL things that SASS has, then SASS would add new things simply to provide value.
Finally Javascript has all these nice things that make the framework redundant, then the frameworks add new things, of value, and remain relevant.
After a couple of iterations of these sorts of arms races, we suddenly have a big and complicated $BASE_THING, and an even more complicated $ADDITIONAL_THING.
It never ends - complexity in a specific software technology tooling, processes and development, much like entropy, only increases, it never decreases.
https://github.com/mozilla/standards-positions/issues/472
https://connect.mozilla.org/t5/ideas/implement-css-scope-rul...
Someone who clearly didn't get it was wasting three years time "well actually"ing everything. The latest news is "it's worth prototyping". Meanwhile Chrome has released it(steam rolled?) and Safari has it in tech preview.
I question if FireFox has the resources to keep up with the pace of the modern web.
https://news.ycombinator.com/item?id=37015592
Firefox might be coming to an end, sadly.
How can they fulfill their mission if they aren't meeting users where they are at and being aggressive about being the best browser experience for users and developers?
And they can't do that by thinking they know better than everyone else. They need to read the room and know which way the wind is blowing.
> This mixes your primary color with 50% white, in the sRGB space. You can use other, newer, better color spaces too, such as OKLCH, which is my favorite.
Relative OKLCH colors aren't available on Firefox as of today: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value...
Here's a page with example gradients in SRGB and OKLCH, in which the second gradient does not show if viewed on Firefox: https://www.learnwithjason.dev/blog/oklch-better-color-css-b...
So effectively the Soviet Union never ceased to exist on the Internet.
For the most part… NO.
At least 98+% of the cases I have seen of developers getting frustrated over the “limitations” and “warts” of CSS has boiled down to a lack of understanding of the cascade; a fundamental feature of CSS that IMO produces nearly all of the frustrations that un-/under-skilled devs run into.
If CSS is being inconsistent, you need to look at the cascade from both ends: from how CSS applies it’s styling, and from how HTML is assembling the content (which can also break the cascade). One way or the other, the problem is nearly always an issue of implementation.
Source: doing web pages since 1993. That’s 30 years of experience speaking.
There's also transform+animate module as well but I won't worry about that much.
[0]. https://css-tricks.com/snippets/css/a-guide-to-flexbox/
[1]. https://css-tricks.com/snippets/css/complete-guide-grid/
[2]. https://css-tricks.com/a-complete-guide-to-css-media-queries...
EDIT: Formatting
[0] https://developer.mozilla.org/en-US/docs/Web/CSS/length#lh
[1] https://developer.mozilla.org/en-US/docs/Web/HTML/Global_att...
https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_...
Anyone know of any links regarding this? (Remember when blog posts had links?)
One of the coolest new features on the horizon is the anchor positioning system.
CSS is still frustratingly complicated and nuanced in a way that's typically opaque to developers. For instance why do you need min-width/min-height 0 on nested flex containers to prevent unexpected overflowing? The answer is surprisingly complicated.
Apart from that glimpse of hope, I'd not go as far as calling CSS "fun" anytime yet.
I kept up with custom properties and some newer colour management but then kinda stopped. So now it's back to basics and re-evaluate how I approach styles. Not that all the features are required at all times, of course not. But it always pays to keep up with the underlying tech. And I find CSS uniquely fun to lean, as the feedback loops are nigh instant.
0 - https://world.hey.com/dhh/once-1-is-entirely-nobuild-for-the...
- How is it supposed to be fun?
- Why not just stick to the most basic, simple and widely supported CSS rules?
Then you are back to using tables.
Hypercard and Flash are both great examples of the sort of creative cottage industries that can emerge when you provide more accessible means of building stuff. There's like a generations of designers that grew up playing with these sorts of tools.
No date on a blog is the first sign of something fishy.
But scrolling all the way down, you can see there's a published date. Weird place to put the date. Is this something new?
https://caniuse.com/?search=%40apply Article says it’s dead and replaced with something completely different that makes no sense.
Seems there is no champion anymore pushing it forward: https://discourse.wicg.io/t/needed-new-champion-for-css-appl...
I'd wager CSS is never the bottleneck. I've never once seen it be a performance issue, personally. Browsers are really really fast at rendering the DOM and styling it, especially if you only need to do it once at page load.
Even modern CSS isn't really that complex compared a hundred page Indesign file, for example. Computers and phones can handle it just fine.
If websites feel slow, IME it's usually ads/analytics, slow AJAX and backends, or scripting bottlenecks, loops, unnecessary redraws, efc. Not really basic DOM draws from CSS.
If we're worried about electricity (and we should be), we should focus on renewables and storage and nuclear, not cell phone usage. It's trivial and totally dwarfed by desktops, TVs, HVAC, light bulbs, cars, just about everything.
But that's not what I mean. It's the sum of all the small parts (not just CSS functions that are offloaded to the client) that, taken individually, all consume only a very, very small amount of energy but are at the same time easily avoidable or without real benefit.
Software and IT are full of these, and the total amount of energy wasted is enormous. But every single developer thinks that in comparison, it's practically nothing.
I mean, are they wrong? Think of it this way: A phone running 24/7 at 100% CPU will draw, what, maybe 20W at most? That's 1/5 of an old light bulb, of which many still remain.
But the phone isn't running at 100% CPU all the time. It takes literally less than a second to render the CSS, and 20x less power than a desktop PC would've used just a couple decades ago. In exchange, that's creative work for someone, a (hopefully... not always) better design for the user, and some value for the business behind it all.
On a output/watt basis, that's probably MORE energy efficient than most creative human endeavors. How much energy does it take to make a single ceramic cup? A piece of steel art? A watercolor that takes raw materials from around the world made in different factories, several hours/days/weeks to paint under artificial lighting and climate controls, etc.?
If software is a wasteful form of human energy use, well, probably most things are, and at orders of magnitude worse.
I don't know what's easily avoidable or wasteful about CSS: it's literally the most basic way of formatting a webpage. Is Markdown or a Word doc similarly wasteful? I bet either is less optimized than plain HTML + CSS. What's the alternative here? Plaintext web pages? Gopher? They're not going to save meaningfully more energy. Phones idling and waiting for the next cell tower message are going to use more power than processing some CSS. Literally powering the LED screen takes more power.
At the micro scale, generational improvements in energy efficiency gained from improved semiconductor processes more than offset any incremental loss from a slightly more complex CSS selector -- by this I mean you can compare the power usage of a old desktop rendering a HTML 1.0 webpage with any budget cell phone today rendering a modern webpage. The latter is going to use much much much much less power, despite all the CSS and frameworks and cloud services and whatever.
There are some things that are worth optimizing, like maybe data center power and cooling draws. But at the level of the CSS on an individual webpage? It's not worth wasting brainpower on. You probably waste more calories (and thus fuel input for human metabolism) just thinking about the problem than anything you'd save from solving it...
----------------
edit: I'm reminded of https://solar.lowtechmagazine.com/power/, a site that's always annoyed me because it's so much virtue signaling with so little actual virtue. The amount of energy infrastructure it takes to individually power a website like that out of someone's backyard, the time it takes to dither the images, the battery maintenance... it's so pointless, all just to serve a few HTML pages at 2W. 2W for a site that small? It would use LESS power in a proper data center, statically cached at a CDN alongside a billion other files.
I don't know why there is this movement towards pretend-optimizing irrelevant things, but IMO they are a total distraction (or at best an artistic inquiry), not real power optimizations or climatic solutions. I think it annoys me because there are so many REAL problems (and real solutions!) that need our collective attention. That annoyance isn't directed at you, just general angst about the state of the world lol
And this is different from any other environment... how?
all credit to @fat, whose talk on the Cascading Shit Show is sadly no longer on youtube. At least I still have the socks.
A basic working knowledge of CSS will still serve you after Bootstrap/Tachyons/Tailwind are no longer flavor of the month.