Обработка футера открытым способом

5 способов как прижать footer к низу страницы

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

Мы покажем 5 способов как можно прижать футер к низу страницы на чистом css

1 Отрицательный margin для wrapper

Создадим два соседних блока wrapper и footer. Для wrapper зададим нижний минусовый отступ равен высоте футера.

Для этого требуется дополнительный элемент внутри wraper (“push”), чтобы гарантировать, что отрицательный margin не подтянет footer и не закроет какой-либо контент.

2 Отрицательный margin для footer

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

3 Задать calc() для content

Один из способов не использовать лишние элементы — отрегулировать высоту wrapper с помощью calc (). Тогда не будет никакого перекрытия, просто два элемента сложены друг на друга на общую высоту 100%.

Обратите внимание на 70px в calc () и фиксированную высоту футера 50px. Предположим, что последний элемент в content имеет margin-bottom в 20 пикселей. Именно это нижнее поле плюс высоту футера необходимо сложить вместе, чтобы вычесть из высоты области просмотра. И да, мы используем здесь относительные единицы, как еще один маленький трюк, чтобы избежать необходимости устанавливать 100% высоты тела, прежде чем вы сможете установить 100% высоты контента.

4 С помощью flexbox

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

Вы можете даже добавить заголовок выше или ниже.

5 С помощью Grid

Разметка с помощью сетки еще новее (и менее широко поддерживается), чем flexbox. Вы также можете довольно легко использовать его для прилипания футера к низу страницы.

Но минус grid то что не все браузеры его нормально поддерживают

Эта должно работать в последних версиях Chrome или Firefox и, вероятно, в более новой версии Edge.

Источник

Прижимаем футер к низу страницы

Содержание:

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

Простейшая html разметка:

Способ #1

Footer прижимается к низу путем его абсолютного позиционирования и вытягивания высоты родительских блоков ( html , body и wrapper ) на 100%. При этом блоку content нужно указать нижний отступ, который равен или больше высоты футера, иначе последний закроет часть контента.

Способ #2

Footer прижимается вниз за счет вытягивания блока content и его «родителей» на всю высоту окна браузера и подъема футера вверх через отрицательный отступ ( margin-top ) для избавления от появляющегося при этом вертикального скролла. В данном случае необходимо обязательно указать высоту подвала, и она должна быть равна величине отступа. Благодаря свойству box-sizing: border-box , мы не позволяем блоку с классом content превысить высоту 100%. То есть в данном случае min-height: 100% + padding-bottom: 90px равняется 100% высоты окна браузера.

Способ #3

Данный способ хорош тем, что, в отличие от остальных способов (кроме 5-го), высота футера значения не имеет. Здесь мы эмулируем поведение таблицы, превратив блок wrapper в таблицу, а блок content в строку таблицы (свойства display: table и display: table-row соответственно). Благодаря этому, а также тому, что блоку content и всем его родительским контейнерам задана высота 100%, контент растягивается на всю высоту, но за минусом высоты футера, которая определяется автоматически — эмуляция таблицы не дает подвалу вылезть за пределы высоты окна браузера.

Способ #4

Данный способ не похож ни на один из предыдущих, и его особенность заключается в использовании CSS-функции calc() и единицы измерения vh , которые поддерживаются только современными браузерами. Здесь необходимо знать точную высоту футера. 100vh — это высота окна браузера, а 80px — это высота футера. И с помощью функции calc() мы вычитаем вторую величину из первой, тем самым прижимая футер к низу.

Способ #5

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

Способ #6

Здесь целая библиотека на разные случаи (используется Flexbox )

Источник

Современные решения старых CSS-задач (1 часть): Удержание футера внизу страницы

Приветствую. Представляю вашему вниманию перевод статьи «Keep the Footer at the Bottom: Flexbox vs. Grid», опубликованной 8 апреля 2020 года автором Stephanie Eckles

Это первая статья из серии, посвящённой ознакомлению с современными способами решения CSS-проблем, с которыми я сталкивалась на протяжении более 13 лет в роли фронтенд-разработчика.

В течение многих лет я регулярно возвращалась к этой статье Matthew James Taylor за способом удержания футера страницы в нижней её части, даже если высота основного содержимого меньше высоты окна. Данный метод основывался на явном задании высоты футера, что являлось не масштабируемым, но очень хорошим решением (до появления Flexbox).

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

• страницах авторизации
• статьях блогов или новостей
• страницах списка товаров
• подробностях событий календаря

