How to replace @media (max-width) using Stylish or

问题:

I'm having a problem viewing this website on my desktop browser. They have a responsive/fluid design that shows a mobile menu button instead of a horizontal nav-bar when the browser width is less than 990px.

Since I'm using Firefox with 125% zoom, my desktop browser is less than 990px effective width.

I looked into the CSS code and found the line. How can I use Stylish, Greasemonkey, or some other way to automatically replace the max-width value of "990px" with "800px"?

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

I'm using Firefox 23 on Windows 7.

Edit: Based on comments so far, I need to replace their CSS file with my own custom CSS file. So how do I use Greasemonkey to replace the href (which appears to be a non-static filename)?

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

回答1:

One way to do this is to:

1. Find the offending <link> using the constant part of the text in the href.
2. Record that link's href.
3. Delete that link.
4. Use GM_xmlhttpRequest() to fetch the file again (hopefully it's cached).
5. Use regex to fix the fetched CSS.
6. Use GM_addStyle() to add the fixed CSS.

Here's a complete Greasemonkey script that illustrates the process:

// ==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);
    }
} );

---

Notes:

1. For faster/better performance, if the CSS does not change often, hand edit it and save it in the same folder that you install your script from. Then use GM getResourceText() to get the CSS, instead of GM_xmlhttpRequest().
2. If page "flicker is an annoyance, due to start-up delays, that is a whole other problem, that can probably be solved with @run-at document-start and mutation observers.

回答2:

If you add Stylish to Firefox, you can add styles for a specific domain. I usually find that I need to include !important with many styles to get them recognised.

Another option for Firefox is to edit the userContent.css file directly. You can easily google "userContent.css firefox windows7" to find its location. (I use a Mac.)