Why everyone should use Safari for rich web development
mir.aculo.us
mir.aculo.us
Using the Acid3 test in this context is misleading. Acid3 tests a random selection features to ensure they work corrrectly. In this case, Firefox 3.5 fails on 7 of the tests and 5 of these are due to SMIL (pretty much SVG animation) and SVG fonts. They are obscure features, and don't provide a compelling reason to choose Safari over Firefox, least of all for development where you won't be able to use those features in the real world until other browsers implement them. Whatsmore, in designing Acid3, Hixie deliberately picked on browser bugs so the test didn't favour one vendor, irrespective of how they effect the real world - taking a single number out of context and point at that to prove the innate superiority of one browser over another, or that one browser follows "better standards", is incredibly simplistic, let along drawing conclusions that sites will be easier to port because of it. At worst, all it could tell you is that one vendor is focusing on passing a test and another isn't.
I don't really see the pre-optimisation as a real-world issue, and I seriously doubt bugs creep in through it. It feels very much like somebody making a problem out of nothing.
All projects have long niggles and bugs that have been there since the dawn of time. The fact that Firefox has bugs spanning years is more of a sign that the Mozilla project has been around for years than inehrent tardiness.
I also don't really understand the conclusion that "OS X is the only system that allows me to test all major browsers side-by-side by means of virtualization software". In actuality, if testing is your priority, then Windows would probably be the platform of choice as it's the only platform that can run all the major browsers (IE6, IE7, IE8, Firefox, Safari and Chrome) natively. Linux can also virtualise all the browsers not available natively through virtualisation of Windows, no different from Mac OS X.
I don't get it. A lot of the hardship that comes with web development is that stuff that works great in modern standards-based browsers like Safari doesn't work when you try to view it in IE. I can't count the number of times I've taken a webpage that I developed to work in Safari (or Firefox) and seen it break completely in IE. And it often takes more than "minor tweaks" to fix it.
What's stopping us from making a tool that parses HTML/CSS and points out constructs that are known to be bad in certain browsers? Sort of like lint: "It looks like you're sending element foo inside element bar to IE6. This probably won't work right"
I personally don't have a windows box to test IE, and I'm not looking forward to the day when I'll have to test on IE. Surely there is a better solution than manually testing browsers?
There are a few things you could catch, like CSS features that just don't exist in IE6, but trying to predict if your particular mix of content+HTML+CSS is going to "look wrong" when viewed in IE is not a trivial problem.
Also, web development tends to push the envelope often. I've built literally hundreds of web sites / apps and I still come across nasty unexplicable post-ajax redraw bugs in IE6 that I've never seen before (using markup that I used to consider "safe", but which turns out to break under a new novel condition).
Using another browser like IE usually breaks the whole thing.
But at this point in time, I'd drop FF2 support (pixel perfection) for most projects.
If anything, stuff developed to work with the restricted CSS-support in older MSIE versions (MSIE8 is actually not that bad) has a much higher chance of rendering correctly in Firefox, Opera and Safari than the other way around.
The reason for this is that IE let's you deviate more from standards, and then fixing it for other browsers will take more time. Also, other browsers albeit having own quirks are much more consistent – that means that if it works in Safari it is most likely to work in Firefox and Opera too.
Of course IE does not support a lot of things other browsers do. Maybe it is time to weight you options there: are you sure you want site to look the same across all the browsers and is it worth the effort? Or can you live with simpler version for IE but gaining advantage of having to write and maintain less code?
Highly recommended site ;) : http://dowebsitesneedtolookexactlythesameineverybrowser.com/
I use a up to date standard compliant browsers like Firefox 3.5 when developing sites, but I keep the my CSS restricted to what I expect will be supported in MSIE. If I go overboard with new CSS features, I know I will be creating a much bigger job trying to fix it for older browser (like Firefox 2.0, not just MSIE).
I find that so far that has worked well for me.
Besides a few profiling tools, his list of arguments seems to boil down to "things are prettier in Safari". Maybe it's just me, but that's really not my number one feature when looking at development tools.
Since when was "things are prettier" a bad thing? I do extensive Windows testing using browsers, and Safari's rendering engine is leagues ahead of everything else, its developments tools are more polished than Firebug and easier to figure out, and it's one of only two browsers that fully supports HTML 5. Firefox renders things shittily (even on the Mac, which has possibly the best rendering engine out there available for all apps by default, it fails Acid 3 at the moment, and while Firebug's great for some things, at other things it fails hard.
Firefox is available for Linux, OSX and Windows. It's open-source to boot and is available in different builds and brands for different systems.
That means that 100% of developers can use Firefox, regardless of the OS they choose to run.
It's also available under Solaris, AIX, *BSD, IRIX, HP-UX...
That makes it very close to 100% of the desktop and laptops around.
The only software I know runs on more platforms is Emacs, which I had on my WinCE-based IBM workpad z-50.
Two browsers can each be good without one rendering the other entirely useless. Safari's development environment is in many ways better than Firefox's, so why not use it when you've got it (which is 99% of the time)?
I'm saying that things being pretty is not my primary concern when looking for development tools. It's OK if they are pretty, but that's pretty far down on the list of things I care for.
As for Safari's rendering engine, I see you claim that is "leagues ahead of everything else" on Windows. Are you talking about text-rendering? In that case I would like to comment on how it is different from all the other software on Windows. Running its own anti-aliasing it just stands out and looks weird.
If you are talking about speed, I honestly don't care. Same reason I am completely yawning over Chrome. If you are talking about CSS3 feature-set, I honestly don't care either, because using any CSS3 features while people are still using MSIE would be messing up the experience for about 50% of your visitors.
As for Safari being "one of only two browsers that fully supports HTML5"... You know that HTML5 is only a draft at this point? The spec isn't even finalized. The Acid 3 test even admits this much, saying it's testing features which may or may not end up in a official spec.
Excuse me for not caring very much for Safari, when Firefox is my main browser and does everything I need. I'll test my shit in Safari, but that's as far as I'm willing to go with exposure to craptacular Apple software on Windows.
I'm not defensive. You're the one who just got into a little minirant. I was explaining why I prefer Safari for development and you returned with the little gems like "Excuse me for not caring very much for Safari, when Firefox is my main browser and does everything I need." You know, some of us here don't comment just to "beat" you. Sometimes we comment because we honestly think you've raised a point worth debating and discussing. I'm sorry for responding to you like you wanted a debate, instead of assuming you were a prick.
If you are talking about speed, I honestly don't care. If you are talking about CSS3 feature-set, I honestly don't care either, because using any CSS3 features while people are still using MSIE would be messing up the experience for about 50% of your visitors.
So there's no room for graceful degradation, then? If CSS3 lets me craft a better user experience for some users, then I'll give it to them. It's why we don't primarily design for IE 6 and its crippled users. We give other users what they want, then focus on stepping down.
As for Safari being "one of only two browsers that fully supports HTML5"... You know that HTML5 is only a draft at this point? The spec isn't even finalized. The Acid 3 test even admits this much, saying it's testing features which may or may not end up in a official spec.
Safari supports what there is at the moment. That's better than Mozilla's "We don't need to do anything re:HTML 5 and our competitors are evil for supporting the standards" line that they touted last year.
I'll test my shit in Safari, but that's as far as I'm willing to go with exposure to craptacular Apple software on Windows.
Ignore all the other stuff I commented on, since it's obvious you'll just disagree and neither of us will get anything out of it. What makes Safari craptacular? Safari 4 on Windows has a native feel, it runs 3x faster than Firefox, uses less memory, has a smoother interface in many ways, and has quite a few features (including that anti-aliasing) that Firefox lacks. Perhaps it's not your choice for a web browser, which is totally coo', but I resent your calling it craptacular and implicitly insulting all the Windows users who think Safari 4 is worth their using.
Nearly every statement you've made about Safari has been subjective. You're entitled to that. But there's no reason to lose your lunch when somebody disagrees.
I'll share my own subjectivity that the only thing "worse than shit" right now is your attitude about this.
We're talking about a browser.
And I'll tell you what... FF on Mac is absolutely horrible. I use safari on my mac (at home). When using Windows (at work), I use FF3 and Firebug.
I don't mind going back and forth between them. And I have learned to accept that fonts do look fuzzy in Safari and the dev-tools in FF are sub-optimal.
Sometimes we comment because we honestly think you've raised a point worth debating and discussing. I'm sorry for responding to you like you wanted a debate, instead of assuming you were a prick.
In that case, I guess I read your comment wrong. Sorry about that.
It looks "weird" because it uses a much better method of anti-aliasing.
It's still different from everything else on the platform. To me that's a bad thing. Maybe not to you, maybe not to designers, but to me it is.
So there's no room for graceful degradation, then?
There is. But in the meantime I've found that I can cover lots of browser shortcomings trough jQuery instead of CSS and browser-specific hacks. Definitely not ideal, but it works. When CSS3 gets here, I'll prefer that instead.
Safari supports what there is at the moment.
I'm not against progress, but even Firefox has limited HTML5 support these days, and it's really not a major selling point for me as of yet.
What makes Safari craptacular? Safari 4 on Windows has a native feel
I actually had to check this out. Seems you are actually right. Historically though Apple has always tried to cram the Apple look and feel down my throat when it is obvious I don't want a Mac, giving me a non-native interface. I resent that.
That said, the fact remains that it is simply not what I am looking for in a browser (see my other post [1]).
As for my main complaint (with regard to the software being crap), my Core i7 is the first machine which iTunes is actually responsive and non-laggy on. I was genuinely surprised when I discovered that. I had to get a 2GHz Dual Core machine before Quicktime could play things fullscreen without skipping. My 200MHz Pentium MMX could that without CPU load.
When I refer to Apple software on Windows as craptacular, that is because they have quite a history for being just that.
Prettiness? If it blends in with the native look of the OS, that is "pretty" to me. Safari fails at this. Firefox does not.
Speed? I have a Core i7 idling at 1% CPU all the time, unless I'm doing HD video encoding. Even on my Core2 Duo, I can't remember last time I was CPU-constrained when browsing stuff. Why on earth would I care about speed?
Standards compliance? Firefox is top notch, and while Opera and Safari may go full 100% on ACID3, that is for a spec which is not even finalized and standardized yet. Anyhow, you need to keep MSIE in mind when developing stuff, so this point is pretty moot.
So what do I care for in a browser?
Stability, that it works intuitively, that it's configurable, that it sports a decent feature set, keeping mouse-dependency to a minimum and that most operations apart from link-clicking can be done trough keyboard operations and probably most of all: that it is extendible and that I can add whatever crap I feel I need in a browser. Things like Ubiquity, Firebug, Flashblock, Adblock, Rikaichan, Mousegestures, Greasemonkey, custom dictionaries and Bugmenot.
I pretty much think that the browser should supply me with the core basics, and let me decide from there on what I think a browser should be. If the browser is going to be the "OS of the web and the future", you better believe I want to have a browser which I can make mine.
Edit: Evidently Safari 4 actually sports a somewhat native interface in Windows.
Despite the great improvements Safari has made with respect to its developer tools, it can't top Firefox's amazing third-party plugin selection.
1) console output is just not as good as Firebug. Example: try going on jquery.com and doing console.log($("p")). Instead of a pretty printed array with styled items as in Firebug in the form of <p>, with all their classes and ids and visibility status hinted in the rendering, you get an expandable HTMLParagraphElement object (and its name doesn't even respond to a click..). If you expand that, the first thing you see is a big list of DOM constants like DOCUMENT_FRAGMENT_NODE: 11, etc. In Firebug these are sorted, filtered, censored to fit to the way web developers actually work.
2) I've never been able to resize the Console/Debugger when displayed as a split pane in the Windows version. In OS X, it seems to work, but in Windows, nothing. Again, a huge irritant when you're trying to get a better look at something that's gone wrong.
Nit picks? Yes. But some of us work with these things many hours a day. Workflow issues and missing little details like these prevent my uptake of the otherwise very impressive developer tools in Safari.
Originally I switched to safari 4 beta because I'm on a machine that has limited ram and firefox 3.0 would buckle my system. Safari 4 is slick and runs much lighter and faster than firefox 3, however firefox 3.5 really levels the playing field and makes the comparison about features rather than resource consumption.
When you compare the two on features, safari is lacking. While safari has clean tools built in for web development, they are more for looking at a page rather than messing around with it. I find it a pain to go and change styles or elements in safari and also you can't delete elements out of the dom in safari which I find very annoying. Firebug is not as polished looking, but it definitely has the best set of features. Also firefox's extensive set of plugins is tough to live without.
I enjoyed my time with Safari, it was a very elegant polished experience, but web hacking is rarely both, which is where firefox and its plugins feature set really shines.
In Firebug, you can double click on anything in the dom view and edit it. In the CSS view, you can easily add new attributes. The autocomplete for CSS styles is awesome.
Also, you can grab any asset file (css, js) and open it up in your default text editor.
Safari 4 web dev tools isnt quite there. It only needs a few tweaks, but they don't seem to be adding them anytime soon (people have been asking for these features for about a year now).
Give me a break. Use whatever you want to use for web development. As long as whatever you're doing works across _all_ A Grade browsers, I could care less what you use.
Exactly where does it say that HTML, CSS, & Javascript has to be source code? If browser differences cause you so much grief, why don't you just treat whatever goes out to the client as "object code" of your own engine.
That engine would have to create a different page for each browser that you decided to support. Sure, it would be 4 times the work for every page, but that's work done by your engine, not you. Browser differences are accomodated through maintenance to your engine, not every page or library.
IE is not going away any time soon, so your output better be able to handle it's DOM. While you're at it, take a look at your user's resolution as well, and serve it the way they want to see it, not what you decided is best. No one likes horizontal scrolling or white space on the edges.
This approach works for the iPhone, which is standardized completely, but not for the complex and varying desktop browser scene.
You mean like, swf?
Browser differences are accomodated through maintenance to your engine, not every page or library.
You mean like, by adobe?
While you're at it, take a look at your user's resolution as well, and serve it the way they want to see it, not what you decided is best. No one likes horizontal scrolling or white space on the edges.
Well if these are your priorities then I suggest to take a look at Flex.
You limit your audience to clients who have the plugin - but other than that it just works™.
If you can prove that Firefox's optimizations actually make incorrect results in any way, I am 100% behind whoever claims that micro optimizations are bad. However by firefox making them it means that I don't have to worry about the nitty gritty details about what order of instructions will perform better without changing the code. Or things like loop unrolling that don't have to be done in my checked in source.
Yea I think this argument is about 30 years too late...
If anything this proves FF3 is awesome.
Regarding web standards... As much as I am 100% for having good web standards, what good is adhering to a standard when no one can use it. I use the acid tests as an indication that browser x, y and z are browsers I want to be supporting. Unfortunately I always have to support IE... Sometimes even IE6, so acid tests are just nice-to-haves at this point. I just can't wait till IE7 completely dies (hopefully it won't be as long as IE6).
Actually, Firefox benefits the most from tweaks like this, because its engine is so slow. For whatever reason. That's why I thought this post was interesting!
However I see no reason why you should not be able to indicate to firefox that for this page do not optimize the javascript, then vuala good debugging. The only catch is that the optimizations need to be proven to be correct in all cases.
Once we have Safari for Linux I will consider using it as the main browser...
Scratch that, once at work we officially support it ill consider it :)
In general the "best" tool is whatever one is best for the current job. Fortunately in the Webdev world our tools are free and easily accessible.
I personally use Safari, Chrome, Firebug AND IE8 (seriously, the built-in developer tools are actually decent!). Usually I start with Firebug, and if I run into a small issue instead of wasting time trying to fix the tool in that case I just try another tool. Usually one of the tools will handle the case with no problems and I can continue debugging/developing my core project instead of debugging the tool.