3 ms·
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 t
by tannhaeuser 3y ago
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)
- msie 3y agoOne day I will master the arcane workings of CSS. Will it be worth it?
- culi 3y agoOf 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
- iza 3y agoConsidering 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)
- SCLeo 3y agoI 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.