4 ms·

> ...your existing I don't use CSS Reset techniques: don't try to fight the browser. > div { display: grid; } I'm concerned this will have a nontrivial impac

> ...your existing I don't use CSS Reset techniques: don't try to fight the browser. > div { display: grid; } I'm concerned this will have a nontrivial impact on browser layout performance. Existing browser layout engines are heavily optimized for flow/block layout, but defaulting every div to grid breaks that major assumption all the browser-makers made and... for what gain? I actually don't want every div to potentially be a grid layout container by default. > You can now remove $things: I don't use any of those tricks/hacks anyway - and clearfix hasn't been relevant since IE8 came out. > rounded gradient borders Just use border-radius combined with `border-image: some-gradient-function()`. No hacks or tricks required.

867-5309 4y ago
>some-gradient-function() >which still needs a hack
nailer 4y ago
I've been doing grid-first for a few years now (last major update was when buttons hot grid support) across apps including high performance google docs-type collab interfaces. It's fine. Optimising for existing behavior reminds me of when people didn't want to use async/await as V8 'wasn't optimised' for it. await never felt slow in their apps anyway, but now it's similar fast to what callbacks were. Skate to where the puck going to be. > for what gain? I don't use any of those tricks/hacks anyway OK. Everyone else does but maybe you're the exception. > For rounded gradient borders... just use border-radius combined with `border-image: some-gradient-function()`. No hacks or tricks required. Are you sure? https://stackoverflow.com/questions/51496204/border-gradient-with-border-radius https://stackoverflow.com/questions/51496204/border-gradient... - judging by the views on that question, if you have a codepen there's at least 42,000 people who'd love to see, it my understanding is that the W3C spec says it shouldn't work. Probably obvious, you sound like you know what you're doing but: adding additional elements, pseudoelements etc counts as hacks. Here's border-radius combined with `border-image: some-gradient-function()`: https://codepen.io/mikemaccana/pen/QWVpdmo https://codepen.io/mikemaccana/pen/QWVpdmo
- DaiPlusPlus 4y ago
  Thank you for that info - I honestly didn't know that border-radius didn't work with border-image.
  - nailer 4y ago
    It’s OK! Thanks for replying politely. HN can be combative sometimes.
lelandfe 4y ago
> I'm concerned this will have a nontrivial impact on browser layout performance. Existing browser layout engines are heavily optimized for flow/block layout Layout and paint performance is pretty low stakes. Unless you’re doing a lot of painting, or your demographic is surprising, your users are going to be fine.
frosted-flakes 4y ago
> I'm concerned this will have a nontrivial impact on browser layout performance. I've experienced this with iOS Safari. I was experimenting with different layout methods, and at one point a display:grid didn't get deleted, and some days later when I was testing with Safari it was taking at least half a second to render a page. I'm talking 5 paragraphs of text, possibly with subgrid I was experimenting with, nothing crazy. I had no idea CSS could ever get that so slow and I thought it had to be something with React, and it took way longer than it should have to narrow it down to that single property.

867-5309 4y ago

>some-gradient-function() >which still needs a hack

nailer 4y ago

I've been doing grid-first for a few years now (last major update was when buttons hot grid support) across apps including high performance google docs-type collab interfaces. It's fine. Optimising for existing behavior reminds me of when people didn't want to use async/await as V8 'wasn't optimised' for it. await never felt slow in their apps anyway, but now it's similar fast to what callbacks were. Skate to where the puck going to be. > for what gain? I don't use any of those tricks/hacks anyway OK. Everyone else does but maybe you're the exception. > For rounded gradient borders... just use border-radius combined with `border-image: some-gradient-function()`. No hacks or tricks required. Are you sure? https://stackoverflow.com/questions/51496204/border-gradient-with-border-radius https://stackoverflow.com/questions/51496204/border-gradient... - judging by the views on that question, if you have a codepen there's at least 42,000 people who'd love to see, it my understanding is that the W3C spec says it shouldn't work. Probably obvious, you sound like you know what you're doing but: adding additional elements, pseudoelements etc counts as hacks. Here's border-radius combined with `border-image: some-gradient-function()`: https://codepen.io/mikemaccana/pen/QWVpdmo https://codepen.io/mikemaccana/pen/QWVpdmo

DaiPlusPlus 4y ago
Thank you for that info - I honestly didn't know that border-radius didn't work with border-image.
- nailer 4y ago
  It’s OK! Thanks for replying politely. HN can be combative sometimes.

lelandfe 4y ago

> I'm concerned this will have a nontrivial impact on browser layout performance. Existing browser layout engines are heavily optimized for flow/block layout Layout and paint performance is pretty low stakes. Unless you’re doing a lot of painting, or your demographic is surprising, your users are going to be fine.

frosted-flakes 4y ago

> I'm concerned this will have a nontrivial impact on browser layout performance. I've experienced this with iOS Safari. I was experimenting with different layout methods, and at one point a display:grid didn't get deleted, and some days later when I was testing with Safari it was taking at least half a second to render a page. I'm talking 5 paragraphs of text, possibly with subgrid I was experimenting with, nothing crazy. I had no idea CSS could ever get that so slow and I thought it had to be something with React, and it took way longer than it should have to narrow it down to that single property.