Hacker News Reader

Comment by tannhaeuser | Hacker News Reader

I love it how grid is used as polyfill:

> My favorite trick of doing this before was using CSS grid. You’d take the text inside the textarea and propagate it to a hidden psuedo element overlaid exactly on top. That stack technique is a classic:

    .grid {
      display: grid;
      grid: stack;
      > *, &::after {
        grid-area: stack;
      }
    }

So much for the hope to start clean with flex, grid, and co.

(Btw, there's a typo: psuedo -> pseudo)

View on HN

Considering it still needs javascript, this trick seems massively overcomplicated compared to the following:

  <textarea oninput="this.style.height = 0; this.style.height = this.scrollHeight + 'px'"></textarea>

(Yes this forces an extra reflow but it likely won't matter)

I think all other methods require a reflow as well (internal or external). Because at the end of the day, you still need to measure the height of the text before rendering a larger box.

One day I will master the arcane workings of CSS. Will it be worth it?

Of course that depends on how much you'll utilize the skills. But everybody should at the very least master flexbox and get a solid understanding on grid. Imo it's the difference between people who find CSS "fun" and those who dread it

It's also worth learning because tools like Figma or editors like Microsoft Publisher, Word/Docs, etc all have their design tools heavily influenced by CSS. Using those tools will make a lot more sense if you know CSS

Reply on news.ycombinator.com