CSS大師Eric采訪實(shí)錄
2024-07-11 08:20:56
供稿：網(wǎng)友
自從學(xué)習(xí)、實(shí)踐css以來，問題層出不窮，實(shí)在是自己學(xué)習(xí)的太膚淺，對(duì)css的理解也不夠。
本篇摘錄一段對(duì)css大師eric的采訪記錄，希望加深認(rèn)識(shí)，準(zhǔn)備重拾對(duì)css的學(xué)習(xí)勁頭。
關(guān)于作者和此篇采訪
原文于2004年4月21日采訪，載于webstandardgroup.org由國(guó)內(nèi)css的倡導(dǎo)者和先驅(qū)阿捷翻譯（注，阿捷乃傅捷，是《網(wǎng)站重構(gòu)》的譯著者）。
eric a. meyer從1993年開始做網(wǎng)絡(luò)方面的工作，受雇于netscape公司做標(biāo)準(zhǔn)設(shè)計(jì)培訓(xùn)師。eric在這個(gè)行業(yè)中相當(dāng)有名，他經(jīng)常就web標(biāo)準(zhǔn)、跨瀏覽器兼容性、css和web設(shè)計(jì)等方面在各種會(huì)議上發(fā)言。作為一個(gè)西方預(yù)科大學(xué)的網(wǎng)絡(luò)管理員和畢業(yè)生，eric開發(fā)w3c的css1校驗(yàn)程序，并于最近出版了盡其所能發(fā)現(xiàn)的css設(shè)計(jì)局限。eric也是《eric meyer on css》、《mastering the language of web design》（new riders）、《樣式表：權(quán)威指南》（o’reilly & associates）、《css2.0 程序員參考》（osborne’ mcgraw-hill）以及眾所周知的css 瀏覽器兼容性表的作者。
eric meyer是html,css和web標(biāo)準(zhǔn)方面國(guó)際知名的專家，有著廣泛的讀者，同時(shí)也是 complex spiral consulting 的發(fā)起人。complex spiral consulting是一個(gè)采用web標(biāo)準(zhǔn)技術(shù)幫助客戶節(jié)約成本和提高效益的公司。
問題一
russ：你的新書《css權(quán)威指南》(cascading style sheets: the definitive guide)第二版 剛剛寫好，在我們了解此書細(xì)節(jié)前，想先問一下：你已經(jīng)出版了多少本書？我發(fā)誓我家當(dāng)?shù)貓D書館有專門一個(gè)類別是你的書籍。
eric：不，不，那都是 molly holzschlag 的書，我只是類似的、輔助的部分。我已經(jīng)寫了5本書，其中的一本是精簡(jiǎn)版，我想那也許能也許不能算作一本書(我妻子堅(jiān)持認(rèn)為是)。第一本就是《css權(quán)威指南》，如果這次的第二版算獨(dú)立版本，那我就有6本書了。我自己認(rèn)為這次的第二版是算一本，因?yàn)樗墓ぷ髁肯喈?dāng)于寫一本新書。
問題二
russ： 在新權(quán)威指南中，比第一版增加或者更新了什么內(nèi)容？
eric：幾乎所有內(nèi)容都更新了。唯一不需要改變的是第一章和關(guān)于字體的章節(jié)，其他內(nèi)容都大半或者完全的更新了。原來的章節(jié)排列在文本狀態(tài)下完全打散重新排列。例如：在第一版中有”floating in the visual formatting”章節(jié)和”positioning got its own”章節(jié)，在新版中我將它們合并到單獨(dú)一章中去了，并重寫了大部分的格式章節(jié)。同樣的方式，”the bit about lists”移到了它原有的章節(jié)，并增加了大量?jī)?nèi)容。有三章是全新的，它們是：table layout(表格布局), user interface styles(用戶界面樣式), and non-screen media(非屏幕顯示類媒體).
問題三
russ：我聽到一個(gè)傳言說你的《eric meyer on css》也有新版本，新版本提供了多少種設(shè)計(jì)方法？
eric：那個(gè)傳言是真的。我們已經(jīng)命名它為”in a blinding flash of creative genius, ‘more eric meyer on css.’ ” 它比第一版有一些的改進(jìn)，但并不多。我要說的是，這兩本書沒有前后的關(guān)聯(lián)性，不需要為了第二版去閱讀第一版(即使你兩本都擁有。) 第一版的讀者可以回想一下，第一個(gè)設(shè)計(jì)方法是如何將表格驅(qū)動(dòng)的布局轉(zhuǎn)換為簡(jiǎn)單的表格和css。而在新書里，第一個(gè)設(shè)計(jì)方法是：將只用html標(biāo)識(shí)和空白gif設(shè)計(jì)的有關(guān)頁面轉(zhuǎn)換為一個(gè)用純css替代表格布局的頁面。
類似的，有許多設(shè)計(jì)方法，例如：多種方法顯示相冊(cè)(photo gallery)樣式，用表列數(shù)據(jù)實(shí)現(xiàn)整齊的金融報(bào)表，以及用背景布置在多個(gè)瀏覽器實(shí)現(xiàn)半透明效果，包括在ie/win中。
有一個(gè)關(guān)于顯示三級(jí)list的設(shè)計(jì)方法，包括列表的嵌套以及如何將它們轉(zhuǎn)換為一個(gè)”下拉(dropdown)”的菜單，并且可以工作在大部分瀏覽器上(包括ie/win),就象doug bowman的 sliding doors(滑門) 技術(shù)一樣好。
除了上面這些，還有一個(gè)結(jié)合的方法解決weblog的入口樣式問題。書中的最后一個(gè)方法是隨便拿 css zen garden (由 dave 建立)的一個(gè)設(shè)計(jì)，然后用css來實(shí)現(xiàn)它。基本上，dave給我一個(gè)photoshop設(shè)計(jì)文件，然后我把它切割成我需要的幾部分并用css使它正常工作，這樣做你可以看到從設(shè)計(jì)到最終代碼的整個(gè)過程。我也考慮到用png圖片的方法，并且不會(huì)在ie/win中看起來難看。
問題四
russ： 兩年以前，css很少被討論，現(xiàn)在看起來到處都在談?wù)摚∧闶欠裾J(rèn)為自己幫助了它轉(zhuǎn)變?yōu)橹髁饕庾R(shí)？
eric：這是自然而然的事情，真的。首先，ie6開始支持doctype開關(guān)，稍后又宣布它將不再發(fā)放新的ie版本，給大家一個(gè)穩(wěn)定的感覺。第二，足夠的設(shè)計(jì)師有足夠的時(shí)間閱讀書籍和教程，并用css在他們自己的站點(diǎn)上做實(shí)驗(yàn)。在這種背景下，一批優(yōu)秀的設(shè)計(jì)站點(diǎn)出現(xiàn)了。第三，我想是因?yàn)殡S著設(shè)計(jì)藝術(shù)的提升，那些有設(shè)計(jì)能力的天才并能真正理解css好處的web設(shè)計(jì)師(象doug bowman, dave shea, 和 jeffrey zeldman)推動(dòng)了事情的進(jìn)展。連線(wired)雜志網(wǎng)站的重新設(shè)計(jì)，禪意花園(css zen garden)以及其他站點(diǎn)開始展示css驅(qū)動(dòng)的設(shè)計(jì)，不僅僅是能工作，而且看起來非常漂亮、不可思意。
越來越多的實(shí)用的、容易跟學(xué)的資源(例如：listutorial 和 floatutorial)也起到了很大作用，等等。
問題五
russ：對(duì)于那些剛開始接觸和使用web標(biāo)準(zhǔn)的設(shè)計(jì)師和開發(fā)者，css的哪些方面是最重要的？
eric：最重要的？我不得不說是層疊(cascading)部分。不僅僅只是層疊，還包括繼承(inheritance)、特征(specificity)和選擇器(selector construction)，一旦你掌握了這些，其他的都只是細(xì)節(jié)問題。
接下來，我想徹底理解視覺效果，包括塊(block)和內(nèi)聯(lián)(inline),也是至關(guān)重要的。如果你能知道設(shè)計(jì)將展現(xiàn)什么效果，可以避免很多(css沒有按預(yù)期執(zhí)行)令人頭疼的問題。就象很多語言，css有它的規(guī)則，忽略規(guī)則肯定導(dǎo)致混亂。
問題六
russ：在過去的12個(gè)月里，有一種圖片替代(image replacement)技術(shù) 被引入。你對(duì)它的全面感覺是什么？如果你不得不使用它，你將使用哪種模式(model)？
eric：我偏向于使用css3的方法：用’content’屬性來替換內(nèi)容。這是盡可能輕量(low-weight)和non-hackish的方法。這也是在目前低支持情況下的方法，因?yàn)槟壳爸挥衞pera支持圖片替代。
另外，我發(fā)現(xiàn)圖片替代技術(shù)的優(yōu)點(diǎn)和缺點(diǎn)并存，優(yōu)點(diǎn)是使某些文本看上去漂亮，缺點(diǎn)是給靠聲音閱讀者造成易用性問題。坦率講，真正的問題在于讀者自己。他們嘗試展現(xiàn)真實(shí)的頁面和閱讀結(jié)果，但他們?cè)谧龅那∏∈且患e(cuò)誤的事情。如果一個(gè)頁面設(shè)置了一個(gè)screen-medium樣式，而閱讀機(jī)將完全忽略那些樣式，除非大多數(shù)的閱讀器被重新修理。
問題七
russ：好象一提到”font size”就會(huì)點(diǎn)燃css大討論–一場(chǎng)字體純化論者和網(wǎng)頁設(shè)計(jì)師的戰(zhàn)爭(zhēng)。你是否認(rèn)為有一個(gè)適合所有用戶的解決方法？
eric：沒有，雖然我希望有別的方式，但是我沒有。每一種設(shè)置字體的方法都有優(yōu)點(diǎn)和缺點(diǎn)。你能做的最好的方法就是找到一種以前最佳，以后變化最小的方法，而且，這需要在不斷的設(shè)計(jì)變化(design-by-design)過程中完成。一位設(shè)計(jì)師的目標(biāo)是盡可能以pixel控制文本字體達(dá)到最好表現(xiàn)，雖然使用ems或者關(guān)鍵字(例如x-small)能達(dá)到更好的效果。任何時(shí)候，如果有人告訴你，有一種方法定義你的字體尺寸適合所有站點(diǎn)，那么他只是告訴你一個(gè)原則，而不是一個(gè)解決方法。
問題八
russ：有一個(gè)一直爭(zhēng)議的問題，你對(duì)css技巧(hacks)有什么看法？
eric：這是不可避免的，直到有一天，我們的瀏覽器能夠完美的支持和執(zhí)行css，就是css hacks停止的一天。在此以前我們將堅(jiān)持做。要指出，我的意思是針對(duì)所有的hacks，不管它們是對(duì)于css，還是其他事情，比如微軟的conditional comments。
問題九
russ: 你是否認(rèn)為當(dāng)瀏覽器市場(chǎng)為css3做好準(zhǔn)備時(shí)，將進(jìn)入一個(gè)新時(shí)代—記住微軟longhorn操作系統(tǒng)的時(shí)間表。
eric：我是這樣認(rèn)為。但是，按這種說法，那么全面支持css2的視覺媒體(visual-medium)看起來早應(yīng)該在2003年完成。我的預(yù)言記錄總是比其他人要差，也或許不適合一個(gè)長(zhǎng)期計(jì)劃吧。
問題十
russ：最后一個(gè)問題，越來越多的web設(shè)計(jì)師正加入css2的隊(duì)伍,你是否認(rèn)為css3的復(fù)雜性將減少它自身的吸引力，甚至使一些畏懼它的設(shè)計(jì)師完全放棄css？
eric：有比那更糟的：多數(shù)的web設(shè)計(jì)師僅僅學(xué)習(xí)了css2的一部分，而沒有真正理解它的本質(zhì)。
任何事情都有可能發(fā)生，就好象曾經(jīng)有設(shè)計(jì)師因?yàn)閏ss1的”復(fù)雜性”(相對(duì)他們所掌握的知識(shí))而畏懼的。
關(guān)于css3,有一件好事情就是：它被分離并集成到模塊(modules)中去了，所以你可以忽略你不關(guān)心的部分，而集中精力在你想了解的部分。如果你真得想深入到打印樣式中，你可以閱讀打印模塊(print module)去了解它。如果你關(guān)心的是國(guó)際化，那么你找到i18n 模塊，那里有些每個(gè)人都需要了解的部分(如選擇器和層疊)，但是隨后，伴隨你的興趣而來的是不得不啃那些龐大的規(guī)范說明書。