Существует два способа решить эту проблему с помощью современного CSS: Flexbox и Grid.

Ниже представлена демонстрация кода с использованием метода на основе Flexbox. Если перейти на страницу Codepen, можно поменять переменную $method на grid , чтобы увидеть альтернативное решение.

Описание каждого метода приведено ниже после демонстрации кода.

Метод с использованием Flexbox

Эффект достигается путём задания:

Как это работает

Во-первых, мы гарантируем, что благодаря свойству min-height: 100vh , высота элемента body будет равняться как минимум, высоте окна браузера. Это не приведёт к переполнению, если содержимого слишком мало (исключение – определённые мобильные браузеры), но если понадобится, позволит body увеличиться по высоте.

Установка свойства flex-direction: column задаёт поведение как у нормального потока документа в том плане, что блочные элементы занимают всё доступное место по всей ширине.

Преимуществом Flexbox является поведение при добавлении свойства margin: auto . Этот трюк приводит к тому, что внешние отступы элемента, к которому применено это свойство, забирают всё доступное пространство в указанном направлении (или во всех направлениях). Например, задание margin-top: auto оттолкнёт футер к нижней части экрана от расположенных выше элементов.

Проблема

В демонстрационном Codepen выше я добавила к элементу main свойство outline , чтобы продемонстрировать, что при использовании метода Flexbox, main не заполняет всю доступную высоту. Вот почему мы должны использовать именно трюк с margin-top: auto .

Вряд ли это будет иметь для вас большое значение, но если это так, посмотрите вариант с использованием Grid, который растягивает элемент main , заполняя всё доступное пространство.

Метод с использованием Grid

Эффект достигается путём задания:

Как это работает

В этом случае мы также используем свойство min-height: 100vh , но затем добавляем grid-template-rows для правильного расположения элементов.

Ключевым трюком этого метода является использование специальной Grid единицы измерения fr . Единица измерения fr означает «фракция / доля» и с её помощью браузер вычисляет «долю» пространства, доступную данному элементу в определённой колонке или строке. В нашем случае элемент заполнит всё доступное пространство между хедером и футером, что одновременно является решением «проблемы» из метода Flexbox.

Что лучше?

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

С другой стороны, метод с Flexbox может использоваться в различных шаблонах с множеством блочных элементов в средней секции – например, набор элементов вместо одного .

В итоге, как и в случае с другими технологиями, всё зависит от проекта. Но думаю, вы согласитесь с тем, что это удивительно – иметь в распоряжении все эти современные методики.

Источник

Как с помощью CSS прижать footer к низу окна браузера

Вступление

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

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

В процессе практики я выделил для себя 5 способов прижимания футера к низу окна браузера с помощью CSS.

HTML-код всех представленных способов имеет следующую структуру (отличие лишь в CSS-коде):

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

Первый способ

Footer прижимается вниз путем его абсолютного позиционирования и вытягивания высоты родительских блоков ( html , body и .wrapper ) на 100%. При этом контентному блоку .content нужно указать нижний отступ, который равен или больше высоты подвала, иначе последний закроет часть контента.

Второй способ

Footer прижимается вниз за счет вытягивания блока контента и его «родителей» на всю высоту окна браузера и подъема футера вверх через отрицательный отступ ( margin-top ) для избавления от появляющегося при этом вертикального скролла. В данном случае необходимо обязательно указать высоту подвала, и она должна быть равна величине отступа.

Благодаря свойству box-sizing: border-box , мы не позволяем блоку с классом .content превысить высоту 100%. То есть в данном случае min-height: 100% + padding-bottom: 90px равняется 100% высоты окна браузера.

Третий способ

Он хорош тем, что, в отличие от остальных способов (кроме 5-го), высота футера значения не имеет.

Здесь мы эмулируем поведение таблицы, превратив блок .wrapper в таблицу, а блок .content в строку таблицы (свойства display: table и display: table-row соответственно). Благодаря этому, а также тому, что блоку .content и всем его родительским контейнерам задана высота 100%, контент растягивается на всю высоту, но за минусом высоты футера, которая определяется автоматически — эмуляция таблицы не дает подвалу вылезть за пределы высоты окна браузера.

В результате footer прижат к низу.

Четвертый способ

Данный способ не похож ни на один из предыдущих, и его особенность заключается в использовании CSS-функции calc() и единицы измерения vh , которые поддерживаются только современными браузерами. Здесь необходимо знать точную высоту подвала.

