15 ms·

State of CSS

• dheera 4y ago
  Yet 15 years later, I still can't specify a width and aspect ratio for an div without some unintuitive nested div hell.
  • nailer 4y ago
    Yes you can https://css-tricks.com/almanac/properties/a/aspect-ratio/ https://css-tricks.com/almanac/properties/a/aspect-ratio/
    • partiallypro 4y ago
      Experimental on Safari, so it's unusable of you have a real world project.
      • TheAngush 4y ago
        Are you sure? It seems to work for me. MDN and caniuse agree: https://caniuse.com/mdn-css_properties_aspect-ratio https://caniuse.com/mdn-css_properties_aspect-ratio
  • LukeLambert 4y ago
    div { width: 640px; aspect-ratio: 16 / 9; }
    • dheera 4y ago
      > But with Chrome and Firefox supporting it behind an experimental flag So basically not supported, and you have to go back to div hell. There should be some future.js file that you can import to make all this stuff just work in older browsers.
      • TheAngush 4y ago
        Where are you getting that from? It seems to be fully supported: https://caniuse.com/mdn-css_properties_aspect-ratio https://caniuse.com/mdn-css_properties_aspect-ratio I've been using if for months with no issues in cross-browser testing, and I haven't enabled any experimental flags.
• aeharding 4y ago
  So excited for colors outside of sRGB! I make good use of display-p3, currently only supported in Safari, on https://ppg.report https://ppg.report.
• toastercat 4y ago
  Great overview. I'm always excited by newer features to CSS that make older JS-only methods obsolete. I've also grown CSS-tooling fatigued after using SASS and PostCSS plugins for years. I've recently gone back to only using vanilla CSS on personal projects and while there are niceties I do miss (nesting) it's refreshing not having to deal with config files or waiting for stuff to compile.
  • Semaphor 4y ago
    Actual nesting is on the way [0], but for now you can already use :is() [1] in many cases. [0]: https://blog.openreplay.com/modern-css-selectors/ https://blog.openreplay.com/modern-css-selectors/ [1]: https://developer.mozilla.org/en-US/docs/Web/CSS/:is https://developer.mozilla.org/en-US/docs/Web/CSS/:is
    • toastercat 4y ago
      That's awesome. Thank you for sharing.
    • laundermaf 4y ago
      :is() exclusively reduces nesting if your nest produces a single rule, which is the least common situation and is generally dealt with by just duplicating the selector rather than nesting.
      • runarberg 4y ago
        :is also has tighter specificity then a nested selector. which is a footgun for sure. However you can use :where instead, which is basically just :is without this footgun.
        • clairity 4y ago
          there's a subtlety missing: :is() selects the highest specificity from the selector list while :where() sets specificity to 0 for anything in the selector list. this leaves out the (admittedly narrow) case where you want the lowest matching specificity (in case 2+ selectors match) rather than just 0, which is probably what most folks would expect, just as we would tend to expect selector lists to be forgiving (following the principle of least surprise).
• lbotos 4y ago
  Does anyone else feel like CSS has jumped the shark a bit? https://web.dev/state-of-css-2022/#accent-color https://web.dev/state-of-css-2022/#accent-color Sure it's a "nice to have" but it bloats the spec? Look at the current actual implementation: https://web.dev/accent-color/#guaranteeing-contrast https://web.dev/accent-color/#guaranteeing-contrast chrome and firefox already tint differently... How is this better than a good ol CSS variable and leaving it up to the designer to manage? Sure http://dowebsitesneedtolookexactlythesameineverybrowser.com/ http://dowebsitesneedtolookexactlythesameineverybrowser.com/ but when the exec is like "why is our brand color slightly different on ff vs. chrome... we are back to square one.
  • waboremo 4y ago
    Good joke, an exec testing in different browsers to ensure the color tint is the right color.
    • macNchz 4y ago
      I feel like the more typical reality is an exec looking at the site on some random browser or device, that then has to be in the support matrix, e.g. an enterprise business web app that supports the most recent 2 versions of modern desktop browsers...and the Silk browser for Kindle Fire because that's what's on the CEO's coffee table.
      • devX3 4y ago
        This is why I quit working on Frontend honestly, I was constantly juggling such bs requirements.
      • aplummer 4y ago
        their 6 year old Lenovo with ie10
    • devX3 4y ago
      As a person who had to make some custom newsletter compatible with IE8 few years ago, for the 1% who still used it but among of them some were the most important investors, I feel this.
