Back

New Safari developer tools provide insight into CSS Grid Lanes

104 points16 hourswebkit.org
jiehong6 hours 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>

pbowyer3 hours 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-bag4 hours ago

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

edhelas3 hours ago

This

I have users that have issues with Safari, CSS and Javascripts ones.

I MUST own an Apple device to debug anything.

I'm sorry but as a Free Software Web Developer I can't spend 2K€ on a Mac to just fix a CSS issue.

SyrupThinker3 hours ago

Frequently, but not always, I can reproduce such bugs using Epiphany [1] or other WebKit based browsers.

That's at least somewhat cheaper when it works.

[1]: https://webkit.org/downloads/

wpm3 hours ago

You can buy a refurb Mac mini for €589. Macs haven't started at €2K since the early 90s.

detourdog3 hours ago

When I was making money as a developer I purchased wintel systems to verify my work. I thought of it as the cost of doing business. Many Macs cost less then 2K euros.

einsteinx21 hour ago

> I'm sorry but as a Free Software Web Developer I can't spend 2K€ on a Mac to just fix a CSS issue

More like $200-300 for a used M1 mini or Air…

Or free to just run macOS in a VM if you don’t care about breaking an EULA you never signed in the first place…

tcoff913 hours ago

A Mac mini is pretty affordable.

Also you can use browserstack.

gabeidx10 hours ago

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

jen729w9 hours 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.

SunshineTheCat46 minutes ago

I agree with you on this one, I've never understood the fascination with Chrome. Safari has done a pretty good job of maintaining a clean and simple UI along with being reliable.

If there was a downside I guess it would be in the realm of extensions/plugins where Chrome probably has a leg up. That's where I decided to make the jump to Brave. All the same Chrome extensions without the Google nonsense (and built in ad blocker).

I still really like Safari though and would likely use it daily if it had a built-in ad blocker.

manuelmoreale7 hours ago

I'll join in saying I also daily Safari for generale usage (with only two extensions installed 1Blocker and Are.na) and I have basically zero issues.

I also do dev work in Firefox + Safari. I use Firefox mainly because I prefer their dev tools to do frontend work. Chrome I almost never use. This insistence that Safari is the new IE is honestly baffling. Yes Safari is not perfect and yes Apple is Apple. Still, Safari is far from being a train wreck.

jeroenhd7 hours ago

I find Safari's devtools to be quite annoying, but to each their own. Firefox' dev tools still hold the crown for me.

The lack of cross-platform support is also annoying to the point where I generally don't bother testing on Safari unless I'm absolutely forced to. Until Apple releases a Safari build for Windows and/or Linux, Safari users will just have to rely on Safari's compatibility with cross-platform browsers.

The open source version of WebKit works fine as a user, but behaves differently from any official Safari releases, so as a web developer it's not really usable as a testing tool.

Zardoz847 hours ago

Orion , a web browser using the same engine that Safari, are to going to release a version for Linux. I'm expeting to get it so I could test stuff on something Safari like.

jeroenhd3 hours ago

Orion doesn't have access to Apple's additions to Safari. WebKit exists but isn't similar enough to actually verify that everything works.

saagarjha6 hours ago

I assume Orion will have the same issues as the open source build.

jiehong6 hours ago

> why do you use Safari and not Chrome

To me, it's annoying people ask that question. It's like they ask why I use brand A of shoes and not B, but it's my choice and nobody would expect a monopoly from an Ad company to be a good thing.

Social pressure is real, though.

seec8 hours ago

The reason to use Chrome is better extension support, better/more useful functionalities (translation, favicon bookmarks, Google Lens), better autofill/autologin, and better performance for web apps generally. Another very useful property is being able to sync your Chrome profile on any computer, which comes in very handy when you need to do stuff on computers you do not own. Doing the same with Safari is possible but a hassle.

I have used Safari since it replace Internet Explorer back in the days, then switched to Chrome a few years ago after a beta broke password syncing and AdBlocker Extensions for Safari were paid/not as good.

Like much of Apple's software, it has strengths and looks good but is really lacking in many ways. It also locks you into the walled garden pretty tight, which can be annoying at times.

