CSS款式表渐进提高的运用

日期:2021-01-20 类型:科技新闻 

关键词:上线了小程序官网,年会抽奖小程序免费,做小程序,小程序网站,跑腿小程序


有多种多样方法能够将渐进提高融进到堆叠款式表(Cascading Style Sheets, 简称CSS)的工作中中,本文将探讨在其中较为取得成功的1些,并考虑到选用其它方法来逐渐提高你的站点。
原文:Progressive Enhancement with CSS
作者: Aaron Gustafson

有多种多样方法能够将渐进提高融进到堆叠款式表(Cascading Style Sheets, 简称CSS)的工作中中,本文将探讨在其中较为取得成功的1些,并考虑到选用其它方法来逐渐提高你的站点。 款式表的机构
怎样在文本文档中引进款式表,许多Web设计方案者和开发设计者并沒有想太多,但这实际上是1门造型艺术。应用正确的方式,能够马上得到渐进提高的许多益处。 应用好几个款式表
对款式开展稍许拆分能够带来许多益处。不言而喻,超出1500行的款式表是有点无法维护保养的,将其拆分为好几个款式表,能够改善工作中步骤(并节约你的活力)。也有1个益处非常少提及:有助于在总体目标媒体种类(译注:指测算机、复印机、电视机、手机上等各种各样媒体种类)上获得更1致的展现实际效果。
main.css文档包括了站点的全部款式标准,考虑到将其拆分为包括版式、合理布局和色调的单独款式表,相应地取名为:type.css, layout.css, color.css.

(图示:怎样将单独款式表拆分为好几个有关的款式表)
1旦进行了上面的分离出来,便可以应用1点奇异的小方式来给落伍的访问器(例如IE5/Mac)和许多对CSS合理布局欠缺有力适用的访问器全自动出示“低保真”的体验。如何做呢?这彻底取决你怎样引进文档。假定根据link元向来引进main.css:
<link rel="stylesheet" type="text/css" href="main.css" />
最先,将上面1行引入拆分为3个有关的款式表:
<link rel="stylesheet" type="text/css" href="type.css" /> <link rel="stylesheet" type="text/css" href="layout.css" /> <link rel="stylesheet" type="text/css" href="color.css" />
在以往,许多开发设计者将media的值设为”screen”或”projection”, 以使得合理布局款式在Netscape 4.x上完全无效(译注:Netscape 4.x不适用波动和精准定位等繁杂合理布局)。但是,有更好的处理方式。在详尽解读这个方式前,大家先看来看可选媒体种类(Alternate Media Types)。 可选媒体种类
渐进提高关键关心內容,大家要将“提高”的体验带到全部适用內容显示信息的机器设备上。因而必须考虑到访问器以外的机器设备,例如复印和挪动机器设备就很关键。
不尽人意地是,挪动机器设备销售市场依然4分5裂并且不了熟(不必纯真地觉得全部手持访问器都会3D渲染总体目标为“screen”的媒体种类款式)。結果,用渐进提高的方法来解决全部媒体的细节探讨,假如不写成1本书的话,也得用上许多篇数。但是请别消沉:在挪动全球里,差别正刚开始统1起来,而且1些十分聪慧的人正刚开始将資源放在1起以协助大家开发设计。但是,以便节省時间和节约活力,大家将集中化于复印机器设备上。
一般,大家必须应用另外一个link元向来加上复印款式:
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
依照国际惯例,上面这个款式表包括全部复印有关的标准,包含版式和色调标准。非常是版式,款式表格中的标准绝大多数极可能复制自main.css. 也便是说,这导致了许多反复编码。
能够看出从合理布局款式中拆分出版发行式和色调款式的益处了:在复印款式表格中,大家已不必须那些反复的标准了。除此以外,可使用另外一个机构上的小窍门来改善站点的可用性,和对于有难题的访问器掩藏一些合理布局款式。
回望下大家的款式表,考虑到下列编码:
<link rel="stylesheet" type="text/css" href="type.css" /> <link rel="stylesheet" type="text/css" href="layout.css" /> <link rel="stylesheet" type="text/css" href="color.css" />
大家沒有申明媒体种类,因而 Netscape 4.x 会载入这3个文档中的全部款式。可是,Netscape访问器能了解最基础的CSS, 大家能够运用这1点。根据将layout.css包括的全部款式挪动到新的款式表——适度的取名字为screen.css, 大家能够进1步机构款式。最终,将layout.css中的內容升级为引进screen.css, 这样,NS4.x和它的同祖访问器们就再也聪慧不起来了(由于它们没理解 @import命令)。(译注:作者这里说的是将全部layout.css中的內容都挪动到screen.css中,随后在layout.css中根据@import引进screen.css. 我感觉最好是的做法应当是在layout.css中保存最基础的NS4.x还可以了解的合理布局款式,而将其它高級合理布局款式挪动到screen.css中。)
@import 'screen.css';
也有1些改善的余地——应当申明款式表所对于的媒体,大家根据给@import申明加上媒体种类来保证这点:
@import 'screen.css' screen;
难题是IE7及下列访问器没理解这类英语的语法从而忽视上面的款式表,假如想给这些访问器出示上面的款式(这是常常期待的),能够很简易地应用标准注解来保证,这将在下文论述。假如你有着鹰1般利锐的双眼,将会早已留意到在款式表名字的两侧应用了单引号(’)来取代双引号(”),这个小窍门可让 IE5/Mac忽视款式表。IE5/Mac的CSS合理布局工作能力十分弱(非常是对波动和精准定位的适用),对它们掩藏合理布局标准是彻底可接纳的。终究,它们依然能获得色调和版式信息内容,这在一些状况下早已够用了。
选用同样的技术性,能够导入print.css文档(和你猜测的1样,包括复印合理布局的特殊标准)。
@import 'screen.css' screen; @import 'print.css' print;
如今大家不但有着了机构得很好看的款式表,大家还有着了1套逐渐提高站点设计方案的合理方式。

