Как заменить @media (max-width) с помощью Stylish или Greasemonkey?

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

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

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

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

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

Редактировать: На основании комментариев, я должен заменить их CSS-файл своим собственным CSS-файлом. Итак, как мне использовать Greasemonkey для замены href (что выглядит как нестатичное имя файла)?

<link rel="stylesheet" type="text/css" href="http://d1h60c43tcq0zx.cloudfront.net/static/css/versioned/global-cdn-ac243f54ab6bb9637fcc5fa32f8b514d.css"></link>
Источник

2 ответа

Решение

Один из способов сделать это -

  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 и наблюдатели мутации.
Источник

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

Другой вариант для Firefox - редактировать файл userContent.css напрямую. Вы можете легко Google "userContent.css Firefox Windows7", чтобы найти его местоположение. (Я использую Mac.)

Источник
Другие вопросы по тегам