爲何我們使用標準？
W3C組織包含了大量關於背景與特性的細節，這一行爲已經具有足夠的遠見，一般的網頁設計者們已經沒有必要再爲這些問題擔心。W3C組織的目標是通過一系列的簡單而嚴格的規範，使得網頁設計者於互聯網內容提供商們能夠確保他們的站點不僅可見，而且能夠爲最多數的“用戶代理”所使用。
顯然，這裏的“用戶代理”指的就是web瀏覽器；但是如今，桌面系統使用的web瀏覽器只在“用戶代理”中佔了很小的一部分。隨着便攜設備的興起（例如移動電話），越來越多的用戶瀏覽web的方式已經擺脫了桌面的桎梏。不是所有的用戶都會使用你所選擇的瀏覽器的。使用特殊設備的人羣（例如盲人）將會使用特殊的設備或者軟件來瀏覽頁面。
由於W3C所創造的這些規範，其設計目標是爲了清理90年代以來形成的這一混亂局面。如今，去滿足各種不同的瀏覽器已經不再有意義，因此，催化了HTML 4.01,XHTML,CSS,DOM的產生。
這一系列技術的產生，是網頁標準化組織裏面的設計師與代碼編寫者共同努力的結果。合理的結果應該是這樣的：在不同的瀏覽器上，在保證所有的內容可用的同時，並保證精確的視覺效果。CSS作爲一種全新的頁面設計方式，完全滿足了這一需求。但是，說服其他的頁面設計師們使用這一標準並不是那麼容易的，而且，在21世紀的前幾年裏，並沒有幾個人能夠完全準確地說出該如何使用它。
這正是Zen Garden of CSS 創立的初衷。當使用CSS的人們，在不知不覺中變成了代碼編寫者時，他們已經可以很熟練的解決使用CSS的各種技術問題，卻往往忽視了頁面的佈局。由於無例可循，頁面美工設計者們很難真正把握使用CSS的真諦。
播種
在2002年末期，Zen Garden 的創建者Dave Shea 考慮到了這個問題。爲何設計出美麗的網頁的設計者們能夠從那些不那麼美麗的例子中獲得靈感？那是因爲他們同時擁有程序語言與視覺設計方面的修養，在這裏，Shea把CSS視爲一種“設計語言”。他認識到了很多使用“設計語言”的人，缺乏這方面的修養。
想法的萌芽：應該有一個存放CSS設計作品的倉庫。這一想法不僅僅是爲了簡單地存放那些常用規則，更鼓勵設計者們創建新的，美觀的作品。正是這一想法的播種，成長出了Zen of CSS Garden。
Note：
很有必要說明的一點是，web標準並不是傳統意義上的標準；這只是一種建議，而不是強制施行的，W3C組織也把自己的規範標誌爲一種“推薦”。無論如何，如今越來越多的人們已經以web標準爲設計的標尺，更多信息參見www.webstandards.org/buzz/archive/ 2004_10.html#a000463
影響
Web標準項目的發起人之一Jeffrey Zeldman在2002年發表的一篇文章中，呼籲那些已經認識到web標準帶來的好處的人們，不要在把時間花在宣揚web標準的好處，而是應該使用它。這纔是證明web標準的優勢的最好途徑，”show , don’t sell”也成爲了web標準項目的一個口號。Zeldman 後來又寫了web標準項目的一個權威指導：Designing with Web Standards (New Riders, 2003)。
Note：
你可以在 Daily Report (www.zeldman.com/daily/0802c.html#Evangeline) 上找到Zeldman 的原文。
Web開發者 Chris Casciano 在2002年創立了一個稱爲“Daily CSS Fun”的項目。（如圖）
這一想法的來源：由於Casciano在一個月前，每天都創建一個新的樣式表，這些樣式表在各個方面顯示出了對HTML有更大的優勢。他沒有對網頁美術設計者們提出任何要求，但是他的作品具有如此大的吸引力，促使每個人都躍躍欲試，以CSS作爲唯一的規劃工具。
由於Netscape Navigator 4的普及風暴，而它又是一個對CSS支持不足的瀏覽器，Casciano的這些課程，在理論上是完美的，在日常應用中，卻障礙重重。值得慶幸的是，在隨後的日子裏，Navigator 4 的市場份額直線下跌，到2003年，這個瀏覽器已經幾近絕跡，Casciano的時代才真正到來。
Note
See Daily CSS Fun 鏈接
www.placenamehere.com/neuralustmirror/200202
超前的想法
讓我們回到Zen Garden上來吧！2003年5月Shea在他的個人主頁（www.mezzoblue.com）上開始了一個項目，這個項目很快就移植到了它現今的地方,www.csszengarden.com.
2002年年底，Shea 開始建立Zen Garden 的初步原型，這個原型有四種樣式表（主題）每個樣式都對應着一種自然元素：木、水、火、風。這一思想在那時候還沒有完全形成，圖像也不是重要因素。如圖，那時候的Zen Garden 遠沒有現今那樣令人鼓舞。
由於缺少圖片，這些設計很單調。背景圖像通過background-image屬性添加，另一方面，前景圖像的添加是不可能的，由於如果img標籤被使用過了，那麼就無法被再次使用，你將被限制在只能使用一張圖片的禁錮中。然而，我們的背景圖片不能滿足設計的需求，由於設計工作往往強調圖片與文字的並排，而不是使圖像在文字後面，顯然，背景圖片並不是一個完整的解決方案。
這一問題得到進展，是在Douglas Bowman發表的一篇如今備受指摘的文章”Using Background-Image to Replace Text” 之後。這一方案的推崇者認爲這是一個完美的解決方案：前景圖片能夠很方便地通過與文字元素擺在同一個頁面上，然後通過CSS以圖案的方式表現在網頁上，然後讓文字元素替換掉背景圖片上相同的文字元素，類似於爲img元素設置alt(圖像的文字替換屬性：參見html語言，譯者注)行爲。
Note
如果你讀過Bowman在Stopdesign上發表的原文(www.stopdesign.com/articles/rePlace
_text),你會注意到文章中這一方案的提出者本身存在着基本且很容易解決的問題。在很多Zen Garden 的設計中就使用了這樣的技術，我們在第四章將會有更詳細的描述。
2003年4月，我們開始了詳細的Zen Garden的計劃。我們設計了一個簡單的HTML頁面作爲主頁，在站點中另有其他5個最早的設計（如圖）。
Note
Zen Garden的HTML 文件一旦被提交將不再改變，我們把更多精力花在確保寫進Zen Garden 的標籤與文字都是可用的，並保證有足夠且唯一的 class 與 id 元素用於樣式及樣式的修改。顯然，傳統的標籤也不可能完全滿足未來的要求，在章節的稍後部分我們將就這一問題再作探討。
原文
Why these Standards?
The W3C working groups involve individuals from a wide variety of backgrounds and specialties who meet to address ahead of time the issues an average Web designer should never need to worry about. The goal is to provide a series of recommendations so well thought-out that simply by following the specification properly, developers of authoring software and browsers have a clear guideline to follow, and content authors and designers can be assured that their sites are viewable and usable by the widest variety of user agents.
By "user agents" we mean Web browsers, of course; but the average desktop browser is only the tip of the iceberg. As portable devices like mobile phones take off, more and more users will browse the Web free of the shackles of the desktop. Not every user will come in using your browser of choice; not every user can. For example, those with special accessibility requirements may use assistive devices called screen readers, or special Braille displays or magnification software.
Because the design goal of these W3C-created specifications was to clear up the incompatible mess of the Web of the 1990s, it would hardly make sense to serve different versions of the same site to all these different user agents. So the recommendationswhich include HTML 4.01, XHTML, Cascading Style Sheets (CSS), and the DOMwere designed with all this in mind.
These were the technologies that designers and coders within the Web Standards Project embraced. It was logical to support specifications that would guarantee the widest content accessibility, while allowing for precise visual control. CSS fit the bill, but it was a completely new way of building Web sites. Convincing other designers that it was in their best interest to learn CSS proved to be the challenge, and the first few years of the new millennium were spent figuring out exactly how to use it.
This was the climate of the Web when the idea for the Zen Garden was planted. The people who were working with CSS at the time tended to be coders and programmers; they were highly adept at figuring out the technical issues when implementing CSS, but the layouts they produced were often considered minimal, bland, and uninspiring. Graphic designers hadn't latched on to the idea of using CSS, because there weren't any exceptional examples of CSS design.
Planting the Seed
In late 2002, Zen Garden creator Dave Shea started thinking about this problem. How could those who were capable of producing real beauty with CSS be inspired by examples that were less than beautiful? Because he had a background in both coding and visual arts, Shea recognized the potential of CSS as a design language. And he realized that the people who should be using it weren't.
An idea began germinating: If only there were a central repository of great CSS design work. Simply aggregating what existed clearly wasn't going to work; not much did exist. Encouraging designers to create new, great-looking CSS work was going to be the key to growing this idea. The seed was planted for a new project.
Note
It's important to note that Web standards aren't standards in the traditional sense of the word; compliance is not mandatory, and the W3C itself merely labels them as "Recommendations." However, many people recognize them as standards in practice, if not in name. For more on the naming convention, see What is a Web Standard at (www.webstandards.org/buzz/archive/2004_10.html#a000463).
Influences
In an article written in 2002, Web Standards Project cofounder Jeffrey Zeldman implored those who understood the benefits of designing with Web standards to quit spending their time selling others on the benefits, and instead to just start using them. This was the best way to demonstrate the advantages, and "Show, don't sell" became the mantra of the project. Zeldman went on to write the definitive guide on the subject, Designing with Web Standards (New Riders, 2003).
Note
You can find Zeldman's original article at The Daily Report (www.zeldman.com/daily/0802c.html#Evangeline).
A project called Daily CSS Fun was created by Web developer Chris Casciano in 2002 (FIGURE 2). The idea was that over the course of a month, Casciano would release a new style sheet every day that would modify the underlying HTML in wildly different ways. He made no claim of being a graphic designer, but the results were compelling for their unique insight into what was possible by relying on CSS alone for layout purposes.
Figure 2. Example style sheets from Daily CSS Fun.
Due to the continued popularity of Netscape Navigator 4, a browser with insufficient CSS support, these lessons were nice in theory but far from practical for everyday Web use. All that started going away as the market share of Netscape Navigator 4 plummeted, and by 2003 that browser barely registered on the radar anymore. It was time to move on.
Note
See Daily CSS Fun at www.placenamehere.com/neuralustmirror/200202.
Early Thinking
The ideas for the Zen Garden coalesced, and in May 2003 Shea launched the result on his personal site, www.mezzoblue.com, and then quickly moved it to the domain where it now lives, www.csszengarden.com.
In late 2002, Shea had already begun creating preliminary prototypes for the Zen Garden that switched between four style sheets, each themed for one of the four ancient elementswood, water, fire, and wind. The idea hadn't been fully developed at the time, and images weren't a large part of the equation. As pictured in FIGURES 36, the first Zen Garden drafts were far from inspiring.
Figure 3. Pre-Zen Garden prototype, Earth.
Figure 4. Pre-Zen Garden prototype, Fire.
Figure 5. Pre-Zen Garden prototype, Wind.
Figure 6. Pre-Zen Garden prototype, Water.
The designs were boring because they lacked much imagery. Background images were added by making use of the background-image property. Foreground images, on the other hand, were not possible. If the img tag were used, there wouldn't be any flexibility; you'd be confined to a single set of images and continuously have to work around those. And background images alone wouldn't cut it, because design work often relies on imagery that is emphasized alongside text, rather than behind it within a piece. Clearly, background images were only a half-solution.
The workaround for the imagery problem clicked when Douglas Bowman published his now-infamous article "Using Background-Image to Replace Text". After this method was publicized, the final key had clicked into place: Foreground images could easily be placed by hooking into the many text elements within a page and swapping them with graphical equivalents. CSS and a little bit of extra, customizable markup allowed the replacement of inline textual items with background imagessimilarly to how an img tag with proper alt text behaves.
Note
If you read Bowman's original article at Stopdesign (www.stopdesign.com/articles/replace_text), you'll notice it mentions that the technique it advocates has some basic accessibility problems. This is the same technique used for many Zen Garden designs. We'll cover this technique in more detail in Chapter 4.
In April 2003, planning for the Zen Garden began in earnest. A single HTML file was built that would serve as a master, and five initial designs were created to launch with the site (FIGURES 711).
Figure 7. #001, Tranquille.
Figure 8. #002, Salmon Cream Cheese.
Figure 9. #003, Stormweather.
Figure 10. #004, arch4.20.
Figure 11. #005, Blood Lust.
Note
Since the Zen Garden's HTML file would be impossible to change once submissions started coming in, extra time was spent ensuring that the markup and wording of the written text was acceptable, and that there were enough unique class and id elements for the style to modify. After the launch, additional markup considerations became evident that would have been impossible to predict in advancewe'll cover this a bit later in the chapter.