标准发布流程,响应式网页设计

前端工程师应该了解的 CSS 进化史

2016/07/20 · CSS · 2 评论 · 进化史

本文由 伯乐在线 - 刘唱 翻译,艾凌风 校稿。未经许可,禁止转载!
英文出处:Sheena Lyonnais。欢迎加入翻译组。

CSS生日快乐!你毫无疑问地在你短暂的生命里产生了巨大的影响,永远地改变了网络的审美。

层叠样式表(CSS)就像一位神童,从一开始就展示出了巨大的潜力。当它还在“青春期”努力地寻找兼容性的时候,这种样式语言就已经克服了大部分的障碍并证明了自己足以成为Web技术的基石。

让我们回顾一下迄今为止CSS的一生。

响应式网页设计

图片 1

响应式网页设计(图片来源于网络)

  • Ethan Marcotee 在2010年发明的。
    大家可前往他的文章阅读更多内容。
  • 英文:Responsive Web design(简称RWD)

响应式网站设计(Responsive Web design)的理念是:
页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成,包括弹性网格和布局、图片、CSS media query的使用等。无论用户正在使用笔记本还是iPad,我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等,以适应不同设备;换句话说,页面应该有能力去自动响应用户的设备环境。响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这样,我们就可以不必为不断到来的新设备做专门的版本设计和开发了。

响应式网页设计(Responsive Web Design,通常缩写为 RWD),又称为自适应网页设计、回应式网页设计。是一种现代网页设计方法,该设计基于 CSS3 的媒介查询(Media Query)特性使得网页适应不同设备,即根据设备的分辨率和缩放自动重新布局,同时减少缩放、平移和滚动。

  • 必要性
    响应式网页设计就是为了让网站能够兼容多个终端。为各个终端制作终极版本。
    为什么响应式设计如此必要呢?从statcounter的数据我们可以得到答案:

    图片 2

由数据可看出手机终端的持有率已经在电脑终端之上,且呈上升状态。
  • 案例
    我们也看看哪些网站应用了响应式

    图片 3

    百度电脑终端

