大 CSS 媒体查询错误

已发表: 2017-05-15

当您周围的每个人都在做您通常认为是错误的事情（或至少不是很理想）时，您是否会感到奇怪，但不知何故，似乎没有人出于某种原因想说什么？看到每个人都对倒霉的观察者表现出最好的印象，这是一种非常奇怪的感觉。这让我想起了那句古老的寓言“皇帝的新装”。

我一直对 CSS 媒体查询有这种感觉。为什么每个人都如此接受一项似乎无法完成工作的技术？为什么我们作为一个社区没有团结起来，以一种真正有意义的方式改进它？为什么我们还没有想出更好的东西？

今天，CSS 媒体查询恰好是响应式网页设计的功能基石。但是，它从来都不是为今天每个人都使用它而设计的，并且证明是在实践中。当我使用平板设备时，我仍然经常偶然发现网站，这些设备起初看起来设计精良，但当你按照他们的步伐进行操作时，它们的外观和感觉却完全不同。

这种响应式网页设计方法存在根本性的问题，我们还没有正确解决，我想成为少数几个声音之一，因为他在这个问题上的赤裸裸而大声疾呼。不过值得庆幸的是，在这个时代，我很高兴因为有这种不同的观点而被烧死的可能性几乎为零。

CSS 媒体查询有什么问题

CSS 媒体查询是为某些东西而设计的，但那不是响应式网页设计。根据我的经验，以下是我在尝试使用它们处理网站时遇到的七 (7) 个大问题：

1.不直观：

“CSS 媒体查询很直观”，从来没有一个网页设计师说过。定义媒体查询的方式非常简单，但并不总是很清楚事情将如何在真实浏览器、真实设备和无数场景中发挥作用。

 @media only screen and (min-width: 320px) and (max-width: 480px) {
    /** CSS 规则放在这里 **/
}

上面的代码适用于 320 到 480 像素之间的视口。但是，当您想要做一些更具体的事情时，它并不完全确定[或直观]，例如当设备是横向操作的平板电脑时应用样式规则。设置一个媒体查询来做到这一点并非不可能，但它绝对不是直观的——或确定的。

2. 限制条件：

CSS 媒体查询是动态的，使您能够在 CSS 中定义条件语句。例如，如果视口在这个和那个之间，那么做另一个。但是，您主要限于考虑视口，并且在现代网页设计中还有更多的条件场景。

标签栏的移动设计指南

假设您正在构建一个渐进式网络应用程序。有时根据操作系统对某些 UI 元素进行不同的样式设置会很有用。例如，iOS 设备通常将标签栏放在底部，而 Android 设备则相反。那么，你究竟如何让它与 CSS 媒体查询一起工作呢？

你不能，因为 CSS 媒体查询没有构建任何可以让你使用的功能。除此之外，您可能需要通过 CSS 进行许多其他自定义，但是当您需要不同程度的简单到高级条件时，媒体查询不是一个选项。

3. 本机不可扩展：

CSS 媒体查询是嵌入到浏览器中的功能。这意味着它本身不可扩展。换句话说，您不能通过 CSS 接口原生地向 CSS 媒体查询添加额外和增强的功能。

即使新的 CSS 媒体查询功能被 [长期受苦的] 网络标准流程批准，由于无处不在，这些功能仍然需要一段时间才能使用。此外，并非添加的每个功能都可能对您有用，因此如果您没有得到想要的东西，您需要找出其他方法来解决您的特定挑战。

当然，有一种扩展 CSS 的方法，但你必须非常非常了解 JavaScript，而且对于大多数网页设计师来说，这不是一个实用的过程。

4.不适合改装：

有些人可能会觉得这难以置信，但在移动设备出现之前，实际上已经有很多网站，而且没有一个适合移动设备。因此，这些桌面时代的网站需要升级。

不幸的是，CSS 媒体查询对于这项任务来说并不是一个很好的选择。由于这些网站是在移动设备相关之前构建的，因此其中许多网站的设计元素不适合响应式网页设计，例如侧边栏、基于表格的布局、选项卡式内容等。此外，这些网站中有相当一部分是建立在 WordPress、Drupal、Magento 等内容管理系统 (CMS) 之上，并且从后端有效地集成 CSS 媒体查询 [前端] 非常难以协调，几乎不可能协调。

