带Media Query的CSS @import文件未匹配仍被浏览器加载问题

当使用CSS的@import规则引入样式文件时，即便附加的媒体查询与当前环境不匹配，该样式文件仍会被浏览器下载加载。

举个例子：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta name="viewport" content="width=device-width,initial-scale=1">
</head>

<body>
  <button>Click me</button>
  <style>
    @import url('styles.css') print;
  </style>
</body>

</html>

这段代码里，即便当前环境不满足print媒体查询的条件，所有浏览器都会加载styles.css文件。

内容的提问来源于stack exchange，提问作者Rogier de Ruijter