Apple should go back to releasing a cross-platform version if they want to be taken seriously, in my opinion. In general, their incentive to build software solely for their platform is a double-edged sword because they can't manage to create hardware that can cover every need (especially for 3D/engineering), and it becomes very annoying to rely on it the moment you need to use another OS (either Windows or Linux).

Another example is Apple Notes being decent, but using it in the web browser is basically a joke (might as well not exist).

nerdjon3 hours ago

As someone who daily drives Safari as primary browser on Mac, iPhone, and iPad figured I would comment on each of those:

> translation

Safari has Translation built in

> favicon bookmarks

Yeah to my knowledge this is not possible (someone correct me if I am wrong), but I also fail to see the value given how large screens are today and favicons are kinda terrible.

> Google Lens

That alone is a reason for me not to use chrome.

> better autofill/autologin

I have never had any major issue with autofill or login on Safari. It pulls in my contact information when filling out a form, it pulls in my credit card information, and it pulls in one time codes from mail and messages when those happen. The only real issue I have here is that I use both Apple Passwords and 1Password and the popups for both interfere, but I doubt that is really a safari unique issue.

> better performance for web apps generally

Do we have data to back that up? Websites perform just fine for me.

> Another very useful property is being able to sync your Chrome profile on any computer, which comes in very handy when you need to do stuff on computers you do not own. Doing the same with Safari is possible but a hassle.

Not sure if syncing with a computer you don't own is really a feature that we should be encouraging? That seems really bad advice.

Regardless, outside of Windows (which I just don't care or have any desire to have my main computing sync too) Safari syncs just fine between my devices I care for it to sync too.

> Apple should go back to releasing a cross-platform version

I disagree with the "Seriously" part but I agree in spirit. I would love to have Safari on Windows again so I can never use Chrome or Firefox again. As far as other apps being on Windows, I care less but I would love to see icloud.com improved when needed in a pinch.

omer_balyali7 hours ago

Safari has translation, bookmarks (favorites bar) can be either icon only, text only, or both text and icon at the same time, tabs can be pinned (Chrome also has it), "better" autofill/autologin is subjective. Chrome doesn't have better performance than Safari, both on macOS and iOS Safari is optimized better, both for battery and memory.

If you use Google products extensively and don't use Apple ecosystem integration features, then Chrome may look like it has better features; the same is true if you are on the Apple ecosystem (Notes, Reminders, Calendar, Passwords, multiple devices, etc). Seamless integration of Apple devices is one of the biggest advantages of using Apple software like Safari, where you can use iCloud Tabs to switch between devices. Also, Tab Groups is a neat feature; you can move Safari windows to an iPad with Sidecar and so on.

Google's ecosystem also has similar features, but you can argue that you're "locked into a walled garden pretty tight" with Google as well.

Browsers have their different advantages, but they are not so different from each other, especially when we compare Safari and Chrome. Maybe the only real difference is that Chrome has way more extensions.

KolmogorovComp8 hours ago

> and better performance for web apps generally

At which cost? Huge RAM footprint, deadly battery killer, slow start time. How often do you need heavy performance for web apps versus just browsing?

argsnd7 hours ago

Since MV3 Chrome has not had better extension API support, although Apple’s insistence on publishing them on the App Store means availability is still restricted. I’ve found that using `xcrun safari-web-extension-converter` on almost any Chrome extension works fine and I’ve self-signed a few (eg. Bypass Paywalls Clean) with Xcode to run on my Mac and iPhone.

+1
lapcat6 hours ago
latexr5 hours ago

I also use Safari as my main browser, but do have some gripes.

The one that bites me every day is how I cannot pick an arbitrary search engine. The ones they have are very few and awful.

One that bites me on occasion is the inability to selectively disable JavaScript per website.

Another is the atrocious permissions management for extensions. On iOS you can’t even deny access to a specific website until you allow it once first.

One that bites me rarely is AppleScript support being slightly worse than in Chromium, specifically there being no way (other than GUI automation) to make a new Private Window.

One that hasn’t bitten me yet is the ugly pill-shaped tabs in Tahoe, together with the removal of the unified tab layout.

The most frustrating part is these are very easy to fix. Note also that this isn’t an endorsement of Chromium, there’s a reason those browsers aren’t my main. Right now there isn’t a single web browser I like and that does everything I want acceptably. But Safari is the least bad.

sweetp2 hours ago

I actually built a content blocker which gives the ability to selectively block javascript (or any data type for that matter) https://minim.sweetpproductions.com

:)