• dmitriid 4y ago
  Make no mistake: dialog element is there only because browsers (and Chrome, first and formost) want to remove alert/prompt. dialog was so problematic that the same people that are now promoting it were in favor of removing it entirely. Literally none of the issues were solved, but now it's a great new element that we all should use.
  • jhgkjhlkhjkljk 4y ago
  • laundermaf 4y ago
    Dialog is fine, but what I’m most excited is the upcoming Popup API. The finest part is that “the most recent popup gets the top-most layer”. You never have to fight z-index again because popups now live in a compositing layer outside the document itself (even though they’re still part of it), akin to position:fixed but without the conflicts.
• jerrygoyal 4y ago
  most useful utility I found from the article is `:has()`
• Timja 4y ago
  I think I don't need the 2022 version, but the 2021 version. Or even the 2012 version, lol! I still prefer to use tables to layout my websites. Question: Say I want a layout that has a top row, a middle row and a bottom row. Each row gets 33% of the screen space. Unless the content does not fit. Then the row should expand to the content. Here is the table version: https://jsfiddle.net/vg2ey8r9/ https://jsfiddle.net/vg2ey8r9/ How do you do that without a table?
  • cjblomqvist 4y ago
    Eg grid + vh unit. Look them up and you should find plenty content!
    • Timja 4y ago
      When I try that, the rows do not expand if the content is larger than 33% of the screen height: https://jsfiddle.net/3hfosn5k/ https://jsfiddle.net/3hfosn5k/ Scroll down and you will see that the blue color of the bottom row ends and the text overflows it. But I want what table cells do: Expand if their content is too large to fi.
      • jahewson 4y ago
        Don't put the grid on the body: https://jsfiddle.net/y15qszjp/ https://jsfiddle.net/y15qszjp/
      • shadowfoxx 4y ago
        Hey there, I thought about this for a little bit because I find table layouts more pain than they are worth and the secret sauce that's missing from the examples above is nesting! Just like Tables have <table> and then <tr> - your div's need a similar parent-child relationship to work. Here's a working fiddle: https://jsfiddle.net/0389jsca/ https://jsfiddle.net/0389jsca/
  • Semaphor 4y ago
    CSS Grid.
• deleted 4y ago
  [deleted]
• andrewmcwatters 4y ago
  CSS keeps getting larger and larger which I think on its face is actually fine, since all of the standards are extended modules. So if you think about it that way, as an implementor you can choose which standards you want to incorporate and have total coverage for particular parts of the spec. But the state of CSS for implementors is still abysmal, in my opinion, and I'd like to see more of the spec formally defined for some of the most fundamental parts of it. It would be nice if the spec matured for implementors, too. Like, could we please get a formal definition of the CSS processing model? The lack of one means that particular events MAY OR MAY NOT exist in user agents. Those events may exist in large implementations--and when a CSS standard eventually pops up to utilize those vendor specific events, some implementations may not even have them, because they process CSS in an entirely different way!
  • nicoburns 4y ago
    As someone who's recently been working on an implementation of CSS Grid, and reading through a lot of CSS specs, I completely agree. There's a lot that isn't in the specs. The CSS Grid one isn't even that bad, but the spec for "flow layout" (block and inline) looks like a complete mess. An HTML5 moment for CSS would be very welcome.
    • andrewmcwatters 4y ago
      Yes! You know exactly what I'm talking about!! I'm hysterical about the state of affairs for these exact sorts of things, but comparatively almost no one is an implementor, so most people have no idea how bad it can be.
      • asiachick 4y ago
        IIRC the way someone reimplemented flexbox was to take the layout tests and iterate until their implementation passed. https://yogalayout.com/ https://yogalayout.com/
        • nicoburns 4y ago
