Как заменить @media (max-width) на стильный или Greasemonkey?

Question

У меня возникли проблемы с просмотром this website на моем настольном браузере. Они имеют гибкую/флюидную конструкцию, которая показывает передвижную кнопку меню вместо горизонтальной навигационной панели, когда ширина браузера меньше 990 пикселей.

Поскольку я использую Firefox с 125-процентным увеличением, мой браузер для рабочего стола составляет менее 990 пикселей эффективной ширины.

Я просмотрел код CSS и нашел строку. Как я могу использовать стильный, Greasemonkey или какой-либо другой способ автоматически заменить значение max-width «990px» на «800px»?

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

Я использую Firefox 23 на ОС Windows 7.

Edit: На основе комментариев до сих пор, мне нужно, чтобы заменить их файл 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. Найти обижая <link> используя постоянную часть текста в href.
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

Если вы добавите стильный в Firefox, вы можете добавлять стили для определенного домена. Обычно я обнаруживаю, что мне нужно включить !important со многими стилями, чтобы узнать их.

Другой вариант для Firefox - отредактировать файл userContent.css напрямую. Вы можете легко найти «userContent.css firefox windows7» для поиска своего местоположения. (. Я использую Mac)