(图示:好几个款式表间的互相关联和将它们运用到文本文档的方式) 如今探讨值1干万美元的难题:怎样解决IE6?
对许多兄弟来讲,Internet Explorer 6 是1个新的 Netscape 4 ——全部人都想让它滚蛋。
大家略过对IE6难题的絮絮叨叨。IE6的难题早已有了很好的文本文档总结,而且,老实巴交说,处理起来也其实不是那末艰难。并且,IE7的听取意见非常迅速(非常是在消費销售市场),另外IE8也早已在公测了。这代表着某1天,大家能够真实地对饱经沧桑的IE6说拜拜。
无论是成心還是不经意,微软在推出IE5时,为渐进提高出示了1个好专用工具:标准注解。这些恰当的逻辑性片断(在全部其它访问器中都退级为HTML注解(译注:其它访问器把IE的标准注解了解为纯碎的HTML注解,不起任何功效))不但容许一些标识编码片断只功效于IE,还容许这些编码片断只功效于IE的特殊版本号。
做为有Web规范观念的开发设计者,大家自始至终应当最先在绝大多数现有的适配规范的访问器上检测大家的设计方案,随后再为那些稍作微小改动就可以返回正轨的访问器出示补钉。每一个人的工作中步骤都不一样,但我发现最好是用1套规范的文档来刚开始每一个新项目。我的基础套件包含下列文档: type.css layout.css screen.css print.css color.css
随后,依据新项目的要求,加上对于特殊访问器的CSS文档来包括那些“微小改动”。在如今的绝大多数新项目中,这些文档是ie7.css和ie6.css. 假如新项目规定适用IE6以前的版本号,我也会为其建立相应的文档(例如ie5.5.css这些)。将这些文档放在适当的部位后,我刚开始将款式标准加上到适合的款式表格中。
我的CSS检测全是从Mozilla Firefox中刚开始,由于我的绝大多数CSS全是用Firefox的CSS编写侧栏来撰写的。1旦在Firefox中进行了网页页面设计方案,我马上打开其它访问器来检测查询。绝大多数主要表现很完善,由于她们遵循了Web规范。接着开启IE7来检测。绝大多数状况下也没是多少难题,有时候必须开启hasLayout或调整另外一些合理布局上的小不正确。我沒有将这些调整补钉写入到基础套件的款式表文档中,而是加上到ie7.css中,而且在文本文档的HEAD中根据标准注解来引进:
<!-- [if lte IE 7]> <link rel="stylesheet" type="text/css" href="ie7.css" /> <[endif]-->
上面的标准注解使得IE7及其下列版本号(译注:lte是less than or equal的缩写)能鉴别引进的款式。因而,当用IE7访问网页页面时,将获得这些补钉。可是假如用的是新版本号的IE——将会早已修补这些难题,例如IE8抛下了hasLayout从而已不有这些难题——将忽视这些款式。另外一层面,应用IE6能够获得到这些款式。这是很好的,由于在IE7中的3D渲染不正确常常也存在于IE6中。上文中早已提及,IE7及其下列版本号没法了解带媒体种类的@import,根据这类方法引进screen.css对IE7及其下列版本号是失效的。因而,还必须在ie7.css文档的顶部加上不带媒体种类的@import句子来引进screen.css.
1旦为IE7加上完补钉,我会开启IE6, 看看是不是必须顺手打些补钉。假如的确必须,我会给文本文档加上另外一个标准注解,引进ie6.css:
<!-- [if lte IE 7]> <link rel="stylesheet" type="text/css" href="ie7.css" /> <[endif]--> <!-- [if lte IE 6]> <link rel="stylesheet" type="text/css" href="ie6.css" /> <[endif]-->
接着,简易地将IE6必须的补钉加上到对应的款式表格中,这些款式表将被IE7忽视,可是会依然往下危害到IE5.5等版本号。
根据这类方法应用标准注解,能够很轻轻松松的管理方法新项目中的总体目标访问器,并使得CSS补钉文档维持单独随意。 其它考虑到
CSS渐进提高其实不局限于怎样将款式表与文本文档关系起来,还能够运用在怎样撰写CSS上。
比如,考虑到转化成的內容(译注:例如用:after伪类转化成的內容)。并不是全部访问器都适用,但这是1个很好的方式:能够用来加上1些附加的设计方案或文字。针对网页页面的能用性来讲,这并不是务必的,但这能出示1些视觉效果或其它层面上的提高。
拿简易的联络表单来举个事例:

