睡蓮‧池水間

Guest
2012-Feb-07  
0 位會員和 11 位訪客在線上

文章 :: 標準之路

CSS水平等级

Emil Stenström
 
http://friendlybit.com/css/levels-of-css-knowledge/ 
http://panweizeng.com/archives/57


英文原文中譯

As you might have understood by now I’m very much pro web standards. The current widely accepted standards are: (X)HTML for page structure, CSS for design, and Javascript for behaviour. HTML is pretty well known by now, it has been there since the beginning of the web and there are tutorials everywhere that gets you started. CSS is starting to get a grip, large companies are switching their sites to CSS based layouts and the webdev blogosphere reaches more and more people.

When you promote web standards, like many of us do, you get to talk to a lot of people. If you promote it in a live chat room like #CSS on EFNet it gets even clearer: there are a lot of different levels of CSS knowledge out there. This article is going to list some of those levels along a rating of how this kind of developer will affect the web. Here we go:

你應該已經知道我現在非常推崇web標準。現在普遍流行的標準是:用(X)HTML來表示頁面結構,用CSS來設計樣式,而用Javascript來表現行為。現在很多人都已經熟悉HTML,它從web發展的初期就已經出現了,你可以到處找到它的教程。CSS正慢慢被人們所掌握,大公司們開始把它們的網站轉移到css佈局,網站開發者的博客圈也在影響著越來越多的人。

當你向大家推廣web標準的時候,跟我們大部分人一樣,你會和很多人討論。如果是在類似EFNET上#CSS這樣的在線聊天室推廣的時候你會更清楚的發現:裡面的人們對CSS了解有著很多不同的級別。這篇文章就準備按等級列出這些不同級別的開發者是怎樣影響著web的。現在開始:
Level 0等級 0

“CSS? Isn’t that a multiplayer game?”

These people have probably never made a webpage in their life. If they did it was pure HTML and they barely knew what they were doing. We get some of these people in #CSS, not because they want to start learning but because they think they’ve come to another channel, often looking for CS:S. No need to worry about these people, they probably won’t do many webpages in their lives so they can’t do much harm.

“CSS(Counter-Strike Source:反恐精英-起源)? 不是那種多人遊戲麼??”


這些人可能從未製作過網頁。也許他們用過純HTML設計但他們幾乎不知道他們曾經做過什麼。我們在#CSS(聊天室)遇到過這麼一些人,倒不是他們打算開始學習web標準而是因為他們進錯了聊天室,大部分以為進入的是Counter-Strike Source(反恐精英-起源)。沒有必要為這些人擔心,他們這輩子可能永遠也不會去做網頁所以不會帶來什麼害處。
Level 1等級 1

“Yeah, I use it to remove underlines on links sometimes”


Different from Level 0, the people in this level do actually know basic HTML. They probably learned it at least five years ago and have made a couple of simple sites. They use very little CSS, only when they need to do simple stuff you can’t do with HTML only, like removing underlines and setting line-height (No! don’t even think about setting line-height with HTML). While these people could present us with some badly coded sites they rarely have any large and well visited ones. This means that they won’t do much harm either.

“哦,我有時候用它去掉鏈接的下劃線。”


和等級0不同,這個級別的人實際上了解基本的HTML。他們可能5年前學過並且做過一些簡單的網站。他們很少使用CSS,僅僅當需要做一些簡單的但純HTML不能完成的任務時才用,比如說去掉下劃線以及設置行高(噢!不用妄想用HTML來設置行高)。這些人製作了一些代碼很糟糕的網站但他們當中很少有流量大而且受人歡迎的網站。這意味著他們不會帶來太大的傷害。
Level 2等級 2

“No, I don’t like divs; tables are much easier to work with”


Instead of just playing with HTML, like those from Level 1, some continued their quest. They mastered HTML tables and started using it to make things look just like they wanted. Somewhere around reaching HTML mastery they stopped looking at new ways of working. They heard about other people using “divs to design their pages” and even took some time one day to try to learn what the fuss was about. After a few hours of not getting it they gave up, went back to the familiar land of tabled layouts, and stayed there. Many do know CSS syntax and sometimes even some background but they believe it’s far too hard and ill-supported to use instead of tables.

Watch it! These are dangerous people, some even webmasters of big corporate websites. Since they have been in the business for a while many are leaders for their web departments. These are the people it’s most important to reach, and if we do it means a lot for the web. Concentrate on these people all you standards advocates.

“不,我不喜歡div;table更好用一些。”


