soy Kseso y esto EsCSS

:scroll() Propuesta de pseudoclase para que Css sepa del scroll

La pseudoclase Css :scroll() -- Artículo para someter a críticas y mejorar mi propuesta de pseudoclase para que Css sepa y conozca de las interacciones del usuario con los scrolls y actuar en consecuencia.

:scroll() Propuesta de pseudoclase para que Css sepa del scroll

·Por Kseso ✎ 7
:scroll() Propuesta de pseudoclase para que Css sepa del scroll

El que de vez en cuando tenga alguna idea de bombero es normal. A todos nos pasa. Que con alguna sea tan atrevido de hacerlas públicas también. Que además haga partícipe de mis desvarío a terceros... pase. Pero si llega a que el "tercero" sea un editor de las especificaciones Css del W3c y éste te responda "ponla por escrito y mándala" es todo un reto.

La idea de bombero: En Css no hay una manera de saber si se "scrollea" y actuar en función de ello (y mucho menos de hacerlo en función de la distancia recorrida por el scroll). Así que lo que voy a someter a vuestra consideración es una idea al respecto.

El propósito es recabar vuestras opiniones, sugerencias, ampliaciones o correcciones sobre el particular antes de mandar nada al Consorcio para someterlo al criterio del W3c.

:scroll() Mi propuesta de una nueva pseudoclase Css

Captura pantalla de la propuesta en la lista del W3c

En la actualidad hay realizaciones imposibles de hacer con puro Css. Como el efecto parallax scroll.

Css en sus especificaciones no provee de un mecanismo para saber si el usuario de una web interactúa con las barras de desplazamiento -scroll- (mucho menos saber si alcanzan o sobrepasan un punto dado) y en base a esa información aplicar estilos declarados en la hoja de estilo a tal efecto.

Déjeme ejemplificar con un pseudo código html. Tengamos por ejemplo lo siguiente:/p> <body> <article class='one'> <header/> <img.../> <p/> </article> <article class='two'> <header/> <img.../> <p/> </article> </body>

Y ahora un Css inicial que aplica en el momento que la página es cargada:

article { width: 100vw; height: 100vh; overflow: hidden; } .two header { transform: translatex(-100vw); } .two img { position: absolute; top: -100%; }

En un primer momento, sin interactuar el usuario con la página, se muestra el 'article' con clase '.one' ocupando todo el viewport por los tamaños declarados.

Al desplazarse hacia abajo con el scroll el 'header' y la imagen del 'article' con clase '.two' son inaccesibles. Quedan fuera del campo de visión por haber sido trasladado uno y posicionado con la propiedad 'top' la otra.

Esta es la carencia de Css que mencionaba antes. Una vez hecho scroll vertical (scroll-Y) un valor igual a la altura de la ventana con Css no se puede actuar para que el 'header' y la imagen del ejemplo cambien sus valores de 'transform' y 'top'.

Selectores con la pseudoclase Css propuesta :scroll()

Aquí viene en ayuda la propuesta de pseudoclase Css que someto a vuestra consideración. Primero la ejemplarizo en un selector ya continuación la explicación de su posible uso y otras aclaraciones:

/*♫ Here comes the sun ♪♪*/ html:scroll(top: 50vh) .two header { transform: translatex(0); } html:scroll(top: 55vh) .two img { animation: my_animation 1s; }

¿Se entiende, no? Lo que estoy haciendo con la primera regla css es que cuando se haya recorrido una distancia de 50vh con el scroll al 'header' del elemento con clase 'two' le aplique la transformación indicada (en nuestro ejemplo compensa el valor inicial 'translatex(-100vw)' y el 'header' se hace visible).

Con el segundo selector html:scroll(top: 55vh) .two img al llegar el scroll a 55vh (longitud recorrida en su desplazamiento) aplicamos la animación indicada que se supone hace aparecer la imagen de una forma imaginativa.

Sintaxis de la pseudoclase css :scroll()

Como todas las pseudoclases Css comienza por los dos puntos característicos : seguidos del nombre de la pseudoclase scroll y terminado con un paréntesis () para contener el valor de su argumento.

El argumento de :scroll()

Cada valor del argumento (lo que va dentro del paréntesis) de la pseudoclase :scroll() estaría formado por dos partes:

Palabra clave
Una de las dos palabras utilizadas en las propiedades de situación | 'top' | 'left' | seguida de un operador como los dos puntos ':' para indicar igualdad o los de relación mayor que '>', menor que '<'...
La palabra clave 'top' sólo estaría permitidaspara el scroll-Y (desplazamiento vertical) y 'left' para el desplazamiento horizontal (scroll-X)
Cantidad numérica
Un número positivo y cualquiera de las unidades de medida definidas por css, ya sean absolutas como relativas: 10px, 20%, 10rem, 50vw.
Los valores en negativos no estarían permitidos.

Valor del argumento de :scroll() mayor que el tamaño del elemento

