Safari HTML5 Audio and Video Guide: About HTML5 Audio and Video. This is a good reference with lots of sample code for using HTML5 audio and video. The samples cover a wide range of possible custom applications. Though it's specific to WebKit/Safari, many of the CSS styles used for custom appearance are now supported by Firebox and, of course, Chrome (which is a WebKit browser like Safari).

One of the many challenges of building a usable black theme for Mac OS X is making it work with web pages. If you use Safari, the buttons, scrollbars, and other interface widgets on web pages get their marching orders from the system's graphics files—the same ones that regular applications use.

So, if a web page has a pushbutton, the button will by default take on the style of the active theme. If you're running Crystal Black, this means that the button inherits the Crystal Black style. We like this.

Color for the button's text, on the other hand, gets its marching orders from the browser's default Cascading Style Sheet (CSS) file—which, naturally, makes the text black, and therefore unreadable on top of a black button. We don't like this.

On first glance, the solution seems to merely design a special CSS file for Crystal Black and make Safari use it. And that does work for many web sites and many buttons. However, many folks who design web pages like to fiddle with the CSS style for their pages' buttons, and such fiddling means that there's nothing "mere" about designer a Crystal Black style sheet.

Further, many Mac applications these days have views that are simply embedded web content using Apple's WebKit framework. The practical implication here is that Mac apps don't know how to read a Crystal Black CSS file, so Crystal Black must do some fiddling under the hood to avoid having unreadable buttons in such web views.

Then there's Safari itself. I really wanted to theme the 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."

Besides controlling the usual attributes of a web page—document elements, text elements, image elements, layout elements, form elements, and so on—this style sheet applies various advanced CSS properties that serve the purpose that in years past would have been handled by many individual images. As I've described this CSS 3.0 magic previously, there's no longer a need for using graphics and JavaScript to add box shadows, rounded box corners, borders, gradients, and reflections to your web pages.

Naturally, since the open-source WebKit project was initiated by Apple, and since that project zoomed ahead of all other browser engines in developing new ways to design with CSS, that's how the Web Inspector is built. This approach—using a command syntax rather than images to design a user interface—is one that Apple has been adopting for its desktop applications. In recent years, Apple has been adding new classes and methods to the AppKit that make it a trivial matter to build a window frame, a border, a toolbar, or a button using code rather than individual graphics. 

While this is a logical and efficient approach, it also presents challenges for theming Mac applications, a challenge that Crystal Black is often unable or unwilling to overcome. (The story of all the challenges in building Crystal Black are described in this article.)

Not so with the Web Inspector, fortunately.

The Inspector does use a few images in its design, but most of the toolbar, separators, and section headers are built with CSS gradients. Very cool indeed!

This bit of Crystal Black will eventually be bundled with the whole theme, but for now I offer it as a free download. Admittedly, the audience for such software is small—you have to like Crystal Black, and you have to be a regular user of the Web Inspector—but it might be of interest to others who are curious about how such things are done.

One caveat in viewing the screenshots... The scrollbars that appear, as well as the HUD window style, are part of the overall Crystal Black theme and are not part of the Web Inspector theme itself.

Enjoy!

Update 4/18/11: The full Crystal Black 1.0 theme is now available from the Crystal Black website.

Installing Crystal Black for Web Inspector

The download contains a small application that you can use to install—and to uninstall—the theme. Simply double-click and select "Install" to apply the theme. Or select "Uninstall" to restore the default CSS files and graphics.

After installing or uninstalling the theme, you'll need to quit and restart Safari for the theme to take effect.

Crystal Black for the Web Inspector (Download file is 1.0MB)

scripty2: for a more delicious web. Scripty appears to be a new version of Scriptaculous that incorporates support for more advanced CSS features and HTML 5. Now in beta, which is available for download. Has good documentation and a few interesting demos.

Surfin’ Safari - Blog Archive » Styling Scrollbars. I've been so busy I missed this... it's another in the WebKit team's aggressive expansion of the possibilities for user interface development using the basic stuff: HTML, CSS, and JavaScript. The brief article on the Surfin' Safari blog has a pointer to an interactive demo.

Compass Compass is an open-source project built on Rails that's currently in development. It proposes to provide a full-fledged framework for CSS stylesheets, whereby you would store data in Compass and then generate styles as needed for your various website projects. Compass also anticipates the need to use CSS as one way of including semantic data with your website.

