| « | Mar.2026 | » | | 日 | 一 | 二 | 三 | 四 | 五 | 六 | | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | | | | | |
|
公告 |
| 暂无公告... |
| Blog信息 |
|
blog名称:VeryTag
日志总数:15
评论数量:8
留言数量:0
访问次数:85652
建立时间:2005年1月22日 |
| |
|
 侵入Body转换器
电脑与网络
清风细雨 发表于 2005/1/22 13:15:50 |
| Invasion of the Body Switchers侵入Body转换器
作 者：Andy Clarke 和 James Edwards原文地址：发表在 A List Apart http://www.alistapart.com/articles/bodyswitchers/发表日期：2004年11月19日翻 译：Breeze翻译日期：2004年12月11日
［注意］无论是否涉及商业，您可以任意转载和引用这篇文章，可以删除“翻译：Breeze”字样，但请别修改。本文首次发布在ChinaUI.com论坛的“技术交流”板块。
从2001年首次发布直到现在，Paul Sowden的样式表切换器已经被成千上万的设计和开发人员下载，并且有了像鱼卵一样多的客户端和服务器端修改版本。
在众多的工程上使用了Paul的脚本后，我开始怀疑样式转换器有多少可能被延伸给使用者甚至带来更多的选择或者亲和力提高，因此，我求助于我的好朋友Brothercake来让我的想法成为一个事实，“侵入Body转换器”这篇文章就这样产生了。
回顾原始的样式转换器
执行起来捕风捉影地简单，Paul的脚本除了灾祸外什么都没有。
触发开关动作的锚普遍地呈现于标记中，如果JavaScript不可用的话将会出现问题，并且和那普遍使用的“#”一样是一个不必要的烦恼。
<a href="#" onclick="setActiveStyleSheet('default');return false;">Switcher</a>
原始的解决方案同样依赖于多重的样式表，利用<link/>元素和"stylesheet" / "alternate stylesheet"语义－这样增加了额外的服务器响应，但是更重要的是，它没有考虑到被选择的不同媒体样式是独立于其他的。
如果我们不使用任何物理标记而只用一份JavaScript和CSS文件来实现它，这难道不是在幻想吗？如果我们能独立的以媒体类型作为目标，依据选择的参数来为用户提供一个普通的UI，而且所有参数都保存在cookie中直到它被改变，这难道不是更加的荒谬吗？
现在我们做到了，进入我们的Body 转换器。
概念
“侵入Body转换器”这个技术能够无限扩展和操作任何数量的选项和媒体类型，这一切只需要一份JavaScript和CSS文件。原理是为页面的<body>标签添加一个或者更多的唯一的类名（class），然后使用派生选择器来定义样式。
我们的方法要求放弃传统的“stylesheet”和“alternate style-sheet”语义，但这些没有使我们感到烦恼，因为：
1.许多浏览器不执行本地的样式表转换； 2.选出的预备样式表不能够持续。
制造菜单
在我们开始前，让我们先看看最终的结果。
如果你现在下载这些文件，你能像我们一样查阅并且仔细检查他们的每个构成：
范例页面
脚本
样式表
XHTML
首先插入一些空的转换容器，这里我们用一个<div>标签来容纳转换器：
<div id="screen-switcher"></div>
你可以为每个附加的转换器添加一个额外的容器。例如，一个附加的打印样式转换器：
<div id="screen-switcher"></div><div id="print-switcher"></div>
或者甚至是投影样式：
<div id="screen-switcher"></div><div id="print-switcher"></div><div id="projector-switcher"></div>
转换工具被创建并放入这些容器仅当脚本是可用、离开语义的中立和当容器非空的时候。
脚本
脚本的设定很普通。首先创建一个新的转换格式—定义容器的id和标签文本：
var screenSwitcher = new bodySwitcher( 'screen-switcher', 'Screen styles');
然后你可以添加任何数量的类以及他们的标签，然后将它们应用到转换器控制上：
screenSwitcher.defineClass('default','Normal contrast');screenSwitcher.defineClass('high','High contrast');
添加新的媒介类型
为了使用户在没有动人的屏幕展示情况下能在不同的打印样式中有个选择，在脚本中添上了打印选项。
var printSwitcher = new bodySwitcher( 'print-switcher', 'Print styles' );printSwitcher.defineClass( 'default','Default');printSwitcher.defineClass( 'small-sans','Small sans');printSwitcher.defineClass( 'large-serif','Large serif');
额外的媒体类型也能被包含进去，例如手持或者投影设备。
var projectionSwitcher = new bodySwitcher( 'projection-switcher', 'Projection styles' );etc.
var handheldSwitcher = new bodySwitcher( 'handheld-switcher', 'Handheld styles' );etc.
仅有的限制是所有类名必须唯一，即使跨过了不同的媒体类型。
样式表
一个单一的样式表能够包含所有的选项和由用户选择的媒体类型。任何CSS规则可以适用于这个样式表，只需简单的在附加的<body>类名上使用派生选择器，我们已经在前面讨论过了。
屏幕样式范例
@media screen{body {background : #fff;color : #666;}
body.high {color : #000;}
body.highvisibility {background : #000;color : #ff0;}}
打印样式范例
@media print{body {font: 100% "Lucida Sans Unicode",verdana,sans-serif;}
body.small-sans {font: 80% "Lucida Sans Unicode",verdana,sans-serif;}
body.large-serif {font: 120% "Times New Roman",times,serif;}}
如果需要的话另外的媒体类型样式也可以添加。
@media projection {etc.}
@media handheld {etc.}
转换控制花样
转换控制基于具备亲和力、语义的标签并且能依照任何站点的设计来样式化。HTML看起来像是可适合于每个设备。我将让你来决定这些样式。
<form action=""><fieldset><label for="select-screen-switcher"><span>Screen styles</span><select id="select-screen-switcher"><option value="default">Normal contrast</option><option value="high">High contrast</option><option value="highvisibility">High visibility</option></select></label></fieldset></form>
快要结束了
就是它！让我们再看看最终的结果－一个新潮的能够进行不同媒体类型独立转换的样式转换器，并且它为你的网页输出给予了使用者非常棒的控制。
这个原理是无限可扩展的，而且你能更深入的细化它，为字体、颜色、布局或定位提供单独的参数选择。
警告
“侵入Body转换器”在Mac的IE5下无法工作（它被温柔的降级了）。 |
|
|