Musings from Mars Banner Image
For Software Addicts: Yes!MaybeNah!
Articles In Category <em>   Safari & WebKit</em>

Articles In Category Safari & WebKit

March 2nd, 2011

Theming A Web Page With Crystal Black:
A CSS Design for Web Inspector

For awhile, I've wanted to theme Safari's Web Inspector—the incredibly useful built-in website viewer/debugger/designer assistant—with the Crystal Black look and feel, but it wasn't immediately obvious how to do this. I assumed that the tool was just a part of Safari, and therefore built with classes and widgets from the Cocoa AppKit (which is the framework all Cocoa apps are built with). However, when I began to inspect the Inspector, I discovered that everything contained within its borders was simply web content: HTML, CSS, JavaScript, and images.

In other words, the Web Inspector tool is nothing but an intricate, sophisticated, and extremely well designed web page!

Having built a Crystal Black CSS file for web pages in general, and with my past expertise in CSS, I attacked this challenge with relish! It reminded me of the time I realized that Dashboard widgets are, at their core, nothing but little web pages (as are simply apps for the iPhone). In tackling this one, the main question was, How should the various elements look? And the hardest part was inspecting the various parts in of the Inspector in great detail to determine which CSS rules governed their default appearance and behavior.

As I discovered, the WebKit has a a sub-framework called "WebCore," which in turn has a folder of resources specifically for the Web Inspector. In the Inspector folder, among other things, is a suite of CSS files that handle different aspects of the Inspector's design and behavior. Of these, the primary one I needed to tweak was called simply "inspector.css."

    
  • del.icio.us
  • Google
  • Slashdot
  • Technorati
  • blogmarks
  • Tumblr
  • Digg
  • Facebook
  • Mixx

Full article

July 25th, 2008

A Close-Up Look At Today’s Web Browsers: Comparing Firefox, IE 7, Opera, Safari

My, we've come a long way in browser choices since 2005, haven't we? It's been a very heady time for programmers who dabble in the lingua franca of the World Wide Web: HTML, JavaScript, Cascading Style Sheets, the Document Object Model, and XML/XSLT. Together, this collection of scripting tools, boosted by a Browser choicestechnique with the letter-soup name "XMLHttpRequest," became known as "Ajax." Ajax spawned an avalanche of cool, useful, and powerful new web applications that are today beginning to successfully challenge traditional computer-desktop software like Microsoft Word and Excel. As good as vanguard products like Goodle's Maps, Gmail, Documents, and Calendar apps are, one only has to peek at what Apple has accomplished with its new MobileMe web apps to see how much like desktop applications web software can be in 2008.

That this overwhelming trend toward advanced, desktop-like applications has happened at all is the result of the efforts of determined developers from the Mozilla project, which rose from the ashes of Netscape's demise to create the small, light, powerful and popular Firefox browser. The activity of the Mozilla group spurred innovation from other browser makers and eventually forced a trend towards open standards that made the emergence of Ajax possible.

This article starts with a brief history of web browsers and then jumps into a look at the feature set of the four primary "modern" web browsers in 2008. The comparison of browser features begins by listing the core features that all these browsers have in common. The bulk of the article lists in detail "special features" of each browser and each browser's good and bad points, as they relate to the core browser characteristics. Following that, I present some recent data on the comparative performance of these browsers. The article concludes with recommendations I would make to organizations interested in making the switch from IE6 in 2008.

    
  • del.icio.us
  • Google
  • Slashdot
  • Technorati
  • blogmarks
  • Tumblr
  • Digg
  • Facebook
  • Mixx

Full article

April 14th, 2008

WebKit/Safari Keep Blazing the Trail to CSS 3.0

Looking back,Cascading Style Sheets!This is an update to the article I wrote last summer, when Safari 3.0 was first released. In the 9 months since then, a lot has happened, and I wanted to try to keep this info up to date. Opera, iCab, Konqueror, and Firefox have all made progress in adopting CSS 3.0 specifications, the next generation of the W3C's Cascading Style Sheets standard.

However, the WebKit team continues to lead the pack, as they have since I first contemplated this article over a year ago. In the last 6 months, that team has not only adopted more of the CSS 3.0 specs ahead of the others, but they have proposed several exciting new specs of their own, which the W3C is taking up as draft recommendations.

In addition to updating the state of CSS 3.0 in WebKit/Safari, I've also added some new demos for the Backgrounds section.