Atlas - 280 North. The Capuccino project seems to be growing by leaps and bounds. In addition to the amazing presentation app the project published earlier in the year, they have now demoed an equally amazing tool for actually building Capuccino interfaces and wiring up their functionality. From what the demo video shows, Atlas is going to be Interface Builder on steroids! Maybe Apple will even learn a thing or two about the direction they should be going with their developer tools for Cocoa apps. For now, you can sign up to be emailed with progress info about Atlas, which is still in testing.

ccgus's jstalk at GitHub

Here's the latest offshoot of the jsCocoa universe: JSTalk is a scripting language that can be used to easily interact with Cocoa apps. It's what Applescript would be if rewritten today using Cocoa and JavaScript. The download comes with a slew of example scripts and a script editor application.

JSCocoa — A bridge from JavascriptCore to Cocoa

On the heels of learning about Cappuccino, here's a project that lets developers access Cocoa from within JavaScript! Natch, it's open source, with documentation on on a google code site.

classy:web - id and class extractor

Classy is an online application that takes a URL and parses it into a very useful list of all the CSS classes and IDs on the page. It breaks the classes down to show what HTML elements they're tied to, and does the same with each ID. Besides using the website version, you can also add Classy to your browser toolbar and run it on any web page you happen across.

Classy isn't a replacement for tools like FireBug or WebInspector, but it's a highly useful supplemental tool that gives you a quick overview of a web page's CSS structure that you can't easily get with those tools.

FancyBox - fancy image zooming tool

I keep running across cool and useful JavaScripts that emulate Apple's zoom boxes, which it uses for adding detail about products or showing larger versions of thumbnails. This is a new one to me. It doesn't have the nice rounded corners of Apple's but does have some features my other fave lacks.

Speaking of which, the script I've been using lately is FancyZoom... the variant that works with Prototype and jQuery and doesn't pull images in using Ajax. The original version of FancyZoom is also cool, more like Fancy Box.

SproutCore is Apple's Flash, Silverlight-killer - Mac software - Macworld UK Sproutcore is a new Ajax/JavaScript framework being developed as an outgrowth of Apple's new MobileMe product. It's also part of the ongoing rapid development of the iPhone development platform and the WebKit browser engine that forms the basis for Safari. To call it a "Flash killer" is perhaps a bit overstating the case, but judging from the demos on the Sproutcore website, it appears to be on its way to being a robust rival to more mature frameworks such as Ext.js. I've installed Sproutcore and look forward to playing around with it soon.

Why 'no Macs' is no longer a defensible IT strategy | InfoWorld | Analysis | 2008-04-21 | By Galen Gruman This article is a must-read for anyone who cares about the longstanding problem of getting enterprise IT staff to support Macs. If you can get them to read the article, published by a major and highly respected IT trade journal, you may change a few minds. The author runs down all of the issues that kept Macs out of the enterprise in the past, and effectively addresses the concerns, some of which have been outdated since the release of Mac OS X.

My only quibble is the author's assertion that enteprise reliance on Microsoft Office means unequal time for Macs. He points out that OpenOffice is a viable alternative but makes no mention of Apple's own terrific iWork suite, which is quite compatible with the basic aspects of Microsoft Office. Likewise, he fails to acknowledge Apple's effective collaboration suite in the form of iCal, Mail, iChat, and Address Book. Perhaps it's because those aren't cross-platform. However, even if that's the case, since they are able to interoperate with Office, they should be considered by businesses seeking to support their growing numbers of Mac users.

A lot has happened in the world of web browsers and CSS 3.0 since I wrote this article last summer at the time Safari 3.0 became available as a public beta. Besides WebKit/Safari, 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 of my CSS playground at the end of the article.

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: The corners of any
   element can be made round to any radius you specify.
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 bleeding-edge CSS features:

1. Adopted last October, WebKit introduced its first take at CSS Transforms, which it has submitted to the W3C for consideration. With CSS Transforms,
   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. Using this specification, you can now program many kinds of animations with CSS alone.
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 fully support this geeky, but highly practical feature. (Some of the other browsers have implemented partial support.)
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. (This is the only new feature in this list that as yet works only in the latest WebKit nightly build.)

This article lists the CSS 3.0 features that were first available in Safari or the nightly WebKit browser. Besides listing them, I've tried to keep up with what the features can actually do for me as a web designer, so each feature is accompanied by a demo or two and some explanatory notes. Since some of the features are a bit complex, and almost totally lacking in documentation from either W3C (which only lists the standards, not the implementation details), Apple, or the WebKit team, I've had to experiment to discover what some of the attributes do.

