Changer le CSS global avec un bouton (ou un menu)

Bonjour, les alsacréateurs

En phase de test sur un site que je suis en train de créer, je l’ai soumis dans la rubrique "Critique de vos sites" Après un retour sévère mais juste de "spongebrain", je suis en train de modifier le CSS global du site, j’en ai plusieurs versions (et d’autres à venir)
J'aimerai avoir un bouton ou un menu qui dirait "charge le ccs essai 1, charge le css 2, ..."
pour pouvoir voir les différents changements en temps réel dans la même page.

Possible en pure css ? (il y a un "onclic" qui dirait" links css spécifiques" ?
il n’y a pas de fonction en CSS (je connais bien actionscript de flash, mais flash est mort depuis qu’il n’est pas lu sur iPhone et iPad si j’ai bien compris?)

ou une bidouille javascript (pouah !) ? je suis preneur pour la phase test
bien que pour l’instant je voudrais faire le site HTML/CSS uniquement
(il y a déjà suffisamment de choses à apprendre)

merci de votre aide

Tout le site n'a été fait qu'avec les tutoriaux d’AlsacréationS
dans une prochaine étape je vais le rendre "élastique" puis "responsible" si mes moyens le permettent. (Nouvelles questions garanties d’ici 15 jours)
Modifié par Gropilou (23 Feb 2016 - 15:19)

Bonjour Grospilou,

J'utilise le concept que tu évoque sauf que dans mon cas, il ne s'agit pas de charger une feuille de style mais de basculer la langue du site.

Pour ce faire j'utilise un élément de formulaire (select) qui envoi un cookie avec le choix de l'utilisateur. Ce cookie, lu et interprété, redirige le site vers la bonne langue.

La différence avec ce que tu décris et ce que j'utilise est l'application en temps réel sans rechargement de la page.

En effet, dans mon cas, tout changement dans le sélecteur de langue provoque le rechargement de la page (chose qui me semble inévitable au vu de la technologie utilisée et des besoins à postériori dans le code).

Il te serait tout à fait possible d'utiliser exactement la même mécanique pour changer le style css car je pense que le rechargement de la page est inévitable.
Dans le cas contraire, il faudra se tourner vers une solution en Ajax (si besoin de synchro avec le serveur) ou en Javascript qui appliquera le style sur la page déjà existante.

Malheureusement je ne possède pas encore de connaissance en JavaScript (et par extension en Ajax) donc voici ma solution en html et php:
* d'abord effectuer la détection et la vérification du cookie de choix de thème
* faire apparaitre la balise link correspondant au choix du cookie ou celui par défaut (dans le cas où le cookie n'existe pas ou est corrompu)
* faire apparaitre un formulaire de sélection

Tout ceci paraît tellement clair dans mon esprit, si ce n'est pas ton cas, n'hésite pas à demander.

Bonne journée,

Ça me parait compliqué, c’est mon premier site, j’avance pas-à-pas (et parfois à reculons comme dans le tango). le rechargement de la page me parait évident. je voudrais juste mettre dans mon pied de page un bouton qui chargerait des css alternatifs que celui utilisé dans le head pour voir les changements (et accessoirement pour le "client", c’est un quelqu’un qui n’entrave que couic à tous ces problèmes.

Plutot que de faire 5 dossiers avec le links "css" différents dans les 31 pages (pour l’instant du site)

"détection" vérification de cookie" "formulaire de sélection" sont des concepts qui ne font pas encore partie de mon vocabulaire.
je veux juste en pied de page un petit menu qui offre le choix du css global utilisé
Modifié par Gropilou (23 Feb 2016 - 15:37)

Bon, si j'ai bien compris le problème, tu veux :
- créer plusieurs feuilles de style pour tester
- pouvoir basculer de l'une à l'autre sans avoir à introduire des scripts PHP ou autre dans ta page
Si le besoin est bien celui-là, perso je créerais plusieurs feuilles CSS avec des points de rupture responsive web rapprochés (ex. Tous les 100 pixels).
Pour changer la présentation, il suffit alors de redimensionner la largeur fenêtre du navigateur...
A chaque point, une nouvelle ergonomie, plus ou moins différente de la précédente, changera l'aspect de la page.
Pas de javascript, juste des media queries successives.
M'enfin... Ce serait mon approche du problème.

Bonjour,

Un petit code simple qui permet de changer de feuille de style via des boutons.

<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0,user-scalable=yes">
<link id="css" rel="stylesheet" type="text/css" href="style1.css"/>
</head>
<body>
<div>
Bonjour
</div>
<button onclick="document.getElementById('css').href='style1.css';">Style 1</button>
<button onclick="document.getElementById('css').href='style2.css';">Style 2</button>
</body>
</html>

Amicalement,

Gropilou a écrit :
J'aimerai avoir un bouton ou un menu qui dirait "charge le ccs essai 1, charge le css 2, ..." pour pouvoir voir les différents changements en temps réel dans la même page.

Possible en pure css ? (il y a un "onclic" qui dirait" links css spécifiques" ?

Note que la valeur de l'attribut onclick est de base du code javascript. Si tu souhaites des boutons classiques, c'est donc une solution javascript comme celle de mon post ci-dessus que tu dois en premier lieu envisager.

Amicalement,
Modifié par parsimonhi (23 Feb 2016 - 16:04)

Bonjour,

Si tu veux en plus "transporter" ton choix de css de page en page, alors une solution javascript ne peut pas régler facilement ton problème.

Pour ce "transport", le plus simple est probablement d'utiliser une session php. Et du coup, il n'y a plus du tout de javascript (les boutons sont des boutons "submit" sans "onclick").

Les boutons de changement de style sont alors inclus dans un formulaire en bas de page.

Et en début de page on lance une session et on utilise une variable de session du genre $_SESSION['xyz'] (xyz pouvant être n'importe quoi) qui contiendra le nom de la feuille de style courante.

Exemple :

<?php
session_start();
if (isset($_POST["style1"])) $_SESSION['css']="style1";
else if (isset($_POST["style2"])) $_SESSION['css']="style2";
if (!isset($_SESSION['css'])) $_SESSION['css']="style1"; // default value
print "<!DOCTYPE html>\n";
?>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0,user-scalable=yes">
<link rel="stylesheet" type="text/css" href="<?php echo $_SESSION['css'].'.css';?>">
</head>
<body>
<div>
Bonjour
</div>
<form method="post" action="<?php echo $_SERVER['PHP_SELF'];?>">
<button type="submit" name="style1">Style 1</button>
<button type="submit" name="style2">Style 2</button>
</form>
</body>
</html>

Amicalement,
Modifié par parsimonhi (23 Feb 2016 - 16:40)

—> parsimonhi
je joue au go (depuis longtemps) au html et au css (depuis peu) mais je connais pas du tout les règles du php.

« Bon, si j'ai bien compris le problème, tu veux :
- créer plusieurs feuilles de style pour tester
- pouvoir basculer de l'une à l'autre sans avoir à introduire des scripts PHP ou autre dans ta page »
(toujours pas compris comment on fait une citation d'un message reçu)
ça c’est sepecat qui le dit

Oui, oui, c’est ça ! mais la solution de changer de css en fonction de la largeur me parait un peu tordue, ça doit néanmoins marcher


Le petit code simple qui permet de changer de feuille de style via des boutons semble bien me convenir

<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0,user-scalable=yes">
<link id="css" rel="stylesheet" type="text/css" href="style1.css"/>
</head>
<body>
<div>
Bonjour
</div>
<button onclick="document.getElementById('css').href='style1.css';">Style 1</button>
<button onclick="document.getElementById('css').href='style2.css';">Style 2</button>
</body>
</html>

à quoi sert : <meta name="viewport" content="initial-scale=1.0,user-scalable=yes"> ?

je crois que ce que je cherche est là :
<button onclick="document.getElementById('css').href='style1.css';">Style 1</button>

je connais pas "button onclick" c’est comme :hover qu’on survole
sauf que là on clique ?, c’est pas la même syntaxe !
Bref je vais essayer, même sans comprendre si ça marche tant mieux
(mais j’aime bien comprendre)

zut envoyé 2 fois le message !
Modifié par Gropilou (23 Feb 2016 - 22:18)

Gropilou a écrit :
Oui, oui, c’est ça ! mais la solution de changer de css en fonction de la largeur me parait un peu tordue, ça doit néanmoins marcher

La solution que je proposais répondait à l'un des critères initiaux du post :

Gropilou a écrit :
Possible en pure css ? (il y a un "onclic" qui dirait" links css spécifiques" ?
il n’y a pas de fonction en CSS (je connais bien actionscript de flash, mais flash est mort depuis qu’il n’est pas lu sur iPhone et iPad si j’ai bien compris?)

Si j'ai bien compris, on parlait bien d'une solution ne mettant en jeu ni Javascript, ni PHP.
Donc, du pur CSS...
Je suis d'accord que changer l'aspect du site tous les 100 pixels de large (ou autre dimensions proches) n'est certainement pas ce que ferait une agence web digne de ce nom, mais en l'occurrence il s'agissait de répondre à une question précise pour un environnement de test.
Ceci n'enlève rien à la pertinence des autres réponses qui ont été faites par ailleurs, mais elles ne correspondent pas, à mon sens, à la question initiale.

—>sepecat
Oui, tu réponds tout à fait à la question posée. je vais tester dès demain

maintenant si
<button onclick="document.getElementById('css').href='style1.css';">Style 1</button>
marche, ça ne me semble pas mal non plus, je pourrais mettre css1, css2 ....etc.

Pour causer avec le destinataire final, ça me parait plus simple,
« clique sur css4, tu préfère avec le fond blanc ? »

sauf que je comprend pas la syntaxe : c’est un bout de javascript
dans une balise html ?

En tout cas, je suis impressionné par la rapidité des réponses et l’implication des alsacréateurs pour répondre à une question. Merci.

Gropilou a écrit :
<button onclick="document.getElementById('css').href='style1.css';">Style 1</button>

Les attributs HTML du type "onXXXX" correspondent à des événements (onclick = clic souris) auxquels il est possible d'associer (valeur de l'attribut) un bout de Javascript ou, mieux, un appel de fonction Javascript (la fonction elle-même se trouvant dans la partie <script>... </script> de la page HTML, en début ou en fin).

Gropilou a écrit :
En tout cas, je suis impressionné par la rapidité des réponses et l’implication des alsacréateurs pour répondre à une question. Merci.

Les forums réputés pour la qualité de leurs échanges ont, en règle générale, une réactivité et un taux de réponse élevés...
Aujourd'hui c'est toi qui pose une question, demain ce sera moi ou un autre. Chacun peut donc se trouver alternativement en position de demandeur (s'il a des lacunes dans un sujet) ou d'apporteur (s'il en maîtrise un autre).
Sans remonter à l'époque des cavernes, c'est vrai que cela change énormément la donne par rapport à l'époque (disons, au siècle dernier...) où tu n'avais sous la main que le collègue ou un pauvre bouquin pour te dépanner sur un sujet donné.
Sur ce point, vive le "ouaibe", car aujourd'hui les développeurs ne perdent plus de temps à poser la question à leur voisin de bureau : copier / coller du message d'erreur sur Google et dans la majorité des cas on voit revenir la "soluce de la mort qui tue". Le truc qu'un quidam a déjà rencontré et sur lequel il aura sué sang et eau avant de partager son bout de connaissance chèrement acquis.

Bonjour,

Gropilou a écrit :
(toujours pas compris comment on fait une citation d'un message reçu)

Quand tu visualises nos messages, tu as normalement en haut à droite de chacun d'entre eux un lien "citer". Au lieu de cliquer sur le gros bouton "Répondre au sujet" en bas, tu cliques sur ce lien. Ça fera apparaitre notre message avec au début un "quote=xxx" entre crochet et à la fin un "/quote" entre crochets. Ce qu'il y a au milieu sera la citation (tu peux y retirer ce que tu veux). Si tu veux que la citation soit en plusieurs morceaux, il suffit des rajouter des "quote=xxx" et des "/quote" entre crochets, et copier entre eux le morceau de notre prose que tu souhaites citer.

Gropilou a écrit :
mais la solution de changer de css en fonction de la largeur me parait un peu tordue, ça doit néanmoins marcher

Elle marche et est astucieuse. Elle est de plus effectivement en css pur, mais elle ne permet pas de tester tout type de css : s'il y a déjà des media queries dans tes css, ça va les perturber.

Je ne pense pas qu'il y ait une solution en css pur qui permette de changer le style d'une page proprement "en toutes circonstances".

Gropilou a écrit :
Le petit code simple qui permet de changer de feuille de style via des boutons semble bien me convenir

Il permet de changer simplement et proprement de feuille de style à l'aide de javascript (quelque soit ce qu'il y a dans la feuille de style). Mais l'inconvénient, c'est que quand tu cliques sur un lien de ta page, la nouvelle page qui s'affiche aura le style de base de ta page, et pas celui choisi en ayant cliqué sur le bouton dans la page dont tu viens. Du coup, si tu navigues dans ton site, à chaque changement de page, tu dois re-cliquer sur le bouton en bas de page pour sélectionner un style. C'est pourquoi j'ai proposé ensuite une solution en php.

Gropilou a écrit :
à quoi sert : <meta name="viewport" content="initial-scale=1.0,user-scalable=yes"> ?

Cela sert à dire aux mobiles à adapter ta page à la taille de leur écran (initial-scale=1.0), et ça autorise l'utilisateur à zoomer ce contenu (user-scalable=yes), ce qu'il fait en général en écartant les doigts sur son écran de mobile. Le mieux est d'essayer pour voir ce que ça fait vraiment avec une page toute simple avec et sans cette ligne sur écran de bureau et sur mobile.

Je conseille d'ajouter cette ligne systématiquement (mais éventuellement, dans certains cas, elle pourrait être différente : c'est un autre sujet).

Gropilou a écrit :
je crois que ce que je cherche est là :
<button onclick="document.getElementById('css').href='style1.css';">Style 1</button>

Pour une solution javascriot s'appliquant à la page courante uniquement, en effet.

Gropilou a écrit :
je connais pas "button onclick" c’est comme :hover qu’on survole
sauf que là on clique ?, c’est pas la même syntaxe !

C'est du javascript : ce n'est donc pas comme :hover en ce qui concenre la syntaxe en effet. Et ça ne se met pas au même endroit aussi : le code javascript se met ici comme valeur de l'attribut "onclick", le css du :hover se met dans une feuille de style.

Note cependant qu'on peut à peu près tout faire en javascript (voir par exemple pour rester dans un contexte qui t'est familier le lecteur de partie de go à http://jeudego.org/maxiGos/_maxigos/_sample/tatami/tatami.php?mxL=fr qui est en javascript). On pourrait donc aussi en javascript indiquer ce qui doit se passer en cas de :hover.

Amicalement,
Modifié par parsimonhi (24 Feb 2016 - 01:25)

—>parsimonhi

Merci de toutes ces explications claires.
Pas le temps de tester maintenant, je dois retourner dans inDesign, un gros livre à monter m’attend...
c’est pas mon niveau d’html/css qui va me faire gagner ma croute !

Merci à tous, à plus tard.

Amicalement.

Bonjour,

Il y a quelques temps j'ai réalisé le script demandé pour mes propres besoins. Le script est réalisé en jQuery + local storage pour mémoriser l'information et permettre le report du nouveau css sur toutes les pages du site.

Exemple en ligne : Scriptura framework : The Themes

Le html est composé de boutons radios comportant chacun une ID (inspecter le code de la page si besoin).

Pour aider à mieux localiser le script, voici le code js :

// -----------------------------------------------------------------------------
// @name        Themes
// @description Choix d'un thème
// -----------------------------------------------------------------------------

var setDefaultTheme = 'Ratatouille'; // @param Nom du thème en CamelCase
var beginLink = '<link rel="stylesheet" href="/Public/Styles/Main';
var endLink = '.css" media="screen" id="stylesheet">';

function defaultTheme() {
	$('#stylesheet').replaceWith(beginLink + setDefaultTheme + endLink);
}

function populateTheme() {
	$('#stylesheet').replaceWith(beginLink + localStorage.getItem('theme') + endLink);
}

jQuery(document).on('click', '[id^="theme"]', function() {
	if ('theme' + localStorage.getItem('theme') != 'theme' + this.value) { // Seulement si option pas encore séléctionnée
		localStorage.setItem('theme', this.value); // Option mémorisée en Web Storage
		setTimeout(populateTheme, 200);
	}
});

jQuery(document).on('click', '#clearTheme', function() {
	if (localStorage.getItem('theme')) { // Seulement si option existante
		localStorage.removeItem('theme'); // Option Web Storage effacée
		setTimeout(defaultTheme, 200);
	}
});

if (localStorage.getItem('theme')) {
	populateTheme();
	$('[id^="theme' + localStorage.getItem('theme') +'"]').attr('checked', 'checked'); // Bouton radio checké si option mémorisée
}

L'option setTimeout() est optionnelle : étant donné que mes boutons ont un effet d'animation css d'une durée de 200ms, j'attends la fin de l'anim' avant de lancer le script. C'est plus joli.
Modifié par Olivier C (24 Feb 2016 - 11:37)

> Olivier C

super le site Scriptura !
quand au boutons pour changer le thème
c’est exactement ça.

Va falloir que je me mette au javascript, au XX siècle j’ai fais de l’actionScript, la syntaxe me parait ressembler, je devrai pas avoir trop de mal