如何使用 Stylish 或 Greasemonkey 替换 @media（最大宽度）？

Question

我在桌面浏览器上查看 this website 时遇到问题。它们具有响应式/流畅的设计，当浏览器宽度小于 990 像素时，会显示移动菜单按钮而不是水平导航栏。

由于我使用的是 125% 缩放的 Firefox，我的桌面浏览器的有效宽度小于 990 像素。

我查看了 CSS 代码并找到了该行。如何使用 Stylish、Greasemonkey 或其他方式自动将“990px​​”的最大宽度值替换为“800px”？

@media (max-width:990px) { ... }

我在 Windows 7 上使用 Firefox 23。

编辑：目前基于 cmets，我需要用我自己的自定义 CSS 文件替换他们的 CSS 文件。那么如何使用 Greasemonkey 替换 href（这似乎是一个非静态文件名）？

<link rel="stylesheet" type="text/css" href="http://d1h60c43tcq0zx.cloudfront.net/static/css/versioned/global-cdn-ac243f54ab6bb9637fcc5fa32f8b514d.css"></link>

Answer 1

一种方法是：

1. 使用href 中文本的常量部分查找有问题的<link>。
2. 记录该链接的href。
3. 删除该链接。
4. 使用GM_xmlhttpRequest() 再次获取文件（希望它被缓存）。
5. 使用正则表达式修复获取的 CSS。
6. 使用GM_addStyle() 添加固定的CSS。

这里是一个完整的 Greasemonkey 脚本，它说明了这个过程：

// ==UserScript==
// @name     _Replace bad CSS link
// @include  http://www.fleaflicker.com/nfl/*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
// @grant    GM_addStyle
// @grant    GM_xmlhttpRequest
// ==/UserScript==

var badCSS  = $("link[href*='global-cdn-']");
var badURL  = badCSS.attr ("href");

badCSS.remove ();

GM_xmlhttpRequest ( {
    method:     "GET",
    url:        badURL,
    onload:     function (rsp){
        var betterCSS   = rsp.responseText.replace (
            /max-width:990px/g, "max-width:500px"
        );

        GM_addStyle (betterCSS);
    }
} );

---

注意事项：

1. 为了更快/更好的性能，如果 CSS 不经常更改，请手动编辑它并将其保存在安装脚本的同一文件夹中。然后使用GM getResourceText() 来获取CSS，而不是GM_xmlhttpRequest()。
2. 如果页面“闪烁是一个烦恼，由于启动延迟，这是一个完全不同的问题，可能可以通过@run-at document-start 和突变观察者解决。

Answer 2

如果您将 Stylish 添加到 Firefox，您可以为特定域添加样式。我通常发现我需要将!important 包含在许多样式中才能使它们被识别。

Firefox 的另一个选项是直接编辑 userContent.css 文件。你可以很容易地谷歌“userContent.css firefox windows7”来找到它的位置。 （我使用的是 Mac。）