partes del scrollbar
Origen de la imagen: Css-tricks.com

La regla no se aplicará.
Por ejemplo, si el selector es tal que .box:scroll(left: 500px) y la anchura de '.box' es menor de 500px la regla será ignorada. Nada ocurre.

Advertir que la longitud de la barra de scroll en el html es la anchura o altura de la ventana o viewport, no la del todo el documento.

Y en este valor de su tamaño están incluidos otros elementos (flechas laterales, esquina si están presentes las 2 barras, étc).

Son detalles que habrá que tener presentes si se utilizan valores como los "viewport %". Un valor de 100vh nunca sería alcanzado.

Doble valor en la pseudoclase :scroll()

.element:scroll(top: 100px, left: 20%) {}
El argumento contiene dos valores separados por una coma ',' uno para cada scroll (X e Y). Se aplicaría la regla en el momento que cualquiera de los dos valores (uno cualquiera de ellos) sea cierto.

Dos pseudoclases :scroll() enlazadas

.element:scroll(top: 100px):scroll(left: 20%) {}
Se aplicará la regla cuándo y sólo cuándo ambas se cumplen.

Rangos en los valores de la pseudoclase :scroll()

Habrá ocasiones en que se desee aplicar la pseudo clase entre un par de valores determinados y no sólo al cumplirse uno. Por ejemplo mientras el desplazamiento se encuentre entre un valor mayor al 20% y menor del 80%. En este caso se utilizarían los operadores matemáticos oportunos:
:scroll(100px < top < 80%) {}

O con los operadores cambiados:
:scroll(100px > top > 80%) {}
para aplicar en los valores que antes dejamos excluidos.

Exclusión de rangos en la pseudoclase :scroll()

La pseudoclase :scroll() se podrá utilizar en combinación con otras pseudoclases como la de negación :not para excluir valores, ya sea un valor sencillo o un rango
:scroll(:not(left: 25%))
:scroll(:not(100px < top < 80%)) {}
Observa que como ocurre en otros casos similares son intercambiables las dos pseudoclases. Cualquiera puede ser la que contiene a la otra:
:not(:scroll(100px < top < 80%)) {}

Nota que se pueden cubrir los mismos valores ya sea mediante rangos con los operadores o por exclusión con la pseudoclase ':not()'.

Esta redundancia ya sucede en otros aspectos de Css. Por ejemplo, podemos seleccionar un elemento del html que tenga una clase (.mi_clase) bien con el selector de clase .mi_clase{} o con el de selector por atributo [class='mi_clase']{}.

Uso de calc() en el argumento de :scroll()

Permitido
.parent:scroll(top: calc(100% - 20px)) > .child {}

La pseudoclase :scroll() es aplicable a

Todos aquellos que admiten barras de desplazamiento para acceder a la parte de su contenido que queda oculta por tener unas medidas inferiores a la suma de sus elementos contenidos en ellos cuando las scrollbar no han sido anuladas (i.e. por overflow declarado) y mientras estas barras estén presente.

Incluidos los elementos vacíos que admiten barras de desplazamiento como los textarea´s

Una demo simulando la pseudoclase :scroll()

Después de tanto texto seguro que estás deseando ver algo que se parezca a lo que sería la pseudoclase :scroll() en funcionamiento.

Accede el siguiente pen y cliclea sobre la (falsa) barra de desplazamiento. Imagina que lo mismo que sucede ahora al pinchar ocurriese por desplazamiento y arrastre del scroll y que en vez de estar realizado en base al :checked está detras :scroll().

Ver demo (simulación)

De donde surge la idea

Por si tienes curiosidad por saber el porqué o de donde surge esta loca idea de proponer desde el blog la creación de algo nuevo en la especificaciones de css te comento.

Esta carencia de Css de no poder "conocer o saber" de las interacciones del usuario sobre el scroll ya la había manifestado en el pasado en alguna ocasión.

También he jugado un poco emulando en puro Css algún aspecto del parallax scroll: Como este post, o este otro, o este tercero, y otro post más o en alguna demo como en estas tabs o pestañas donde recreo con css las barras de desplazaiento.

Pero todas pecan de algo o dejen algo que desear en algún aspecto y el resultado final siempre falla o es puro divertimento nada funcional. Descubrirás fácilmente sus carencias a poco que las pruebes.

Así que si carecemos de algo nada mejor que ser nosotros quien pidamos que nos lo den ;-)

Tu turno, por favor

Bueno, esto es lo que hasta el momento ha dado de sí mi cabecita. Considéralo como una versión Beta. No he pensado detenidamente y depurado lo que expongo porque prefiero someterlo en este estadio inicial a vuestros análisis y críticas.

Siéntete libre de darme tu opinión y colaborar para poder presentar desde un medio con ámbito de habla española (no inglesa) una propuesta a los redactores de las especificaciones de Css.

avatar del Editor del blog

Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Don Kseso Kseso