来看看：CSS款式表渐进加强的使用浏览器,计算机,打印机,开发者,设计者

深爱那片海 发表于 2015-1-16 00:04:59

来看看：CSS款式表渐进加强的使用

每个声明内只能有一个属性，如果属性值中含有空格用双引号括起来例，在一个声明块内可以有多个声明，每个声明用分号隔开。
原文：ProgressiveEnhancementwithCSS
AaronGustafson

有多种体例能够将渐进加强融进到层叠款式表（CascadingStyleSheets,简称CSS）的事情中，本文将会商个中对照乐成的一些，并思索接纳别的体例来慢慢加强你的站点。
款式表的构造

怎样在文档中引进款式表，良多Web计划者和开辟者并没有想太多，但这实际上是一门艺术。利用准确的办法，能够当即取得渐进加强的良多优点。
利用多个款式表

对款式举行稍许拆分能够带来良多优点。不言而喻，凌驾1500行的款式表是有点难以保护的，将其拆分红多个款式表，能够改善事情流程（并节俭你的精神）。另有一个优点很少说起：有助于在方针前言范例（译注：指盘算机、打印机、电视、手机等各类前言范例）上猎取更分歧的出现效果。
main.css文件包括了站点的一切款式划定规矩，思索将其拆分红包括版式、结构和色彩的自力款式表，响应地定名为：type.css,layout.css,color.css.

（图示：怎样将单个款式表拆分红多个相干的款式表）
一旦完成了下面的分别，就能够利用一点奇妙的小手腕来给过期的扫瞄器（好比IE5/Mac）和良多对CSS结构缺少无力撑持的扫瞄器主动供应“低保真”的体验。怎样做呢？这完整取决你怎样引进文件。假定经由过程link元从来引进main.css:
<linkrel="stylesheet"type="text/css"href="main.css"/>起首，将下面一行援用拆分红三个相干的款式表：
<linkrel="stylesheet"type="text/css"href="type.css"/><linkrel="stylesheet"type="text/css"href="layout.css"/><linkrel="stylesheet"type="text/css"href="color.css"/>在已往，良多开辟者将media的值设为”screen”或”projection”,以使得结构款式在Netscape4.x上完全生效（译注：Netscape4.x不撑持浮动和定位等庞大结构）。但是，有更好的办理办法。在具体解说这个办法前，我们先来看看可选前言范例（AlternateMediaTypes）。
可选前言范例

渐进加强次要存眷内容，我们要将“加强”的体验带到一切撑持内容显现的设备上。因而必要思索扫瞄器以外的设备，好比打印和挪动设备就很主要。
糟地是，挪动设备市场仍旧支离破碎并且不成熟（不要无邪地以为一切手持扫瞄器城市衬着方针为“screen”的前言范例款式）。了局，用渐进加强的体例来处置一切前言的细节会商，假如不写成一本书的话，也得用上很多多少篇幅。但是请别懊丧：在挪动天下里，差别正入手下手一致起来，而且一些十分伶俐的人正入手下手将资本放在一同以匡助我们开辟。不外，为了勤俭工夫和节俭精神，我们将会合于打印设备上。
一般，我们必要利用另外一个link元从来增加打印款式：
<linkrel="stylesheet"type="text/css"media="print"href="print.css"/>依照常规，下面这个款式表包括一切打印相干的划定规矩，包含版式和色彩划定规矩。出格是版式，款式表中的划定规矩年夜部分极可能拷贝自main.css.也就是说，这形成了良多反复代码。
能够看出从结构款式中拆分出书式和色彩款式的优点了：在打印款式表中，我们不再必要那些反复的划定规矩了。除此以外，可使用另外一个构造上的小技能来改善站点的合用性，和针对有成绩的扫瞄器埋没某些结构款式。
回忆下我们的款式表，思索以下代码：
<linkrel="stylesheet"type="text/css"href="type.css"/><linkrel="stylesheet"type="text/css"href="layout.css"/><linkrel="stylesheet"type="text/css"href="color.css"/>我们没有声明前言范例，因而Netscape4.x会读取这三个文件中的一切款式。可是，Netscape扫瞄器能了解最基础的CSS,我们能够使用这一点。经由过程将layout.css包括的一切款式挪动到新的款式表——得当的取名为screen.css,我们能够进一步构造款式。最初，将layout.css中的内容更新为引进screen.css,如许，NS4.x和它的本家扫瞄器们就再也伶俐不起来了（由于它们不睬解@import指令）。（译注：作者这里说的是将一切layout.css中的内容都挪动到screen.css中，然后在layout.css中经由过程@import引进screen.css.我以为最好的做法应当是在layout.css中保存最基础的NS4.x也能够了解的结构款式，而将别的初级结构款式挪动到screen.css中。）
@importscreen.css;另有一些改善的余地——应当声明款式表所针对的前言，我们经由过程给@import声明增加前言范例来做到这点：
@importscreen.cssscreen;成绩是IE7及以下扫瞄器不睬解这类语法从而疏忽下面的款式表，假如想给这些扫瞄器供应下面的款式（这是常常希冀的），能够很复杂地利用前提正文来做到，这将鄙人文论述。假如你具有鹰一样平常利锐的眼睛，大概已注重到在款式表称号的双方利用了单引号（’）来替换双引号（”），这个小技能可让IE5/Mac疏忽款式表。IE5/Mac的CSS结构才能十分弱（出格是对浮动和定位的撑持），对它们埋没结构划定规矩是完整可承受的。究竟，它们仍旧能猎取色彩和版式信息，这在某些情形下已够用了。
接纳不异的手艺，能够导进print.css文件（和你料想的一样，包括打印结构的特定例则）。
@importscreen.cssscreen;@importprint.cssprint;如今我们不但具有了构造得很大度的款式表，我们还具有了一套慢慢加强站点计划的无效办法。

