Всё больше новостные сайты и блоги превращаются в длинную портянку которую от статьи к статье надо долго мотать по вертикали. Чтобы облегчить прокрутку одни сайты скрывают часть статьи под спойлером. Другие сайты отображают часть статьи в ленте а для прочтения её заставляют перейти на отдельную страницу.
Я подумал почему бы не воспользоваться горизонталью? Разработчики браузеров дали достаточно CSS инструментов чтобы выстроить статьи по горизонтали и сделать удобный переход между ними.
Я создал минимальную демку которая работает за счёт CSS и имеет такие свойства:
- Статьи выстраиваются по горизонтали.
- Часть статьи не надо скрывать под спойлером так как вертикальная прокрутка для каждой статьи индивидуальна.
- На следующую статью можно перейти из любого места предыдущей прокрутив колёсико мышки с зажатым Shift или смахнув статью влево на планшете.
В статье я разберу СSS используемый для горизонтального блога.
<html>
<head>
<title>horizontal blog demo</title>
<link href="horizontal-blog.css" rel="stylesheet" media="screen">
<link href="css-min-fix.css" rel="stylesheet" media="screen">
</head>
<body>
<div class="hb-viewport">
<div class="hb-container">
<article class="hb-page">
<h1>Lorem ipsum dolor sit amet</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Leo integer malesuada nunc vel risus...
</article>
<article class="hb-page">
<h1>Consectetur a erat nam at lectus urna duis</h1>
Consectetur a erat nam at lectus urna duis. Cursus vitae congue mauris rhoncus aenean. Quis auctor elit sed vulputate mi sit amet mauris commodo. Odio pellentesque diam volutpat commodo sed...
</article>
</div>
</div>
</body>
</html>Разбираем CSS
horizontal-blog.css:
/*
Это окно через которое пользователь читает содержимое статьи. Изначально его функции выполнял :root элемент но я решил отвязаться от структуры html документа.
*/
.hb-viewport{/*
Избавляемся от отступа поумолчанию у body не трогая стили css body.
*/
position: absolute;
top: 0;
left: 0;/*
Задаём размеры viewport размером видимой области окна чтобы была возможна прокрутка по горизонтали.
*/
width: 100vw;
height: 100vh;/*
Задаём прокрутку по горизонтали а вертикальную скрываем так как нужно чтобы прокручивалась вниз каждая статья индивидуально.
*/
overflow-x: auto;
overflow-y: hidden;/*
Чтобы облегчить прокрутку задаём автоматическое выравнивание прокрутки по горизонтали.
*/
scroll-snap-type: x mandatory;
}/*
Благодаря display: flex; .hb-container выстраивает своё содержимое в длинную горизонтальную полосу. А max-height: 100%; не даёт контейнеру растягиваться по высоте постраиваясь под содержимое.
*/
.hb-container{
display: flex;
max-height: 100%;
}
/*
.hb-page содержит в себе статью.
*/
.hb-page{/*
Элементы flex контейнера автоматически ограничиваются его высотой. Остаётся только скрыть то что не влезло добавляя полосу прокрутки по необходимости.
*/
overflow-y: auto;/*
Привязываем выравнивание прокрутки по центру .hb-page.
*/
scroll-snap-align: center;/*
Задаём ширину статьи до 80 символов для удобства чтения и добавляем поля по бокам до 100vw.
*/
min-width: min(80ch, 100vw);
padding: 0 calc((100vw - 80ch) / 2);
}Поправляем CSS
Есть проблема с моим Firefox на Android планшете который перестал обновляться с версии 68.11. Он не поддерживает css функцию min(). Можно это поправить при помощи директивы @supports и @media.
css-min-fix.css:
/*
Проверяем что браузер не поддерживает min.
*/
@supports not (min-width: min(80ch, 100vw)) {/*
Задаём ширину по умолчанию в 100vw.
*/
.hb-page{
min-width: 100vw;
}/*
Если видимая часть окна шире 80 символов то задаём ширину 80 символов.
*/
@media screen and (min-width: 80ch) {
.hb-page{
min-width: 80ch;
}
}
}Готово
Теперь статьи блога выстроены горизонтально и от статьи к статье можно переходить мотая влево в право. Ну а сами статьи прокручиваются вверх вниз независимо и из любой части предыдущей статьи можно перейти в начало следующей.
