問題描述

我們常說表現(xiàn)、內(nèi)容、行為要分離，在CSS3之前時(shí)我們分辨得很清楚。但是現(xiàn)在發(fā)現(xiàn)利用CSS3你可以做純CSS的選項(xiàng)卡，純CSS的下拉菜單，可以實(shí)現(xiàn)緩動(dòng)效果，動(dòng)畫效果，利用 input[type=checkbox]:checked還可以實(shí)現(xiàn)點(diǎn)擊響應(yīng)。CSS3干了不少JavaScript一直在做的事。CSS3 的 content 還可以生成HTML內(nèi)容。這個(gè)時(shí)候如何理解“表現(xiàn)、內(nèi)容、行為”的分離？

看了這篇文章 談?wù)勎业摹胺蛛x”觀 還是疑惑。我們說不能認(rèn)為腳本就是行為，腳本可以生成內(nèi)容也可以改變表現(xiàn)，但里面提到“行為，指由用戶觸發(fā)的由腳本與服務(wù)器端的交互”，那么彈窗也不算行為？或者說到了現(xiàn)在，已經(jīng)沒必要分清楚？你怎么理解？

問題解答

回答1：

這問題還挺有意思。

就我的理解，目前css3還是在做表現(xiàn)所做的事情，表現(xiàn)的東西，不管是否靜與動(dòng)，它與行為最大的區(qū)別在于，行為更大程度是再說與用戶的事件交互上，比如點(diǎn)擊了表單提交按鈕，檢驗(yàn)出不合格的字段給出提示

當(dāng)然表單驗(yàn)證在html5這個(gè)代表內(nèi)容的部分也改進(jìn)做了很多，這我認(rèn)為只是為了方便開發(fā)者的一個(gè)功能，其實(shí)嚴(yán)格來說也屬于數(shù)據(jù)，html5可看成是瀏覽器才能解析的xml，只不過對某些屬性提供了瀏覽器自己默認(rèn)的處理方式，比如說required='required'，表示這個(gè)字段的數(shù)據(jù)是用戶必須提供的，本質(zhì)上還是一個(gè)描述，不是行為，如果默認(rèn)的處理方式不滿意，你也可以用javascript去改變他

當(dāng)然其他的一些事件交互，想網(wǎng)頁游戲，就更不用說了，那必然要依靠javascript對事件進(jìn)行一些相應(yīng)處理

而反過來，在css3沒出現(xiàn)之前，javascript做的一些僅僅是很炫但是不與用戶交互的動(dòng)畫效果，其實(shí)也算是表現(xiàn)。

而對于css3生成內(nèi)容，這個(gè)地方可能你理解有一個(gè)誤區(qū)，它必定不是生成html的內(nèi)容，而也是為了表現(xiàn)，如果這個(gè)概念不理解清楚，很可能會(huì)導(dǎo)致css3 content的濫用，比如說，給blockquote或者q標(biāo)簽的前后加引號(hào)，就是一個(gè)很好的運(yùn)用，但是給一段話的后面加另外一段話，就是一個(gè)濫用的壞栗子。其實(shí)你可以這么去想，css3是為了裝飾html這個(gè)內(nèi)容的，所以每當(dāng)你做完一個(gè)頁面的時(shí)候，最好把css關(guān)掉看看html在默認(rèn)的樣式下是否依然還具有非常良好的結(jié)構(gòu)和完整的數(shù)據(jù)（比如剛才說的壞例子，那已經(jīng)少數(shù)據(jù)了）,如果在脫掉css3這層漂亮的外衣下依然能一眼就分辨html的胴體，那才是真的搞清楚css和html的職責(zé)了

回答2：

css 提供的功能基本上都可以歸類為表現(xiàn)層的東西.

這里要分兩方面來說，

首先是 css3 的 transfrom(變形), transition(過度), animations(動(dòng)畫)

這些用法的引入讓我們不用通過js就可以讓某些元素產(chǎn)生動(dòng)態(tài)的變化效果.

在我的定義中行為是能夠跟據(jù)一定的邏輯對某些動(dòng)作進(jìn)行響應(yīng)。

而這些純 css3的動(dòng)態(tài)效果，他們本身沒有什么邏輯可言，不能對用戶的動(dòng)作進(jìn)行響應(yīng)。只能按照預(yù)定的規(guī)則來變化。范例

其實(shí)就有點(diǎn)類似 gif 格式的圖片。雖然它是動(dòng)態(tài)的，但它還是圖片。

其次是 css 的偽類

css偽類并不是 css3 才引入的，在css 1時(shí)代就有。

與問題相關(guān)的偽類如下。加粗的部分為 css3 引入的新偽類。

鏈接相關(guān)的偽類:link:visited:hover:active:target

表單元素相關(guān)的偽類:focus:enabled:disabled:checked:indeterminate

通過 :target 偽類確實(shí)可以實(shí)現(xiàn)純css的選項(xiàng)卡,彈出框等以前只有js才能實(shí)現(xiàn)的功能。范例在此

原理是通過瀏覽器url上的描點(diǎn)來找到對應(yīng)的元素。然后對其進(jìn)行顯示隱藏相關(guān)的風(fēng)格變化。下面是簡單的lightbox的例子。

<a href='http://m.b3g6.com/wenda/6232.html#lightbox'>點(diǎn)擊顯示彈出框</a><p id='lightbox'> 這是一個(gè)彈出框</p><style type='text/css'> #lightbox { display:none; // 默認(rèn)隱藏 position: fixed; width: 300px; height: 300px; background: red; } #lightbox:target { display:block; // 當(dāng)描點(diǎn)選中時(shí)顯示 }</style>

這就跟 :hover 偽類一樣。

<a href='http://m.b3g6.com/wenda/6232.html#'>鏈接</a><style type='text/css'> a { color:black; // 默認(rèn)黑色字體 } a:hover { color:red; // 當(dāng)鼠標(biāo)在它上面時(shí)顯示為紅色字體 }</style>

如果我們定義 :hover 不算為行為的話, 那么 :target 以及其他類似的偽類也不能搞特殊。

以上僅是我的理解。

每個(gè)人對于表現(xiàn)層與行為層的理解可能不相同，就如 @釀泉 所說的，要理解它的思想，而不是糾結(jié)于它的教條。

回答3：

我覺得 這其實(shí)根本不需要分的那么細(xì)Javascript還不是有很多代碼為的是表現(xiàn)？你可以將偏向于動(dòng)作的CSS或者JS和偏向于表現(xiàn)的分開，發(fā)布的時(shí)候合并就行了便于維護(hù)就好了而不是糾結(jié)教條我以前也糾結(jié)過MVC具體到底是怎么分離的，但現(xiàn)在發(fā)現(xiàn)很多框架分離的方法都不一樣，有分離的思想并且簡單易懂便于維護(hù)就好了吧