Remix.run Logo
New Safari developer tools provide insight into CSS Grid Lanes(webkit.org)
105 points by feross 16 hours ago | 57 comments
jiehong 6 hours ago | parent | next [-]

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 4 hours ago | parent | next [-]

> 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 4 hours ago | parent | prev [-]

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

edhelas 4 hours ago | parent [-]

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.

SyrupThinker 3 hours ago | parent | next [-]

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/

wpm 3 hours ago | parent | prev | next [-]

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

swiftcoder 38 minutes ago | parent [-]

You can also buy a used-like-new one on eBay for half that

einsteinx2 2 hours ago | parent | prev | next [-]

> 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…

detourdog 3 hours ago | parent | prev | next [-]

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.

tcoff91 3 hours ago | parent | prev [-]

A Mac mini is pretty affordable.

Also you can use browserstack.

gabeidx 10 hours ago | parent | prev | next [-]

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

jen729w 9 hours ago | parent | next [-]

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.

SunshineTheCat an hour ago | parent | next [-]

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.

alemanek 26 minutes ago | parent [-]

It isn’t free but 1Blocker works well across iOS and macOS devices for ad blocking. I am not affiliated with them; just have had it for the last 3 years.

manuelmoreale 8 hours ago | parent | prev | next [-]

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.

jiehong 7 hours ago | parent | prev | next [-]

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

jeroenhd 8 hours ago | parent | prev | next [-]

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.

Zardoz84 7 hours ago | parent [-]

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.

jeroenhd 4 hours ago | parent | next [-]

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

saagarjha 6 hours ago | parent | prev [-]

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

seec 9 hours ago | parent | prev | next [-]

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).

nerdjon 3 hours ago | parent | next [-]

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_balyali 8 hours ago | parent | prev | next [-]

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.

KolmogorovComp 8 hours ago | parent | prev | next [-]

> 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?

asvitkine 3 hours ago | parent [-]

https://www.reddit.com/r/apple/comments/1fguko2/everyone_say...

argsnd 8 hours ago | parent | prev [-]

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.

lapcat 7 hours ago | parent [-]

> Apple’s insistence on publishing them on the App Store means availability is still restricted.

This is not true. You can distribute Safari extensions outside the Mac App Store.

While it's true that you can't distribute Safari extensions outside the iOS App Store, mobile Chrome doesn't even have extension support, so in this case, Safari has vastly better extension support.

argsnd 6 hours ago | parent [-]

You do still need to notarise it with an Apple Developer membership, right? Else you have to enable unsigned extensions every time you open Safari. The cost barrier is still there even if the approval barrier isn’t.

lapcat 5 hours ago | parent [-]

Yes, but your initial comment was kind of a strange way to phrase a cost complaint. After all, Google insists that extensions be published in the Chrome Web Store, and that requires Google's approval, a process that can often take much longer than App Store approval.

I suspect that the difference in extension availability is mostly due to desktop market share, since Safari is nonexistent on Windows and Linux.

argsnd 5 hours ago | parent [-]

There’s quite a difference between a one time $5 fee and an annual $99 fee for the economics of publishing a free browser extension.

Given almost 100% compatibility with the same Web Extension APIs that Chrome uses, I think you’d expect near-parity in extension availability between Chrome and Safari if that barrier didn’t exist.

lapcat 5 hours ago | parent [-]

> There’s quite a difference between a one time $5 fee and an annual $99 fee for the economics of publishing a free browser extension.

Yes? I didn't deny that. I said your initial comment didn't mention cost.

> Given almost 100% compatibility with the same Web Extension APIs that Chrome uses, I think you’d expect near-parity in extension availability between Chrome and Safari if that barrier didn’t exist.

It feels like you ignored the points I made in my last comment. Why would you expect near parity in extension availability when you can't even develop Safari extensions on Windows and Linux computers?

latexr 5 hours ago | parent | prev | next [-]

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.

sweetp 3 hours ago | parent [-]

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

:)

latexr 2 hours ago | parent [-]

I meant natively. I don’t want an extension for this, though I have bought 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.

troupo 9 hours ago | parent | prev | next [-]

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.

pprotas 9 hours ago | parent | prev | next [-]

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

Y-bar 8 hours ago | parent | next [-]

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_1111 7 hours ago | parent | prev [-]

Battery life.

Boltgolt 9 hours ago | parent | prev [-]

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_b 9 hours ago | parent | next [-]

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

troupo 9 hours ago | parent | prev [-]

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

realusername 4 hours ago | parent [-]

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.

nerdjon 4 hours ago | parent | prev | next [-]

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.

jimmaswell 2 hours ago | parent [-]

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%...

drawfloat 9 hours ago | parent | prev [-]

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.

ljm 3 hours ago | parent [-]

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.

spiderfarmer 4 hours ago | parent | prev | next [-]

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 12 hours ago | parent | prev | next [-]

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

aaronbrethorst 10 hours ago | parent | next [-]

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

matwood 9 hours ago | parent [-]

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

akst 11 hours ago | parent | prev | next [-]

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.

etchalon 11 hours ago | parent | next [-]

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

akst 11 hours ago | parent [-]

That's fair.

baxuz 10 hours ago | parent | prev [-]

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.

boxed 10 hours ago | parent | prev | next [-]

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.

troupo 9 hours ago | parent | prev [-]

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

dekoidal 9 hours ago | parent | prev [-]

Have a pat on the head, Safari.