:scroll() Propuesta de pseudoclase para que Css sepa del scroll 12.6.14
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
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
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
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().
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.
 -- 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.){kind=link}
Kseso
the obCSServer ᛯ 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 Kseso
Me parece una gran idea, nadie mejor que tu para proponer algo a la gran y todopoderosa W3C. Una pregunta me surge, en el movil y tablets, o dispositivos touch, donde el desplazamiento puede cambiar, como se comportaria? Saludos,
ResponderEliminarBueno. Yo sólo me limito a exponer una idea en términos "conceptuales de Css".
EliminarEl desarrollo "técnico" e implementación en navegadores se lo dejamos a los que sepan de ello ;-)
Un saludo
Yo de esto no se, programador no soy, ni quiero pretender serlo, lo cierto es que como Diseñador Gráfico pues la sintaxis de momento se entiende y es fácil de aplicar, es una necesidad hoy por hoy controlar el scroll? sí aunque no por el efecto parallax que sí muy bonito y todo pero no muy util la verdad (aunque la estetica es full important eso see), lo que sí me parece util es llevar al usuario mediante su interacción a un lugar del html pero que viaje en primera clase, tranquilo y relajadamente y no como jet a toda velocidad (a menos que use js). Yo apoyo la iniciativa, aunque si es por sugerir algo pa´ no quedarme corto, en el ultimo 'scroll' dice: 'Please, give us the pseudo-class :scoll() {}', no debería decir "Scroll."
ResponderEliminarUn saludo.
La idea es buena y la explicación es concisa y está muy bien detallada, pero me parece que la pseudoclase :scroll() no es muy necesaria, salvo para efectos parallax y similares. Además, el scroll se puede controlar actualmente con Javascript, por lo que creo que sería redundante aplicarlo en CSS.
ResponderEliminarAsi diríamos de display: table; y de el required y placeholder en html si eso se hace javascript para que hacerlo..........pero yo creo que esto es mas que un simple efecto parallax creo que abriría un abanico de oportunidades y efectos nuevos desde el css.....
EliminarDebería aprovechar que el blog soporta comentarios anidados y poner lo que se me iba ocurriendo al leer justo debajo de cada uno de los anteriores, además de éste que tiene que ver con la entrada principal. Pero tres comentarios seguidos me parece mucho; como generalmente se leen en orden, pongo todo junto acá.
ResponderEliminarHay algunos apuntes sobre el tema que fueron hechos al autor en privado solamente porque el artículo aún no había sido publicado, y que iba a copiar aquí hasta que noté que el punto principal no era sobre diseño sino sobre la forma de exponerlo al W3C.
Algo voy a extraer, pero la transcripción ya la descarté.
Me parece que hay algunas confusiones con esto del scroll leído por un CSS. Y es porque existen muchas carencias y otros tantos puntos de vista.
Es verdad lo que decís, g3kdigital, el desplazamiento suave debería ser una opción del diseñador; pero no tiene que ver con estilos. En realidad es de HTML, o mejor aún, del navegador; porque yo tengo a todos configurados para que los desplazamientos sean "amortiguados" y si existe esa configuración también se la podría alcanzar con un atributo o -como sugerís- con una propiedad para todo lo que tenga scrollbar ... y pueda dar un salto de un punto a otro.
De momento la animación es con javascript, pero como CSS ya se ha metido en su terreno animando posiciones, quizá haya una forma de meter eso también en una sintaxis. En realidad hay que agregar algo más que tiene que ver con el scroll, pero que no es el tema actual. CSS debería leer las coordenadas de los elementos, capturar sus valores y pasarlos a 'transition' o 'animation' para forzar un desplazamiento trucho que no tocará realmente el del documento.
Por ahora, es pedirle mucho.
Y casi coincidiría con vos y Jorge MG en eso de que el uso principal serán los efectos parallax. Tienen razón, pero está en el ingenio de los desarrolladores encontrar alguno más. Porque si le agregan una pseudoclase para cuando el elemento está "en cuadro" (visible en el 'body') y así mostrar un tooltip o un menú asociado, entonces ya tiene más usos. Y el control del porcentaje del viewport en que aparecerá ese cambio ya exige que el CSS vea los desplazamientos. Y si ni siquiera depende de un elemento, sino que un aviso debe aparecer al 50% del documento, entonces sí ya tenemos algo más que un paralaje para usar :scroll() tal como está propuesto. Claro que el tema de los porcentajes de la barra de desplazamiento y los del documento trae otro inconveniente, y es el "pequeño" desfasaje que hace que un 100% de desplazamiento de la barra no sea igual a un 100% del arrastre del documento.
Una característica importante (por no decir indispensable) de la propuesta es que trabaja con operadores "mayor que" y "menor que", o límites para aplicar los formatos. Algo que en Flash o JS no siempre es necesario.
Vamos por partes, que dijo Jack.
ResponderEliminarg3kdigital:
El mencionar el efecto parallax fue sólo eso, una mención al que quizás sea, si no el que más, sí uno de los efectos de desplazamiento más conocido.
Ahí fuera hay cienes de ellos que no son parallax (entendido como velocidades asíncronas de los elementos al desplzar el documento).
Mira este artículo de hace unas fechas de Charlie Clark en awwwards.com: The Rise of The Scrolling Site.
Y sí, evidentemente es un error de tipeo el :scoll() que advertiste.
Jorge MG
Creo que lo comentado a g3kdigital es válido para ti y para Furoya. No sólo es una cuestion de velocidades de desplazamiento. El límite suele estar en la imaginación de quien lo usa. Con ésta o con cualquier otro contenido de los amparados por la especificación.
Creo que no son necesarios ejemplo.
Sobre la última parte de tu aporte: Además, el scroll se puede controlar actualmente con Javascript, por lo que creo que sería redundante aplicarlo en CSS
Bueno, este es un viejo conocido. Fíjate si lo será que ya lo oí dicho del :hover xD
Creo que hoy por hoy para hacer cualquier cosa en la web hay al menos dos lenguajes. Y ¿qué decir de vías dentro de un mismo lenguaje?. Si js puro o cualquiera de las librerías o "creaciones" basadas en él. Que si Css puro o alguno de los llamados "preprocesadores"...
Todos con sus pros y contras.
Con furoya Furoya he mantenido una más que enriquecedora correspondencia. Sólo dejo constancia de que sus puntos de vista son más amplios que los mios. El tiene presente (por conocimientos) cuestiones que yo ni tuve presentes ni evalúo por desconocimiento. Soy sólo un "animal ceesesero", que diría otro viejo amigo xD
Pero sí voy a traer algo que le comenté a él, que es el "la esencia" de la idea:
Mi exposición no pretende estar hecha desde / o en base a los mecanismos del navegador para hacer una cosa u otra y cuándo o cómo hacerla.
Vamos, que no he tenido en cuenta en ningún momento "the engine" o el motor de los navegadores y su funcionamiento o procesos internos.
Todo es desde una perspectiva de "lenguaje y sintaxis" Css.
...
Pero una cosa sí tengo claro: que bastante aporto con dar la idea más o menos detallada. No me corresponde a mi (ni puedo ni tengo los conocimientos) el desarrollo en el corpus de las especificaciones Css y mucho menos el cómo hacerla operativa por los navegadores.
En ambos casos "doctores tendrá la iglesia de cada cuál" xDD
Gracias a todos por los aportes, incluídos aquellos que lo han hecho por otros medios distintos al blog.