De plus en plus de sites d'actualités et de blogs se transforment en une longue chaussure qui doit être enroulée verticalement pendant longtemps d'un article à l'autre. Pour faciliter le défilement, certains sites cachent une partie de l'article sous le spoiler. D'autres sites affichent une partie de l'article dans le fil et pour le lire sont obligés d'aller sur une page distincte.
J'ai pensé pourquoi ne pas utiliser la ligne horizontale? Les développeurs de navigateurs ont fourni suffisamment d'outils CSS pour aligner les articles horizontalement et passer facilement de l'un à l'autre.
J'ai créé une démo minimale qui fonctionne avec CSS et possède les propriétés suivantes:
- Les articles sont disposés horizontalement.
- Une partie de l'article n'a pas besoin d'être cachée sous le spoiler, car le défilement vertical de chaque article est individuel.
- Vous pouvez accéder à l'article suivant de n'importe où dans le précédent en faisant défiler la molette de la souris tout en maintenant la touche Maj enfoncée ou en faisant glisser l'article vers la gauche sur la tablette.
Dans cet article, je décomposerai le CSS utilisé pour un 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>
Analyser CSS
horizontal-blog.css :
/*
C'est la fenêtre à travers laquelle l'utilisateur lit le contenu de l'article. Au départ, ses fonctions étaient remplies par: élément racine, mais j'ai décidé de me débarrasser de la structure du document html.
*/
.hb-viewport{
/*
Supprimez l'indentation par défaut du corps sans toucher aux styles css du corps.
*/
position: absolute;
top: 0;
left: 0;
/*
Définissez la taille de la fenêtre sur la taille de la zone visible de la fenêtre afin que le défilement horizontal soit possible.
*/
width: 100vw;
height: 100vh;
/*
Définissez le défilement horizontal et masquez le défilement vertical car il est nécessaire de faire défiler chaque article individuellement.
*/
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;
}
}
}
. .