Safari, I want to love you, but I just can’t

I have been using Safari as my default browser for the last few months. I really wanted to see what Apple has been up to with their browser and wondered if I could use it effectively for designing and building websites.

The gist is that the browser is pretty dang nice for the most part. I love a bunch of the built-in features like their reader-mode (a must on hard-to-read sites). That said, it’s not the greatest for development or for having a bunch of tabs open.

Failing tabs

Chrome fails pretty gracefully on pages that get “stuck” by offering to “kill” the tab or to let you wait to see if it gets better. This is pretty awesome. Killing them is the best as a quick reload has my tab back in action. In Safari, when things get stuck, they stay stuck until I restart the browser. That’s pretty rough.

Closing tabs

When I close a tab, I should end up on the last tab I visited. Not the tab that happens to be next to the tab I closed. This is pretty frustrating for me.

Reopening closed tabs

I strongly dislike reopening closed tabs in Safari. It’s a very fragile experience. It uses the same keyboard shortcut for undo, command + z. This means it can “forget” closed tabs after a bit. It also isn’t possible to easily recover whole windows when restarting Safari. I got around this by changing the setting to open the windows I had open when starting up. Still, I occasionally lost tabs and windows.

Web Inspector

I don’t use all the stuff in Safari’s Web Inspector, but here are my notes on the parts I’ve used.

I use inspector to mess with CSS a whole bunch. I used to use Chrome’s exclusively so it took me some time to get used to Safari’s idiosyncrasies. For example, it acts more like a text editor than a form. It actually feels a bit slower, but it’s not a big deal.

One thing I don’t like is when the autocomplete appears when writing a property’s value. For example, when I write display: I don’t get any suggestions for the value until I start typing even though Safari is technically capable. This makes it so that I have to know all the values rather than typing display: and getting a tidy list of possible values.

The color picker is also missing the crucial eyedropper for getting a color from elsewhere on the screen. The color picker appears when you click the little color square next to a color value in the styles panel. It’s pretty basic compared to Chrome’s which has a color picker, swatches, and even lets you switch color syntax (hex/RGBA/HSLA).

When it’s docked to the side (my preference when testing media queries), the inspector has some strange resizing behavior. I can’t resize it smaller than the second column of the inspector. Then, when I go to resize that column, it snaps to a teeny size all of a sudden. This is super frustrating because doing that combination tends to lose my place in the DOM and I have to reselect an element.

Pinned tabs

I don’t particularly care for the way pinned tabs work in Safari. I like having two or three windows with different pinned tabs. It’s a great way to separate projects and workspaces. However, in Safari, when you pin a tab, it’s pinned in every window. There is also some funky behavior when closing normal tabs in the window. For example, if I close all the regular tabs and only the regular tabs with the keyboard shortcut, the last tab closed will close the whole window including my pinned tabs. Weird.

I do <3 Safari

I just can’t rely on it for everyday use as a developer and designer because of its above quirks.

Got any tips?