（图示：多个款式表间的互相干系和将它们使用到文档的办法）
如今会商值一万万美圆的成绩：怎样处置IE6？

对良多伴计来讲，InternetExplorer6是一个新的Netscape4——一切人都想让它滚开。
我们略过对IE6成绩的三言两语。IE6的成绩已有了很好的文档总结，而且，厚道说，办理起来也并非那末坚苦。并且，IE7的采取相称疾速（出格是在消耗市场），同时IE8也已在公测了。这意味着某一天，我们能够真正地对返老还童的IE6说拜拜。
不论是成心仍是偶然，微软在推出IE5时，为渐进加强供应了一个好工具：前提正文。这些奇妙的逻辑片断（在一切别的扫瞄器中都升级为HTML正文（译注：别的扫瞄器把IE的前提正文了解为地道的HTML正文，不起任何感化））不但同意某些标志代码片断只感化于IE，还同意这些代码片断只感化于IE的特定版本。
作为有Web尺度认识的开辟者，我们一直应当起首在年夜部分现有的兼容尺度的扫瞄器上测试我们的计划，然后再为那些稍作渺小修正就可以回到正轨的扫瞄器供应补钉。每一个人的事情流程都分歧，但我发明最好用一套尺度的文件来入手下手每一个项目。我的基础套件包含以下文件：

[*]type.css
[*]layout.css
[*]screen.css
[*]print.css
[*]color.css
然后，依据项目标需求，增加针对特定扫瞄器的CSS文件来包括那些“渺小修正”。在如今的年夜部分项目中，这些文件是ie7.css和ie6.css.假如项目请求撑持IE6之前的版本，我也会为其创立响应的文件（好比ie5.5.css等等）。将这些文件放在得当的地位后，我入手下手将款式划定规矩增加到符合的款式表中。
我的CSS测试都是从MozillaFirefox中入手下手，由于我的年夜部分CSS都是用Firefox的CSS编纂侧栏来编写的。一旦在Firefox中完成了页面计划，我立即开启别的扫瞄器来测试检察。年夜部分体现很完善，由于他们恪守了Web尺度。接着翻开IE7来测试。年夜部分情形下也没几成绩，偶然必要触发hasLayout大概修改另外一些结构上的小毛病。我未将这些修改补钉写进到基础套件的款式表文件中，而是增加到ie7.css中，而且在文档的HEAD中经由过程前提正文来引进：
下面的前提正文使得IE7及其以下版本（译注：lte是lessthanorequal的缩写）能辨认引进的款式。因而，当用IE7扫瞄页面时，将猎取这些补钉。可是假如用的是新版本的IE——大概已修复这些成绩，好比IE8丢弃了hasLayout从而不再有这些成绩——将疏忽这些款式。另外一方面，利用IE6能够猎取到这些款式。这是很好的，由于在IE7中的衬着毛病常常也存在于IE6中。上文中已说起，IE7及其以下版本没法了解带前言范例的@import，经由过程这类体例引进screen.css对IE7及其以下版本是有效的。因而，还必要在ie7.css文件的顶部增加不带前言范例的@import语句来引进screen.css.
一旦为IE7增加完补钉，我会翻开IE6,看看是不是必要顺手打些补钉。假如的确必要，我会给文档增加另外一个前提正文，引进ie6.css:
接着，复杂地将IE6必要的补钉增加到对应的款式表中，这些款式表将被IE7疏忽，可是会仍旧往下影响到IE5.5等版本。
经由过程这类体例利用前提正文，能够很轻松的办理项目中的方针扫瞄器，并使得CSS补钉文件坚持自力自在。
别的思索

CSS渐进加强其实不范围于怎样将款式表与文档联系关系起来，还能够使用在怎样编写CSS上。
比方，思索天生的内容（译注：好比用:after伪类天生的内容）。并不是一切扫瞄器都撑持，但这是一个很好的办法：能够用来增加一些分外的计划或文本。关于页面的可用性来讲，这不是必需的，但这能供应一些视觉或别的方面上的加强。
拿复杂的接洽表单来举个例子：

（图示：此例中利用的HTML表单（代码将鄙人面给出））
当编写下面的HTML代码时，极可能会天然地将冒号（:）写在label元素里。为何要如许做？真的给label元素增加了内容吗？并没有。如许做的目标是给用户供应分外的视觉线索，对label元从来说，这是过剩的，应该往失落：
<formid="contact-form"action="#"method="post"><fieldset><legend>ContactUs</legend><p>Sendusamessage.Allfieldsarerequired.</p><ol><li><labelfor="contact-name">Name</label><inputtype="text"id="contact-name"name="name"/></li><li><labelfor="contact-email">Email</label><inputtype="text"id="contact-email"name="email"/></li><li><labelfor="contact-message">Message</label><textareaid="contact-message"name="message"rows="4"

只想知道 发表于 2015-1-16 09:50:34