Semakin banyak situs berita dan blog yang berubah menjadi footcloth panjang yang harus diputar secara vertikal untuk waktu yang lama dari artikel ke artikel. Untuk memfasilitasi scrolling, beberapa situs menyembunyikan bagian artikel di bawah spoiler. Situs lain menampilkan sebagian artikel di feed dan untuk membacanya terpaksa membuka halaman terpisah.
Saya pikir kenapa tidak menggunakan garis horizontal? Pengembang browser telah memberikan cukup alat CSS untuk menyusun artikel secara horizontal dan transisi yang mulus di antara mereka.
Saya membuat demo minimal yang bekerja dengan CSS dan memiliki properti berikut:
- Artikel disusun secara horizontal.
- Sebagian artikel tidak perlu disembunyikan di bawah spoiler, karena pengguliran vertikal untuk setiap artikel bersifat individual.
- Anda dapat pergi ke artikel berikutnya dari mana saja di artikel sebelumnya dengan menggulir roda mouse sambil menahan Shift atau dengan menggesek artikel ke kiri pada tablet.
Pada artikel ini, saya akan memecah CSS yang digunakan untuk blog horizontal.
<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>
Parse CSS
horizontal-blog.css :
/*
Ini adalah jendela tempat pengguna membaca konten artikel. Awalnya, fungsinya dilakukan oleh: elemen root, tetapi saya memutuskan untuk menyingkirkan struktur dokumen html.
*/
.hb-viewport{
/*
Singkirkan lekukan default badan tanpa menyentuh gaya css badan.
*/
position: absolute;
top: 0;
left: 0;
/*
Atur ukuran area pandang ke ukuran area yang terlihat dari jendela sehingga pengguliran horizontal dimungkinkan.
*/
width: 100vw;
height: 100vh;
/*
Atur pengguliran horizontal dan sembunyikan yang vertikal karena perlu untuk menggulir ke bawah setiap artikel satu per satu.
*/
overflow-x: auto;
overflow-y: hidden;
/*
.
*/
scroll-snap-type: x mandatory;
/*
Firefox . .hb-viewport .
*/
scrollbar-width: none;
}
/*
. .hb-viewport
*/
.hb-viewport:hover{
scrollbar-width: auto;
}
/*
display: flex;
.hb-container .
*/
.hb-container{
display: flex;
}
/*
.hb-page .
*/
.hb-page{
/*
.
*/
max-height: 100vh;
/*
.
*/
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;
}
}
}
. .