Here are the CSS 3.0 features I wrote about in July 2007:

  1. Box-shadow: Yes! Add drop shadows through CSS!
  2. Multi-column layout: Can we really do this now? With HTML?
  3. Resize: Give JavaScript hacks a rest and let users relax when typing input on web pages.
  4. Rounded corners: Any
    can be made round.
  5. Colors with transparency: There goes another ugly hack from way back!
  6. Background image controls: Remember how great it was when you could add images as well as colors to an element's background CSS style? Well, it's about to get a whole lot better!

And since then, WebKit and Safari 3.1 have adopted the following new ones:

  1. Adopted last October, WebKit introduced its first take at CSS Transforms, which it has submitted to the W3C for consideration. With CSS Transforms, <DIV>s can be scaled, rotated, skewed and translated... all without using JavaScript!
  2. Announced at the same time is the equally exciting implementation of CSS Animations. At the moment, the only type of animation that's documented and demonstrated on the WebKit blog is based on CSS Transitions, which let you define how an object or attribute changes over time from one state to another.
  3. Also in October, WebKit added the CSS Web Fonts feature, which lets designers beam fonts to users through CSS and HTML, approximating the capabilities of PDF in a much lighter-weight form.
  4. Then, after a lull, things started to heat up again last month, when Apple released Safari 3.1. Safari 3.1 incorporated all of the CSS 3.0 features WebKit had pioneered earlier, plus it added a bunch of things the WebKit team hadn't blogged about. Chief among these was support for CSS Attribute Selectors. This is something of a holy grail to advanced web developers, since it opens up a whole world of possibilities for using the Document Object Model (DOM) to build better web interfaces. When released, WebKit was the first and only browser to support this geeky, but highly practical feature.
  5. And then, just today, WebKit added support for CSS Gradients to its portfolio. Gradients are not yet a CSS 3.0 specification, but they are part of the HTML 5.0 spec. No doubt Apple's implementation will be referred to the W3C for consideration.
    
  • del.icio.us
  • Google
  • Slashdot
  • Technorati
  • blogmarks
  • Tumblr
  • Digg
  • Facebook
  • Mixx

Full article

March 18th, 2007

Quietly, Safari Finally Gains WYSIWYG Editing Powers

A quiet revolution has taken place for Mac OS X Safari users, but I haven’t seen anyone celebrate it… and I’ve looked! There isn’t even a mention of this dramatic change in Safari’s powers on the Surfin’ Safari blog, where the open source team that’s evolving the WebKit rendering engine used in Safari announce new features and updates. Lately, this team has implemented a number of really amazing features from the CSS 3.0 specification, and each has been trumpeted with some eye-popping examples. But not a word about this.

Well, I for one am celebrating the upgrade with this article and proclaiming to the world that finally, at last, Safari is gaining parity with the other modern browsers in letting users perform WYSIWYG editing whenever the application calls for it. Mac users like me who have simply done without rich-text editing in their WordPress blogs and Gmails, bristling with an unfamiliar envy at the vast majority of users who take this functionality for granted by now, can finally save ourselves some typing and edit in our web browser with the same ease we do in a word processor.

    
  • del.icio.us
  • Google
  • Slashdot
  • Technorati
  • blogmarks
  • Tumblr
  • Digg
  • Facebook
  • Mixx

Full article

October 29th, 2006

How Many Firefox Extensions Does It Take To Make One SafariStand?

The title of this Many plugins built into SafariStandarticle is deliberately provocative: I don't know the answer to the question, and I don't really care. But having been there with Firefox many times, all I can say is that Safari plugins like SafariStand make me grateful that I don't have to find out. I've found it much easier to utilize and keep track of one plugin rather than keeping, say, six or more in sync and up-to-date.

