Strangeswitcher 医生，或者：我如何学会停止编写脚本，拥抱 CSS

不要使用 JavaScript！不要使用 PHP！你完全可以用 CSS 来制作一个样式切换器！

“好吧，我去过一次世界博览会、一次野餐和一次牛仔竞技表演，这是我在网站上读到的最愚蠢的东西。你确定你拿到了今天的代码吗？”

样式切换，即用户通过选择页面上的链接来切换到备用样式表，以帮助提高可访问性，或者仅仅是为了炫耀，这并不是什么新鲜事。

实现这一目标有两种常用技术——第一种是使用后端脚本语言，例如通过附加不同的 CSS 文件来重新加载页面，第二种是使用 JavaScript 动态切换 CSS 样式。

Strangeswitcher 医生是一种更新鲜、更快、有点有趣、有点可疑，而且有点懒惰的方法。它的方法是抛弃脚本，只使用一些简单的 CSS。

没错。理论上，你可以用 CSS 全部搞定。至于你是否应该这样做，那是另一回事。而且我们会看到，在实践中，我们可能最终还是需要一些脚本的帮助，但这仍然是一个有趣的小花样。

目标练习

诀窍在于使用 :target 伪类，它可以用来为目标锚点设置样式。

假设我们有一些 HTML 代码，看起来像这样


<ul>
	<li><a href="#strangelove">Dr. Strangelove</a></li>
	<li><a href="#mandrake">Lionel Mandrake</a></li>
	<li><a href="#muffley">Merkin Muffley</a></li>
</ul>

<!-- a whole load of content -->

<h2 id=\"strangelove\">Dr. Strangelove</h2>
<!-- more content -->

<h2 id=\"mandrake\">Lionel Mandrake</h2>
<!-- even more content -->

<h2 id=\"muffley\">Merkin Muffley</h2>
<!-- yet more content -->

现在，当你选择一个链接时，页面将跳转到具有相应 ID 的元素。这是基本操作。

现在尝试应用此 CSS


h2:target { background: orange }

在更现代的浏览器中（即非 Internet Explorer 的浏览器），页面不仅会跳转到所需的标题，该标题还会通过 CSS 高亮显示。试试看。它很酷。

一个大页面锚点

现在，为了构建样式切换器，我们将要把**整个页面**变成一个锚点，然后在它被定位时对其进行样式化。

所以我们只需要为打开的 body 标签应用一个 ID……


<body id=\"strangelove_style\">
	<!-- all of your content -->
</body>

……然后，在页面内的某个地方，你会想要链接来激活样式切换器。


<ul>
	<li><a href=\"#strangelove_style\">Switch to alternative style</a></li>
	<li><a href=\"#\">Switch to default style</a></li>
</ul>

现在只需要在你的 CSS 中指定备用样式做什么。


#strangelove_style:target { font-size: 1.5em; }

#strangelove_style:target h2 { background: orange; }

所以现在，当选择“切换到备用样式”链接时，上述样式将被应用于页面。当选择“切换到默认样式”链接时，这些样式将被切换回来。神奇。

因为样式名称会成为 URL 的一部分（因为它被“#”符号附加了），所以首选样式可以被电子邮件、即时消息或书签保存，而无需 cookies。你可以通过将 body 的内容包装在具有不同 ID 的 div 元素中来应用多个备用样式。

这确实是一个非常简单的概念。它是一个巧妙有效的概念。

重新开始编写脚本……

最明显缺点是它在 Internet Explorer 中不起作用，考虑到 :target 伪类是 CSS 3 的一部分，这倒是情有可原。但这并不意味着它完全不实用。你仍然可以用 JavaScript 来“修补”这个缺陷，例如使用Suckerfish :target，这显然又依赖于脚本，但只有 21 行代码。

事实上，如果你愿意，你可以用任意多的 JavaScript 将功能扩展到你想要的任何程度，包括 cookies、铃铛和哨子。我个人喜欢精简的代码。

免责声明

为了避免一些批评，最好提出几点简要说明。

这只是**一种选择**，它相对于其他方法既有好处也有缺点。你可以在A List Apart 上阅读更多关于其他客户端和服务器端选项的信息。
这意味着备用样式表将无法通过浏览器界面工作（因为它们没有通过链接元素区分）。
显然，一次只能选择一个目标，所以如果你依赖页面锚点，这就行不通了。
单独使用时，你无法在不丢失所选备用样式的情况下浏览网站，因为目标会丢失。但与任何其他差异一样，这可以通过一些巧妙的 JavaScript 来修复，例如动态地将“#whatever_style”附加到链接上。
样式切换器通常不应作为相对字体大小（或任何其他东西）的“辅助”可访问性选项。不要指望人们知道（或关心）如何使用你的网站。用户更熟悉他们的浏览器界面，而不是你的网站。

最后，作者想声明，他并不是 JavaScript 的仇敌，这篇文章的标题**只是为了好玩**。