如何帮助一小部分游客而不给绝大多数游客带来不便。
由于我的网站是一个博客（而不是一个获取演出门票之类的平台），您可能认为没有访客需要或想要打印任何页面。然而，我偶尔会听到有人打印，其中一位还要求我提供打印专用的 CSS ，以使效果更好。我照做了，但我知道这也意味着我让其他不打印页面的访客下载他们既不需要也不想要的 CSS。
从昨天起，这不再是问题。
我之前在这里说过，我不会让人工智能写我的帖子，但当我需要代码方面的帮助时，我会利用人工智能。这篇文章是关于后一种情况的。
我时不时会思考如何更好地处理网站的 CSS 交付。例如，我练习了一种我称之为“某种范围样式”的方法，即将 CSS 拆分成多个文件，只在某些类型的页面上加载。然而，这对打印 CSS 毫无帮助。虽然我将其链接标记为media="print" ——这会使浏览器将其视为低优先级下载，但我希望找到一种方法，只有当少数用户真正尝试打印网站页面时才有条件地加载它。所以，昨天我问了ChatGPT ：
有没有办法通过 JavaScript 或其他代码，让浏览器仅在用户实际打印页面时才下载网站专用的 CSS 文件？这样做的目的显然是减少网站必须提供的 CSS 文件数量，尤其是在实际打印网页的用户比例相对较小的情况下。
这引发了一场“讨论”，尽管人工智能的反应包含了一些法学硕士 (LLM)所臭名昭著的幻觉行为，但它成功地给了我满足我需求的代码。
代码使用matchMedia()方法（并且为了最大程度地提高兼容性，它还作用于beforeprint事件）来检测来自浏览器的活动打印请求。只有当此类请求发生时，代码才会加载打印 CSS；因此，现在只有真正从网站打印内容的用户才会下载额外的样式，从而使他们的打印输出看起来更像“打印版”，而不是“网页版”。
有了这个 AI 创建的 JavaScript 代码提交，我将其添加到适合我的Hugo网站用途的部分模板中。1 （对于那些选择禁用 JavaScript 的人来说，最后的noscript部分无论如何都会提供打印 CSS，就像其他人以前得到它的方式一样。）
< script > function loadPrintStylesheet () { if ( document . getElementById ( 'print-css' )) return ; // Prevent multiple loads const link = document . createElement ( 'link' ); link . rel = 'stylesheet' ; link . href = ' ' ; link . type = 'text/css' ; link . media = 'print' ; link . id = 'print-css' ; link . integrity = ' ' ; document . head . appendChild ( link ); } // Use media query listener const mediaQueryList = window . matchMedia ( 'print' ); mediaQueryList . addEventListener ( 'change' , ( mql ) => { if ( mql . matches ) { loadPrintStylesheet (); } }); // Fallback for browsers that fire beforeprint/afterprint window . addEventListener ( 'beforeprint' , loadPrintStylesheet ); </ script > < noscript > < link rel = "stylesheet" href = " " type = "text/css" media = "print" integrity = " " > </ noscript >
这在 Chrome 和 Safari 以及基于其引擎（分别为 Blink 和 WebKit）的浏览器上都能正常工作，但我发现基于 Gecko 的浏览器（例如 Firefox）有一个奇怪之处。虽然其他浏览器会在各自的“打印预览”窗口弹出时加载打印 CSS，但如果启用了“禁用缓存”，基于 Gecko 的浏览器将不会加载它——使用浏览器的开发工具时经常会出现这种情况。在这种特定情况下，您最终必须取消“打印预览”窗口，然后再次加载才能看到所需的效果。相比之下，其他浏览器即使启用了“禁用缓存”，也能正确加载打印 CSS。
话虽如此，我们现在讨论的这个故障影响的用户数量甚至比需要我网站打印 CSS 的用户还要少。也就是说，这些用户 (a.) 使用基于 Gecko 的浏览器， (b.) 想要从我的网站打印，并且(c.) 在访问我的网站时启用了“禁用缓存”。即使对他们来说，关闭并重新加载“打印预览”也能解决问题。
-
我的原文还包含代码，在生产中，该代码使无服务器功能能够为内容安全策略目的提供随机数。↩︎