top | item 46626210

New Safari developer tools provide insight into CSS Grid Lanes

123 points| feross | 1 month ago |webkit.org

74 comments

order

jiehong|1 month ago

Safari is a fine browser, just as Firefox and Chrome are [0].

Regarding CSS Grid Lanes, I find it to be a better name than "masonry".

I'm not sure how often I'd actually reach for grid lanes, but I guess not often.

What good use cases would you see for grid lanes today?

[0]: <out of topic>If anything, Chrome is the new IE: is a monopoly imposing its quirks and "standards" on others.</out of topic>

pbowyer|1 month ago

> What good use cases would you see for grid lanes today?

Fully responsive layouts, where sidebar content is interleaved with page content on small screens, but in a sidebar on larger screens.

Demo: https://codepen.io/pbowyer/pen/raLBVaV

Reordering the content on larger screens would be the icing on the cake but for now I'll take just doing it.

CSS Grid didn't solve this, as it added gaps: https://codepen.io/pbowyer/pen/azNarbZ

And using named grid-template-areas stacks the items you move to the sidebar on top of each other, so you only see one of them at a time. Eventualy I hope that https://github.com/w3c/csswg-drafts/issues/9098 will land and we'll be able to use this saner way to do it.

baw-bag|1 month ago

You can't debug it in anything other than a mac

amadeuspagel|1 month ago

How does "brick" mean "content flows in the column direction"? Don't you lay bricks row by row?

jensimmons|1 month ago

The "brick" layout creates rows, yes. When a regular person looks at it, they will see rows. But Grid Lanes flows content up and down, not across the row.

If you just want content to flow down one row, then the next, then the next, Flexbox is a better solution.

The whole point of masonry layout is that content flows perpendicular to the lane.

gabeidx|1 month ago

It's so good to see Safari steadily making progress on being a decent browser.

jen729w|1 month ago

I guess the snark is funny, so I'll bite.

I've used Safari daily for … must be 20 years now? Every day, for everything, minus the odd exceptionally rare circumstance. And I couldn't tell you what the last one of those was, it was so long ago.

I'm a web developer. I use its devtools constantly.

People ask why do you use Safari and not Chrome and I think the question is backwards. Why, given how lovely Safari is, would you go and download Chrome? It's really ugly and doesn't look like any of the other apps on my Mac.

When I do want other devtools, I vastly prefer Firefox's to Chrome's.

nerdjon|1 month ago

I have never understood the complaints about Safari and at this point it feels more like parroting than anything grounded in facts.

Unless I am using Windows (which I use for anything except gaming sparingly) Safari is my primary browser on my Mac and I stick with it on my iPhone and iPad. It does what I need it to do and I never have issues as a user. It works with the plugins I need it to work with (mostly 1Password).

I am sure there are genuine issues with the browser just like with any software, but it is already past "decent" and does its job.

drawfloat|1 month ago

I wish they would fix the bug that has plagued testing against Safari for larger applications since day 1: the silent memory restart. At the very least give an error indicating why the page just refreshed so users/testers can report it, but it would honestly be best to just let a modern desktop browser use the available memory if desired.

spiderfarmer|1 month ago

For a new project I looked into supporting grid-lanes with the polyfill on Simon Willisons website. But sadly the polyfill is not comparible to the native experience. The column width calculation is off.

etchalon|1 month ago

Safari continues to have the best developer tools, so long as you don't need to debug JavaScript.

aaronbrethorst|1 month ago

I use Safari for day-to-day web browsing and Chrome for development. Feels like the best of both worlds to me.

akst|1 month ago

People have pointed out to what’s Obviously wrong with the JS tooling but I had more problems with CSS style sheets generated at runtime or web components attached stylesheets

They all work is just editing their styles that seems to be a pain, you straight up cannot edit a shared stylesheet attached to an web components elements shadow dom.

If you generate enough styles in JS you may not be to edit them correctly (as in it shed you the wrong styles for the element)

akst|1 month ago

I don't think JS debugging in Safari is that bad.

But I also use it as my main browser, so maybe there are some nicer features in other browser dev tools I haven't been exposed too.

boxed|1 month ago

The Chrome tool where you can edit CSS inside the inspect panel and it writes it to the CSS file is amazing and I really miss that in Safari.

dekoidal|1 month ago

Have a pat on the head, Safari.