CSS + HTML

При разработке шаблонов, в какой-то момент Вы, должно быть сталкивались с таким вопросом. Так давайте же разберемся, как сделать так, чтобы футер был внизу тела шаблона, даже если на странице мало текста, который бы толкал футер достаточно вниз, вместо этого футер находится в центре экрана, оставляя огромные пробелы ниже.

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

ТЕХНИКА

Я начну строить нашу страницу с помощью верстки адаптивных блоков. Кто еще до сих пор не знает, но начиная с 21 апреля 2015 года Гугл ввел новые методы ранжирования сайтов, в основе которого лежит адаптивный дизайн сайта. Если Ваш сайт не имеет адаптивного дизайна, Ваш ресурс будет понижаться в выдаче поисковой системы. Вот оно чудо мобильных устройств.

Моя демонстрационная страница будет самая что ни на есть простая. Состоять он будет из трех основных частей:

1.Заголовок(head);

2.основной раздел (main section);

3.футер(footer);

Вот вам пример html кода, ничего в нем сверхъестественного нет.

<header>...</header>

<section class="main-content">...</section>

<footer>...</footer>

Первым делом добавим display: flex в body, и добавим направление направление для flex-элементов размещенных на нашей странице (по умолчанию flex-direction: row; расположение объектов слева направо для ltr, и справа налево для rtl). Кроме этого добавим height: 100%;, для того, чтобы заполнить весь экран.

html{ height: 100%; }

body{ display: flex; flex-direction: column; height: 100%; }

Теперь я задам параметры, которые будут определять, какое место будет занимать тот или иной блок на странице. Сделаю это с помощью свойства Flex. Ниже я привел ещё ряд свойств, с помощью которых можно будет задать:

flex-grow – Определяет для flex-элемента возможность «вырастать» при необходимости

flex-shrink – Определяет для flex-элемента возможность сжиматься при необходимости

flex-basis — Определяет размер по умолчанию для элемента перед распределением пространства в контейнере

Я хочу, чтобы мой footer занимал столько место, сколько ему нужно, а все оставшееся место было бы доступно для основного содержимого. Ниже я привожу пример того, как выглядит мой CSS код:

header{flex: 0 0 auto;}

.main-content{flex: 1 0 auto;}

footer{flex: 0 0 auto;}

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

ПРИМЕР

Заключение

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

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

1. Выбор блокировщика.

Самые известные расширения для блокировки рекламы - Adblock Plus и Adblock. Первый поддерживает все популярные браузеры, второй - Chrome (и основанные на его движке) и Safari. Помимо них я хочу также рассказать про uBlock Origin, доступный для Chrome и Firefox.

Беглый взгляд на настройки блокировщиков даёт понять, что функционал первых двух практически идентичен, в то время как последний предоставляет больше возможностей для кастомизации. Chrome также предоставляет нам возможность посмотреть потребление памяти каждым расширением (открыть диспетчер задач можно нажатием Shift+Esc).

Как мы видим, uBlock потребляет значительно меньше памяти, а посему я рекомендую использовать именно его. Впрочем, если вы привыкли использовать ABP, а оперативки у вас достаточно, можно оставаться и на нём. Что же касается прочих блокировщиков, то они либо представляют собой клоны вышеупомянутых, либо обладают меньшим функционалом. Так, например, расширение Adguard предоставляет несколько собственных подписок и не даёт возможности добавить сторонние.

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

2. Набор подписок по умолчанию.

Пожалуй, самое важное при настройке блокировщика рекламы - это правильный выбор списков фильтров или, проще говоря, подписок. Ведь информация о том, что нужно заблокировать, а что, напротив, трогать не следует, содержатся именно там, и если этой информации недостаточно, то ни один блокировщик ничего не сможет сделать.

Для начала взглянем на подписки, установленные по умолчанию в ABP.

Итак, как мы видим, по умолчанию подключён EasyList (основная подписка) и список фильтров для русскоязычных сайтов RuAdList. Кроме того, включён список исключений "ненавязчивой рекламы". На выбор предлагается подключить подписку для другого языкового сегмента сети либо любую другую, если у вас есть прямая ссылка на неё. Теперь посмотрим, как обстоят дела у uBO.