同那些從等級1過來的人一樣,他們繼續進行著嘗試新的東西而不是僅僅使用HTML。他們掌握了HTML裡面的tables,然後開始用它來随心所欲地設計網頁。當完全精通HTML以後他們就停止了嘗試和探求新的工作方式。他們聽說過其他人使用div來設計網頁甚至也花了一些時間嘗試過學習div這種設計。通過幾個小時的學習,他們不得其法,於是又轉回到table佈局並一直堅持下去。很多人確實了解CSS的語法有時甚至還知道一些背景,但是他們認為相比於table佈局CSS實在太難了而且難以得到支持。

看,這些危險的家伙,他們當中不少人還是大公司網站的web管理員。他們從網站運營開始就是公司web開發部門的頭。我們應該著重影響這些人,這樣對web的發展意味深遠。在你推廣web標準的時候應該重點開導他們。
Level 3等級 3

“Yes I’ve heard it’s good, but I can’t use it because of…”


While people in this group still don’t use CSS for positioning they do know some CSS and perhaps heard good things about it. They’ve tried making simple layouts and some even liked how it felt to work with. Problem here is that something is stopping them. Perhaps they have a Level 2 boss, perhaps their website needs to cater for Netscape 4 users, there might be many different reasons but something is in the way.

These people need to know that while CSS does not work everywhere that isn’t the end of the world. Old browsers will still get all your content, just pure content. Instead of them you will reach a new audience: there may be accessibility and usability benefits, newer browsers will get a richer experience and the site might even get easier to add content to (which will lead to more content). Tell this to the people in this group. If you’re unlucky they are not be the ones making decisions but in that case their influence on Level 2 Bosses will still be worth it.

“是的,我已經聽說它非常好,但是我不能使用它因為……”


這些人知道一些CSS而且可能聽說過它所帶來的好處,但始終沒有採用CSS佈局。他們嘗試過使用簡單的佈局而且一些人還挺喜歡這種設計方式。問題是還有些東西令他們望而卻步。可能他們有一個處於等級2的老板,可能他們的網站需要迎合使用Netscape 4的用戶,雖然有很多不同的原因但是總是會有一些東西阻止他們使用CSS佈局。

這些人需要知道盡管CSS不能到處運行並非什麼大不了的事情。老的瀏覽器仍然可以看到完整的內容,而且是純粹的內容。你會影響到一個新的聽眾:使用web標準構建網站將從易用性和可用性中受益,新的瀏覽器會獲得豐富的瀏覽體驗並且網站變得更容易去增加內容。把這些告訴他們。如果你運氣不好,他們可能沒有網站的決策權,但即使這樣也是值得的,因為他們將影響到等級2的老板。
Level 4等級 4

“CSS? Oh! Yes, I use divs for all my layouts”


