CSS大師Eric采訪實(shí)錄_CSS教程
教程Tag:暫無Tag,歡迎添加,賺取U幣!
自從學(xué)習(xí)、實(shí)踐CSS以來,問題層出不窮,實(shí)在是自己學(xué)習(xí)的太膚淺,對CSS的理解也不夠。
本篇摘錄一段對CSS大師Eric的采訪記錄,希望加深熟悉,預(yù)備重拾對CSS的學(xué)習(xí)勁頭。
關(guān)于作者和此篇采訪
原文于2004年4月21日采訪,載于webstandardgroup.org由國內(nèi)CSS的倡導(dǎo)者和先驅(qū)阿捷翻譯(注,阿捷乃傅捷,是《網(wǎng)站重構(gòu)》的譯著者)。
Eric A. Meyer從1993年開始做網(wǎng)絡(luò)方面的工作,受雇于Netscape公司做標(biāo)準(zhǔn)設(shè)計培訓(xùn)師。Eric在這個行業(yè)中相當(dāng)有名,他經(jīng)常就web標(biāo)準(zhǔn)、跨瀏覽器兼容性、CSS和web設(shè)計等方面在各種會議上發(fā)言。作為一個西方預(yù)科大學(xué)的網(wǎng)絡(luò)治理員和畢業(yè)生,Eric開發(fā)W3C的CSS1校驗(yàn)程序,并于最近出版了盡其所能發(fā)現(xiàn)的CSS設(shè)計局限。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)方面國際知名的專家,有著廣泛的讀者,同時也是 Complex Spiral Consulting 的發(fā)起人。Complex Spiral Consulting是一個采用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書館有專門一個類別是你的書籍。
Eric:不,不,那都是 Molly Holzschlag 的書,我只是類似的、輔助的部分。我已經(jīng)寫了5本書,其中的一本是精簡版,我想那也許能也許不能算作一本書(我妻子堅持認(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é),并增加了大量內(nèi)容。有三章是全新的,它們是:Table Layout(表格布局), User Interface Styles(用戶界面樣式), and Non-Screen Media(非屏幕顯示類媒體).
問題三
Russ:我聽到一個傳言說你的《Eric Meyer on CSS》也有新版本,新版本提供了多少種設(shè)計方法?
Eric:那個傳言是真的。我們已經(jīng)命名它為”in a blinding flash of creative genius, ‘More Eric Meyer on CSS.’ ” 它比第一版有一些的改進(jìn),但并不多。我要說的是,這兩本書沒有前后的關(guān)聯(lián)性,不需要為了第二版去閱讀第一版(即使你兩本都擁有。) 第一版的讀者可以回想一下,第一個設(shè)計方法是如何將表格驅(qū)動的布局轉(zhuǎn)換為簡單的表格和CSS。而在新書里,第一個設(shè)計方法是:將只用HTML標(biāo)識和空白GIF設(shè)計的有關(guān)頁面轉(zhuǎn)換為一個用純CSS替代表格布局的頁面。
類似的,有許多設(shè)計方法,例如:多種方法顯示相冊(photo gallery)樣式,用表列數(shù)據(jù)實(shí)現(xiàn)整潔的金融報表,以及用背景布置在多個瀏覽器實(shí)現(xiàn)半透明效果,包括在IE/Win中。
有一個關(guān)于顯示三級list的設(shè)計方法,包括列表的嵌套以及如何將它們轉(zhuǎn)換為一個”下拉(dropdown)”的菜單,并且可以工作在大部分瀏覽器上(包括IE/Win),就象Doug Bowman的 Sliding Doors(滑門) 技術(shù)一樣好。
除了上面這些,還有一個結(jié)合的方法解決weblog的入口樣式問題。書中的最后一個方法是隨便拿 CSS Zen Garden (由 Dave 建立)的一個設(shè)計,然后用css來實(shí)現(xiàn)它�;旧�,Dave給我一個photoshop設(shè)計文件,然后我把它切割成我需要的幾部分并用CSS使它正常工作,這樣做你可以看到從設(shè)計到最終代碼的整個過程。我也考慮到用PNG圖片的方法,并且不會在IE/win中看起來難看。
問題四
Russ: 兩年以前,CSS很少被討論,現(xiàn)在看起來到處都在談?wù)�!你是否認(rèn)為自己幫助了它轉(zhuǎn)變?yōu)橹髁饕庾R?
Eric:這是自然而然的事情,真的。首先,IE6開始支持DOCTYPE開關(guān),稍后又公布它將不再發(fā)放新的IE版本,給大家一個穩(wěn)定的感覺。第二,足夠的設(shè)計師有足夠的時間閱讀書籍和教程,并用CSS在他們自己的站點(diǎn)上做實(shí)驗(yàn)。在這種背景下,一批優(yōu)秀的設(shè)計站點(diǎn)出現(xiàn)了。第三,我想是因?yàn)殡S著設(shè)計藝術(shù)的提升,那些有設(shè)計能力的天才并能真正理解CSS好處的web設(shè)計師(象Doug Bowman, Dave Shea, 和 Jeffrey Zeldman)推動了事情的進(jìn)展。連線(wired)雜志網(wǎng)站的重新設(shè)計,禪意花園(CSS Zen Garden)以及其他站點(diǎn)開始展示CSS驅(qū)動的設(shè)計,不僅僅是能工作,而且看起來非常漂亮、不可思意。
越來越多的實(shí)用的、輕易跟學(xué)的資源(例如:Listutorial 和 Floatutorial)也起到了很大作用,等等。
問題五
Russ:對于那些剛開始接觸和使用web標(biāo)準(zhǔn)的設(shè)計師和開發(fā)者,CSS的哪些方面是最重要的?
Eric:最重要的?我不得不說是層疊(cascading)部分。不僅僅只是層疊,還包括繼續(xù)(inheritance)、特征(specificity)和選擇器(selector construction),一旦你把握了這些,其他的都只是細(xì)節(jié)問題。
接下來,我想徹底理解視覺效果,包括塊(block)和內(nèi)聯(lián)(inline),也是至關(guān)重要的。假如你能知道設(shè)計將展現(xiàn)什么效果,可以避免很多(CSS沒有按預(yù)期執(zhí)行)令人頭疼的問題。就象很多語言,CSS有它的規(guī)則,忽略規(guī)則肯定導(dǎo)致混亂。
問題六
Russ:在過去的12個月里,有一種圖片替代(image replacement)技術(shù) 被引入。你對它的全面感覺是什么?假如你不得不使用它,你將使用哪種模式(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é)果,但他們在做的恰恰是一件錯誤的事情。假如一個頁面設(shè)置了一個screen-medium樣式,而閱讀機(jī)將完全忽略那些樣式,除非大多數(shù)的閱讀器被重新修理。
問題七
Russ:好象一提到”font size”就會點(diǎn)燃CSS大討論–一場字體純化論者和網(wǎng)頁設(shè)計師的戰(zhàn)爭。你是否認(rèn)為有一個適合所有用戶的解決方法?
Eric:沒有,雖然我希望有別的方式,但是我沒有。每一種設(shè)置字體的方法都有優(yōu)點(diǎn)和缺點(diǎn)。你能做的最好的方法就是找到一種以前最佳,以后變化最小的方法,而且,這需要在不斷的設(shè)計變化(design-by-design)過程中完成。一位設(shè)計師的目標(biāo)是盡可能以pixel控制文本字體達(dá)到最好表現(xiàn),雖然使用ems或者要害字(例如x-small)能達(dá)到更好的效果。任何時候,假如有人告訴你,有一種方法定義你的字體尺寸適合所有站點(diǎn),那么他只是告訴你一個原則,而不是一個解決方法。
問題八
Russ:有一個一直爭議的問題,你對CSS技巧(hacks)有什么看法?
Eric:這是不可避免的,直到有一天,我們的瀏覽器能夠完美的支持和執(zhí)行CSS,就是CSS hacks停止的一天。在此以前我們將堅持做。要指出,我的意思是針對所有的hacks,不管它們是對于CSS,還是其他事情,比如微軟的Conditional Comments。
問題九
Russ: 你是否認(rèn)為當(dāng)瀏覽器市場為CSS3做好預(yù)備時,將進(jìn)入一個新時代—記住微軟Longhorn操作系統(tǒng)的時間表。
Eric:我是這樣認(rèn)為。但是,按這種說法,那么全面支持CSS2的視覺媒體(visual-medium)看起來早應(yīng)該在2003年完成。我的預(yù)言記錄總是比其他人要差,也或許不適合一個長期計劃吧。
問題十
Russ:最后一個問題,越來越多的web設(shè)計師正加入CSS2的隊(duì)伍,你是否認(rèn)為CSS3的復(fù)雜性將減少它自身的吸引力,甚至使一些畏懼它的設(shè)計師完全放棄CSS?
Eric:有比那更糟的:多數(shù)的web設(shè)計師僅僅學(xué)習(xí)了CSS2的一部分,而沒有真正理解它的本質(zhì)。
任何事情都有可能發(fā)生,就好象曾經(jīng)有設(shè)計師因?yàn)镃SS1的”復(fù)雜性”(相對他們所把握的知識)而畏懼的。
關(guān)于CSS3,有一件好事情就是:它被分離并集成到模塊(modules)中去了,所以你可以忽略你不關(guān)心的部分,而集中精力在你想了解的部分。假如你真得想深入到打印樣式中,你可以閱讀打印模塊(Print module)去了解它。假如你關(guān)心的是國際化,那么你找到I18N 模塊,那里有些每個人都需要了解的部分(如選擇器和層疊),但是隨后,伴隨你的愛好而來的是不得不啃那些龐大的規(guī)范說明書。
本篇摘錄一段對CSS大師Eric的采訪記錄,希望加深熟悉,預(yù)備重拾對CSS的學(xué)習(xí)勁頭。
關(guān)于作者和此篇采訪
原文于2004年4月21日采訪,載于webstandardgroup.org由國內(nèi)CSS的倡導(dǎo)者和先驅(qū)阿捷翻譯(注,阿捷乃傅捷,是《網(wǎng)站重構(gòu)》的譯著者)。
Eric A. Meyer從1993年開始做網(wǎng)絡(luò)方面的工作,受雇于Netscape公司做標(biāo)準(zhǔn)設(shè)計培訓(xùn)師。Eric在這個行業(yè)中相當(dāng)有名,他經(jīng)常就web標(biāo)準(zhǔn)、跨瀏覽器兼容性、CSS和web設(shè)計等方面在各種會議上發(fā)言。作為一個西方預(yù)科大學(xué)的網(wǎng)絡(luò)治理員和畢業(yè)生,Eric開發(fā)W3C的CSS1校驗(yàn)程序,并于最近出版了盡其所能發(fā)現(xiàn)的CSS設(shè)計局限。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)方面國際知名的專家,有著廣泛的讀者,同時也是 Complex Spiral Consulting 的發(fā)起人。Complex Spiral Consulting是一個采用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書館有專門一個類別是你的書籍。
Eric:不,不,那都是 Molly Holzschlag 的書,我只是類似的、輔助的部分。我已經(jīng)寫了5本書,其中的一本是精簡版,我想那也許能也許不能算作一本書(我妻子堅持認(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é),并增加了大量內(nèi)容。有三章是全新的,它們是:Table Layout(表格布局), User Interface Styles(用戶界面樣式), and Non-Screen Media(非屏幕顯示類媒體).
問題三
Russ:我聽到一個傳言說你的《Eric Meyer on CSS》也有新版本,新版本提供了多少種設(shè)計方法?
Eric:那個傳言是真的。我們已經(jīng)命名它為”in a blinding flash of creative genius, ‘More Eric Meyer on CSS.’ ” 它比第一版有一些的改進(jìn),但并不多。我要說的是,這兩本書沒有前后的關(guān)聯(lián)性,不需要為了第二版去閱讀第一版(即使你兩本都擁有。) 第一版的讀者可以回想一下,第一個設(shè)計方法是如何將表格驅(qū)動的布局轉(zhuǎn)換為簡單的表格和CSS。而在新書里,第一個設(shè)計方法是:將只用HTML標(biāo)識和空白GIF設(shè)計的有關(guān)頁面轉(zhuǎn)換為一個用純CSS替代表格布局的頁面。
類似的,有許多設(shè)計方法,例如:多種方法顯示相冊(photo gallery)樣式,用表列數(shù)據(jù)實(shí)現(xiàn)整潔的金融報表,以及用背景布置在多個瀏覽器實(shí)現(xiàn)半透明效果,包括在IE/Win中。
有一個關(guān)于顯示三級list的設(shè)計方法,包括列表的嵌套以及如何將它們轉(zhuǎn)換為一個”下拉(dropdown)”的菜單,并且可以工作在大部分瀏覽器上(包括IE/Win),就象Doug Bowman的 Sliding Doors(滑門) 技術(shù)一樣好。
除了上面這些,還有一個結(jié)合的方法解決weblog的入口樣式問題。書中的最后一個方法是隨便拿 CSS Zen Garden (由 Dave 建立)的一個設(shè)計,然后用css來實(shí)現(xiàn)它�;旧�,Dave給我一個photoshop設(shè)計文件,然后我把它切割成我需要的幾部分并用CSS使它正常工作,這樣做你可以看到從設(shè)計到最終代碼的整個過程。我也考慮到用PNG圖片的方法,并且不會在IE/win中看起來難看。
問題四
Russ: 兩年以前,CSS很少被討論,現(xiàn)在看起來到處都在談?wù)�!你是否認(rèn)為自己幫助了它轉(zhuǎn)變?yōu)橹髁饕庾R?
Eric:這是自然而然的事情,真的。首先,IE6開始支持DOCTYPE開關(guān),稍后又公布它將不再發(fā)放新的IE版本,給大家一個穩(wěn)定的感覺。第二,足夠的設(shè)計師有足夠的時間閱讀書籍和教程,并用CSS在他們自己的站點(diǎn)上做實(shí)驗(yàn)。在這種背景下,一批優(yōu)秀的設(shè)計站點(diǎn)出現(xiàn)了。第三,我想是因?yàn)殡S著設(shè)計藝術(shù)的提升,那些有設(shè)計能力的天才并能真正理解CSS好處的web設(shè)計師(象Doug Bowman, Dave Shea, 和 Jeffrey Zeldman)推動了事情的進(jìn)展。連線(wired)雜志網(wǎng)站的重新設(shè)計,禪意花園(CSS Zen Garden)以及其他站點(diǎn)開始展示CSS驅(qū)動的設(shè)計,不僅僅是能工作,而且看起來非常漂亮、不可思意。
越來越多的實(shí)用的、輕易跟學(xué)的資源(例如:Listutorial 和 Floatutorial)也起到了很大作用,等等。
問題五
Russ:對于那些剛開始接觸和使用web標(biāo)準(zhǔn)的設(shè)計師和開發(fā)者,CSS的哪些方面是最重要的?
Eric:最重要的?我不得不說是層疊(cascading)部分。不僅僅只是層疊,還包括繼續(xù)(inheritance)、特征(specificity)和選擇器(selector construction),一旦你把握了這些,其他的都只是細(xì)節(jié)問題。
接下來,我想徹底理解視覺效果,包括塊(block)和內(nèi)聯(lián)(inline),也是至關(guān)重要的。假如你能知道設(shè)計將展現(xiàn)什么效果,可以避免很多(CSS沒有按預(yù)期執(zhí)行)令人頭疼的問題。就象很多語言,CSS有它的規(guī)則,忽略規(guī)則肯定導(dǎo)致混亂。
問題六
Russ:在過去的12個月里,有一種圖片替代(image replacement)技術(shù) 被引入。你對它的全面感覺是什么?假如你不得不使用它,你將使用哪種模式(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é)果,但他們在做的恰恰是一件錯誤的事情。假如一個頁面設(shè)置了一個screen-medium樣式,而閱讀機(jī)將完全忽略那些樣式,除非大多數(shù)的閱讀器被重新修理。
問題七
Russ:好象一提到”font size”就會點(diǎn)燃CSS大討論–一場字體純化論者和網(wǎng)頁設(shè)計師的戰(zhàn)爭。你是否認(rèn)為有一個適合所有用戶的解決方法?
Eric:沒有,雖然我希望有別的方式,但是我沒有。每一種設(shè)置字體的方法都有優(yōu)點(diǎn)和缺點(diǎn)。你能做的最好的方法就是找到一種以前最佳,以后變化最小的方法,而且,這需要在不斷的設(shè)計變化(design-by-design)過程中完成。一位設(shè)計師的目標(biāo)是盡可能以pixel控制文本字體達(dá)到最好表現(xiàn),雖然使用ems或者要害字(例如x-small)能達(dá)到更好的效果。任何時候,假如有人告訴你,有一種方法定義你的字體尺寸適合所有站點(diǎn),那么他只是告訴你一個原則,而不是一個解決方法。
問題八
Russ:有一個一直爭議的問題,你對CSS技巧(hacks)有什么看法?
Eric:這是不可避免的,直到有一天,我們的瀏覽器能夠完美的支持和執(zhí)行CSS,就是CSS hacks停止的一天。在此以前我們將堅持做。要指出,我的意思是針對所有的hacks,不管它們是對于CSS,還是其他事情,比如微軟的Conditional Comments。
問題九
Russ: 你是否認(rèn)為當(dāng)瀏覽器市場為CSS3做好預(yù)備時,將進(jìn)入一個新時代—記住微軟Longhorn操作系統(tǒng)的時間表。
Eric:我是這樣認(rèn)為。但是,按這種說法,那么全面支持CSS2的視覺媒體(visual-medium)看起來早應(yīng)該在2003年完成。我的預(yù)言記錄總是比其他人要差,也或許不適合一個長期計劃吧。
問題十
Russ:最后一個問題,越來越多的web設(shè)計師正加入CSS2的隊(duì)伍,你是否認(rèn)為CSS3的復(fù)雜性將減少它自身的吸引力,甚至使一些畏懼它的設(shè)計師完全放棄CSS?
Eric:有比那更糟的:多數(shù)的web設(shè)計師僅僅學(xué)習(xí)了CSS2的一部分,而沒有真正理解它的本質(zhì)。
任何事情都有可能發(fā)生,就好象曾經(jīng)有設(shè)計師因?yàn)镃SS1的”復(fù)雜性”(相對他們所把握的知識)而畏懼的。
關(guān)于CSS3,有一件好事情就是:它被分離并集成到模塊(modules)中去了,所以你可以忽略你不關(guān)心的部分,而集中精力在你想了解的部分。假如你真得想深入到打印樣式中,你可以閱讀打印模塊(Print module)去了解它。假如你關(guān)心的是國際化,那么你找到I18N 模塊,那里有些每個人都需要了解的部分(如選擇器和層疊),但是隨后,伴隨你的愛好而來的是不得不啃那些龐大的規(guī)范說明書。
相關(guān)CSS教程:
CSS教程Rss訂閱Div+Css教程搜索
CSS教程推薦
猜你也喜歡看這些
- HTML結(jié)構(gòu)更加清晰、規(guī)范,學(xué)習(xí)HTML5優(yōu)化結(jié)構(gòu)的思路。
- XHTML教程:如何去除鏈接虛線框?
- HTML表格標(biāo)記教程(41):表頭的寬度和高度屬性WIDTH、HEIGHT
- HTML表格標(biāo)記教程(13):內(nèi)部邊框樣式屬性RULES
- HTML初級教程段落
- title和alt 標(biāo)簽介紹及其異同
- XHTML標(biāo)簽的自關(guān)閉的寫法應(yīng)該注意的問題
- XHTML教程:Doctype文檔類型聲明必不可少!
- HTML初級教程圖像
- 不符合web標(biāo)準(zhǔn)的target="_blank"標(biāo)簽
- 相關(guān)鏈接:
- 教程說明:
CSS教程-CSS大師Eric采訪實(shí)錄
。