![](https://upload-images.jianshu.io/upload_images/9509530-81ddaf4a06c497a6.png)

百度手机终端


[百度](https://link.jianshu.com?t=www.baidu.com)出应用了响应式的百度电脑与手机呈现的内容截然不同。

那么没应用RWD的网站又有哪些呢?

图片 4

中山大学电脑终端

图片 5

中山大学手机终端

中山大学的官网没有应用响应式设计。
可以看出没有应用RWD的中山大学官网在手机就显得非常不方便。


1.名词解释

随着 CSS 3 的广泛应用,很多新的 CSS 属性层出不穷,有很多陌生的 CSS 属性出现,所以经常需要去学习新的 CSS 属性。新的属性往往介绍文章不多,所以有时候就需要去看看官方文档,此时会发现官方文档有好几个版本,看下图:

1996年12月—CSS 1

互联网上对CSS正式的介绍要追溯到1996年,万维网联盟 (W3C) 面向全世界发布CSS的时候。CSS并不是当时唯一一种正在开发中的样式语言,但是层叠这个绝对要素和开发序列将它与其他的语言区别开来。

“HTML 是一种具有语义并用来传达网页内容的语言,CSS 最初的设计目的,就是为了使 HTML 的这一理念能够保持下去。”一位Google的规范黑客(spec hacker)Tab Atkins Jr.在网络播客平台说,“尤其是让机器能够理解。”

样式表并不是全新的,自从标准通用标记语言(SGML)的开发以来,它(样式表)就因为一些能力而被使用。但在当时,将它应用于网页还是很新奇的。

CSS最初并没有什么闪光点,但是它的影响力是突然的。为了正确地来看待它,下图是第一个发布在网络上的网页看起来的样子:

图片 6

下面是一个类似的使用了CSS的基础网页的例子:

图片 7

正如你所看到的那样,CSS的加入使得网页元素能够采用独特的特征。其主要的益处是设计师和开发人员现在可以不用通过更改HTML就能改变CSS的一些属性了。例如,蓝色的高亮区域可以换成绿色或红色。

但是在当时它大体上也就是这样了。W3C发布的CSS推荐标准拥有以下初始属性:

  • 前景和背景颜色/图片
  • 字体属性例如字体和加粗
  • 文本,包括单词和字母间距
  • 外边距,边框,内边距
  • 分类和对齐

RWD的三项组成科技

  • 流式网格:概念要求页面元素使用相对单位如百分比或字体排印学调整大小,而不是绝对的单位如像素或点;

  • 灵活的图片:也以相对单位调整大小(最大到 100%),以防止它们显示在包含它们的元素外面;

  • 媒体查询:允许网页根据访问站点设备的特点而使用不同 CSS 样式规则,最常用的是浏览器的宽度。

HTML5

万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改。

图片 8

1998年5月—CSS 2

参考CSS1中建立的属性,CSS 2的第一份工作草案在1997年11月发布,并且在1998年5月成为了W3C的推荐标准。

这个版本拓展了属性的能力,使其更加多样化。例如:有 :hover伪类和臭名昭著的文本阴影效果(现在已过时):

图片 9

RWD和前後端的关系

  • 前端

    图片 10

    前端(图片来源于网络)

前端对于网站来说,通常是指,网站的前台部分包括网站的表现层和结构层。因此前端技术一般分为前端设计和前端开发,前端设计一般可以理解为网站的视觉设计,前端开发则是网站的前台代码实现,包括基本的HTML和CSS以及JavaScript/ajax,现在最新的高级版本HTML5、CSS3,以及SVG等。

HTML、CSS、JavaScript
这三个是前端开发中最基本也是最必须的三个技能。前端的开发中,在页面的布局时, HTML将元素进行定义,CSS对展示的元素进行定位,再通过JavaScript实现相应的效果和交互。虽然表面看起来很简单,但这里面需要掌握的东西绝对不会少。在进行开发前,需要对这些概念弄清楚、弄明白,这样在开发的过程中才会得心应手。

  • HTML

指的是超文本标记语言 (Hyper Text Markup Language),这个也是我们网页最常用普通的语言了,经历了多个版本的发展,已经发展到5.0版了,得力于W3C建立的标准和规范,已普遍升级到了XHTML,XHTML 指可扩展超文本标签语言(EXtensible HyperText Markup Language), XHTML 于2000年的1月26日成为 W3C 标准,是更严格更纯净的 HTML 代码,XHTML 的目标是取代 HTML。XHTML 与 HTML 4.01 几乎是相同的,XHTML 是作为一种 XML 应用被重新定义的 HTML,是一个 W3C 标准。W3C 将 XHTML 定义为最新的HTML版本。所有新的浏览器都支持 XHTML。[1]

  • CSS

级联样式表(Cascading Style Sheet)简称“CSS”,通常又称为“风格样式表(Style Sheet)”,它是用来进行网页风格设计的。比如,如果想让链接字未点击时是蓝色的,当鼠标移上去后字变成红色的且有下划线,这就是一种风格。通过设立样式表,可以统一地控制HTML中各标志的显示属性。级联样式表可以使人更能有效地控制网页外观。使用级联样式表,可以扩充精确指定网页元素位置,外观以及创建特殊效果的能力。[2]

  • Javascript

是一种由Netscape的LiveScript发展而来的原型化继承的面向对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如Perl,遗留的速度问题,为客户提供更流畅的浏览效果。当时服务端需要对数据进行验证,由于网络速度相当缓慢,只有28.8kbps,验证步骤浪费的时间太多。于是Netscape的浏览器Navigator加入了Javascript,提供了数据验证的基本功能。 [3]


CSS3

CSS3是CSS(层叠样式表)技术的升级版本,于1999年开始制订,2001年5月23日W3C完成了CSS3的工作草案,主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。CSS演进的一个主要变化就是W3C决定将CSS3分成一系列模块。浏览器厂商按CSS节奏快速创新,因此通过采用模块方法,CSS3规范里的元素能以不同速度向前发展,因为不同的浏览器厂商只支持给定特性。但不同浏览器在不同时问支持不同特性,这也让跨浏览器开发变得复杂。

图片 11

2011年6月—CSS 2.1

然而,W3C不再维护CSS 2的推荐标准了。作为替代,CSS2.1在2004年推出并于2011年6月成为了W3C推荐标准。这个建立在CSS 2之上的修订版解决了CSS 2的很多bug并代替了之前的版本。

CSS 2.1提升了复杂度。它准许了父子关系的概念,让设计师和开发人员可以在一个给定元素上定义多个类名。它还推出了可能成为响应式设计的第一次尝试:字体大小调整(font-size-adjust)属性。

演示文稿现在可以针对特定的媒体设备,包括手持设备,盲文设备,可视化浏览器,打印机和听觉设备。这是演变成为CSS 3的开始。

后端

后端就是网站的逻辑部分,主要涉及数据库,动态语言如PHP、ASP、JSP等
后台一般指的是管理员操作模块,包括对网站内容的更新、注册会员管理等等,是网站的一个子模块

后台应该是管理网站的,一般叫网站管理后台,比如发文章啊,查看浏览数据啊等等,对应的也会有网站前台,即访客能看到的页面,对了,后台肯定不能对访客开放的,没人愿意让访客来修改自己网站文章的。一般呢,你输入http://www.xxx.com看到的就是网站前台,有些网站呢,你输入http://www.xxx.com/admin/ 就能进入到那个网站的管理后台页面了,但是需要输入账户密码。
(知乎作者:蒙奇D撸码客)

图片 12

前端后端(图片来源于网络)

可以看出前端是呈现给用户的东西,后端是程序员开发的地方。响应式网页设计所要做的就是通过后端来使前端在各个终端上切换自如。(个人了解)

JavaScript

1.是一种解释性脚本语言(代码不进行预编译)。

2.主要用来向HTML(标准通用标记语言下的一个应用)页面添加交互行为。

3.可以直接嵌入HTML页面,但写成单独的js文件有利于结构和行为的分离。

4.跨平台特性,在绝大多数浏览器的支持下,可以在多种平台下运行(如Windows、Linux、Mac、Android、iOS等)。

 

CSS 3

我们现在最熟悉的版本,CSS 3开发自1999年。其最大的不同之处是引入了模块,每个模块都拥有自己的功能和扩展功能。其中有一些取代了从前CSS2.1的部分。

自2011年6月,W3C正式推荐了四个模块以及大量用于开发的不同阶段的性能。本质上,此次 (CSS 3) 将整个CSS语言分解成为模块并使其彼此相互独立。

正式推荐的模块包括:

  1. 2011年6月 —颜色
  2. 2011年9月  第三代选择器
  3. 2011年9月   命名空间
  4. 2012年5月    媒体查询

媒体查询大概是最具革命性的模块之一。它负责响应式设计,并且已经成为如今网络界的标准。以下是一个基于媒体查询的基本响应式设计的例子:

图片 13

CSS的未来:它将何去何从?

很多人想知道CSS接下来会如何。一些人甚至怀疑我们是否还需要CSS。

正如很多人所注意到的,W3C已经放弃了CSS的级别,使用这些条目只是为了与从前的版本区别开来。这在W3C社区已经为人熟知了一段时间了。

“从来就没有过CSS 4,以后也永远都不会有CSS 4,CSS 4是一个不存在的东西,” Tab Atkins Jr. 于2013年在他的博客中写道。他在Google工作,坐在CSS工作组,也贡献于W3C的其他几个工作组。

现今,这种语言被简单地称为CSS。这个社区也把精力集中在开发更复杂更有益的独立模块上,使这种语言更加成熟,能够适应现在设计师和不同设备的挑战和需求。在某种意义上,就像CSS准备从大学里毕业了一样,一个全新的世界正等待着它。

打赏支持我翻译更多好文章,谢谢!

打赏译者

RWD

响应式网站设计(Responsive Web design)的理念是:页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成,包括弹性网格和布局、图片、响应式布局媒介查询(CSS media query)的使用等。无论用户正在使用笔记本还是iPad,我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等,以适应不同设备;换句话说,页面应该有能力去自动响应用户的设备环境。响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这样,我们就可以不必为不断到来的新设备做专门的版本设计和开发了。

响应式架构 responsive architecture

超文本标记语言 HTML

响应式网站设计 Responsive Web design

响应式布局媒介查询 CSS media query

当初学 flex-box 的时候就发现有好多种写法,还好官方文档开头有标明那些文档时最新的。不过此时我萌生了去了解 CSS 标准流程的想法,我想作为一个合格的 CSSER 也应该去了解吧。这里讲到的知识基本来自 CSS-tricks 上 CHRIS COYIER 的一篇文章: 。

打赏支持我翻译更多好文章,谢谢!

图片 14

1 赞 2 收藏 2 评论

2.statcounter数据图表分析为何需要响应式web设计

根据市场调查机构 statcounter 的数据显示不同的屏幕有屏幕分辨率,这就说明了我们需要响应式网页设计来适应不同的屏幕分辨率,页面应该要有能力去自动响应用户的设备环境,就是网页内容应该随着访问它的视口及设备的不同而呈现不同的样式。

图片 15

CSS 的标准化流程由 W3C Cascading Style Sheets Working Group (CSSWG)——W3C层叠样式列表小组,由浏览器商,大学,大公司(google,IBM等),以及独立CSS专家组成。W3C 本身并不制定标准,而是作为一个论坛式的平台,接收来自小组成员的提交,并通过会议来商讨制定标准,所有的提交以及讨论都是公开透明的,可以在 W3C 网站上看到会议的记录,标准确定一般有6个阶段,其中两个是过渡阶段:

关于作者:刘唱

图片 16

数据挖掘研究生 个人主页 · 我的文章 · 37 ·   

图片 17

3.有无使用响应式web设计的例子

前不久优酷改版,而此次改版则使用了响应式设计方法,我们可以看以下几个页面:

1. 编辑草案 Editor's Draft (ED)

网页上的显示

图片 18

这个是规范的开始阶段,一个CSS属性或者选择器被提出来,并在CSSWG内部研究。如果小组成员同意这个属性可以正式推出,它就能进入下一阶段。

手机客户端上的显示

图片 19

以下是没有使用响应式网页设计的实例

 

bilibili网页版

图片 20

2、工作草案 Working Draft (WD)

手机网页版上的bilibili

图片 21

编辑草案后是工作草案,标准的设计阶段。小组反复处理来自 CSSWG 内部和来自小组外部的反馈,这个阶段有两个结果:一是可能会因为技术困难或者可能会引起其他问题而使新属性被完全拒绝;二是规范会通过这个阶段,并会作为第一次公开工作草案( First Public Working Draft (FPWD))发布,后面还会有数个工作草案,会处理来自 CSSWG 内部和小组外部更广泛社会的反馈。

3.RWD的三项关键

Ethan Marcotte在2010年发明了响应式Web设计,他在A List Apart上提到运用了三项已有技术:弹性网络布局、弹性图片/媒体、媒体查询。(

 

4.RWD和前後端的关系

需要依赖后端方案的RWD:

网页版、手机版、等等分开服务、设计、产出页面

不需要依赖后端方案的RWD:

网页版、手机版、等等一起服务、设计、产出页面

基于HTML5和CSS3就可以制作不需要后端方案的RWD

3、过渡-最后通告工作草案 Transition – Last Call Working Draft (LCWD)

这是第一个过渡阶段,当规范开始考虑从工作草案进入到下一个阶段时,将会对新属性的一些小改动的反馈设置一个截止日期,LCWD 即是日期截至后最后的一次公开草案处理。

注:最重要的阶段是 ED, WD, and CR(下面会讲到的),其他阶段不是很重要。

 

4. 候选推荐标准 Candidate Recommendation (CR)

规范会在这个阶段通过完整的测试,测试人员来自 CSSWG 以及被选为实现这个规范的浏览器生产商(Chrome, Safari, Firefox, Opera, 等等)。为了继续进入下一阶段,CSSWG 会推出两个正确的实现规范。

 

5. 过渡-建议推荐标准 Transition – Proposed Recommendations (PR)

当到达这个阶段,W3C全球资源小组:W3C咨询委员会(W3C Advisory Committee),决定这个规范是否会继续进入下一个阶段。这个阶段一般很少有异议出现,所以也是一个过渡阶段而已。

 

6.推荐标准 Recommendation (REC)

如果规范到达这个阶段,说明规范已经考虑完备并可以让浏览器商实现,W3C 和 CSSWG 对这个规范的讨论处理不再活跃,只做一些必要的维护。

注:推荐标准阶段其实不是一个理想的状态,而是一个规范的坟墓,浏览器并不会等到这个阶段才去实现它,而是在 CR 阶段就会实现这个规范。为什么说是坟墓呢,因为到达 REC 阶段后,规范会止步不前,而不是变得稳定。因为在 REC 阶段 CSSWG 并不会投入精力去修复新出现的错误,所以错误会不断积累,而新版本的规范已经在开发了,老的规范已经失去了继续发展的活力以及意义,留下的问题就只能通过 hack 去弥补,同时会有新的属性去代替它实现更好的功能。

 

那什么时候规范才是稳定的呢?文章中有引述了 Tab Atkins Jr (google团队成员,也是 CSSWG 以及 W3C 的成员)的一段话,内容大概是:规范的稳定性基本和它所在的流程阶段没有关系。当规范特性已经开始传播开来,并因为向后兼容性不能改变时,它才是稳定的,这个阶段可能会在 ED 规范阶段或者 CR 阶段,这才是稳定性评判的正确方法,而不是 W3C 的标准发布流程。说到这里,作者也提到了怎样根据 CSS 新属性的稳定性情况去使用它,避免跳坑,其实就是能够实现渐进增强与优雅降级。这里不得不提到一个有名的网站 http://caniuse.com 估计这个网站大多数人都会用到了,简直是 CSSER 的福音啊,通过这个网站,当键入某个属性时,可以在下面的resources标签很快速地找到它的官方文档以及很多最新的学习文章,同时了解到到一些现有的使用问题(issues)。举个例子,比如键入flex时,下面有这样的标签:

里面有来自css-trick、github等著名网站的文章,很多都是比较新,并且写得很好的文章。 

图片 22图片 23

图片 24 

这里还有个小常识,就是关于 CSS 3 的这个命名,Tab Atkins Jr 在文章 A Word About CSS4 代表 CSSWG 做了阐述,主要内容就是 CSS 3 代表了 CSS 2.1 后新增的 CSS属性,而且不会有 CSS4 这样的东西出现。下面是我看完后结合文章内容以及自己的一些理解,不想看原文的可以稍微了解一下。可能理解不是很到位,不过应该不会偏颇太多:CSSWG 想结束 CSS 2.1 这个版本时,发现 “versions”(版本)这个东西不好用,因为一旦使用版本来发布 CSS 时,CSS 变得很难维护,发展也会变慢。结合上面 CSS 的标准发布流程以及现在 CSS 的使用情况,不难想到确实是这样。因为 CSS 的整体性不强,CSS 属性都是为了实现某个效果单独被提出并反馈,和其他提出的属性并没有什么交集;有的属性一直在用不需要什么新的更新,而有的属性可能很快要被淘汰,所以以一整个版本去发布 CSS 很不科学。基于这样的想法,CSSWG 决定把 CSS 分成很多独立的小模块,每个模块只包含一个主要的特性(feature),可以自己单独升级开发,为什么要分成小的只包含少数特性的模块呢?这样就不会因为一个模块包含太多特性,然后因为某个特性特别棘手不好解决而阻碍整个模块其他特性的发展升级。因为这个想法是在结束 CSS 2.1 版本的时候决定的,那么现在 CSS 就要以模块来整理一下,也要相应定一些等级(level)。规则是这样的: 

1、如果模块在 CSS 2.1 就有相关的内容,那么这些模块就从 level 3 开始。

2、如果是完全新的属性(比如 Flexbox),就直接从 level 1 开始。

3、一个模块的级别和它所在 CSS 的版本无关,即不管它是 CSS 2.1 的内容还是完全新的属性。因为模块的概念是新提出来的,所以只要是模块,就都属于 CSS 3(或者也可以说都是 CSS),不管它们处于什么模块等级。

4、可能会看到类似 css4-backgrounds 这样的写法,其实代表的是 CSS Background & Borders Level 4,即4表示的是模块的等级。

 

后来发现大漠前辈也写了相关文章,内容更全面,讲到了浏览器前缀的问题。我也参考了一下,大家可以点下面的参考链接去看看。

 

本文来源:JuFoFu

本文地址:

 

本文参考:

Tab Atkins Jr.  

CHRIS COYIER . 

大漠 . CSS秘密花园:Web 标准是友是敌?​

 

 水平有限,错误欢迎指正。原创博文,转载请注明出处。

 

本文由星彩网app下载发布于前端技术,转载请注明出处:标准发布流程,响应式网页设计

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。