11534 sujets

JavaScript, DOM et API Web HTML5

BREAKING POINT dynamique

Bonjour,

Cette discussion fait suite à cette discussion, les questions CSS étant résolues.

Afin de créer un breaking point dynamique, je mesure la largeur de l'élément, la largeur de la fenêtre.

Quand la fenêtre est moins large que l’élément j'ajoute une classe supposée activer un paquet de déclarations CSS.

Ne fonctionne pas dans le codepen, voyez-vous l'erreur ?

Merci d'avance.
Modifié par boteha_2 (30 Dec 2024 - 21:24)
Bonjour,

Le sujet me semble intéressant, j'espère plus de participants.

Actuellement l'approche du codepen semble mauvaise.
Lorsque la <table> est plus large que la largeur de la fenêtre d'affichage je modifie le CSS pour qu'elle s'adapte à la largeur de la fenêtre d'affichage.
Ce faisant elle n'est donc plus plus large, donc le script modifie le CSS pour qu'elle retrouve sa dimension originale.

Je vais revenir au media query et calculer la largeur du tableau côté PHP avec mb_strwidth() ou imagettfbbox().
Bonjour,

J'ai pensé estimer côté PHP la largeur du tableau, puis créer dans le <head> une variable CSS qui serait le breaking point de la feuille de style CSS.

<style>
:root
{
--breakpoint: 1000px;
}
</style>


@media screen and (max-width: var(--breakpoint))
{
...
}


Cela ne fonctionne pas car tout simplement il est impossible d'introduire une variable CSS dans une déclaration de media queries.

Le sujet est bien documenté, par exemple sur ce forum stackoverflow (rien trouvé à ce sujet chez Alsacreations).

C'est possible avec SCSS CODE, comme expliqué chez stackoverflow.
Je ne connais pas cette technique et je me demande :
1) Est-ce facile à mettre en œuvre ?
2) Est-ce supporté par tous les navigateurs actuels ?
3) Est-ce fiable une fois en place ?

Une solution peu élégante mais toute simple consiste à envoyer toute la media queries par PHP dans le head, sans variable CSS mais avec la valeur calculée côté PHP.

<style>
@media screen and (max-width: 1000px)
{
...
}
</style>


PS : j'ai abandonné la piste Javascript.
Modifié par boteha_2 (02 Mar 2025 - 19:32)
Administrateur
Bonjour,

pour utiliser le préprocesseur Scss, il te faut un compilateur et donc gérer l'installation d'un outil. Perso ce serait soit Nuxt.js (un CMS Vue.js pour la faire courte) qui gère ça sans que j'aie à m'en préoccuper soit un peu à la main avec Vite (il faut déjà avoir Node.js et npm, l'habitude de la ligne de commande, etc). Ou Webpack si tu as 2 mois devant toi Smiley troll .
Ah je vois que le site de Sass recommande Prepros en outil graphique (et qu'il y a une version de test gratuite et que la version payante est toujours à $29 ; y a pas d'inflation au Népal apparemment Smiley eek ). Il y a une bonne dizaine d'années c'était notre outil privilégié.
EDIT : tu peux déjà tester dans Codepen. Dans les options de l'onglet CSS, tu peux utiliser Scss et il compile en temps réel vers du CSS qu'il injecte dans la "page" enfin la vue résultante.

Mais il y a une fonctionnalité CSS plus récente que les Media Queries qui vient combler le manque : les Container Queries. Ce n'est plus la largeur de la page mais la largeur de ton "composant" (tableau ici) qui va te permettre de dicter les styles dans ce container.
Modifié par Felipe (03 Mar 2025 - 14:55)
Bonjour Felipe,

Merci de ton suivi.

Scss, Sass, cela me semble trop compliqué, d'autant plus que j'ai une solution simple côté PHP.

Container Queries, tu as raison, mais je pense que cela ne change rien quant à la variable CSS impossible à rentrer dans la contrainte de taille. 

@container (max-width: var(--breakpoint))


Ne fonctionnera pas, sauf erreur.
Prévenir un modérateur
Répondre au sujet
Aller à