100vh — это высота окна браузера, а 80px — это высота футера. И с помощью функции calc() мы вычитаем вторую величину из первой, тем самым прижимая футер к низу.

Узнать, какие браузеры поддерживают calc() и vh , вы можете на сайте caniuse.com по следующим ссылкам: поддержка функции calc() , поддержка единицы измерения vh .

Пятый способ (самый актуальный)

Это лучший способ из всех представленных, однако работает он только в современных браузерах. Как и в третьем способе, высота футера значения не имеет.

Узнать про поддержку браузерами свойства flex можно здесь.

Источник

Прибитый к низу футер своими руками

Все, кто привык к полноценно оформленным страницам сайтов, предпочитает вид «прибитого» (прилипающего, sticky) к низу футера страницы. Но есть в интернете две беды: нерастущие вниз поля ввода и неприбитые (к низу окна) футеры. Например, когда открываем короткие по высоте страницы типа habrahabr.ru/settings/social — сразу бросается в глаза, что информация, призванная быть в нижней части окна просмотра, прилипает к содержанию и находится где-то посередине, а то и в верхней части окна, когда внизу — пусто.

Так, вместо того, чтобы .
Данное пособие для начинающих верстальщиков покажет, как за 45 минут сделать «прибитый» футер, исправив недоработки даже такого уважаемого издания, как Хабр, потягаться с ним в качестве исполнения своего перспективного проекта.

Посмотрим на реализацию одного вида прибитого футера, взятого из сети, и попробуем разобраться в происходящем. css-tricks.com/snippets/css/sticky-footer
CSS:

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

Начнём с теории

Обычная реализация прибитого футера основывается на том уникальном для CSS2 свойстве, что элементы — непосредственные потомки BODY — поддерживают процентную высоту (height:100% или другую) относительно окна, если все их родители имеют тоже процентную высоту, начиная с тега HTML. Раньше, без доктайпов, а сейчас в Quirks Mode процентные высоты элементов поддерживаются на любом уровне, а в современных доктайпах — только внутри процентно заданных элементов. Поэтому, если мы сделаем блок контента (назовём его #layout), имеющий 100% высоты, он будет иметь скролл, как будто это — окно. В него помещают всё (потоковое) содержание, кроме футера и, может быть, хедера.

Футер помещают вслед за этим блоком и делают ему 0 пикселей высоты. Вообще, можно вслед за #layout поставить сколько угодно блоков, но все они должны быть или с 0 пикселей высоты, или вне потока документа (не position: static). И есть ещё один важный фокус, которым обычно пользуются. Не обязательно делать высоту, равную 0. Можно сделать высоту фиксированной, но из основного блока вычесть её за счёт свойства margin-bottom: -(высота);.

Говоря человеческим языком, стилями делается пустой «карман» снизу, в который вкладывается футер, и он всегда оказывается или прилепленным к нижней границе окна, или к нижней границе документа, если документ по высоте больше высоты окна. По интернету и на Хабре существует множество реализаций футера, с разной успешностью работы во всех браузерах. Продолжим строить его самостоятельно, используя вёрстку Хабра как «рабочую лошадку».

Поскольку низ блока #layout — это карман, он для футера должен быть пустым, не отображающим объекты страницы. И тут встречаемся с ещё одним ограничением — мы не можем делать пустой карман за счёт padding в #layout, потому что тогда он станет больше 100%. Не спасёт и margin — пустоту нужно делать за счёт свойств вложенных элементов. Плюс ко всему, надо обеспечить невылезание под границу блока плавающих элементов, что делается, например, блоком
, где .clear . Важно, чтобы или эта «высота» была фиксированной, или в тех же относительных единицах, или мы её вычисляли бы в процессе изменений страницы. Обычно удобно совместить этот выравнивающий блок с установкой для него требуемой высоты.

Посмотрим на строение страниц нашего подопытного. Для этого проще всего раскрыть окно Firebug или подобное окно («Инструменты разработчика» (Ctrl-F12)) в Chrome.

Перейдём к рабочему примеру

Какие видим недостатки вёрстки в плане реализации эффекта прибитого футера? Видим, что
1) футер на сайте находится внутри блока с который не имеет процентной высоты. По теории, ему, родителям и блоку содержания .content-left требуется поставить высоту 100%. С последним возникают проблемы — он для такого не приспособлен. Следовательно, не хватает одного прослоечного блока или футер находится не на том уровне. Кроме того,
2) высота футера переменная (зависит от числа элементов в списке и от размера шрифта, это видно не из HTML, а из CSS). И
3) над #layout имеется рекламный блок фиксированной высоты 90px;
4) выравнивающих блоков нет ни в футере, ни (вообще говоря) в блоке #layout (есть, но над блоком .rotated_posts; впрочем, возможно, его надо отнести к футеру).