我不得不改造由 Magento Enterprise、WordPress 和使用基于 Coldfusion 的自定义 CMS 提供支持的网站，并且所有项目都完全不可能使用 CSS 媒体查询 [这是我所有客户在使用我们的替代方案之前尝试过的方法]。

5. 代码效率不高：

使用 CSS 媒体查询使网页具有响应性需要大量的代码乘法。由于这些指令的工作方式[与您的断点一起]，您必须在每个媒体查询块中定义单独的样式规则。

 部分{宽度：960px;}

/* 肖像 */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
    部分{宽度：100%}
}
/* 景观 */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: Landscape) {
    部分{宽度：100%;}
}

在编写上面的代码时，我的初衷是让我的页面上的<section>元素在所有移动设备中都流畅[宽度为 100%]。但是，由于我没有本机设备检测功能，我必须在每个面向移动设备的 CSS 媒体查询块中妥协并定义样式规则，以确保新属性适用于所有相关场景。

这意味着样式表级联的功能效率和Do-not-Repeat-Yourself的良好开发原则必须退居二线。

6. 增加工作流程的复杂性：

CSS 媒体查询只处理响应式网页设计的一个非常具体的方面，几乎完全专注于布局调整大小。因此，要做更多的事情，你必须依靠 JavaScript 来弥补差异。这引入了对代码和工具的额外学习要求。

此外，它 [媒体查询] 处理断点的非确定方式意味着您必须花费更多时间 [和金钱] 在众多虚拟和/或物理设备中测试您的网页，以确保事情按照您最初的预期方式工作. 而且，当您对布局进行任何重大更改时，您需要再次重新测试所有内容。

通过使用 CSS 媒体查询的简单而有目的的操作，您可以显着增加构建现代网页所需的步骤数量。

7. 性能恶化：

由于 CSS 媒体查询的工作方式，您最终将需要比其他方式更多的 CSS 代码来使您的网站响应/移动友好。根据 HTTPArchive.org 的数据，CSS 文件大小在过去五年中增加了 114%。 HTML 文件大小的增长在同一时期达到了大约 53% 的峰值。

这种特殊情况对您的网站有性能影响，因为在实施 CSS 媒体查询 [在响应式网页设计环境中] 后它肯定会比以往任何时候都慢，尤其是对于使用不太理想的移动宽带网络的移动设备。

而且，除了文件大小增加的问题之外，CSS 媒体查询中没有任何内部机制可以实际提高网页的性能。为此，您将不得不利用高级 JavaScript 技术来启用这些增强功能。

为什么我们还在使用这个？

如果我问你有多少百分比的网站在使用 CSS 媒体查询，你的答案是什么？多年来，网页设计师不得不承受所有压力，你会认为我们现在可能已经克服了采用的困难，但你错了。

在整个网络中使用 CSS 媒体查询的网站的百分比约为 0.2%。相比之下，使用 jQuery 的网站比例为 18%。这意味着您遇到由 jQuery 提供支持的网站的可能性是响应式网站的 90 倍[不包括那些碰巧两者兼有的网站]。

为什么基于某些人认为复杂且多余的核心技术 [JavaScript] 的工具包会远远领先于看似不那么复杂 [CSS] 并且旨在解决可以说更重要的问题 [移动友好性] 的工具包? 显然，这里有一些严重的错误阻碍了采用，需要解决。

CSS 媒体查询发现它可以进入 Web 浏览器来处理特定的挑战，但后来它被起草为将响应式 Web 设计的全部重量都扛在肩上。这有点像为三年级的录音机独奏会练习，只是被神奇地运送到皇家阿尔伯特音乐厅，以演奏亨德尔的弥赛亚的长号独奏；不公平！

面对现代网页设计的所有挑战，我们仍然从事媒体查询业务是非常令人惊讶的。除了一些新领域的新问题（如渐进式 Web 应用程序设计）之外，它还不足以处理一些重要的遗留问题。因此，我认为是时候想出一个替代方案了。但是，那究竟是什么？

解决办法是什么？

这一切的解决方案非常简单：JavaScript。现在，在你拿起那个干草叉之前，给我一个解释的机会。