latexr2 hours ago

I meant natively. I don’t want an extension for this, though I already have StopTheScript. Reason being that to selectively block JavaScript with an extension, I have to allow it on every website (meaning placing an inordinate amount of trust on the developer) then block the ones I don’t want. That’s completely backwards from what I want, which is to disable JavaScript by default and enable it on just a few websites.

Boltgolt8 hours ago

This is like being in the 2000s and saying "Why would I use anything but IE5, everything works with it"

The market share is what makes those circumstances exceptionally rare. Meanwhile we're having to use safari specific fixes and refrain from using he newest standards just because of safari

dep_b8 hours ago

It’s much easier to make stuff work with Safari first then last.

troupo8 hours ago

Where "newest standars" are inevitably "Chrome-only non-standards".

Safari is not just fine. It's more than fine: https://wpt.fyi/interop-2025?stable

realusername3 hours ago

Safari's problem has never been the lack of supported standards, more that the support is buggy. You'll find that yes the feature is there but it throws a nonsense exception in a weird case and same in CSS.

It's also the last non-evergreen browser so bugs take longer to fix than Firefox or Chrome, compounding the problem.

troupo8 hours ago

Safari's dev tools are infuriatingly cumbersome in comparison to Chrome. They go out of their way to make even the simplest actions hidden in multiple selects and popup menus. I even made a screencast of it: https://x.com/dmitriid/status/1711701552082079764

As a browser? I agree with you.

pprotas8 hours ago

I don’t think the common question is “Why not use Chrome instead of Safari?” but “Why use Safari?”

Y-bar8 hours ago

I have colleagues who are annoyed that I use Firefox because in their world everything Chrome does is standard and browsers like Safari and Firefox are annoying outliers. No matter if something they have implemented in Chrome is _actually_ standard and no matter how proper to the spec non-Chrome browsers implement a feature they see it as a chore to support the spec rather than the Chrome browser.

So, the "Why not use Chrome instead of Safari?” certainly happens.

raw_anon_11116 hours ago

Battery life.

nerdjon3 hours 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.

jimmaswell1 hour ago

As a web dev, Safari is like the new IE6 - it does everything slightly wrong and I have to sprinkle my code with special cases for it because too many people use it to ignore. This modal scrolls properly in Firefox and Chrome? Not Safari, better add a million extra css attributes and maybe even some JS for fun to deal with it. This CSS parses exactly the same in Firefox and Chrome? Not Safari, they decided to Think Different. My workplace's frontend codebase is absolutely polluted with /* Safari fix: ... */

https://www.google.com/search?q=examples%20of%20code%20that%...

drawfloat8 hours 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.

ljm3 hours ago

This is probably the single most frustrating issue on iOS Safari, and the Reddit website triggers it all the time.

It would be nice if Reddit wasn't a total hog that could barely load two separate pages without crashing from a memory leak, or allow you to navigate without breaking the back button completely, but it'd also be nice if Safari was more resilient to it.

spiderfarmer3 hours 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.

etchalon11 hours ago

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

aaronbrethorst10 hours ago

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

matwood9 hours ago

Same. Chrome dev tools, especially around JS are just better.

akst10 hours 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.

etchalon10 hours ago

It's mostly that there's no way for third-party tooling to initiate a debugging session, I believe.

akst10 hours ago

That's fair.

baxuz10 hours ago

It's criminally bad. You can't copy logged variables. You can't inspect worker threads (!?). WASM support is practically non-existant. You can't even do a heap snapshot on demand, something that should be a basic feature.

The timelines view is practically obfuscated with pretty graphs that show some aggregated data and some automatically generated snapshot points where the dev tools decide that are meaningful.

Inspecting the rendering pipeline is impossible. You can't see memory usage, compositing reasons, long frames (you kinda can but it's tricky)...

Not even going into remote debugging for iOS which crashes either the dev tools or Safari on iOS in any non-trivial scenario — the exact ones you need a debugger for.

boxed9 hours 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.

troupo8 hours ago

Safari's dev tools are ... just bad. They are frustratingly cumbersome to use: https://x.com/dmitriid/status/1711701552082079764

dekoidal8 hours ago

Have a pat on the head, Safari.