Our culture is generally dominated by a "more is More" attitude, so that the browser with the most plugins is believed by definition to be the best horse to bet on. This is the same argument some Windows users have made for years with respect to their choice of operating system: I want to use the computer that has the most software to choose from. This argument is proven empty when you actually sit down and compare the quality of Mac software in a given functional category versus that of Windows software (don't take my word for it: Actually do it yourself sometime), and that emptiness carries over to the issue of browser plugins. Certainly, there are some software categories that you legitimately need access to a Windows PC for. But if you notice, nearly all such categories cover business, rather than personal, requirements, and they're for very narrow fields of interest indeed. The only personal software category where the Mac actually lags Windows is gaming, and I predict that the gap in gaming titles won't be nearly so large a year or two from now as it is today.

As far as the supposed dearth of plugins for Safari in comparison with Firefox, SafariStand is an excellent case-in-point. There are other excellent multifunction Safari plugins (Saft, PithHelmet, Safari Extender, for example), but I'm highlighting SafariStand because it's not only great, but also free. After all, if a Safari user finds they are starting to buy plugins, they really should consider paying for a browser that has dozens of plugins already built in, like OmniWeb. Being the cheapskate I am, I like free things, and SafariStand is one of my favorite freebies for Safari. Besides, most Firefox plugins are free, so it seems only fair to restrict this plugins conversation to those that Safari users can add without paying extra.

SafariStand Main MenuIn this article, I'm going to focus on just a couple of the best bits from the latest SafariStand beta, which are just too wonderful to remain obscure from the Safari-loving hordes. But very briefly, here is a list of the main functions that SafariStand adds to Safari. To gather these functions into Firefox would require the gathering of a half-dozen or more separate plugins, each of which would have to be authorized and kept up to date, etc.

  1. Option to restore your last workspace, or any of the pages you had open, on launch.
  2. Add sidebar with thumbnail tabs.
  3. Customize search engines available in the standard Google search form.
  4. Automate "find" function without having to type Cmd-F.
  5. Add color labels to your bookmarks.
  6. Enable site alteration, customizing allowable plugins, images, JavaScript, style sheets, and more for any website.
  7. Colorize the HTML source window, and make it editable.
  8. Reorder tabs in a window (this is a native feature of Firefox and will be one in Safari 3.0).
  9. Use the "Stand Bar", a floating palette with searchable bookmarks and history, as well as customizable SafariStand folders and RSS feeds.
  10. Configure your "Bookmark Shelf," a floating palette that lets you build and access saved "workspaces," which are lists of sites you open up in a browser session and want to save for later use.
  11. Access one of the best "Page Info" stores now available for any browser.
  12. For any site you're visiting, easily see a list of all the cookies the site has set, examine their contents, and/or delete one or more of them.
    
  • del.icio.us
  • Google
  • Slashdot
  • Technorati
  • blogmarks
  • Tumblr
  • Digg
  • Facebook
  • Mixx

Full article

October 4th, 2006

Three New Safari 3.0 Tricks Are Producing Leopard Lust

You’ve heard about one or two of them, and you may even have seen a YouTube video of Safari 3.0’s tab tricks. But let me tell you, as part of my Building Leopard project, discovering Safari 3.0 has left me with an insatiable desire to work in Leopard full-time. There are three standout features that I really miss when I “degrade gracefully” to other modern web browsers on my Mac—and that includes Firefox 2.0x, Opera 9.x, and Safari 2.x as my regular web companions.

Even though Firefox has enough cool extensions to keep a software addict fed from now until next year, none of them match the upcoming features Apple has cooked up for Safari 3.0 in Mac OS X 10.5 (”Leopard”). Likewise, Opera and its talented development team is going to be left behind the curve for awhile, as are better-than-Safari wannabes like Shiira and OmniWeb on the Mac. (It took Microsoft 5 years to add tabs to its browser, and from the way they’ve implemented them, I still don’t think they quite get it. So, no, I’m not expecting any innovative new ideas in web browsing from Redmond any time soon.)

Ok, with a buildup like that, I can hear you Safari naysayers out there beginning to clear your throats in preparation for throwing out some canned dissults about Safari. Save ‘em.

I’m not sharing these in order to put down anybody else’s browser of choice (well, IE is so far down it’s hard to do anything else!), and I’m not suggesting they are going to revolutionize web browsing, even remotely. The ideas Apple has implemented are not so unique that the company should have taken out patents or anything. Rather, these are incremental innovations of the sort that keep the art of web browsing moving forward. It’s ideas like these that could potentially jog the minds of other creative programmers, who will then go off and imagine some other cool new enhancements for Firefox or Opera or Shiira or OmniWeb.

In the end, it’s all good for web surfers like you and me. (Hey! Are humans and martians who browse the web “web browsers”? If so, when do we get new features?)

    
  • del.icio.us
  • Google
  • Slashdot
  • Technorati
  • blogmarks
  • Tumblr
  • Digg
  • Facebook
  • Mixx

Full article

August 8th, 2006

Web Inspector Gains New Eyes for Metrics, Properties

Web Inspector's New TabsLike many of you who develop on the Mac, I was amazed and very impressed by the WebKit team’s Web Inspector tool when it was unveiled in January. However, it was clearly not yet complete… two critical tabfulls of data were missing, which kept me turning to other tools—like the excellent Firebug for Firefox—when getting into a serious debugging session.

Well, tonight I was delighted to discover that the wait is over! On downloading a new build of WebKit today, I found that Web Inspector finally can provide those critical Metrics and Properties of each DOM element on my web pages. And boy, have they done a great job in the implementation! Every bit as cool and functional as the original bits, so I can now get all the details on any element of the page with a right-click of my mouse (control-click for some folks) and a simple selection of “Inspect Element.” Now come on Firebug fans, don’t you wish you could inspect an element that easily? Not that it’s hard with Firebug, but I always say, “Save a millisecond here and a millisecond there, and pretty soon you’ve saved a whole second!” (Just kidding… I never said that before.) :-)

    
  • del.icio.us
  • Google
  • Slashdot
  • Technorati
  • blogmarks
  • Tumblr
  • Digg
  • Facebook
  • Mixx