• yakubin 4y ago
  From recent(-ish) additions, the vh unit and flexbox were enormous help to me when I was designing a photography section for my personal website. From something older, which nonetheless helped and was new to me, were "display: inline-block" and "display: inline-block" (the concept of separated inside and outside display styles in general). Also "box-sizing: border-box", but at this point probably everybody uses it.
• martin_a 4y ago
  I find most of this useless/overcomplicated. > Cascade layers Feels like we only need this because cascading works less and less well once you start to include multiple frameworks or pieces thereof. At some point people find themselves in a jungle of !important. If you keep the cascade small and clean, you'll most likely not need that. > Container queries Probably the designs I have to implement are not complicated enough, but I could work very well with media queries so far. Also this blurs the lines between markup and styling furthermore. Now you are defining IDs/classes in CSS which will make the code harder to debug. > accent-color Yeah, this is kind of nice. On the other hand we should not forget where the "this always gets styled by the system" comes from: Accessibility. With accent-color I can now totally easy screw up various kinds of inputs in the name of corporate design. > Color level 4 and 5 & hwb() Oh come on, this must be a joke. Color management is VERY hard to do, now we put more of that into CSS. But yes, advertisements can then be delivered with a wide gamut colorspace for more impact. Great. > inert What? This is just as bad as highjacking the scrollbar behaviour. Now you can make your website behave modal although there's no modal. Feels like another "right clicks are forbidden"-level when your paragraphs are set to inert and you can't interact with those anymore. > Viewport units More units of measurement is totally what CSS was missing. /s > :has() The parent selector looks like the only useful thing to me from that list. It will (theoretically) help clearing up the markup mess because you need less containers etc. if you want to style surrounding elements differently depending on their child content.
  • jacobsimon 4y ago
    Container queries is a big deal in my opinion! This has always been an obstacle for designing responsive components - they only respond to the size of the screen so designing them for use in different places in your app is difficult. But the implementation they’ve chosen with named containers is not my favorite. I’d prefer one that is simply based on the parent component or the closest component with a container attribute set; this would work better alongside tools like Tailwind and CSS-in-JS. Edit: Nvm after reading more, it looks like the container name is optional and the default behavior is what I described - excellent!
    • 4y ago
• krono 4y ago
  The majority of items mentioned in the article are still in the earliest stages of the standardisation process and haven't even had their specifications finalised yet (see overview at https://www.w3.org/Style/CSS/current-work https://www.w3.org/Style/CSS/current-work). Having access to these cool new features so early on is nice, of course, but be ready and willing to deal with possible breaking changes or even future removal. Here's a recent example of once such breaking API change in the `:has()` selector spec being discussed on the Firefox tracker: https://bugzilla.mozilla.org/show_bug.cgi?id=418039#c44 https://bugzilla.mozilla.org/show_bug.cgi?id=418039#c44. It will be interesting to see how the other browsers that have already released the outdated implementation to production deal with this.
  • BrainVirus 4y ago
    The reality is that W3C and Mozilla do not matter anymore. I'm not saying this because I like it, I'm saying this because it's the obvious state of things. Google controls the standards and protocols for the Web.
• perardi 4y ago
  I personally cannot wait for container queries to be fully supported. And I’m pleasantly surprised it’s landed in the new version of Safari. If only for some presentational aspect of an internal design system I’m building, it’s a dream come true.
  • sroussey 4y ago
    It’s not just in Safari, but also Chrome. So an up to date mobile OS will have it. I think only Firefox is without.
• butz 4y ago
  Sure, as standalone new CSS features look very useful, but when you start combining everything into one stylesheet it might quickly become hardly readable spaghetti code.