It’s not unusual that these people use only divs on their sites. Each part of their page gets a div, often with a carefully crafted id (#toprightredline or even #r5_c7 with r standing for row and c for column), and then they position their divs with absolute positioning by the pixel. The result looks good, hey, it even validates as XHTML 1.1(!) but what they have missed is that most of the benefits of CSS has been lost. These pages are terrible when it comes to a screen reader interpreting it. Same with older non-CSS browsers, they won’t get the content… they will get one big block of text. When using bad class names and ids you loose the possibility to change the layout: if that red line needs to be changed to black you’ll need to change all your HTML documents too (can be hundreds). Don’t fall into the trap of telling them they are stupid or make them google “css”, they know they are smart people and they did learn about CSS from google in the first place. Tell them exactly what could be improved on their sites. Tell them what the benefits are. Keep your cool and tell them why.

People of Level 4 produce sites that are rather bad. The damage is reduced though by them often being open to new ideas. After all, not to long ago they did manage to learn and start to use CSS.

Some of the reasons for people thinking this way is because of what WYSIWYG editors are doing. Most such editors produce terrible div-only code but I’m hearing that there are gradual improvements in this field. This is a good thing and hopefully this will help people move from Level 4 to the higher levels.

“CSS? 對,我所有的佈局都是用div來做的。”


這些人在他們的網站上只使用div來佈局並沒有什麼好奇怪的。他們網頁的每一部分都使用div,而且使用了一些匠心獨運的ID名稱(比如#toprightredline 或者甚至是#r5_c7,其中r代表行,c代表列),然後用像素精確地絕對定位這些div。結果看起來很好,而且甚至能通過XHTML 1.1驗證,但是他們所失去的是CSS佈局所帶來的最大好處。這些網頁當用屏幕閱讀器解析的時候非常糟糕。同樣在不支持CSS的老瀏覽器中,他們不會得到網站的內容而是一大塊雜亂無章的文本。當使用大量糟糕的類名和ID名稱時,改變網站佈局的可能性將降低:假如紅線要改成黑線你將需要改動所有的HTML文件(可能數以百計)。別數落人家太笨或者讓他們去google搜索CSS,他們堅信自己非常聰明而且起初也是從google開始學習CSS的,別陷進去。指出他們網站需要改進的地方以及使用web標準會帶來什麼好處。你要保持頭腦冷靜然後告訴他們為什麼。

等級4的人製作出來的網站有點糟糕。但是他們容易接受新的東西所以對web害處不大。畢竟不久前他們已經掌握學習和使用CSS。

使人們這樣設計的某些原因是WYSIWYG(What You See Is What You Get,所見即所得在線編輯器)正是這麼做的。大部分這種編輯器會産生非常糟糕的只含有div的HTML代碼,不過我聽說這類編輯器正在逐步改進。這是個好消息,希望這樣能夠幫助人們從等級4升到更高的層次。
Level 5等級 5

“I use CSS for design, it’s better than tables because of…”


After a lot of reading, talking to people and thinking most people arrive at Level 5. This is where you both can use CSS and know why it’s better. Some people in this level have minor problems on the sites they produce but it’s nothing serious. When asked they can argue why separating structure and design is a good thing and they have worked with CSS long enough to know the common pitfalls. I’m guessing many of the readers of this article are on this level and I feel I am. But this is not the best we can do…

“我用CSS進行設計,它比table佈局好的地方是……”


經過大量的閱讀,討論和思考,大部分人達到了等級5。你使用CSS佈局的同時知道了為什麼它會相對更好一些。這個等級的人製作出來的網站會有一些小問題但是無關緊要。當被詢問時他們可以解釋到為什麼結構和表現分離更好而且他們已經用CSS佈局足夠長時間去了解共有的缺陷。我想很多這篇文章的讀者都處於這個等級包括我。但這並不是我們能做到的最好的層次,我們還可以超越……
Level 6等級 6

“What version of CSS? Yes, I do. Did you read my book about…”


For some people knowing how and why isn’t enough. These people strive to improve how CSS is used and are publishing great articles on new ways of using it. They constantly go back to the basic needs CSS is filling and attack problems from new angles, often resulting in more great articles. Some have actually read the whole W3C specification on CSS (sic) and they certainly know which parts are supported by which browsers. They function as role models for beginners and do great things for the web with their influence. Many work with the Web Standards Project. If you ever find an error on their site there is a reason for it. Ask them and they’ll tell you why.

“什麼版本的CSS?對,我知道。你讀過我那本關於……的書了麼?”


對於某些人僅僅知道怎麼樣和為什麼是遠遠不夠的。這些人為CSS更好的應用而努力奮鬥著並經常發表關於CSS新設計方法的好文章。他們堅持不懈地回到分析基本的CSS是如何填充的,從不同的角度解決一些難題,結果經常是發表了更多非常優秀的文章。有些人事實上已經研讀過W3C的CSS規範(原文),深諳各種瀏覽器對CSS支持的差別。他們是初學者的楷模並用他們的影響力做了很多對web發展有深遠意義的事情。其中有些還可能是Web Standards Project的成員之一。如果你曾經在他們的網站上發現過一個錯誤,那肯定是有原因的。問一下他們然後他們會告訴你為什麼。

That’s it. I hope this article gave you some inspiration to keep pushing the web to new victories. At which level are you? Do you have examples of people in last level?

就這樣。我希望這篇文章能給你一些靈感來推動web向前發展。你處於那個CSS等級呢?你認識一些處於最後等級的人麼?

    «« 互聯網需要“統一標準” XHTML 2 與 HTML 5 依舊背道而馳 »»    

引用

  • 文章地址: http://waterlily-lsl.com/modules/article/view.article.php/c1/155
  • 引用地址: http://waterlily-lsl.com/modules/article/trackback.php/155

評分

10
9
8
7
6
5
4
3
2
1


 

API: RSS | RDF | ATOM

回覆及設定

    關閉


 

最 新 發 表 及 資 訊 區

此為池水間 banner ,需要安裝 Adobe Flash Player 才能觀看內容。

最新留言

最新留言:2012-Jan-6 11:13am
留言編號:76
留言者: wuji888
網主回覆:
總留言數: 71

前往萍踪留影

造訪統計

今天:93
昨天:660
本週:1224
本月:2752
總計:373136
平均:290

連結

Powered By XOOPS
Valid XHTML 1.1
Valid CSS 3
登 入