Full article

May 30th, 2006

All The Lovely Browsers!

All the Lovely BrowsersLately, I’ve been on a bit of a rampage on the subject of cross-browser compatibility, becoming especially incensed by prominent websites and web 2.0 applications that don’t work in Apple’s Safari browser. I know some of you are sympathetic, but think I should just be pleased that these sites work in Mozilla Firefox, which runs on all platforms known to man (or woman (or Martian)).

Yes, it’s definitely worth celebrating that Firefox has broken through the stranglehold with which Microsoft’s Internet Explorer had gripped the industry for so long, providing not just a viable alternative, but a demonstrably superior web browsing experience. Firefox is the descendent of Netscape Navigator that’s finally returned to beat off the IE interloper, and it has a huge following among developers as well as users.

But there are a number of other excellent web browsers that get shortchanged when a company is testing its site or application in only IE and Firefox. For as good as Firefox is, it’s not the best in all aspects of web browsing, either on Windows or the Mac. This article highlights a few facts about the browser market and points to some really useful features found in non-IE, non-Mozilla browsers that explain why users remain devoted to them and, like me, continue to raise a stink when they are ignored. The other two browsers I use pretty much every day, in addition to Firefox, are Opera and Safari.

    
  • del.icio.us
  • Google
  • Slashdot
  • Technorati
  • blogmarks
  • Tumblr
  • Digg
  • Facebook
  • Mixx

Full article

May 17th, 2006

Yahoo’s Ajax/DHTML User Interface Library Apparently Fails Its Own Test

Yahoo Blocked
I have been among the developers and observers who have praised Yahoo for the technical strength of their recently launched User Interface Library. In my tests for the Ajax/DHTML Scorecard project in March, Yahoo’s library was a clear “A” in its cross-browser credentials, and I was very impressed with Yahoo’s development team, which published clear and exacting browser standards for their library.

According to Yahoo’s own Graded Browser Support table, Safari is an A-graded browser, meaning it achieves the highest level of support possible with the Yahoo interface library. Clearly, the thought that went into this table is impressive, and the authors conclude the explanation that precedes the table itself with an appropriate quote from Tim Berners-Lee on the importance of cross-browser support:

“Anyone who slaps a ‘this page is best viewed with Browser X’ label on a Web page appears to be yearning for the bad old days, before the Web, when you had very little chance of reading a document written on another computer, another word processor, or another network.”

It is therefore highly disappointing and disillusioning to discover tonight that Yahoo has released a preview of its new, Ajax-enabled home page with support only for Internet Explorer 6.0 and Firefox 1.5. The only logic one can use to justify such a move is based on a totally PC-centric viewpoint, which argues that only Windows users are worth troubling with, since they comprise the vast majority of potential viewers. But this is precisely the viewpoint that must cease if Web 2.0 is to become the fertile melting ground for truly cross-platform interdependence that it wants to be. It’s simply not the viewpoint of any company that really cares about Berners-Lee’s vision or about the millions of users on platforms other than the virus- and malware-riddled mess that is Microsoft Windows today.

    
  • del.icio.us
  • Google
  • Slashdot
  • Technorati
  • blogmarks
  • Tumblr
  • Digg
  • Facebook
  • Mixx

Full article

February 16th, 2006

AOL’s I Am Alpha: A Wide Slap At Mac Users on Safari

This is another horrible example of a company with blinders on. Google has been doing this lately, too. What am I talking about? Why, thinking it’s OK to release a new product without support for Safari or other KHTML-based browsers.

    
  • del.icio.us
  • Google
  • Slashdot
  • Technorati
  • blogmarks
  • Tumblr
  • Digg
  • Facebook
  • Mixx

Full article

Just Say No To Flash