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


Tags: css,greasemonkey,stylish

Problem :

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.

    CSS Howto..

    How do I prevent sliced images in the CSS background from sitting on each other?

    How to make Visual Studio stop “compiling” .js and .css files

    how to remove element.style in css

    How to apply CSS style for the current page link

    How to achieve a silk-screen effect (a dotted shadowy effect) on an image with javascript/jquery?

    How can I create a color with values for green, blue, orange, and gold only?

    How to change text in the same area when hover over images with CSS?

    How to scale and center text vertically in a fluid layout? (using CSS)

    How to change the selection tip of custom cursor using css

    How does chrome extend the search window beyond the browser window

    How to reduce CSS animation on mouse over?

    How to debug CSS in Android native browser?

    h1:hover is responding on the whole width, unable to link h1 and don't know how to target things individually

    How to make a horizontal list start in the center of the page?

    What is the correct css for the list of results to show correctly in this situation? [closed]

    How to vertically center div in floated div?

    How to get the last image viewed to stick instead of reverting to the default in a pure CSS image gallery?

    how to deal with repeated letters in a javascript hangman game

    Confusion as to how clearfix actually works

    How to place an HTML element over another using CSS

    How to do CSS for a grid of images

    Responsive Design - how to get my image on left to take up whole screen

    how to make css curve box with gradient & shadow

    How do you make a sticky nav bar change colour when you scroll to a desired div?

    How to create a variable from CSS class attribute?

    How to make a word bold in a text mentioned in bootstrap tooltip CSS/Jquery

    How to display UpdateProgress at the center of a grid view with CSS?

    How to position the sharing buttons on upper-left corner of the game and not the view?

    How to make css flex box row auto resizing horizontally with image

    How to customize devise login and signup forms created using the simple_form gem?