Настройка стилей для Mozilla Firefox (2)

29 ноября 2009. Рубрики: Рабочие заметки; автор — Юлия Панина aka Княгиня.

Итак, что можно сделать собственными стилями браузера Фаерфоркс? Поскольку Фаерфокс понимает селекторы атрибутов, сделать можно много. Например.

  • Скрыть все элементы, похожие на баннеры (фильтрация по типичным баннерным размерам, атрибуты height и width, используется селектор равенства атрибута):
    *[height="60"][width="468"],
    *[height="60px"][width="468px"],
    *[height="31"][width="88"],
    *[height="31px"][width="88px"], 
    *[height="60"][width="234"],
    *[height="60px"][width="234px"],
    *[height="600"][width="120"],
    *[height="600px"][width="120px"],
    *[height="600"][width="160"],
    *[height="600px"][width="160px"],
    *[height="120"][width="240"],
    *[height="120px"][width="240px"],
    *[height="150"][width="180"],
    *[height="150px"][width="180px"],
    *[height="300"][width="250"],
    *[height="300px"][width="250px"],
    *[height="336"][width="280"],
    *[height="336px"][width="280px"],
    *[height="400"][width="240"],
    *[height="400px"][width="240px"],
    *[height="250"][width="250"],
    *[height="250px"][width="250px"] {
    display: none !important;
    }

    Аналогично можно спрятать флеш:

    object, embed[type="application/x-shockwave-flash"]{
    display: none !important;
    }

      

    В этом случае будет скрыт весь флеш без исключения, в том числе ролики с ютьюба.

    Размеры также могут задаваться атрибутом style (хотя у баннеров такое встречается редко). В этом случае правила css будут выглядеть так (используется селектор подстроки атрибута; в этом случае приходится учитывать несколько вариантов написания подстроки, например, с пробелом и без):

    *[style*="width:468px"][style*="height:60px"],
    *[style*="width: 468px"][style*="height: 60px"]{
    display: none !important;
    }

      

    Правда, нет гарантии, что браузер не будет загружать скрытые картинки и флеш; для более тонкой блокировки лучше использовать плагины-блокировщики, наподобие Adblock Plus.

  • Можно сделать удобной работу со ссылками на странице. В том числе:
        
    1. выделить посещённые ссылки, зачеркнув их (актуально на сайтах с запутанной навигацией):

      a:visited {
      text-decoration: line-through !important;
      }
    2.   

    3. Выделить надчёркиванием ссылки, открывающиеся в новом окне:

      a[target="_blank"], a[target="_new"]{
      text-decoration: overline !important;
      }
    4.   

    5. Подчёркивать ссылки при наведении:

      a[href]:hover {
      text-decoration: underline !important;
      }
    6.   

    7. Изменить курсор для ссылок, выполняющих джаваскрипт:

      a[href^="javascript:"] {
      cursor: move !important;
      }
    8.   

    9. Стиль для оптимизаторов — выделение с помощью фона ссылок с атрибутом rel="nofollow":

      a[rel="nofollow"] {
      background:#ccc!important;
      }
    10.   

    11. Выделить рамкой кликабельные картинки:

      a img{
      border:3px solid blue;
      }

    Стили, заданные таким образом, будут применены ко всем сайтам, посещаемым через этот браузер. К сожалению, при настройке стилей под себя порой приходится учитывать морально устаревшие атрибуты и элементы, поскольку их всё ещё можно встретить в Сети, и создавать правила, которым не нашлось бы места на собственных сайтах.

    А ещё можно создать индивидуальные настройки для любимых сайтов. Об этом далее.

Отзывы (9) на «Настройка стилей для Mozilla Firefox (2)»
  1. Алексей (4 комментария)

    Я бы ещё добавил .ad_box,#sidebar_ads{display:none !important;} чтобы В Контакте и Facebook были без рекламы

    Ответить на этот комментарий
    • Княгиня (648 комментариев)

      Это для конкретных сайтов. О возможности настраивать сайты под себя я написала в третьей части. Можно ещё прописать стили для блокировки баннеров на Яндексе, ЖЖ, ютьюбе, но это для каждого сайта отдельно. А здесь я привела несколько популярных случаев изменения оформления элементов содержания.

      Ответить на этот комментарий
  2. Алексей (4 комментария)

    .UIHomeBox_Sponsored{display:none !important;} до кучи, для тех кто использует Фейсбук

    Ответить на этот комментарий
  3. Ковров A. (7 комментариев)

    Adblock Plus популярная примочка, знаю, но я стараюсь не пользоваться такими средствами, без банеров как-то непривычно, да и возни с такими ручными переделками многовато получается.

    Ответить на этот комментарий
    • Княгиня (648 комментариев)

      Ручные переделки обычно делаются один раз под свои конкретные нужды. Вы же не скажете: «Много возни с этими обоями, не будем их клеить»? Так и здесь: браузер настраивается пользователем сугубо под свои надобности.

      Ответить на этот комментарий
      • Ковров A. (7 комментариев)

        Кому-что, я стараюсь делать все с осторожность, по-возможности не экспериментировать и пользоваться готовыми решениями, а съэкономленное время использовать для более рентабельных мероприятий

        Ответить на этот комментарий
        • Княгиня (648 комментариев)

          Ну, для меня, как для верстальщика, нет проблемы настроить пользовательский css для избранных сайтов. Подробности, кстати, описаны в следующей по времени статье. Тут никакого эксперимента — чистая практика.

          Ответить на этот комментарий
  4. Ковров A. (7 комментариев)

    А-а-а-а-а, ну тогда другое дело. Если это ваша работа, согласен, практика должна быть постоянно, иначе не мечтайте стать профи. И тогда остается пожелать совершенства и успехов.

    Ответить на этот комментарий
  5. Михаил (1 комментарий)

    Благодарю, всё работает и всё прекрасно.

    Ответить на этот комментарий

Есть что сказать? Не молчим!

Используйте теги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" code=""> <ul> <li> <ol> .

Комментарии короче 200 символов публикуются без активной ссылки. Пробелы не учитываются.

Ссылки с комментариев dofollow. Ознакомьтесь, пожалуйста, с правилами dofollow-комментирования. Кто не читает, тот сам себе враг.