На скриншот не поместился весь список предлагаемых фильтров, ниже следуют все те же языковые подписки, которые предлагает ABP. Не вдаваясь в описание каждой из имеющихся тут подписок, можно просто заметить, что "из коробки" uBO будет работать лучше, потому что подключённых фильтров больше, а списка "ненавязчивой рекламы" среди них нет.

3. Добавление кастомных подписок.

Большая часть мусора, конечно, блокируется и этими минимальными наборами фильтров, однако для достижения максимального эффекта стоит несколько отредактировать их набор. Прежде всего, я советую отписаться от фильтра "ненавязчивой рекламы", если вы используете ABP, и от "Badware risks" в случае с uBO. Первый ухудшает качество фильтрации, а второй наоборот часто блокирует лишнее. Что стоит подключить, зависит от ваших личных предпочтений, от себя могу посоветовать следующее:

1)  Adguard Russian Filte https://adguard.com/en/filter-rules.html?id=1 - одна из лучших подписок для русскоязычного сегмента сети, включает множество фильтров, отсутствующих в RuAdList.

2)  RU AdList: Counters - дополнительная подписка от составителей RuAdList против счётчиков и систем аналитики.

3) I don't care about cookies - набор фильтров, скрывающих всплывающие окошки и уведомления на многих сайтах, предлагающие ознакомиться с политикой cookie-файлов.

4) uBlock Filters + - только для uBO, использует его возможности для блокировки всплывающих окон и некоторых других неприятных вещей.

Ну и конечно же, не могу не сказать о том, что у меня есть собственный список фильтров, содержащий некоторые полезные фильтры, отсутствующие в основных подписках (среди которых и скрытие закреплённого поста на пикабу). Также есть замечательный сайт с прямыми ссылками на большое количество подписок.

4. Использование нестандартных средств для блокировки рекламы.

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

Пожалуй, самыми раздражающими рекламными скриптами являются anti-adblock срипты. Иногда они выглядят скромно и не бросаются в глаза, вежливо прося посетителя отключить Adblock. Но зачастую подобные скрипты просто блокируют доступ к контенту сайта и требуют отключения блокировщика. Конечно, мириться с такой наглостью не стоит: существует userscript Anti-Adblock Killer, блокирующий большую часть anti-adblock скриптов. Его установка проводится в несколько шагов:

1) Установить расширение для поддержки userscript (Chrome, Firefox).

2) Добавить специальную подписку в свой ABP или uBO.

3) Установить сам скрипт.

Проверить его работу можно, например, вот на этом сайте: если всё настроено правильно, то вы не увидите полноэкранную просьбу отключить адблок.

Особенно постарались над своей рекламой ребята из Яндекса: их баннеры в новостях и рекламные ссылки в поиске мимикрируют под контент страницы, и скрыть их, не повредив полезное содержимое, средствами адблока не удастся. К счастью, скрипт No Yandex Ads от создателей RuAdlist отлично справляется с этой задачей.

От рекламы в фоне сайта поможет применение userstyles. Для этого необходимо установить расширение Stylish (Chrome, Firefox) и сами стили, которые могут быть как локальными (для одного сайта), так и глобальными. Большую часть рекламы из бэкграунда сайтов поможет убрать RU AdList CSS Fixes, также разработанный создателями RuAdlist. Проверить работоспособность можно на Кинопоиске. Там же, на userstyles.org, можно поискать стили для конкретных сайтов, а если чуть-чуть разобраться в основах HTML/CSS, то и писать их самому - зачастую для "исправления" сайта нужно написать всего одну-две строчки кода. В качестве примера тривиального стиля приведу пару своих: для удаления банера в фоне redkassa.ru  и исправления размера сетевизора на echo.msk.ru.

Выполнив эти несложные рекомендации, вы увидите Интернет гораздо чище:)

Главная особенность - Отключение рекламы, расширенный блок с основным контентом, и кое где мелкие правки.

Прежде чем ставить минут - прошу адекватную критику.