Блокируем элементы с помощью таблицы стилей

11 August 2012 #internet#mac#tips

После того, как разработка почтового клиента Sparrow была остановлена в связи с покупкой его Google, я вернулся к использованию веб-интерфейса Gmail. И столкнулся с тем, что на его страницах показывается просто масса контекстной рекламы, которая и отвлекает и просто мешает.

Раньше, когда использовал веб-интерфейс Gmail, я спасался с помощью Adblock, потому и решил вернуться к его использованию. Но обратил внимание на то, что скорость загрузки страниц значительно падает, и порой бывает, что определенные элементы начинают мелькать перед глазами, прежде чем скрыться1. В результате экспериментов я решил отказаться от всех подписок, оставил только пользовательские фильтры, которые задавал сам, и расширение стало меньше влиять на скорость загрузки страниц. Но с мельканием элементов я так ничего поделать и не смог.

Стал искать другие решения. Вспомнил о Stylish. Нашел данное расширение для Safari и попробовал его в работе. Как оказалось, данное расширение работает более эффективно, чем Adblock, корректно скрывает элементы (они при этом не мелькают) и что самое интересное, с помощью Stylish можно не просто скрывать элементы, но и переделывать страницы сайтов на свой лад. При этом скорость загрузки страниц оставалась без изменений.

И тут я вспомнил, что в Safari в разделе настроек Дополнения, есть пункт – Таблица стилей. Предназначена она для использования людьми с ограниченными способностями. И я подумал, а зачем использовать отдельное расширение, когда можно правила скрытия элементов прописать именно в этой таблице??

safari-setting

Создал файл2, название которого можно выбрать произвольно, я же выбрал ads_block.css и затем начал его заполнять.

Сперва добавил стили, которые убирают рекламу из gmail и немного изменяют само рабочее пространство, убирая панель справа и освобождая пространство для тела письма:

.mq { display:none; } .N92wfe { border-top:none; } .nH.PS { margin: 52px 0 44px 52px !important; } .Zs { display:none; } .u5 { display:none; }
.adC { display:none; } .z0DeRc { display:none; } .oM { display:none; } .u7 { display:none; } .nH.PS { display:none; } .ao8 table tr td.Bu + td.Bu { display:none; } td.Bu.yPPMxf { display:none !important; } td.Bu.y3  { display:none !important;}

Для того, чтобы скрыть рекламу на страницах поиска Google, использовал следующую строку:

.rhstc5#rhs_block { display:none; }

Ghostery блокирует работу комментариев от Disqus, и на их месте остается иконка и индикатор загрузки, чтобы их убрать, добавил следующую строку:

#disqus_thread { display:none !important; }

А для того, чтобы убрать кнопки твиттера и фейсбука, использовал следующие строки:

.sharelinks, .btntweetwrap, .btnfbshare { display:none !important; }
.twitter-share-button, .share, .dd_outer { display:none !important; }

После создания файла таблицы стилей, в настройках Safari указал на его использование.

Единственный минус данного метода заключается в том, что стили пользователя в Safari действуют сразу на все сайты. И нет никакой возможности назначать определенные стили конкретным сайтам. Нельзя, к примеру, на одном сайте элемент скрыть, а на другом его лишь изменить. Но в целом данный метод работает очень эффективно.

  1. Это особенность работы расширения в Safari. В отличие от Firefox, где элементы блокируются на этапе загрузки, в Safari все элементы сначала загружаются и только после этого принимается решение, какие их них не показывать. 

  2. Полный текст стиля находиться на странице gist.github.com