@property: Next-gen CSS variables now with universal browser support | Hacker News Reader

@property: Next-gen CSS variables now with universal browser support

web.dev

28 pointsthunderbong10 comments

CSS becoming an unreadable mess with so much special-syntax for properties. The cognitive load is just too much. HN folks make fun of tailwind (even I am guilty), but the hard fact remains that Tailwind simplifies and dumbs-down stuff for the mortal programmer. I personally find reading complex C++ Template Metaprogramming easier to follow than sophisticated CSS.

    .card {
      border-radius: 1rem;
      max-width: 36ch;
      padding: 2rem;
      background: radial-gradient(
          300px circle at 55% 60% in oklab, 
          var(--shine-2), transparent 100% 100%
        ), radial-gradient(
          farthest-side circle at 75% 30% in oklab, 
          var(--shine-1) 0%, var(--card-bg) 100%
        );
      background-blend-mode: color-burn;
      animation: animate-color-1 8s infinite linear alternate, 4s animate-color-2 1s infinite linear alternate;
    }

I personally find that code rather readable for code specifically designed to show that it isn't readable. (I don't think the background attribute is valid syntax though, color spaces should be specified per color and the percents are redundant)

Well, hats off to your memory and intellect. If you take a poll and see how many people remember or comprehend the special-case syntax sugar for the dozens of distinct CSS properties - which gets more and more complicated yearly with every CSS enhancement, I believe you will be in the super-minority.

CSS has already become one of the most complex languages in the world. Wish there was an attempt to simplify and unify syntax as opposed to just adding more and more features.

If for some reason you need such a complex gradient, how would Tailwind make it any easier to write?

MDN docs:

https://developer.mozilla.org/en-US/docs/Web/CSS/@property

Are we turing complete yet? Can I play doom in pure CSS?

Turing-complete? Kind of. First claim was in 2011. And another one in 2015: https://accodeing.com/blog/2015/css3-proven-to-be-turing-com...

Reading the radial gradient example I’m struck by how much English is used, “farthest-side” as an example, and how far beyond short hand symbols for concepts (“var”, “int”, etc) we’ve moved.

I’ve been around a while, I understand that English is the lingua-franca of compiled languages … but CSS seems like a singular travesty.. other instructions in the “radial-gradient” function are “animate”, “infinite”, “alternate”.

I feel like CSS deserves to be internationalized, as it stands this group is creating a dialect that only English speakers can understand with relatively low cognitive load.

English is the most spoken language in the world but also the most distributed.

Mandarin and Hindi follow but unlike English theyre heavily concentrated geographically.

Also, the symbolic examples you’ve provided are also based off English (variable and integer). It’s just that in a pre-cheap compression time words would be shortened to reduce space or transfer bits, but with cheap and easy compression that’s not a concern anymore.

While CSS certainly leans more on existing English semantics, it's so heavy with jargon I think you may find that those more familiar with English semantics don't usually get that much of a head start when first learning CSS.

Ultimately the learning pattern of looking up what each individual property does and how interacts with the DOM remains regardless of if you know English or not. If anything I think the English semantics of CSS are more misleading than intuitive.

Reply on news.ycombinator.com