Fortunately, a forward-thinking group of techno-weenies is keeping a close eye on the emerging details of the CSS 3.0 implementations, and they have done some experimenting of their own. Since they're in the same boat I am (actually, they have a much better boat!), it's not surprising that I'm finding ambiguities in the way they've built some of their demos. Still, it's the closest thing to documentation that I've found, and I highly recommend that anyone interested in learning more about CSS 3.0 pay a visit to the terrific CSS3.info website. In fact, you'll find links to their pages throughout this site.

Following CSS3.info's lead, I'm organizing the (at this time) CSS 3.0 available in Safari into four categories: Borders, Background, Effects, and User Interface. These correspond to the W3C draft modules for CSS 3.0. The fifth tab in the navigation control below gathers the CSS 3.0 specifications that have been implemented by Safari and at least one other major browser. As you browse through these up-and-coming features, I think you'll understand my excitement about the benefits they offer to web graphic- and user-interface designers.

In the first release of this article, I only had demos for the section on Borders. Today I've added demos for CSS Backgrounds, and I plan to continue experimenting with the rest as time permits. In the meantime, as mentioned before, do pay a visit to CSS3.info for their demos of each, or follow the links to demos at the WebKit site. I hope you're inspired to take up a keyboard and pound out some experiments of your own!

Apple - Support - Downloads - Safari 3.1

This update brings in all the latest standards implementations and innovations in the open-source WebKit project, plus a few interface enhancements as well. The Windows version gets some important updates too. From Apple’s tech document on Safari 3.1:

Performance

• Improves JavaScript performance

Standards

• Adds support for CSS 3 web fonts
• Adds support for CSS transforms and transitions
• Adds support for HTML 5 <video> and <audio> elements
• Adds support for offline storage for Web applications in SQL databases
• Adds support for SVG images in <img> elements and CSS images
• Adds support for SVG advanced text 

Developer

• Adds option in Safari preferences to turn on the new Develop menu which contains various web development features
• Allows access to Web Inspector
• Allows access to Network Timeline
• Allows editing CSS in the Web Inspector 
• Allows custom user agent string
• Improves snippet editor

Other

• Double clicking on the Tab Bar opens new tab
• Includes URL metadata when images are dragged or saved from browser
• Opens Download and Activity window in current Space
• Supports trackpad gestures for back, forward, and magnify on MacBook Air and compatible MacBook Pro computers
• Shows Caps Lock icon in password fields

Apple Developer Connection - iPhone for Web Developers - Optimizing Web Applications and Content for iPhone I now see how Apple plans to make its standard for web "widgets" the de facto industry standard: Through the iPhone! Since widgets are now the only way third-party developers can get applications onto users' iPhones, and since Apple's released Safari for Windows, anyone can develop widgets, Apple-style, and they have an incentive to do so. Certainly, I'll be adding this onto my to-do list, and this document is an excellent starting point for learning how to do so.

Effect.Transfer I really like this effect! It reminds me of ones I'd seen on the terrific TiddlyWiki app as well as the Ajax-y BloxPress blog system for WordPress. It may come as no surprise, in fact, that the effect was developed by the author of BloxPress... as well as numerous other cool web goodies. This effect is intended to augment the collection that comes with Script.aculo.us, and the author provides several useful demos on this page.

Table Sorting with Prototype * Dexagogo This looks like a cool add-on to Prototype.js that enables column-sorting in tabular presentations. There are a slew of great demos for the various techniques you can use. A further add-on to Tablekit gets you column-reordering, but what I really want next is row-reordering. Probably out there already and I haven't seen it yet...

riiv.net» Blog Archive » MindFrame - Demystifying Rich Internet Application I've admired Spry since it first began evolving a year ago, and if you want to deliver data to users through a small XML data file, it's one of the best ways to do it. Now MindFrame is designed to bring those benefits to the growing Prototype.js universe. It also relies on a new open source library called ZParse, which apparently lets you define your own JavaScript parsing language. How cool is that?

Loupe.js This is the greatest little demonstration of the Canvas tag I've seen yet. Really amazing... it degrades for all the suckers who are still using IE, but works fine in the modern browsers that support Canvas: Firefox, Opera, and Safari. With Loupe, you can let users call up a little magnifying glass to take a closer look at a small image on your site. Is this cool, or what? The demos are amazing!