(图示:此例中应用的HTML表单(编码将在下面得出))
当撰写上面的HTML编码时,极可能会当然地将冒号(:)写在label元素里。为何要这样做?真的给label元素加上了內容吗?并沒有。这样做的目地是给客户出示附加的视觉效果案件线索,对label元向来说,这是过剩的,理应去掉:
<form id="contact-form" action="#" method="post"> <fieldset> <legend>Contact Us</legend> <p>Send us a message. All fields are required.</p> <ol> <li> <label for="contact-name">Name</label> <input type="text" id="contact-name" name="name" /> </li> <li> <label for="contact-email">Email</label> <input type="text" id="contact-email" name="email" /> </li> <li> <label for="contact-message">Message</label> <textarea id="contact-message" name="message" rows="4" » cols="30"></textarea> </li> </ol> <button type="submit">Send It</button> </fieldset> </form>
根据转化成內容来将冒号加上回文本文档,这是1种更完善适合的方法:
label:after { content: ":"; }
用这类方法来撰写表单,给了大家灵便性:当必须从全部站点移除装饰设计标识符时,要是简易的编写CSS文档,而不必须去找寻每个表单(尽管大家以前了解在哪儿)。这个技能也可以很好退级,由于沒有冒号时,表单其实不会被3D渲染得没法应用——这是渐进提高的1个绝佳事例。
或许你早已发现,应用高級CSS挑选符(译注:selector, 也是有译为挑选器的,但我感觉挑选符更能反映原意,例如operator汉语翻译成运算符,而并不是运算器),能够将特殊的款式额外到更多高級访问器上,这有助于逐渐提高站点。1个很好的事例是特性挑选符,在IE6及其同1时期和更早的访问器中不可以被了解(因而也就被忽视了)。Egor Kloos很好看地应用了这个定义,在CSS禅意花苑(CSS Zen Garden)上递交了名为”双双”(Gemination)的著作:

(图示:Egor Kloos的CSS禅意花苑著作(“双双”)在规范访问器和IE6中的展现比照)
他是如何保证的?下面是略加改动的示例编码:
body { margin: 0; text-align: center; background: #600 none; } body[id=css-zen-garden] { margin: 100px 0 0; padding: 0; text-align: center; background: transparent url(squidback.gif); }
差别很显著,而且十分好看地表明了渐进提高怎样运用在CSS中。
相近地,Andy Clarke的站点上也是有些有关IE6的小东西。根据应用IE的滤镜和添加1些标准注解,Andy取得成功地除去了站点上的全部色调,并出示了1些可更换的照片,这组成了1个真正的“低保真”体验。

(图示:Andy Clark的站点在规范访问器和IE6上的比照)
上面的照片灰色技术性是这样的:在标准注解加上的对于IE6(及其下列)的款式表格中,加上下列申明:
img { filter: gray; }
虽然上面这两个事例将会包括了过量平常工作中中的应用不到的技能,但它们十分棒地用客观事实表明了1个定义:怎样在实践活动中运用CSS渐进提高。 总结
正如大家探讨过的,有多种多样方法能够将CSS渐进提高运用到站点上。最简易也将会是最好是的1种方法是,机构好款式表并用心考虑到怎样将款式表链入文本文档。1旦了解了标准注解,解决IE的特殊难题也将是易如反掌的事。假如对怎样采用挑选符和应用它们的情景不在话下,还能在CSS中进行更多小粒度的调剂。