关于CSS 我们走得太远忘了为什么而出发

开发 前端
CSS是一种不起的技术,其真实使命是对网页中的内容进行修饰,然而,随着CSS 3的引入:圆角、阴影,旋转等等技术更将CSS带到前所未有的高度,但关于CSS,我们是不是已经走得太远了?

CSS是了不起的技术,本人***次用到的时候,觉得这是我做梦都想不到的东西,随着CSS 3的引入,圆角,阴影,旋转等等技术更将CSS带到***的高度。然而,关于CSS,我们是不是已经走得太远,本文以一个Web设计师的角度对CSS的一些实验性应用做了另一种思考。

关于CSS,51CTO推荐阅读:跨浏览器开发教程

那些有关CSS的前卫实验

几个月前,作者曾发表过一篇文章,介绍了以下5种有趣的实验:

◆CSS3 Transforms & @font-face Experiment:http://neography.com/journal/css-transforms-font-face-experiment/

◆CSS Posters:http://designinformer.com/css-posters/

◆Pure CSS Line Graph:http://cssglobe.com/post/4175/pure-css-line-graph

◆CSS3 Leopard-style Stacks:http://gordonbrander.com/lab/css3-stacks/

◆Pure CSS Twitter Fail Whale:http://www.subcide.com/articles/pure-css-twitter-fail-whale/

每个实验都是用了不同的方法,其中一些,如 CSS 线图,在现实中可以找到实际的应用,其它的,如 CSS 实现的 Twitter Fail Whale 图画,则纯属实验,这些实验的目的仅仅为了说明 CSS 能够实现的效果,并不意味着应当这样来做。

让我们实际一点

CSS实现的社会媒体网络标志

上图是用纯CSS实现的社会媒体网络标志,很神奇不是?

在Pure CSS Icons: Make The Madness Stop一文中对这一做法也提出了质疑,作者表示,一些人开始尝试将 CSS 当作设计工具并迅速引发大量效仿,然而,这种做法有多少易用性可言?它并不容易集成到你的设计与开发当中,也不容易调整。

《Pure CSS Icons: Make The Madness Stop》:http://farukat.es/journal/2010/08/469-pure-css-icons-make-madness-stop

就像上面的完全基于 CSS 的社会网络标志,无非是一堆各式各样的线条的组合,固然令人印象深刻,也算有创意,但并不实用,因为创作这样一个标志可能需要几个小时的艰辛劳动,在 Photoshop 中画一个同样的图根本不费任何力气,而且效果更好(更细腻)。

Ateş 认为,这种方式生成的图标的可维护性也很成问题,调整一个图标原本只需要调整像素,现在却需要修改 CSS 定义,同时,上述 CSS 标志的设计者 Nicolas Gallagher 也表示,做这类事情,CSS 并非最适合。

降低HTTP请求?

用CSS生成的图片

上面这幅图中的图标全部用 CSS 生成,而且作者将它们拿出来卖,40个图标卖25美金。不得不承认,这些图标设计得非常漂亮,作者设计这些 CSS 的初衷是为那些使用的网站降低 HTTP 请求数,因为这些图标不需要额外的图片文件请求。

然而,一个小小的图标文件带来的 HTTP 请求真的很值得一提吗,何况,使用 CSS Sprite 技术,这些图标完全可以放在同一个图片中,靠 CSS 定位显示,这样,只需要一个 HTTP 请求就够了。而且,我实在怀疑,这些 CSS 版的图标到底能减少多少带宽。

本着语义化的精神

必须承认,我有时候会为了实现某种视觉上的需要,而额外使用 DIV 或 SPAN 等标签,这很不语义。然而 CSS 绘图是更不语义的事,CSS 的真实使命是对网页中的内容进行修饰,而不是创建内容本身。网页中的图形本身属于内容的范畴,不应该由 CSS 创建。

原文作者:Matt Ward

原文地址:http://blog.echoenduring.com/2010/08/14/are-we-taking-css-too-far/

【编辑推荐】

  1. 纯CSS无hacks的跨流览器多列布局
  2. CSS技术在网页设计中的运用
  3. 定义未来Web样式 CSS 3***特性一览
  4. CSS 3备受期待的8大功能
  5. 关于CSS 3 你应该知道的五项新技术
责任编辑:王晓东 来源: 锐商企业CMS
相关推荐

2020-06-19 14:55:11

Kubernetes容器技术

2023-09-28 10:21:44

CSS前端

2011-06-08 10:30:08

MongoDB

2022-12-01 14:43:56

物联网智慧城市

2020-04-06 14:45:22

云计算边缘计算网络

2020-06-10 09:06:48

MongoDB架构高可用

2017-04-05 16:40:45

2019-08-05 08:42:37

物联网IOT技术

2018-09-14 18:00:29

无损网络

2023-09-05 09:49:03

2022-08-26 08:00:19

企业架构IT

2018-03-22 14:47:13

容器开发人员笔记本

2022-02-07 23:05:11

tailwindcsCSS框架

2024-03-07 10:21:56

2021-01-26 05:37:08

分库分表内存

2010-11-03 09:22:00

C语言

2014-05-30 15:56:26

iOS 8WWDC2014

2013-01-07 11:31:11

大数据大数据应用

2016-01-20 09:54:51

微服务架构设计SOA

2013-07-27 21:10:02

点赞
收藏

51CTO技术栈公众号