New Safari developer tools provide insight into CSS Grid Lanes
webkit.org

・

119 points

・

feross

・

2 days ago

67 comments

jiehong ・ a day 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 ・ a day 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 ・ a day ago

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

    • edhelas ・ a day 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.

      • SyrupThinker ・ a day 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/

      • wpm ・ a day ago
        ・ 2 more

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

        • swiftcoder ・ a day ago

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

      • detourdog ・ a day 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.

      • tcoff91 ・ a day ago

        A Mac mini is pretty affordable.

        Also you can use browserstack.

      • baw-bag ・ 4 hours ago

        They are all telling you "Just buy a mac". Exactly the point that you and I were downvoted for saying.

      • einsteinx2 ・ a day 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…

amadeuspagel ・ 17 hours ago

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

  • jensimmons ・ 13 hours 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 ・ a day ago

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

  • jen729w ・ a day 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.

    • ksec ・ an hour ago

      >And I couldn't tell you what the last one of those was, it was so long ago.

      I encounter it on a weekly or monthly basis before Safari 18.0, but then subsequent release 18.2 along with latest 26.2 I finally have yet to encounter one.

      I am hoping they will shift a little more focus on multi Tab usage, less paging, address bar, and some other desktop browser features.

    • manuelmoreale ・ a day 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.

    • jiehong ・ a day 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.

    • jeroenhd ・ a day 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.

      • Zardoz84 ・ a day ago
        ・ 3 more

        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 ・ a day 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.

        • saagarjha ・ a day ago

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

    • SunshineTheCat ・ a day 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.

      • alemanek ・ a day ago

        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.

    • seec ・ a day 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).

      • omer_balyali ・ a day 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.

      • nerdjon ・ a day 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.

      • KolmogorovComp ・ a day ago
        ・ 4 more

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

        • concinds ・ 19 hours ago

          Safari has used way more RAM than Chrome for a decade. It uses more battery in some tests.

          It starts way slower, Chrome is one bounce and usable immediately, Safari is 2-3 bounces and 3-4 seconds before it starts accepting input.

        • asvitkine ・ a day ago
          ・ 2 more

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

          • hu3 ・ 21 hours ago

            > In my 3-hour tests, Safari consumed 18.67% of my battery each time on average, and Chrome averaged 17.33% battery drain. That works out to about 9% less battery drain from Chrome than Safari. Yes, you read that right, I found Chrome was easier on my battery than Safari.

            With how much engineering was poured over V8, I don't doubt.

      • argsnd ・ a day ago
        ・ 8 more

        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 ・ a day ago
          ・ 7 more

          > 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 ・ a day ago
            ・ 6 more

            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 ・ a day ago
              ・ 5 more

              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 ・ a day ago
                ・ 4 more

                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 ・ a day ago
                  ・ 3 more

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

                  • argsnd ・ 6 hours ago
                    ・ 2 more

                    “publishing them on the App Store” was intended as (perhaps imprecise for you) shorthand for all of these distribution issues.

                    You very much can develop Safari extensions on Windows or Linux because they use largely the same APIs as Chrome extensions as I already mentioned. Any differences are well documented. The only thing you need a Mac for is, again, distribution. If not for that it’s really not that different to developing a website that will open on Safari without access to an Apple device.

                    Once upon a time Apple had a separate Safari extensions website where they allowed extension developers to publish or sign extensions after registering for free as they recognised these barriers. They could either be distributed on Apple’s extensions gallery or you could distribute the files yourself.

                    • lapcat ・ 4 hours ago

                      > Any differences are well documented.

                      LOL, I wish.

                      I would note that I'm a professional browser extension developer and have a great deal of experience with this.

                      > The only thing you need a Mac for is, again, distribution.

                      Or, you know, testing your software. Or are you in the habit of shipping software without any testing?

                      > If not for that it’s really not that different to developing a website that will open on Safari without access to an Apple device.

                      Also a bad idea.

                      > They could either be distributed on Apple’s extensions gallery or you could distribute the files yourself.

                      You may have still have needed Safari to package the extension, though I don't recall for sure, because that was 15 years ago.

                      In any case, I'm glad you mentioned it, because there was not near-parity in extension availability back then either.

    • pprotas ・ a day ago

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

      • Y-bar ・ a day 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.

    • latexr ・ a day 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.

      • sweetp ・ a day ago
        ・ 2 more

        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 ・ a day ago

          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 ・ a day 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.

    • Boltgolt ・ a day 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_b ・ a day ago

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

      • troupo ・ a day ago
        ・ 2 more

        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 ・ a day 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.

  • nerdjon ・ a day 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.

    • jimmaswell ・ a day 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%...

  • drawfloat ・ a day 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.

    • ljm ・ a day 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.

dekoidal ・ a day ago

Have a pat on the head, Safari.

spiderfarmer ・ a day 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 ・ a day ago

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

  • aaronbrethorst ・ a day ago

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

    • matwood ・ a day ago

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

  • akst ・ a day 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.

    • etchalon ・ a day ago

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

      • akst ・ a day ago

        That's fair.

    • baxuz ・ a day 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.

      • akst ・ 8 hours ago

        That's fair, it sounds like you're dealing with some use cases I don't deal with often. And yeah remote debugging safari on an iPhone is pretty unreliable.

  • boxed ・ a day 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.