Пункт 4 — придётся прорисовывать скриптом.
C третьим пунктом разобраться, казалось бы, просто, добавив Но вспомним, что этого блока может не быть — он подавляется баннерорезкой, или рекламщики его вдруг решат не показывать. Есть ряд страниц сайта, где его нет. Поэтому зависимость margin-top от рекламного блока — плохая идея. Гораздо лучше — разместить его внутри #layout — тогда он ничем не будет мешать.

Первый пункт — чтобы прибитый футер вообще заработал, надо блок футера поместить под #layout. Впрочем, с помощью javascript можно реализовать и другие схемы прибитого футера, но в любом случае нужен JS или изначально правильная вёрстка, чтобы обойтись без него.

Поскольку мы не можем быть сильнее самого последнего верстальщика сайта, «влепившего» футер внутрь содержания, отложим идею правильного размещения футера на свой будущий сайт (который, стало быть, будет «круче» Хабра!), а Хабр препарируем джаваскриптом (юзерскриптом) до правильного состояния. (Сразу скажем, виноват не верстальщик, не стрелочник, а вид сайта, конечно, определяет стратегическое решение руководства проекта.) Так мы не достигнем идеала, потому что в первую секунду-две в процессе загрузки страница будет с неправильной вёрсткой. Но для нас важен концепт и возможность превзойти по качеству самый популярный сайт мира айтишников.

Поэтому в нужном месте скрипта (пораньше, в конце загрузки страницы) напишем переносы DOM-блоков рекламы и футера на нужные места. (Приготовимся к тому, что за счёт юзерскриптов решение будет сложнее чистого.)

Расставили блоки по местам — теперь осталось приписать элементам нужные свойства. Высоту футера придётся задавать точно, просто потому что мы её уже знаем к моменту действия юзерскрипта (конец загрузки страницы). Из-за точки срабатывания юзерскрипта, как уже говорилось выше, прыжок отображения футера на странице неизбежен. Можно пытаться делать «хорошее лицо», но при «плохой игре»? Зачем? «Плохая игра» сайта позволяет сделать без сверхусилий концепт, которого будет достаточно для оценки качества и не понадобится при «правильной игре» на своём проекте.

Здесь позволили себе применить самописную функцию h.apnd_el, делающую примерно то же, что и в jQuery —

И далее — ещё одна типичная функция внедрения правил CSS — h.addRules. Здесь без неё не обойтись, потому что нужно объявить правило с «!important» — как раз из-за особенностей приоритетов стилей из юзерскрипта.

Читайте также:  Как свернуть блинчики для начинки способы

С этими кусочками кода мы сможем увидеть в юзерскрипте прибитый футер (после прыжка его вниз) и полностью осознать, как надо строить вёрстку страниц. Использовать прыгающий дизайн повседневно — неприятно, поэтому рекомендуется его сделать исключительно для демонстрации и тестирования. В юзерскрипте HabrAjax я установил аналогичный скрипт, закрыв его настройкой «underFooter» (установить «галочку» в списке настроек перед «прибитый к низу футер»), начиная с версии 0.883_2012-09-12.

Затрагивает ли прибитый футер необходимость обновления стилей ZenComment, если они установлены? Да, затрагивает. Из-за сложной цепочки приоритетов стилей, в которых стили, вставляемые юзерскриптом, имеют низший приоритет, пришлось немного подкорректировать юзерстили для возможности работы с прибитым футером. Если вы не обновите юзерстили (до 2.66_2012-09-12 +) — футер будет работать неточно.

Блок rotated_post (три популярных поста из прошлого) логичнее смотрится при футере, поэтому в реальном скрипте он тоже перенесён в футер.

Второй пункт (из списка недостатков вёрстки) — рассуждения чисто для Хабра (к юзерскрипту не относятся и частично повторяют прежние).