gWidgets I do hope this developer continues with these... the four he's released so far all look quite useful and cover a pretty good range of the absolutely necessary list: Tabs, Expandable text, Tool tips, and Popup windows. All done so they can be mixed and matched together in different ways... a lot of good demos here, too.

script.aculo.us Slider Demos and Example Code Damn! I wish these demos had been available when I was building parts of Mars a year ago. But I could find nothing but the demos on the Script.aculo.us wiki site, which didn't cover things like: Scrollwheel activation, use as a scrollbar... the two things I most needed. Oh well... at least they're here now if I need them again!

ModalBox — An easy way to create popups and wizards Here's a very cool javascript library based on Prototype/Scriptaculous: ModalBox is kind of a Lightbox for longer user messages, like "wizards", and could be used for surveys, for example. I love the statement that "it's inspired by Mac OS X modal dialogs"... of course! Nearly all the whiz-bang Ajax visual candy that's come out in the last 2 years is derived from the Mac OS X interface. Definitely want to try this one out some time!

lightWindow Demo I think my title on this puppy says it all. If not, check out the LightWindow demos! As some readers have noticed, I had earlier hacked Lightbox to enable running videos, but this does so much more. And it's more than a hack as well! Thanks, Kevin!

Ajaxian » Performance test results show strong WebKit outcome Ajaxian posted a nice report on a distributed study of the relative browser performance on Dojo's charting system yesterday, and immediately the naysayers started naysaying. "Safari is a piece of crap. WebKit is so buggy..." and the like. I suppose if WebKit keeps coming up at the top of the heap on these kinds of tests, eventually Safari/WebKit will earn more respect, but probably not until a lot of the bozos who are so critical actually buy themselves a Mac. By the way, the test is strictly speaking a measure of relative performance at rendering SVG code, not overall browser speed or javascript parsing. (Although WebKit excels at those, too.)

Handling Keyboard Shortcuts in JavaScript This looks like it might be just the ticket I'm seeking to help smooth out a wrinkle on Mars. Seems many Mac users are accustomed to reading web pages by hitting the spacebar to move to the next page. This handy shortcut scrolls the page exactly one page length based on the browser window's current size. Only problem is, on Mars the persistent header screws up the calculation of the browser window size, apparently. I've been wanting to intercept that shortcut and make sure it works properly on Mars, and maybe this library will help make short work of that!

EJSChart :: 100% Pure JavaScript Charting Solution Well, I guess this is the day for cool new graphics libraries for Web 2.0 applications! Unfortunately, EJS Charts isn't free or open source, but it does work great in Safari and WebKit, as well as any other modern browser that supports the Canvas tag. At least, I believe it's using Canvas... the library also works in IE 6, which doesn't support Canvas, so it must use some other mechanism for IE. The chart data can reside in XML format, and the library enables dynamic resizing, zooming, and data selection (among other niceties). The only problem I had with the demo on the site's home page is that I had to reload the page in both Safari and WebKit before the chart rendered correctly. EJS Charts is free for personal use, and is so early in its life that documentation and examples are mostly missing for now. But this looks very promising indeed for any application that needs to display charted data on the web!

Prototype Graphic Framework This is very cool... it's too bad the library doesn't fully support canvas, but I gather that'll bring up the rear. For now, it works great in an SVG-enabled browser (as well as whatever it is that Microsoft uses for IE). For Mac users, this means you can't use Safari until Apple updates it in Leopard. For now, if you want to use Safari, you need to install and run the WebKit nightly build. Note: This is the same developer who gaves us the marvelous windowing library for Prototype, which I've used extensively here on Mars.

Zimbra on your Desktop Zimbra is doing this to support use of its Collaboration Server, which I think finally became compatible with Safari. (I need to doublecheck that.) Instead of using your browser, though, with Zimbra Desktop, you'd run Zimbra as a separate app, utilizing this new runtime layer. I'm not sure what I think of this new proliferation of such apps... following on Mozilla, Adobe, Microsoft, and so on, what's to be gained if users have to run multiple such runtimes to get their apps going? Isn't this taking us backwards instead of forwards? Just not sure...

Control.Modal : Unobtrusive CSS Modal Windows and Lightboxes for Prototype These are worth taking a closer look at... I do have solutions in place for such things, but I also would like my code to be more in the "nonobtrusive" mold. These are built for the Prototype Javascript library.

