Whats the eloquent javascript or think python equivalent for css? is it mdn docs or another? Does anyone know the best active, comprehensive online references?
How else do you really keep up on all the crazy new stuff
Old dogs, new CSS tricks
21–30 of 108 posts
Re: Old dogs, new CSS tricks
#22Whats the eloquent javascript or think python equivalent for css? is it mdn docs or another? Does anyone know the best active, comprehensive online references? How else do you really keep up on all the crazy new stuff
It may be ran by Google, but https://web.dev/ is one good source for keeping up with new web technologies
Re: Old dogs, new CSS tricks
#23> I can’t use [feature X], I need to support [old browser]. And that’s not necessarily a bad thing. As I commented a few days ago, nowadays devs don’t seem to care too much about backwards compatibility. I like to hold onto my devices longer than most people and it’s a bit frustrating to see that most sites nowadays expect you to be in the latest and greatest. It didn’t use to be like this.
That is reasonable though if a missing feature is trivially obvious must-have. Browsers (and standards, and platforms) that are slow to add it must develop themselves better. It’s nice to respect compat if a new way is a redesign based on feedback, e.g. you used poll/select and now it’s epoll/kqueue/iocp with a fallback. But if it is a feature that was simply missing for years, e.g. UIKit adding random useful methods which existed since forever in Cocoa, no respect. Really, you don’t want to support a platform that takes years to wake up. Let their users know that it’s obsolete, they will update.
Re: Old dogs, new CSS tricks
#24Earlier quoted context omitted.
I’m unsure if you have specific feedback or just a general misunderstanding of the point of additions like layer to the spec. At the end of the day these are all more tools in our toolbelt. If you want you can keep writing CSS the same way you always have.
There is a concern that one can have too many tools to do the same -- or very similar -- things. This can reduce readability. Consider Perl's many ways approach to Python's (initial) goal of one way.
Every new release of Python 3.x further erodes this idea. I like using the new features because I find Python generally inexpressive and verbose, but I have a hard time explaining to nondevelopers who read the code about the assignment expression, keyword only arguments, structural pattern matching, typing improvements and deprecations and so on.
Re: Old dogs, new CSS tricks
#25Earlier quoted context omitted.
i actually came up with a thing where subgrid would be useful, since subgrid lets you denote that a child wants to use the same grid as the parent. if you wanted to use grid template areas, and you had something that looked like Title There isn't a great way to make the adhere to the grid template areas, because without subgrids only direct children (the ul) have coordinate attributes.
I haven't needed to do CSS grids for awhile, but couldn't this have already been done with `display:contents` ?
TIL about display:contents. I’ll have to check it out but it sounds like it does: https://bengammon.co.uk/css-grid-and-display-contents/
Subgrid lets you do it for anything more involved or deeper though.
Re: Old dogs, new CSS tricks
#26> I can’t use [feature X], I need to support [old browser]. And that’s not necessarily a bad thing. As I commented a few days ago, nowadays devs don’t seem to care too much about backwards compatibility. I like to hold onto my devices longer than most people and it’s a bit frustrating to see that most sites nowadays expect you to be in the latest and greatest. It didn’t use to be like this.
I'm a bit torn on this when it comes to browsers. We recently had a user email us that our app stopped working for them. After we dug into it it was because their Chromebook was last updated in 2021 and didn't have Object.hasOwn (which a third-party library uses) and it's not even included in most common polyfills either. We fixed it, because I hate these sorts of compatibility issues. Nevertheless, I left a bit conc…
Yes, for browsers the window for what qualifies as being recent enough to be safe has shrunken dramatically. I’d be on edge about using a browser that hadn’t been updated in even one year… if I had to use a 2+ years outdated browser, I’d have it locked down (NoScript installed, bells and whistles like webfonts disabled, etc) and be much more cautious than I am normally.
Re: Old dogs, new CSS tricks
#27Whats the eloquent javascript or think python equivalent for css? is it mdn docs or another? Does anyone know the best active, comprehensive online references? How else do you really keep up on all the crazy new stuff
Great Q!
Pretty much everyone in the field knows about MDN (https://developer.mozilla.org/en-US/ )
and https://web.dev
but the Interop project is newer and maybe flying under the radar:
https://webkit.org/blog/14955/the-web-just-gets-better-with-...
Enjoy!
Re: Old dogs, new CSS tricks
#28> I can’t use [feature X], I need to support [old browser]. And that’s not necessarily a bad thing. As I commented a few days ago, nowadays devs don’t seem to care too much about backwards compatibility. I like to hold onto my devices longer than most people and it’s a bit frustrating to see that most sites nowadays expect you to be in the latest and greatest. It didn’t use to be like this.
I'm a bit torn on this when it comes to browsers. We recently had a user email us that our app stopped working for them. After we dug into it it was because their Chromebook was last updated in 2021 and didn't have Object.hasOwn (which a third-party library uses) and it's not even included in most common polyfills either. We fixed it, because I hate these sorts of compatibility issues. Nevertheless, I left a bit conc…
Just a remark on that specific case: Object.hasOwn landed in Chrome 93 in August 2021, and came last to Safari 15.4 in March 2022. My general advice is: never depend¹ on features less than two years old, avoid depending on features less than three years old, and treat two-and-a-half-year-old Safari as a bigger deal than one-and-a-half-year-old any other browser, because of how Safari major versions are tied to major OS versions to at least some extent².
—⁂—
¹ When I say “depend” I mean “break if it’s not present”. A degraded but still functional experience is acceptable.
² I don’t use Apple stuff, so correct me if I’m wrong, but I believe that this used to be the case for macOS but may be fixed since macOS 12 https://en.wikipedia.org/wiki/Safari_(web_browser)#Version_c...>, and is still the case with iOS et al. I believe iOS/Safari 15 is still the current version on some actively supported devices.
Re: Old dogs, new CSS tricks
#29>> But take container queries, for example. They were the number one feature requested by front-end devs for a looong time. So why don’t we use them more, now that they’re finally here?
A number of things are in play here.
1) when people ask for something it's because they need it now. The client wants it to look like x. Providing it a year later doesn't mean I'll retro-fit it, I'm working for another client now.
2) the new features on offer are (mostly) not low-hanging fruit. 20 years ago we were asking for the basics - not-table layout (flex, grid), variables (var --), conditionals (@media) and so on. The low hanging fruit stuff. Now "most people" aren't really asking for anything. (The sliver of a minority attending css conferences naturally are dreaming up new edge cases.)
3) most of the websites that exist (aka have been styled) are older than these features. Since redesigns are typically multiple years apart it takes years for them to filter in. As a proportion the number of sites built, or updated, in the last year is small. And the proportion of those needing these features is smaller.
4) most sites are not styled from an empty notepad. Most use (reuse) a framework - either personal or public.
CSS is starting to move from mid-stage to late-stage development. We're well passed the "terrible to work with" stage, well passed the "good enough" stage, and now into the "what can we dream up stage".
That said I can see myself using some of these things - sub-grid and :has being the obvious ones for me.
Re: Old dogs, new CSS tricks
#30> Quick question: how many of these have you actively used in production? > Container Queries They aren't useful yet because: 1. Using them requires a wrapper element which can dirty up the HTML 2. While we were waiting for container queries to arrive, we also got new rules that made fluid layouts easier to implement which handle a chunk of container queries use cases. Container queries will become more useful when e…
:has isn't available in Firefox ESR (115) yet. The next ESR (128) will trickle out between July and October.
@property (not mentioned) is only in Firefox Nightly; hopefully it makes it for 128 ...