CSS3 动画是表现还是行为？

Question

我们常说表现、内容、行为要分离，在CSS3之前时我们分辨得很清楚。但是现在发现利用CSS3你可以做纯CSS的选项卡，纯CSS的下拉菜单，可以实现缓动效果，动画效果，利用 input[type=checkbox]:checked还可以实现点击响应。CSS3干了不少JavaScript一直在做的事。CSS3 的 content 还可以生成HTML内容。这个时候如何理解“表现、内容、行为”的分离？

看了这篇文章 谈谈我的“分离”观 还是疑惑。我们说不能认为脚本就是行为，脚本可以生成内容也可以改变表现，但里面提到“行为，指由用户触发的由脚本与服务器端的交互”，那么弹窗也不算行为？或者说到了现在，已经没必要分清楚？你怎么理解？

Answer 1

这问题还挺有意思。

就我的理解，目前css3还是在做表现所做的事情，表现的东西，不管是否静与动，它与行为最大的区别在于，行为更大程度是再说与用户的事件交互上，比如点击了表单提交按钮，检验出不合格的字段给出提示

当然表单验证在html5这个代表内容的部分也改进做了很多，这我认为只是为了方便开发者的一个功能，其实严格来说也属于数据，html5可看成是浏览器才能解析的xml，只不过对某些属性提供了浏览器自己默认的处理方式，比如说required="required"，表示这个字段的数据是用户必须提供的，本质上还是一个描述，不是行为，如果默认的处理方式不满意，你也可以用javascript去改变他

当然其他的一些事件交互，想网页游戏，就更不用说了，那必然要依靠javascript对事件进行一些相应处理

而反过来，在css3没出现之前，javascript做的一些仅仅是很炫但是不与用户交互的动画效果，其实也算是表现。

而对于css3生成内容，这个地方可能你理解有一个误区，它必定不是生成html的内容，而也是为了表现，如果这个概念不理解清楚，很可能会导致css3 content的滥用，比如说，给blockquote或者q标签的前后加引号，就是一个很好的运用，但是给一段话的后面加另外一段话，就是一个滥用的坏栗子。其实你可以这么去想，css3是为了装饰html这个内容的，所以每当你做完一个页面的时候，最好把css关掉看看html在默认的样式下是否依然还具有非常良好的结构和完整的数据（比如刚才说的坏例子，那已经少数据了）,如果在脱掉css3这层漂亮的外衣下依然能一眼就分辨html的胴体，那才是真的搞清楚css和html的职责了

Answer 2

css 提供的功能基本上都可以归类为表现层的东西.

这里要分两方面来说，

首先是 css3 的 transfrom(变形), transition(过度), animations(动画)

这些用法的引入让我们不用通过js就可以让某些元素产生动态的变化效果.

在我的定义中行为是能够跟据一定的逻辑对某些动作进行响应。

而这些纯 css3的动态效果，他们本身没有什么逻辑可言，不能对用户的动作进行响应。只能按照预定的规则来变化。范例

其实就有点类似 gif 格式的图片。虽然它是动态的，但它还是图片。

其次是 css 的伪类

css伪类并不是 css3 才引入的，在css 1时代就有。

与问题相关的伪类如下。加粗的部分为 css3 引入的新伪类。

链接相关的伪类
:link
:visited
:hover
:active
:target

表单元素相关的伪类
:focus
:enabled
:disabled
:checked
:indeterminate

通过 :target 伪类确实可以实现纯css的选项卡,弹出框等以前只有js才能实现的功能。范例在此

原理是通过浏览器url上的描点来找到对应的元素。然后对其进行显示隐藏相关的风格变化。
下面是简单的lightbox的例子。

<a href="#lightbox">点击显示弹出框</a>
<p id="lightbox">
   这是一个弹出框
</p>
<style type="text/css">
   #lightbox {
      display:none; // 默认隐藏
      position: fixed;
      width: 300px;
      height: 300px;
      background: red;
   }

   #lightbox:target {
      display:block; // 当描点选中时显示
   }
</style>

这就跟 :hover 伪类一样。

<a href="#">链接</a>
<style type="text/css">
   a {
      color:black; // 默认黑色字体
   }
   a:hover {
      color:red; // 当鼠标在它上面时显示为红色字体
   }
</style>

如果我们定义 :hover 不算为行为的话, 那么 :target 以及其他类似的伪类也不能搞特殊。

以上仅是我的理解。

每个人对于表现层与行为层的理解可能不相同，就如 @酿泉 所说的，要理解它的思想，而不是纠结于它的教条。

Answer 3

我觉得 这其实根本不需要分的那么细
Javascript还不是有很多代码为的是表现？
你可以将偏向于动作的CSS或者JS和偏向于表现的分开，发布的时候合并就行了
便于维护就好了而不是纠结教条
我以前也纠结过MVC具体到底是怎么分离的，但现在发现很多框架分离的方法都不一样，有分离的思想并且简单易懂便于维护就好了吧