• encryptluks2 4y ago
  Can't believe paged media isn't really supported yet. Trying to do anything like line numbers for legal documents or page numbers is an absolute nightmare.
  • laundermaf 4y ago
    Page media has been supported for decades. Line numbers aren’t strictly related to page media. It’s hard to complain about the lack of in-depth support for a media that isn’t meant to display “the web”. I do agree that it could be better. They have been adding print-related features though, at least I remember some in CSS3. CSS Colors Level 4 includes cmyk functions.
    • encryptluks2 4y ago
      I don't think "it isn't meant" is accurate anymore. The browser has become meant for all things including document creation and styling. The @page counter feature although documented isn't supported by any browser from what I can tell at this point.
    • wruza 4y ago
      Have you tried to page a grid? Also, who decides what is web and what isn’t? Is printing barcodes on pre-delineated paper “web”? Feels like we’re stuck in a “yes, it meant to be a universal platform” / “no, it meant to be a document viewer” loop.
• ChrisArchitect 4y ago
  Just fyi: This is from May (and was posted a number of times then) What might be more interesting if it's your area is the currently running State of CSS Survey https://stateofcss.com https://stateofcss.com
  • swyx 4y ago
    yea this is by far the more time sensitive thing and should be upvoted for visibility
  • brainbag 4y ago
    I only knew 13 of 54 (24%) which is a huge surprise, I've been writing CSS for 26 years. I guess I have fallen further behind on modern CSS than I thought. Seems like there's some other cool stuff to learn!
• dimmke 4y ago
  I recently tried the new Layer feature and I really like it. We're finally getting stuff that has been needed for years, like custom scoping support. I think it will take CSS out of JS.
• jozzy-james 4y ago
  i, for one, am most looking forward to full support of subgrid - pure css masonry/isotope layouts with no JS needed when your cell requires images to retain a certain aspect ratio, as well as span multiple rows/columns, but has accompanying text that can vary in height. am aware that's a very specific thing, but will be nice to not need a JS crutch for height calculation