Devthought - Guillermo Rauch’s Blog » CSS+Javascript power. Fancy menu This has been a bumper-crop kinda week for new JavaScript code and ideas. Here's another really kewl implementation of the old "moving highlighter" idea, using mootools. The author does a great job documenting the work, too.

Ajaxian » Cross Browser Keyboard Handler I may be in serious need of starting to capture keystrokes and mouse clicks/scrolls on this site soon... here's one possibility.

Parallax Background with Javascript and CSS Now this is a kewl implementation of Javascript! Talk about thinking outside the box... this is a totally new concept I've never seen before. Of course, it's also a great way to make visitors dizzy, but hey... some people like that, right? I mean, how about web pages as roller coasters or tilt-a-whirls?

OpenLaszlo | the premier open-source platform for rich internet applications OpenLaszlo started out declaring that their framework could be used for both dhtml and Flash, but they started with Flash, and that's what got stuck in developer's brains. They had demoed some dhtml/ajax versions last year, but now they've offically released version 4.0, with full support for Javascript/CSS/HTML/Ajax applications (earlier known as DHTML). The demos on the site have to be seen to be believed! For each demo, there's a Flash and DHTML version, and I think most people will have trouble telling one from the other. I've got to take another serious look at this framework soon!

Dean Edwards: Yet Another JavaScript Library Without Documentation Dean Edwards is one of the, well, Deans, of the Javascript guru world. Obviously a brilliant programmer, he's released what he himself calls "yet another JavaScript library" for reasons that aren't perfectly clear. My impression is that it's Edwards conception of a perfect standards-compliant library, but without documentation and with so many other fine libraries floating around now, I wonder why he didn't devote his talents to one of the existing projects... ? Oh well, hopefully one of them will pick up some of Edwards' ideas, as they have in the past.

DED|Chain JavaScript Library Dustin Diaz has released version 0.1 of a new javascript library, somewhat awkwardly named DED|Chain. He says it's built on the Yahoo! UI Javascript library, but combines some features from jQuery. It also leverages Jack Slocum's awesome CSS query functions. There's only one small demo at the moment, but I'm sure more will emerge with time.

Tobie Langel - A Fistful of $$ As readers of Mars have no doubt noticed, I use an autoscroll function to make navigating to different sections of my somewhat lengthy articles easier and more, well, interesting. Programmer Tobie Langel has published a prototype implementation of auto-scrolling that he feels is superior to the one I'm using, which uses the Script.aculo.us "Effect.ScrollTo" function. Hey, I'm always interesting in learning something new and better... And was a little distressed at how the readers of the post on Ajaxian pounced on Langel, acting as if existing tools had this function all wrapped up, and he was an idiot and troublemaker for suggesting an alternative. Very un-Mars-like, guys. I noticed in a subsequent Ajaxian post that the Prototype guys feel they've cleaned up Prototype's $$ function's speed problems in the latest beta, so maybe it's time to take a closer look at solutions like Langel's. His page of autoscroll demos is here.

Ajaxian » Ext Being developed by this brilliant programmer Jack Slocum, who's starting from using the Yahoo Ajax toolkit, Ext is apparently a framework that will support more than just YUI. In fact, Slocum has already incorporated into Ext (which is still in alpha development) support for both jQuery and Prototype/Script.acul.ous. Amazing! The widgets on display at the Ext docs site are incredibly sweet... I've downloaded the latest alpha build myself and hope to play with it shortly. So far every widget I've tried has worked great in WebKit.

Web Kit DOM: Main Page This site is much deeper than it appears at first... in fact, the home page gives you no indication there's anything much at all. But start clicking the tabs: Namespaces, Classes, and Files, and you'll find yourself wandering through a Doxygen-created maze of documentation that tells you everything you ever wanted to know about how to make WebKit tick. Oddly, I haven't seen an announcement about this on the WebKit blog... of course, this is only version 0.1, so maybe they don't consider it "ready for prime time." But honestly, developers will froth at the mouth to get at info like this.

ColumNav Documentation Wow! This is damn cool! Another reason to take a second look at the YUI toolkit, I'd say. Great demos here, too, including source code. The widget builds a tree-like navigation widget that looks just like column view in the Mac OS X Finder.

YUI Version 2.2.0 Released: Browser History Manager, DataTable, and Button Components, New Versioning, and More » Yahoo! User Interface Blog This is great news... Yahoo has included a component to manage the browser's history that's supposed to work in all "A-grade" browsers, which of course includes Safari/WebKit. The new release also has a new data management tool and more besides.