Ноябрь 29, 2009

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

написано в рубрике: Профессиональные заметки; 21:56

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

  • Скрыть все элементы, похожие на баннеры (фильтрация по типичным баннерным размерам, атрибуты 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. Выделить надчёркиванием ссылки, открывающиеся в новом окне: 
      a[target="_blank"], a[target="_new"]{
  text-decoration: overline !important;
}
    3. Подчёркивать ссылки при наведении: 
      a[href]:hover {
  text-decoration: underline !important;
}
    4. Изменить курсор для ссылок, выполняющих джаваскрипт: 
      a[href^="javascript:"] {
  cursor: move !important;
}
    5. Стиль для оптимизаторов — выделение с помощью фона ссылок с атрибутом rel=”nofollow”: 
      a[rel="nofollow"] {
  background:#ccc!important;
}
    6. Выделить рамкой кликабельные картинки: 
      a img{
  border:3px solid blue;
}

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

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

Посты по теме

3 комментариев »

  1. Алексей — Декабрь 11, 2009 || 21:21

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

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

    Княгиня — Декабрь 11th, 2009 || 21:28

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

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

  2. Алексей — Декабрь 11, 2009 || 21:25

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

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

Комментировать

Вы не авторизованы. Вы можете:

Rambler's Top100