У страниц имеется проблема, мешающая сделать прибитый футер на чистом CSS — неопределённая высота футера, зависящая от размеров шрифта по умолчанию в браузере. Для реализации футера на CSS требуется подобрать относительные высоты шрифтов, но и они могут не сработать, если на компьютере пользователя не будет предусмотренных шрифтов. Поэтому решение должно включать джаваскрипт, который может подгонять переходами (transitions) приблизительное положение футера до точного. Или, посмотрев на приемлемость сделанного решения на юзерскрипте на разных платформах, сделать вычисляемую установку прибитого футера — первые наблюдения показывают, что решение практично.

Вывод: полноценно оформить раскладку на Хабре можно, но для этого нужен верстальщик, чётко понимающий поведение раскладки, располагающий блоки в правильном порядке. (Сейчас футер и верхний баннер стоят «не там» и не так, чтобы просто стилями получить прибитый футер.) Можно обойтись без JS, если задать высоту футера в относительных единицах, взяв некоторый запас места на неопределённость шрифта.

Реализация

Если включить HabrAjax 0.883+, то увидим работу «прибитого футера». Он адаптируется по высоте с помощью скриптов. Он позволяет оценить, насколько лучше выглядят страницы с прибитым футером по сравнению с обычными. Юзерстили ZenComment совместимы со скриптами, но для правильной работы прибитого футера с ними нужно установить версию ZenComment 2.66_2012-09-12 +.

Факты о поведении реализации

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

1) Firefox — неожиданное отсутствие прыжков футера. Странно, что их нет — отрисовка происходит после размещения футера внизу.

2) Chrome — он удивил «блуждающим скроллом» — к странице с периодом раз в секунду добавляются пустые пространства внизу — что-то неправильное происходит с расчётом высот. Лечится прописыванием html,body в юзерстили, но без гарантий, что всегда будет работать. Надёжнее — проверять, не превышает ли документ окно по высоте, и если не превышает, то двигать футер, иначе — ничего. С прыганием — всё в порядке, оно есть.

3) Опера — без прыжков (v. 12.02) при первой загрузке страницы, но поспешная перезагрузка может показать прыжок футера. В остальном ведёт не менее корректно, чем Fx.

Что же, придётся специально приучить Хром вести себя правильно (скриптом) и в таком виде выкатить версию на обозрение. Поэтому участок в юзерскрипте немного сложнее, чем приведённый в статье.

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

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

Для каких страниц это полезно?

На стандартном сайте, без юзерстилей даже короткие страницы вопросов-ответов оказываются длиннее 1500px, что в большинстве случаев незаметно при горизонтально расположенных мониторах. Но даже при обычных мониторах часто попадаются персональные страницы пользователей высотой порядка 1300 пикселей, где неприбитый футер предстаёт во всей красе. Не очень длинен и ряд страниц в настройках пользователя.

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

Будет ли поддержка?

Поведение сайта за последний год показывает, что разработчики (а значит, руководство) начали внедрять возможности, ранее существовавшие только в юзерскриптах и юзерстилях. Например, в начале года я написал статью-обзор по юзабилити Хабра, где собрал множество небольших пожеланий. Через полгода я вернулся к ней и с удовлетворением пометил (прямо в тексте; можно ознакомиться с «UPD» и датами), что целый ряд возможностей, описанных как пожелания, уже были внедрены в сайт.

Далее, посмотрим на «стрелочки» вместо квадратиков для оценивания комментариев. Они появились в юзерсилях almalexa («Prettifier») года 3 назад и переняты в ZenComment года 2 назад. Месяца 2-3 назад они появились на сайте. Начинает вериться в то, что через некоторое время стрелки разнесут на некоторое расстояние, как это сделано в ZenComment (одна стрелка слева от числа, вторая справа), чтобы меньше промахиваться.

Поэтому, возможно, и «прибитый футер» на Хабре — это не такая фантастика, какой могла показаться года 3 назад.

Другие возможности в скрипте HabrAjax, появившиеся за последние 3 месяца (отключаемы в настройках):
* авторост полей ввода (в Опере может тормозить на больших текстах);
* дни недели при датах, кроме «сегодня» и «вчера»;
* события в Ленте, сворачиваемые до 1 строки и 2 символов;
* сокращение слов «хабр*» до «χ·» и «χα»;
* подсказки дат по номерам статей — сообщается, какого месяца и года статья до её загрузки, по номеру в URL;
* свёрнуты «Похожие посты» до 2 слов. Скриншот всплывающих «похожих постов» (показывает 12 ссылок, а не 4).

Источник