重新审视那位优雅的CSS

从一个盒中小鱼demo讲起： http://www.w3.org/Talks/2013/0128-CSS-Utrecht/demo-transforms/demo-translate3d-cube.html

demo的精彩之处在于没有用一行Javascript代码便实现了所有小鱼在盒子中漫游的行为，因其只使用CSS引擎默认的选择器机制。

只用CSS实现动画的控制，这并不陌生，平时工作中也常用hover伪类来触发鼠标悬浮后的样式或行为，而不是去绑定mouse行为事件。如tooltip中通过hover伪类选择器来控制tooltip的显示与隐藏，实现起来比Javascript方案优雅的多。

但如何通过CSS来捕捉demo中的点击行为呢？

从demo页面源码中截取如下真相：

#moveme {position: absolute; top: 50%; left: 50%; .... -webkit-transition: 1.5s}
#top-left:target #moveme {-webkit-transform: translate3d(-130px,-130px,300px)}
#top-right:target #moveme {-webkit-transform: translate3d(100px,-130px,150px)}
#bottom-left:target #moveme {-webkit-transform: translate3d(-100px,90px,300px)}
#bottom-right:target #moveme {-webkit-transform: translate3d(90px,90px,300px)}
#center:target #moveme {-webkit-transform: translate3d(-10px,40px,100px)}


<ul>
  <li><a href="#">original</a>
  <li><a href="#center">center</a> = translate3d(-10px,40px,100px)
  <li><a href="#top-left">top left</a> = translate3d(-130px,-130px,300px)
  <li><a href="#top-right">top right</a> = translate3d(100px,-130px,150px)
  <li><a href="#bottom-left">bottom left</a> = translate3d(-100px,90px,300px)
  <li><a href="#bottom-right">bottom right</a> = translate3d(90px,90px,300px)
</ul>

<em id=moveme></em>

代码中的关键是 :target 伪类选择器。看 MDN 中是如何描述：target 的？ https://developer.mozilla.org/en-US/docs/CSS/:target

The :target pseudo-class represents the unique element, if any, with an id matching the fragment identifier of the URI of the document..

URIs with fragment identifiers link to a certain element within the document, known as the target element. For instance, here is a URI pointing to an anchor named section2:
  http://example.com/folder/document.html#section2
The anchor can be any element with an id attribute, e.g. <h1 id="section2"> in our example. The target element h1 can be represented by the :target pseudo-class.

MDN 中也提供了关于 :target 伪类选择器的一种应用https://mdn.mozillademos.org/files/4607/lightbox.html，只用CSS实现了lightbox的组件。

前端童鞋应考虑如何尽量只用CSS来控制前端视图层的交互行为，JS在前端虽是无所不能的，但与CSS相比，无论是维护性与优雅度都无法企及CSS的实现方案。让各自的职责明确也是前端的架构的要点，CSS与JS各司其职，别老想用JS来解决一切问题。

blog comments powered by Disqus

Published

21 March 2013

重新审视那位优雅的CSS

Published

Tags