• fouronnes3 4y ago
  Is there any work on updating CSS browser defaults? Even if it must be opt-in to keep backwards compat, having the possibility of starting any css file with 'use-defaults: 2022;' or something like that would be great.
  • kevincox 4y ago
    I would love an option to opt into something like "reader mode" but maybe not quite so restrictive. (I can use some custom CSS to highlight code and some JS for interactive examples. Right now I need to worry about the user's contrast preferences, light/dark preferences. Decide if I want to force a decent font or end up with the user's default (which probably sucks). I need to decide the text size (because their default probably sucks) and decide how wide the reading area should be. What a mess to try and just pick something that the user wants.
• yakshaving_jgt 4y ago
  As CSS gets bigger and more needlessly complex, I wonder if people start writing compile-to-CSS languages that aren't just supersets of the status quo. I could imagine (and I think I am possibly observing) CSS going a similar direction to JavaScript; we might soon see the CoffeeScript of CSS, and then eventually something more sophisticated and well-designed like the Elm of CSS. CSS — like JavaScript — might become the styling bytecode of the web.
  • arrow7000 4y ago
    Is it really "needlessly" complex if this is enabling styling that wasn't possible before? Re your second point that CSS might become a compilation target for styling... have you never heard of Sass, Less, Tailwind, or any of a million UI frameworks that provide alternative ways to write CSS, or even avoid writing it directly altogether? This isn't exactly new.
    • yakshaving_jgt 4y ago
      > Is it really "needlessly" complex if this is enabling styling that wasn't possible before? Many newer features that have been added over the years don't actually enable anything new. Not that I'm arguing in favour of table-based layouts either. > have you never heard of Sass, Less, Tailwind, or any of a million UI frameworks that provide alternative ways to write CSS, or even avoid writing it directly altogether? This isn't exactly new. I have written CSS in a serious capacity for several years. I am more than familiar with Sass, Less, etc., which is exactly why I wrote "languages that aren't just supersets of the status quo".
      • arrow7000 4y ago
        How do you propose we get to such a language that is more than a superset of the status quo if CSS, the compilation target itself, is severely limited?
        • yakshaving_jgt 4y ago
• dtagames 4y ago
  Fantastic stuff in here! Can't wait to try some of the things that already work... And see the ones that are coming!
• aimor 4y ago
  The fragment identifier links in the table of contents need to have parenthesis () removed because right now they're not matching the ids in the section headings.
• psygn89 4y ago
  :has() basically removes the need for us to use JS to attach classes to parent elements as we can essentially look ahead now, e.g. ".some-component:has(.input-select-all:checked) { background: blue }" whereas we would have to use JS to query the input, then query the parent and attach some css class as a styling hook. Container queries will allow us to fine-tune the not-so-predictable gaps between our predictable breakpoints. Breakpoints will probably still be used for larger-picture layout, but container queries will help with the smaller parts especially in UI that have many moving dynamic parts. The rest are just icing and honestly I wouldn't be surprised if it takes a while for many of them to become mainstream.
  • lioeters 4y ago
    I was curious about current browser compatibility for :has(). The major browsers (Chrome, Edge, Safari, Opera) support it except for Firefox, which has it behind a flag still. ~76% of users are covered. :has() CSS relational pseudo-class - https://caniuse.com/css-has https://caniuse.com/css-has
    • BeFlatXIII 4y ago
      I wonder when Firefox will turn on that flag (and why it's still off by default). Is their implementation not yet fully-tested?
      • lioeters 4y ago
        According to Bugzilla: - 4 months ago Chromium enabled :has() selector by default - 3 months ago, CCS Working Group made a small design decision ("resolution") which may affect how Firefox implements it - 22 days ago: "has() implementation is experimental, that's why it's not enabled anywhere by default." I think the good news is that it's in active development, and seems fairly close to release. Bugzilla: Implement the :has() pseudo class - https://bugzilla.mozilla.org/show_bug.cgi?id=418039 https://bugzilla.mozilla.org/show_bug.cgi?id=418039
• jjcm 4y ago
  Interesting to see a lot of negative responses here. I'm quite excited for a large amount of these items. @container queries are going to help a ton in making components more reusable - components that react to their own size rather than the browser size have been needed for a long time, and currently the only way to really do it is with the javascript observer api, which comes with huge performance tradeoffs. Color-mix() is another item I've been wanting for some time, not because I need to mix things like red + blue, but because we've needed a native way to add opacity to css variables for a long time now. Having opacity be independent means we can have a robust design system that doesn't expand exponentially, while still providing opacity levels when needed. Masonry layouts will greatly simplify a very common use case, color level 4 and 5 will make the web more dynamic and beautiful, and loosely typed properties will help add fallbacks. Definitely excited for these changes.
  • 9dev 4y ago
    I mean, you already could store Color tuples in CSS variables: --color-primary: 172,250,83; background: rgba(var(--color-primary), 0.4); But I agree, that isn’t very intuitive.
  • wwweston 4y ago
    AFAICT a lot of the negativity comes from developers who want to work at a component UI Kit level you can find in native dev but don't find libs/kits that accommodate this well. I don't think this is a failure of CSS -- I think CSS has turned out to be brilliant with some blind spots and part of the most spectacularly flexible UI layer that's ever been created. But it works at a lower level and leaks easily and that plus some cultural factors has generally pulled people towards a below-component development focus lots of devs would rather have abstracted away. Container queries are one of several things that can move the dev culture more towards component level.
  • jandrese 4y ago
    I'm only negative that some of these, especially flexbox/grid, weren't in the standard from the start. Especially after the committee crapped on HTML tables so hard. Viewport units are another part of the standard that's about 24 years overdue at this point.
• nailer 4y ago
  Give me: - mixins. Like SCSS and SASS has had for a decade now. 'apply' was supposed to add mixins but 'apply' was cancelled in favour of 'part', and 'part' doesn't work. https://stackoverflow.com/questions/74097950/how-do-i-create-a-css-mixin-using-the-new-part-syntax https://stackoverflow.com/questions/74097950/how-do-i-create... That's actually it. We already have aspect-box, adding gradients for borders would be nice but I can live without them.
• rglover 4y ago
  Some nice surprises in here (love the idea of @scope and @nest). It's a total mind blow how far along CSS has come from the stone age IE6 days.
  • Macha 4y ago
    I don't quite get what the big deal is with @scope: What's the benefit to: @scope(.card) { header { } } over .card header { } (or ".card > header", the article isn't quite clear which it is). Is it just the sass-style nesting? How does it differ from @nest then?
    • rglover 4y ago
      On the surface, it's very similar to the snippet you pasted and nesting but with a few exceptions. I asked the same and this breaks it down well: https://css-tricks.com/early-days-for-css-scoping/ https://css-tricks.com/early-days-for-css-scoping/
• LordDragonfang 4y ago
  Am I the only one who looks at the example color gradients and thinks the new ones just look... worse? The sRGB one is the only one that looks perceptually uniform, and is probably the only one I'd feel comfortable putting text on top of, and the bottom two have really aggressive and distracting banding. That makes this especially concerning: >The default color space also changes to LCH instead of sRGB. Since LCH is the worst one to my eyes. Is this just an issue with my monitor?
  • The5thElephant 4y ago
    It really depends on what colors you are using in the gradient. In some cases LCH or others looks a lot better than RGB or HSL: https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/72ba74de-3574-4301-ab9c-03b37c52acf6/6-modern-css-color.png https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_8...
• seydor 4y ago
  Grid is crap. Html tables were much easier to handle, they should have gone with <grid> tags instead (since tables have been declared toxic). The cryptic nature of the grid layout units is something that seems deliberately obnoxious who the f thinks this is readable: grid-template-rows: auto 40px 1fr 80px;
  • duxup 4y ago
    Tables were terrible. But there is the middle ground of flexbox... honestly flexbox seems to work in nearly everything I use.
    • seydor 4y ago
      flex is ok, and actually fills a need, but can it be used to make e.g. a chat layout? i don't agree btw. grid is voodoo declarations that is worse than tables. pretty much need to stackoverflow to do anything
      • duxup 4y ago
        >but can it be used to make e.g. a chat layout? I don't see why not.
        • quickthrower2 4y ago
          I use just regular ol divs to make a chat layout.
  • deleted 4y ago
    [deleted]
  • The5thElephant 4y ago
    Looks pretty readable to me. 4 explicit columns, the first is width auto, second 40px, third takes up any remaining space, 4th is 80px. How would this be any more readable with tags or table setup? Especially if you want to have additional columns auto-generated by content or numerous other grid abilities that are not easy to setup with tables.
• GoToRO 4y ago
  After reading some of this, all I can think of is "Boy, my paycheck will explode!".
• fleddr 4y ago
  It's so interesting, these waves of CSS improvements. Before the flexbox/grid arrival, there were years of near-zero progress. The flexbox/grid release, uniquely coordinated across browsers (for once), was an excellent milestone, but not really a movement. These last 2 years though feel almost like a revolution in comparison to CSS's history. Somebody is pushing very hard. These are some very serious improvements that address core needs and gaps. In particular scaling CSS in large applications, with things like @layers, @scope and container queries. The second goal seems to be to make CSS preprocessors obsolete. Compliments to whoever is working on this. My favorite upcoming one has to be toggle, controversial or not, the idea that for simple interactions you don't even require JS anymore is a good development. The luxury problem this creates is the slow adoption rate. Something extraordinarily powerful as grid is still barely used. Old habits die hard.
  • soperj 4y ago
    It's so annoying to me that there's one browser that's holding everyone back. They also make it so that no one can use anything but their browser engine on mobile phones so they're harder to ignore.
    • the_gastropod 4y ago
      Reading between the lines, it seems like you're suggesting Safari is that browser holding everyone back. The Compatibility section in this article doesn't seem to support that.
      • soperj 4y ago
        Ahhh, that's the version number. I thought that's how % of the spec that they actually supported.
        • eyelidlessness 4y ago
    • 4y ago
• jetzzz 4y ago
  What's the purpose of having 4 linear color spaces (srgb-linear, xyz, xyz-d50, xyz-d65) for interpolation? Linear interpolation is exactly the same in any linear space. Indeed, in provided gradient examples these 4 look the same.
  • colejohnson66 4y ago
    Because they're (idealy) not linear, I'd assume. Gamma correction[0] is an exponential-like function. Hence, sRGB vs "sRGB linear". Despite what many people think, sRGB color #808080 is not 50% the brightness of #ffffff, but about 75%. All because our eyes are non-linear. Color math is a massive rabbit hole that deserves its own "things programmers believe about..." [0]: https://en.wikipedia.org/wiki/Gamma_correction https://en.wikipedia.org/wiki/Gamma_correction
  • Sesse__ 4y ago
    The CSS Color (Level 4) spec allows you to interpolate in any color space that you can specify colors in, and all of these four are considered useful to specify colors in. (Or at least useful enough to make it into the spec :-) ) This leads to some redundancy in this specific context, but the alternative would be disallowing three of them in interpolation only, for no good reason at all.
• meerita 4y ago
  I'm using functional css approach and I cannot be more happy than ever. I even use most of the new features without having to even use SCSS.
• lyptt 4y ago
  I'd love to see something like constraint layouts in pure CSS. It's an incredibly powerful tool when building user interfaces. I was really excited to see GSS (http://gss.github.io http://gss.github.io), however at the time it was far too slow to be usable in real projects.
  • moritzwarhier 4y ago
    That's the argument for container queries, in my view. I imagine container queries will totally change the way I write CSS as soon they are broadly supported. Of course this would not make for a truly constrained-based layout definition. But it would at least make working this way somewhat possible. The example where flex-directon is switched using a container query is spot-on. That's exactly ly what I sometimes miss being able to do in HTML+CSS. Apparently there is a JS polyfill (awesome given the problem) but I haven't tried it and I assume the performance implications are bad.
• wruza 4y ago
  Still cannot center an element in a box and then put another element to the left of it on another layer. Or synchronize widths of two elements in different containers. Or draw an extents border with some padding behind an arbitrary set of elements. If it’s already awesome for you, please just give us display:constraints and fiddle with these boxes and grids as much as you want.
• Brajeshwar 4y ago
  CSS has come a long way and seem to have accelerated real fast these days. There were a time when the the ability to write CSS that creates a website that work perfectly in Apple macOS's Internet Explorer was a feats of the few. I owe my professional career development to a lot of awesome people whom I met on the Internet and helped me at each turn, without asking for nothing in return.
• rikroots 4y ago
  Nobody seems to have mentioned the (planned) advances for gradients. I love gradients and have had a lot of fun implementing them (beyond what the 2d canvas API offers) in my JS canvas library[1] > Gradients can't be animated though. They are too flexible and too complex for the browser to "just derive" how you want them to animate. Animating gradients can be joyful work (with obvious caveats that such animations need to respect accessibility concerns eg prefers-reduced-motion). I assume that CSS gradient animation is difficult because of the way gradients, and animations, get defined in the stylesheet? [1] - linear gradient demo - https://scrawl-v8.rikweb.org.uk/demo/canvas-003.html https://scrawl-v8.rikweb.org.uk/demo/canvas-003.html
• conaclos 4y ago
  I have the sentiment that CSS is now too bloated. It could be nice to obsolete some feature. A kind of edition could be pleasant : to get new features you have to opt out some old obsolete features. This also allows fixing known issues by breaking backward compatibility. For instance: `@edition(2023)` could make `box-sizing: border-box` the default
  • klysm 4y ago
    I wonder if editions wild simplify or complicate development. Since you still would have to support older editions it opens up interesting questions on code structure.
• DeathArrow 4y ago
  >The flexbox/grid release, uniquely coordinated across browsers (for once) What browsers? There is only Chromium left...
  • Macha 4y ago
    Safari still exists. At the time of grid becoming usable in like 2017, firefox and pre-Chromium Edge also had quite a bit larger market shares than they do today.
• pers0n 4y ago
  #1 thing I’d like to see is to be able to set a baseline for typography using native css with calcium and other tricks
• ppetty 4y ago
  For all the comments about Safari versus Chrome, I would love to see Safari take the lead in documentation although MDN does a great job. I mainly want to see that so we can extend the comparisons to web.dev and sites that probably wouldn’t require consent acknowledgment.