Resource Posts In Category
Version as tested: 1.0.
In the past few years, Adobe Flash has become more than an annoyance that some of us have kept in check by using "block Flash" plugins for our web browsers. More and more, entire web sites are being built with Flash, and they have no HTML alternative at all! This goes way beyond annoying, into the realm of crippling.
I had noticed the trend building for quite awhile, but it only really hit home when I realized that Google, of all companies, had redesigned its formerly accessible Analytics site to rely heavily on Flash for displaying content. This wouldn't be absolutely horrible except for the fact that Google provides no HTML alternative. I tried to needle the company through its Analytics forums, but only received assurance that yes, indeed, one must have the Flash plugin running to view the site.
Keep in mind that content like that on Google Analytics is not mere marketing information, like the sales pitch on the Analytics home page.
Those of us who are disturbed by the trend need to be a bit more vocal about our opinion. Hence, I'm starting a "Just Say No To Flash!" campaign, with its own web page, graphics for a banner, and the CSS and HTML code to deploy it on your own web pages.
I've mentioned this to some of my family and friends, and they often come back with: "So, Why should I say no to Flash?" I admit that as a power browser and a programmer geek type who, shall we say, makes more efficient use of the web, I'm more keenly aware of the ways that Flash is chipping away at the foundation of web content.
In the beginning, it seemed harmless: Flash was an alternative to animated GIFs, and an easy way to embed movies on web pages. But then advertisers wrapped their meaty mitts around it, and that's when Flash started to be annoying. However, one could block Flash in the browser, as part of a strategy of shutting out obnoxious advertising.
But publishing content via Flash is just wrong, for a number of reasons.
➠It's A Proprietary Technology
I don't think Flash is what Tim Berners-Lee had in mind when he created the first web browser and the markup language called HTML to run the web. Then, as now, the web is meant to be open to all. It is meant to be built using open standards that belong to no individual or company. The main open formats that should be used to build websites are simply:
- Images (open formats)
Open standards for video, audio, vector graphics, virtual 3D graphics, animated graphics, and others are also available to be thrown into the mix.
Adobe PDF is also a common format for distributing final-form documents, and PDF is based on open specifications for both PDF and PostScript that Adobe published back in the 1990s.
➠ It Isn't Backwards-Compatible
If you install a Flash plugin today, there's no guarantee you'll be able to view Flash content created 2 months from now.
If you have a Flash plugin from 5 years ago, it's probably useless today.
Flash is designed with built-in obsolescence, forcing users to repeatedly visit the Adobe website to get an upgrade. This is not only a bother, it forces one company's advertising into the world's face every time it releases a software update.
➠It Can't Be Customized
From time immemorial (well, at least since the beginning of web time), a web page's text could be customized to suit the user's taste and needs. All web browsers provide the tools to increase/decrease the font size, as well as to specify custom fonts for different page elements (headers, paragraphs, etc).
Flash throws all of that out the window with a terse shrug, "Let 'Em Eat Helvetica 10pt."
➠Its Content Is Inaccessible
No, you can't drag and drop images or text from Flash content. This most basic method of interacting with a web page—dragging images off the page, or selecting sections of the page to drag onto an email or text processor—is a non-starter if it's part of a Flash file.
Copy and paste? If the Flash programmer has been thoughtful, you should be able to copy and paste text. But don't even try to copy any other page element.
And that includes copying a link's URL. Right-click (Ctrl-click) anywhere in a block of Flash content, and you get the standard Flash popup menu. Not very helpful.
➠You Can't Save The Page
Another common task many web users take for granted is the ability to save a web page as text, as HTML, or as a format like rich-text format. With Flash, this is impossible.
You may be able to save the file as a web archive, but there's no open standard for a "web archive," and getting at the content inside one is almost as hard as getting inside a Flash movie.
➠Flash Consumes More Of Your Computer
When I'm running Flash — as I am now while shopping at Adobe — my Activity Monitor shows it's consuming a continuous 5-percent of my processing power, and about 130 MB of my RAM.
For What? There's nothing a Flash movie can deliver that can't be delivered using open formats. its heavy resource drain is one reason I keep Flash turned off when browsing the web.
➠You Can't View Flash on an iPhone or iPad
Apple has very good reasons for not supporting Flash on its tiny devices. As the previous point makes clear, Flash isn't a delicate, lightweight technology that your processor and RAM won't notice.
When trying to build hardware and software for small devices that work well and don't lead to memory problems or application crashes, why wouldn't you ditch unnecessary technologies like Flash?
Obviously, Steve Jobs stepped into a hornets nest here, but I think the hornets were wrong.
Make Your Site Say No To Flash
It's easy! Just follow these two steps:
1. Download the Image(s)
You can copy and save one of the following images, or download the Photoshop source and make your own.
2. Add the CSS
Here are two CSS styles for positioning the Just Say No To Flash banner on your web page. One positions the banner at the top-right, and the other at the bottom-right. To use the styles, just copy and paste the following code into the
<HEAD> portion of your HTML.
background: url(images/noFlashTR.png) top right no-repeat;
background: url(images/noFlashTR.png) bottom right no-repeat;
3. Add the HTML
Add the following to the beginning of your HTML, just below the
<BODY> tag, or at the end, just before the closing
<a id="noFlash" href="http://www.musingsfrommars.org/notoflash/" title="Just Say No To Flash!"> Just Say No To Flash! </a>
Thanks to the "Too Cool for Internet Explorer" campaign run by w3junkies for the concept behind "Say No To Flash," as well as for the general outline of information that campaign provided.
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.
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."
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.
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)
The framework used is called Cappucino, a fairly new open source project that "makes it easy to build desktop-caliber applications that run in a web browser."
I'm all over this... definitely!
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.
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.
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:
- Box-shadow: Yes! Add drop shadows through CSS!
- Multi-column layout: Can we really do this now? With HTML?
- Rounded corners: The corners of any
element can be made round to any radius you specify.
- Colors with transparency: There goes another ugly hack from way back!
- 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:
- Adopted last October, WebKit introduced its first take at CSS Transforms, which it has submitted to the W3C for consideration. With CSS Transforms,
- 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.
- 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.
- 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.)
- 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!
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:
- 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Â
- 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
- 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
LightWindow: Awesome Prototype-Script.aculo.us Add-On for Adding Media, Forms, PDFs, and More to Lightboxes
Version as tested: 4.0.