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 to apply a CSS class to another element when an object is hovered?

    How can I split code-blocks into a list?

    How to keep your current screen position while dynamically showing surrounding elements with jquery / css

    Element has greater px width than device viewport but still shows completely (mobile web app)

    How to use px and % in the same layout like this

    Show nav once the nav has been hidden

    How to fix css and jQuery slide show? [closed]

    How to center vertical inside header?

    how to 'split' a css attribute/value using Jquery

    How to display 3 buttons on the same line in css

    How to add a color overlay to a background image?

    How to vertically center dynamically 1 or 2 lines of text with CSS? [duplicate]

    How to apply css to only one level of list items (not to child elements)

    How to include css font in Firefox and internet explorer?

    CSS How to attach input box to bottom of divider window

    How to find the second value with same CSS class using Selenium webdriver

    How to tell the code to choose between two variables and make them equal?

    How to stop CSS element style from getting into my class style?

    CSS - How to center Absolute Position div with max width in IE9,10,11

    How to scroll content automatically using CSS? [closed]

    how to center a div in a td cell and a link inside of it ?both vertically and horizontally?

    How do I add box shadows when the parent div has a background image?

    how to center a form using css?

    How to make text on the same line different font without using extra divs?

    How do front end devs bundle and minify files?

    How do you style TextFlow with CSS Styles in Flex 4.5.1?

    How to use a background image in Webfolio WordPress theme without breaking CSS header?

    How to use CSS to vertically center a form in a div

    How to apply different width stored in PHP to 3 identical DIVs (using same CSS)

    How can I display an image as a menu item once the user has scrolled down the page 150px?