Cada vez más sitios de noticias y blogs se están convirtiendo en una tela larga que debe enrollarse verticalmente durante mucho tiempo de un artículo a otro. Para facilitar el desplazamiento, algunos sitios ocultan parte del artículo debajo del spoiler. Otros sitios muestran parte del artículo en el feed y para leerlo se ven obligados a ir a una página separada.
Pensé ¿por qué no usar horizontal? Los desarrolladores de navegadores han proporcionado suficientes herramientas CSS para alinear los artículos horizontalmente y hacer una transición fácil entre ellos.
Creé una demostración mínima que funciona con CSS y tiene las siguientes propiedades:
- Los artículos están dispuestos horizontalmente.
- No es necesario ocultar parte del artículo debajo del spoiler, ya que el desplazamiento vertical de cada artículo es individual.
- Puede ir al artículo siguiente desde cualquier lugar del anterior desplazando la rueda del mouse mientras mantiene presionada la tecla Mayús o deslizando el artículo hacia la izquierda en la tableta.
En este artículo, desglosaré el CSS utilizado para 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>
Analizar CSS
horizontal-blog.css :
/*
Esta es la ventana a través de la cual el usuario lee el contenido del artículo. Inicialmente, sus funciones las realizaba: elemento raíz, pero decidí deshacerme de la estructura del documento html.
*/
.hb-viewport{
/*
Deshazte de la sangría predeterminada del cuerpo sin tocar los estilos CSS del cuerpo.
*/
position: absolute;
top: 0;
left: 0;
/*
Configuramos el tamaño de la ventana gráfica al tamaño del área visible de la ventana para poder desplazarse horizontalmente.
*/
width: 100vw;
height: 100vh;
/*
.
*/
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;
}
}
}
Ahora, los artículos del blog están alineados horizontalmente y puede pasar de un artículo a otro girando de izquierda a derecha. Bueno, los artículos en sí se desplazan hacia arriba y hacia abajo de forma independiente y desde cualquier parte del artículo anterior puede ir al principio del siguiente.