問(wèn)題描述

我們常說(shuō)表現(xiàn)、內(nèi)容、行為要分離，在CSS3之前時(shí)我們分辨得很清楚。但是現(xiàn)在發(fā)現(xiàn)利用CSS3你可以做純CSS的選項(xiàng)卡，純CSS的下拉菜單，可以實(shí)現(xiàn)緩動(dòng)效果，動(dòng)畫(huà)效果，利用 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”觀 還是疑惑。我們說(shuō)不能認(rèn)為腳本就是行為，腳本可以生成內(nèi)容也可以改變表現(xiàn)，但里面提到“行為，指由用戶觸發(fā)的由腳本與服務(wù)器端的交互”，那么彈窗也不算行為？或者說(shuō)到了現(xiàn)在，已經(jīng)沒(méi)必要分清楚？你怎么理解？

問(wèn)題解答

回答1：

這問(wèn)題還挺有意思。

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

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

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

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

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

回答2：

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

這里要分兩方面來(lái)說(shuō)，

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

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

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

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

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

其次是 css 的偽類(lèi)

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

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

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

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

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

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

<a href='http://www.leifengta.com.cn/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 偽類(lèi)一樣。

<a href='http://www.leifengta.com.cn/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 以及其他類(lèi)似的偽類(lèi)也不能搞特殊。

以上僅是我的理解。

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

回答3：

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