3247 sujets
Critiques de vos sites: code et design
C'est mieux parce que l'on peut changer le font-size sur le HTML sans que cela ne pose plus problème. Par contre, la flèche a tendance à s' "envoler" avec main lorsque l'on définie un font-size plus important que 1rem (c'est le cas avec ta définition de 5rem actuelle sur <main>). Je ne l'avais pas signalé mais c'était déjà le cas dans le code précédent. C'est embêtant ce couplage fort entre deux composants.
Attention : il manque la fermeture de tes parenthèses pour certains calc().
Modifié par Olivier C (09 Mar 2024 - 13:00)
Attention : il manque la fermeture de tes parenthèses pour certains calc().
Modifié par Olivier C (09 Mar 2024 - 13:00)
Bonjour,
Amicalement,
Olivier C a écrit :Étonnant, je n'observe pas ça. Dans quelles conditions exactement ? (machine, navigateur, largeur de la fenêtre, zoom, police par défaut du navigateur, dev tools ouvert ?). Il faut faire gaffe au dev tools de Chrome quand il y a du sticky. J'observe des trucs bizarres de temps en temps.
Par contre, la flèche a tendance à s' "envoler" avec main lorsque l'on définie un font-size plus important que 1rem (c'est le cas avec ta définition de 5rem actuelle sur <main>).
Olivier C a écrit :Effectivement (erreur de copier-coller lors de l'édition du post). Merci ! J'ai corrigé dans le post.
Attention : il manque la fermeture de tes parenthèses pour certains calc().
Amicalement,
Bonjour,
Si c'est avec un dev tool ouvert, il est probable que ce soit un bug du dev tool (EDIT: ou un problème de mobilisation de ressources quand le dev tool est ouvert ?).
J'ai eu le cas en particulier en ayant sélectionné des devices de type mobile. Des problèmes d'affichage inexplicables survenait au scroll. En attendant un peu avant de rafraîchir la page, ou en changeant de device puis en revenant au device précédant, les problèmes d'affichage disparaissaient.
Amicalement,
Modifié par parsimonhi (09 Mar 2024 - 14:54)
Si c'est avec un dev tool ouvert, il est probable que ce soit un bug du dev tool (EDIT: ou un problème de mobilisation de ressources quand le dev tool est ouvert ?).
J'ai eu le cas en particulier en ayant sélectionné des devices de type mobile. Des problèmes d'affichage inexplicables survenait au scroll. En attendant un peu avant de rafraîchir la page, ou en changeant de device puis en revenant au device précédant, les problèmes d'affichage disparaissaient.
Amicalement,
Modifié par parsimonhi (09 Mar 2024 - 14:54)
en passant entre deux,
Dernière mise à jour sur l'idée du grid , du float et des container queries et enfin display pour cacher le lien retour lorsque devenu inutile. Plus de barre de scroll qui gache et CSS var() pour la valeur de hauteur d'apparition du lien retour.
https://codepen.io/gc-nomade/pen/dyLGgYg
Vos exemples sont aussi excellent, désolé de rester scotcher sur mon idée.
Cdt
Dernière mise à jour sur l'idée du grid , du float et des container queries et enfin display pour cacher le lien retour lorsque devenu inutile. Plus de barre de scroll qui gache et CSS var() pour la valeur de hauteur d'apparition du lien retour.
https://codepen.io/gc-nomade/pen/dyLGgYg
Vos exemples sont aussi excellent, désolé de rester scotcher sur mon idée.
Cdt
Franchement, cet excursus sur les scroll top aurait mérité son propre sujet.
Un pseudo-élément... Et ça marche dans tous les cas sans qu'il y ait d'effets de bord apparents. Bravo gcyrillus, là franchement chapeaux. Ça va être difficile de faire mieux en attendant le support des règles avant-gardistes utilisées par Raphaël que j'ai mentionné plus haut.
Un pseudo-élément... Et ça marche dans tous les cas sans qu'il y ait d'effets de bord apparents. Bravo gcyrillus, là franchement chapeaux. Ça va être difficile de faire mieux en attendant le support des règles avant-gardistes utilisées par Raphaël que j'ai mentionné plus haut.
Bonjour,
Il ne reste plus qu'à faire en sorte qu'on puisse se servir du footer aussi comme d'un footer si on a par exemple le html ci-dessous (il pourrait y avoir plusieurs autres balises à la place ou à la suite des <p>, on n'en connait pas à l'avance les dimensions, et si en plus l'ensemble de ces balises n'ont pas besoin d'être dans un wrapper intermédiaire, ce serait la perfection ) :
Amicalement,
gcyrillus a écrit :C'est machiavélique. Et c'est vrai que cette barre de scroll, elle gâchait (bien que je sois sur Mac et qu'en conséquence je ne la voyais guère sauf à insister lourdement pour qu'elle apparaisse).
Dernière mise à jour sur l'idée du grid , du float et des container queries et enfin display pour cacher le lien retour lorsque devenu inutile. Plus de barre de scroll qui gache et CSS var() pour la valeur de hauteur d'apparition du lien retour.
gcyrillus a écrit :Tu as eu raison d'insister.
...désolé de rester scotcher sur mon idée.
Olivier C a écrit :J'étais à peu près sûr que ça allait t'intéresser. Mais là, cela va au delà de mes espérances !
Franchement, cet excursus sur les scroll top aurait mérité son propre sujet.
Il ne reste plus qu'à faire en sorte qu'on puisse se servir du footer aussi comme d'un footer si on a par exemple le html ci-dessous (il pourrait y avoir plusieurs autres balises à la place ou à la suite des <p>, on n'en connait pas à l'avance les dimensions, et si en plus l'ensemble de ces balises n'ont pas besoin d'être dans un wrapper intermédiaire, ce serait la perfection
) :<footer>
<p>Qu'il est beau, mon joli footer !</p>
<p>Oh oui, qu'il est beau !</p>
<a href="#">Haut</a>
</footer>Amicalement,
Bonjour,
Cette affaire est pleine de rebondissements.
J'ai essayé la solution de gcyrillus sur un "vrai" site déjà en production. Malheureusement, le display:grid sur le body y a des conséquences facheuses.
J'ai donc cherché une alternative, tout en conservant les autres idées de la solution. À un moment, je me suis aperçu que le simple fait d'avoir une propriété "container" sur le parent du "bouton" scrollTop (la div de ma solution précédente, ou le footer de la solution de gcyrillus) suffisait à faire disparaitre la scrollbar quand le contenu était moins haut que la fenêtre du navigateur.
J'ai fait le lien avec la notion de "containment" et je suis arrivé à la conclusion qu'il suffisait de rajouter quelque chose du genre "contain:layout" à la div de ma solution pour faire disparaitre la scrollbar quand elle n'est pas nécessaire. Au passage j'ai remplacé la div par une nav. Voici où j'en suis :
Il reste tout de même un détail que je n'ai pas encore réglé (je pense que ça devrait pouvoir se faire cependant, mais sans en être sûr à 100%). Lorsque la fenêtre a une hauteur légèrement inférieure à celle du contenu, de quelques pixels et au plus d'une hauteur égale à la hauteur du "bouton" de scrollTop (marges et padding éventuels compris, à voir dans le détail), il n'est pas possible de faire apparaitre en entier ce "bouton" de scrollTop. Il est tronqué tant que le scroll possible sur le contenu n'est pas supérieur à la hauteur de ce "bouton" (ce qui est normal, puisque ce "bouton" ne compte plus pour le scroll du fait qu'on a mis une propriété css contain à son parent si j'ai bien compris cette histoire de containment : n'hésitez pas à me dire si j'ai tort car pour l'instant, je n'y comprends pas grand chose), et l'utilisateur ne pourra le faire apparaitre en entier qu'en diminuant la fenêtre en hauteur. Ce n'est pas spécialement génant car le bouton est alors assez inutile dans cette circonstance, mais ce petit détail visuel pourrait gêner un puriste (et ce n'est pas ça qui manque ici
).
Peut-être saurez-vous régler ça ?
Amicalement,
Modifié par parsimonhi (11 Mar 2024 - 11:24)
Cette affaire est pleine de rebondissements.
J'ai essayé la solution de gcyrillus sur un "vrai" site déjà en production. Malheureusement, le display:grid sur le body y a des conséquences facheuses.
J'ai donc cherché une alternative, tout en conservant les autres idées de la solution. À un moment, je me suis aperçu que le simple fait d'avoir une propriété "container" sur le parent du "bouton" scrollTop (la div de ma solution précédente, ou le footer de la solution de gcyrillus) suffisait à faire disparaitre la scrollbar quand le contenu était moins haut que la fenêtre du navigateur.
J'ai fait le lien avec la notion de "containment" et je suis arrivé à la conclusion qu'il suffisait de rajouter quelque chose du genre "contain:layout" à la div de ma solution pour faire disparaitre la scrollbar quand elle n'est pas nécessaire. Au passage j'ai remplacé la div par une nav. Voici où j'en suis :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Sticky to top button</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
html {scroll-behavior:smooth;}
body
{
position:relative;
margin:0;
overflow-wrap:break-word;
}
main
{
font-size:5rem;
}
nav
{
contain:layout;
position:absolute;
top:100vh;
left:0;
right:0;
height:calc(100% - 100vh);
pointer-events:none;
}
a
{
--m:min(10vmin,1rem);
--d:calc(4 * var(--m));
font-size:var(--m);
position:sticky;
top:calc(100vh - var(--d) - var(--m));
margin:0 var(--m) 0 auto;
display:flex;
justify-content:center;
align-items:center;
height:var(--d);
width:var(--d);
border-radius:50%;
background-color:#0007;
color:#fff;
pointer-events:auto;
}
</style>
</head>
<body>
<main>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</main>
<nav>
<a href="#">Haut</a>
</nav>
</body>
</html>Il reste tout de même un détail que je n'ai pas encore réglé (je pense que ça devrait pouvoir se faire cependant, mais sans en être sûr à 100%). Lorsque la fenêtre a une hauteur légèrement inférieure à celle du contenu, de quelques pixels et au plus d'une hauteur égale à la hauteur du "bouton" de scrollTop (marges et padding éventuels compris, à voir dans le détail), il n'est pas possible de faire apparaitre en entier ce "bouton" de scrollTop. Il est tronqué tant que le scroll possible sur le contenu n'est pas supérieur à la hauteur de ce "bouton" (ce qui est normal, puisque ce "bouton" ne compte plus pour le scroll du fait qu'on a mis une propriété css contain à son parent si j'ai bien compris cette histoire de containment : n'hésitez pas à me dire si j'ai tort car pour l'instant, je n'y comprends pas grand chose), et l'utilisateur ne pourra le faire apparaitre en entier qu'en diminuant la fenêtre en hauteur. Ce n'est pas spécialement génant car le bouton est alors assez inutile dans cette circonstance, mais ce petit détail visuel pourrait gêner un puriste (et ce n'est pas ça qui manque ici
).Peut-être saurez-vous régler ça ?
Amicalement,
Modifié par parsimonhi (11 Mar 2024 - 11:24)
Bonjour,
Eureka !
Amicalement,
Modifié par parsimonhi (11 Mar 2024 - 20:42)
Eureka !
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Sticky to top button</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
html {scroll-behavior:smooth;}
body
{
position:relative; /* nécessaire pour faire fonctionner la solution */
margin:0;
overflow-wrap:break-word;
}
main
{
font-size:3em;
}
nav
{
/* toutes les lignes ici sont importantes pour faire fonctionner la solution */
container:scrollTop/size;
position:absolute;
left:0;
right:0;
/* la valeur de --horizon doit être supérieure ou égale à 100vh */
/* on peut l'augmenter si on veut que le bouton n'apparaisse pas dès qu'on scrolle */
--horizon:100vh;
top:var(--horizon);
height:calc(100% - var(--horizon));
pointer-events:none;
}
a
{
--m:1rem;
--d:calc(4 * var(--m));
font-size:var(--m);
/* les 4 lignes qui suivent sont importantes, le reste est cosmétique */
position:sticky;
top:calc(100vh - var(--d) - var(--m));
margin:0 var(--m) 0 auto;
pointer-events:auto;
/* fin des lignes importantes pour faire fonctionner la solution */
display:flex;
justify-content:center;
align-items:center;
height:var(--d);
width:var(--d);
border-radius:50%;
background-color:#0007;
color:#fff;
transition:opacity 1s;
pointer:cursor;
}
/* la valeur de comparaison au max-height doit être supérieure ou égale à --d */
/* on peut l'augmenter si on souhaite que le bouton n'apparaisse */
/* que quand le contenu est sensiblement plus grand que la fenêtre */
@container scrollTop (max-height:4rem)
{
a {opacity:0;visible:hidden;}
}
</style>
</head>
<body>
<main>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</main>
<nav>
<a href="#">Haut</a>
</nav>
</body>
</html>Amicalement,
Modifié par parsimonhi (11 Mar 2024 - 20:42)
Bon, alors comme vous avez tous les deux bien travaillés et qu'au final je n'ai pas bien eu le temps de m'y pencher dessus ce WE (et que le peu de temps qui me reste je le passe surtout sur le back), je me suis contenté de faire un petit custom de la solution de Raphaël avec mon intuition de départ évoquée plus haut : CodePen, Scroll top.
Axe d'amélioration : faire un fondu enchaîné avec `opacity` avant l'apparition ou la disparition de l'icône.
Par défaut, si pas de prise en charge (comme actuellement sous Firefox ou Safari), la flèche est présente. C'est une solution pas totalement satisfaisante pour l'instant en raison de son support actuel, mais ce sera le top à l'avenir. Et comme de mon côté j'ai codé un front qui ne sera pas en service avant au moins un an, ce devrait être bon pour moi.
:root {
--colorW: #fff;
--color2: tomato;
--color5: orange;
}
.scroll-top {
position: fixed;
z-index: 4000; /* Il faut que la flèche puisse prendre le pas sur pratiquement tout, il faut penser par exemple aux maps (Leaflet, etc) */
right: 0;
bottom: 0; /* fallback */
bottom: env(safe-area-inset-bottom, 0); /* ça, c'est l'ajout de la solution pour les boutons de navigateurs sur la page dont nous avons parlé plus haut */
display: grid;
place-content: center;
width: 1.5em;
aspect-ratio: 1/1; /* ça, c'est cosmétique, c'est juste pour le sortir de temps en temps... */
font-size: 2em;
color: var(--colorW);
background: var(--color2);
text-decoration: none;
border-radius: 50%;
box-shadow: 0 0 .5rem hsla(0, 0%, 0%, 0.5);
animation: scroll-top auto linear forwards;
animation-timeline: scroll(root); /* définition d'un pourcentage de progression sur tout le document */
animation-range: 0 100dvh; /* Définition d'une plage en lien avec les pourcentages de l'animation */
&:where(:focus-visible, :hover) {
color: var(--colorW);
background: var(--color5);
outline: none;
}
}
@keyframes scroll-top {
0%, 99% {
transform: scale(0); /* pas de `display:none` sur une animation, du coup voilà mon actuce */
}
100% {
transform: scale(1);
}
}Axe d'amélioration : faire un fondu enchaîné avec `opacity` avant l'apparition ou la disparition de l'icône.
Par défaut, si pas de prise en charge (comme actuellement sous Firefox ou Safari), la flèche est présente. C'est une solution pas totalement satisfaisante pour l'instant en raison de son support actuel, mais ce sera le top à l'avenir. Et comme de mon côté j'ai codé un front qui ne sera pas en service avant au moins un an, ce devrait être bon pour moi.
Bonjour,
Amusant, j'étais justement en train d'essayer de faire marcher cette solution moi aussi.
Reste à faire disparaitre la scroll-bar quand le contenu est moins haut que la fenêtre, non ?
Amicalement,
Olivier C a écrit :
Je me suis contenté de faire un petit custom de la solution de Raphaël avec mon intuition de départ évoquée plus haut : CodePen, Scroll top.
Amusant, j'étais justement en train d'essayer de faire marcher cette solution moi aussi.
Reste à faire disparaitre la scroll-bar quand le contenu est moins haut que la fenêtre, non ?
Amicalement,
Fut une époque, j'aurais sauté sur mon ordinateur au réveil pour régler le problème ; aujourd'hui je vais devoir attendre 22h00. Faites des gosses...
Je pense que le problème vient de là :
Il y a d'autres valeurs que root, sinon peut-être trouver quelque chose avec calc()... Je verrai donc ce soir.
Je pense que le problème vient de là :
animation-timeline: scroll(root);Il y a d'autres valeurs que root, sinon peut-être trouver quelque chose avec calc()... Je verrai donc ce soir.
Bonjour,
Si je mets for (let i = 0; i < 1; i++) dans le code source (pour obtenir un contenu court), le bouton est visible en bas à droite de l'écran (alors qu'il ne devrait pas s'il n'y a pas de scrollbar affichée).
J'en suis exactement au même point en fait. Il manque quelque chose pour que ça fonctionne vraiment quand le contenu est trop court pour générer une scrollbar.
Amicalement,
Modifié par parsimonhi (12 Mar 2024 - 17:27)
Olivier C a écrit :
En fait le code fonctionne sans problème
Si je mets for (let i = 0; i < 1; i++) dans le code source (pour obtenir un contenu court), le bouton est visible en bas à droite de l'écran (alors qu'il ne devrait pas s'il n'y a pas de scrollbar affichée).
J'en suis exactement au même point en fait. Il manque quelque chose pour que ça fonctionne vraiment quand le contenu est trop court pour générer une scrollbar.
Amicalement,
Modifié par parsimonhi (12 Mar 2024 - 17:27)