JavaScript 是 HTML5 三位一体的唯一组件，其中可扩展性不是脏话。你不能用更多的 HTML 来扩展 HTML 标记，而且你肯定不能用 CSS 原生地扩展 CSS。但是，您可以使用 JavaScript 在本地扩展 JavaScript，甚至可以对 CSS 做同样的事情。

W3C 的 Web 标准课程中广泛讨论了使用 JavaScript 操作 CSS。 document.stylesheets DOM 接口使我们能够访问应用于网页的样式表，包括使用 HTML 的<link>标记引用的所有外部样式表。这不是一件容易的事，但它是可能的。

所以我应该扩展最初的答案：它不仅仅是 JavaScript，它是JavaScript 辅助的 CSS 。 JavaScript 是一个很棒的平台，其功能令人难以置信，但 CSS 是大多数网页设计师工作的地方。如果我们能以某种方式在这两者之间建立某种功能桥梁，让网页设计师可以编写 CSS 规则集来利用 JavaScript 功能，那将在某种程度上改变网页设计的游戏规则。

给我看一些代码

在过去两年左右的时间里，我一直在研究一种新的 JavaScript 辅助 CSS 工具包，称为 rKit。整个想法是构建一个对设计师友好的工具，不仅可以取代 CSS 媒体查询以进行响应式网页设计，还可以解决网页设计师/开发人员在构建现代网站和 web 应用程序时面临的一些已知 [和未知] 挑战。

这个概念有很多，但这里有一个快速的 CSS 代码片段来解释：

 #my-element[rk="if @viewport.width 在 320 和 480 之间"]{背景颜色：#0000ff;}

使用 rKit，CSS 规则看起来像修改后的属性值选择器。然后，您可以在 value 部分中定义表达式。此表达式的语法设计得简单直观。

注意： rk是一个常量属性标识符。

上面的代码在功能上等同于下面的 CSS 媒体查询：

 @media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
    #my-element {背景颜色：#0000ff;}
}

但是，您可以使用 rKit 做更多事情。这是另一个简单的例子：

 #my-element[rk="if @self.width 在 320 和 480 之间"]{background-color: #00ff00;}

通过简单地将实体引用从@viewport为@self ，我们基本上设置了通常称为元素查询的内容。所以现在发生的情况是，当#my-element的宽度在 320 到 480 像素之间时，将应用给定的声明 [ background-color: #00ff00 ]。

您还可以使用类而不是纯声明：

 #my-element[rk="if @self.width 介于 320 和 480 之间，则 addClass(c_mobile_320)"]{}
.c_mobile_320 {背景颜色：#00ff00;}

不过，这只是冰山一角。使用 rKit，你可以做一些非常棒的事情，比如事件管理、变异观察、数量查询、路由、数据绑定 [最多 7 路] 和许多其他很酷的东西，所有这些都使用纯 CSS 代码，而无需编写一行 JavaScript。

rKit 在发布时将是免费和开源的。而且，它还将运行一个特殊的性能包，您可以以保证零渲染阻塞的方式安装它，因此网页加载就像轨道上的火箭一样。

把它放在一起花了很长时间，但它很快就会出现[肯定在 Godot 之前]，我真的很想看看网页设计师 [和开发人员] 能够用它做什么。

结论

我希望你不会因为这篇文章而认为我在抨击 CSS 媒体查询。我不是。这就像在水果沙拉中抨击番茄一样。就像我之前说的，CSS 媒体查询从来都不是为响应式网页设计而设计的。它是出于权宜之计而被选中的，我们都犯了一个错误，试图用它来解决所有问题。

可悲的是，作为一个网络社区，我们从来没有真正通过重大改进来纠正最初的错误，或者提出更好的替代方案。但唉，表演必须继续，网站必须建立，进步必须占上风。是时候做出改变了。

rKit 只是一种选择和一种答案。这不是第一个，也绝对不会是最后一个。但是，至少这是朝着正确方向迈出的正确一步。有机会解决过去的一些问题，然后迭代解决现在和未来的问题。看看它如何与现状相匹配会很有趣。

总而言之，犯错本身并不是目的；这应该是一次学习经历。运气好的话，我们下次将学习如何使用正确的工具完成正确的工作。我的意思是，仅仅因为您可以在铺好的道路上骑自行车并不意味着您应该将自行车带到纽伯格林。带上保时捷！