[HN Gopher] What You Need to Know about Modern CSS (Spring 2024 ...
       ___________________________________________________________________
        
       What You Need to Know about Modern CSS (Spring 2024 Edition)
        
       Author : fagnerbrack
       Score  : 91 points
       Date   : 2024-05-03 15:07 UTC (7 hours ago)
        
 (HTM) web link (frontendmasters.com)
 (TXT) w3m dump (frontendmasters.com)
        
       | zeroCalories wrote:
       | What you need to know about CSS is just enough to get the designs
       | in figma to work on a real page.
        
         | martinbaun wrote:
         | Yes, yes and yes :)
        
       | assimpleaspossi wrote:
       | > a list of ... new additions to CSS
       | 
       | That should be the real title of the article.
       | 
       | Some of those properties are new-ish. If you follow the events,
       | you will have known of them for a while but I agree most people
       | may not be aware of them.
        
       | doix wrote:
       | The :has selector is huge if you like customizing sites with
       | grease monkey. You can now modify parents based on their children
       | with pure css. Saves you having to use mutation observers in
       | those cases (assuming the site is built with a React-like thing).
        
         | duffyjp wrote:
         | I just checked and Firefox finally supports it (added Dec
         | 2023). I have a javascript workaround still in place for
         | Firefox and it looks like I can remove that. ;) All the other
         | mainstream browsers added :has in 2022 and it was an excellent
         | fit for some layout optimizations.
         | 
         | https://caniuse.com/?search=%3Ahas
        
         | beezlewax wrote:
         | Yesos this is an excellent addition. I've used it recently and
         | it got me out of a tight spot!
        
         | chaosharmonic wrote:
         | If you don't _require_ pure CSS, nested `querySelector` calls
         | are also great for this -- you can use it to segment out
         | smaller slices of a DOM with more generalized queries, that don
         | 't rely on detailed selector logic. I'm a fan of this for its
         | composability, but nesting -- also referenced in the OP --
         | could be used to achieve a similar result.
         | 
         | You can also create new DOMs out of arbitrary HTML trees with a
         | `DOMParser`, and can then run queries against _those_. Really
         | useful when run against the responses from `fetch` requests.
        
       | baggy_trough wrote:
       | Serving nested CSS up without a precompiler is God tier.
        
         | toxik wrote:
         | It's funny, nesting is such an obvious thing to have in CSS yet
         | the designers intentionally left it out.
        
       | gred wrote:
       | I didn't realize the nested CSS support level was already so high
       | (80%).
       | 
       | CSS nesting looks like a nice quality-of-life improvement in some
       | cases.
       | 
       | I'm not CSS-ninja enough for any of the other items to catch my
       | eye, though the "stylable select element" tease at the end looks
       | interesting.
        
       | exceptione wrote:
       | Some additions are nice, but I have my doubts about where this is
       | going. As usual, Google throws in tons of extra stuff. To compute
       | the size, position and appearance of anything, engines have to
       | deal with a growing list of instructions, that all brings
       | conflict. We had floats, flex, grids, position, and now anchor
       | positioning as well.
       | 
       | It strikes me that the more useful additions are implemented by
       | Firefox, and the lesser ones not.
       | 
       | I had expected that by now we would have a super light (kernel)
       | spec for SPAs, and the heavier spec for design heavy documents.
       | Chrome cannot keep up with Firefox wrt CSS performance. I don't
       | understand why Google is overloading its own camel; the web is
       | not going to render faster with more added complexity.
        
       | CM30 wrote:
       | Seems like some good stuff there. Personally I really like
       | container queries, cascade layers, nesting and the has selector,
       | all of which feel like they solve some very common design
       | problems in incredibly easy to understand, logical ways.
       | 
       | Like cascade layers, nesting and scoped CSS are basically built
       | for component systems, and are going to be so handy for
       | implementing styles for those going forward.
       | 
       | Didn't know about margin trim either... that sounds like it'll be
       | a godsend when it's fully implemented. So much extra CSS required
       | to overwrite the margin on the last element in a container almost
       | every time the situation comes up...
       | 
       | There's some good stuff here for sure.
        
       | codetrotter wrote:
       | Their website is giving 504 Gateway Timeout for some attempts,
       | not returning anything for some other attempts, and sometimes
       | does load.
        
       ___________________________________________________________________
       (page generated 2024-05-03 23:00 UTC)