cssgreasemonkeytampermonkeystylish

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

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>
Solution

  • 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.