Aller au contenu

Changer de CSS


Guest CraJK

Sujets conseillés

Guest CraJK

Salut à tous,

Je vois de plus en pplus sur certains sites que les webmestres proposent à leurs visiteurs de changer le design des sites via des CSS.

Alors ma questions est:

j'ai un site aux norme HTML "transitionnal"

j'ai préparé plusieurs CSS

Mais comment permettre à mes visiteurs de les choisir librement

Merci aux grands spécialiste qui vont pas tarder à me répondre. :up::idea::?:

Lien vers le commentaire
Partager sur d’autres sites

Je ne suis pas un spécialiste mais je me risque à un début de réponse. :)

Deux méthodes donc :

  • Tu t'appuies sur les options offertes par le navigateur (Firefox et Opéra offrent ses possibilités par exemple).
  • Tu codes un petit script (appelé "style switcher") permettant de réaliser ce choix.

Le mieux étant sans doute de combiner les deux, chacune ayant ses avantages et ses inconvénients. smiley%20(8).gif

Quelques adresses en vrac (et en anglais parfois) :

N'oublie pas également de t'inspirer de ce qui a put déjà être fait sur les grandes références actuelles, c'est très formateur.

J'aurais aimé te faire un resumé plus complet mais je manque de temps.

Modifié par 20cent
Lien vers le commentaire
Partager sur d’autres sites

Deux méthodes donc :
  • Tu t'appuies sur les options offertes par le navigateur (Firefox et Opéra offrent ses possibilités par exemple).



  • Tu codes un petit script (appelé "style switcher") permettant de réaliser ce choix.

Le mieux étant sans doute de combiner les deux, chacune ayant ses avantages et ses inconvénients. smiley%20(8).gif

Je suis loin d'être un grand spécialiste, mais mon site en signature est directement inspiré du code :

http://www.alistapart.com/articles/phpswitch/

en ce qui concerne les modifications des styles...

20cent > Je dirais plutôt qu'il n'y a deux méthodes au choix du webmaster (JavaScipt ou Php)

S'appuyer sur les options offertes par les navigateurs Firefox et Opéra, c'est supposer que tout le monde utilise l'un ou l'autre de ces navigateurs et en connait parfaitement toutes les potentialités, or, chacun sait que le grand majoritaire est ie qui n'a pas ces options...., ce n'est pas un vrai choix en fait.... Donc, il faut coder un peu.... et le choix : c'est soit php, soit Javascript)

L'avantage, c'est de placer un cookie qui permet au visiteur fou de ton site d'y retourner dans la configuration qu'il a choisie....

Dino

Lien vers le commentaire
Partager sur d’autres sites

Juste un truc: coder un truc à la main en js ou PHP n'empêche pas de déclarer les CSS correctement de façon à ce qu'un navigateur bien foutu n'ai pas besoin d'utiliser vos artifices ...

Lien vers le commentaire
Partager sur d’autres sites

Je rebondis sur ce qui précède :

- la seule solution valable serait de s'en remettre au seul navigateur, car c'est tout simplement son boulot, et non celui du serveur. Le "style switcher" n'a en fait strictement rien à faire dans la page Web, car la gestion des styles alternatifs est du ressort du media. Mais on se heurte à la réalité :

---IE ignore les styles alternatifs

---Opera et les navigateurs Gecko les supportent, mais avec le même défaut rédhibitoire : le style choisi n'est pas persistant de page en page au fil de la navigation. Autrement dit, l'utilisateur revient au style par défaut dès qu'il change de page... C'est idiot, d'accord, mais rien ne semble vouloir changer de ce côté depuis longtemps, quelques-soient les rapports de bugs et les réclamations reçues par les auteurs de ces navigateurs.

- sur le principe, priver les utilisateurs d'IE des styles alternatifs en s'en remettant au navigateur n'a rien de bien grave : ce n'est qu'une fonctionnalité tout à fait accessoire (rigolote cependant) liée uniquement à la présentation. On a donc le confort et le "fun" de navigation qu'on mérite, ou plutôt qui est à la portée du navigateur qu'on utilise...

- mais quand on fait de belles feuilles de styles variées en montrant ainsi son habileté, on a naturellement envie que tout le monde en profite, et sans avoir à rechanger le style à chaque page : d'où le style switcher, béquille plus qu'autre-chose.

- ça peut se faire en javascript... avec une qualité immense : ça reste du côté du navigateur. Aucune sollicitation supplémentaire côté serveur. Evidemment, ceux qui n'ont pas javascript en sont privés... mais ne pas avoir activé javascript et vouloir s'amuser en surfant, c'est un peu beaucoup demander.

- ça peut se faire uniquement côté serveur, au prix modique d'un cookie de session (faire propre !). Dans ce cas, AMHA:

--- éviter les scripts qui vous perdent dans la nature dès que votre navigateur cache le referent, ou qu'il n'accepte pas votre cookie... Veiller à ce que la page de switch redirige toujours quelque-part sur le site (accueil ou carte ou page spécifique, au pire). Pour ma part, je transmettais l'URL de la page appelant le script en query string, pour être sûr de ne pas la perdre. En cas d'absence d'url, on arrivait sur l'accueil après le switch. (Je parle au passé parce que je n'ai pas eu le temps de remettre tout ça en place sur mon nouveau site personnel).

--- éviter les formulaires express dans le menu du site, qui vous switchent le style sans vous expliquer ce dont il s'agit, voir sans que vous ayez même cliqué sur autre chose que la liste déroulante des styles disponibles : 99.99% de la population du Web ne sait absolument pas de quoi il s'agit. Une page de switch avec un formulaire bien propre et surtout une petite explication sur la nature la chose... ça aide.

--- comme dit Ganf, déclarer vos styles proprement avec une bonne gestion des medias et surtout des title, pour que ça marche proprement quand on s'en remet au navigateur.

Lien vers le commentaire
Partager sur d’autres sites

L'avantage, c'est de placer un cookie qui permet au visiteur fou de ton site d'y retourner dans la configuration qu'il a choisie....

J'oubliais un grand cri primal : non ! pas persistant le cookie, pas persistant !

Si la CSS par défaut est mauvaise au point que ça en devient pénible de switcher vers son style favori à chaque visite... c'est qu'il y a un loupé quelque-part. En d'autres termes, le style par défaut doit être le plus "neutre" et le moins risqué du lot.

Lien vers le commentaire
Partager sur d’autres sites

Juste un truc: coder un truc à la main en js ou PHP n'empêche pas de déclarer les CSS correctement de façon à ce qu'un navigateur bien foutu n'ai pas besoin d'utiliser vos artifices ...

Bien sur, ça va de soi, sinon, rien ne fonctionne.....

Comme tu parles d'artifices, tu constates bien en lisant la réponse de Laurent Denis (bien mieux détaillée que la mienne), qu'il ne s'agit pas d'artifices, mais de nécessités absolues pour faire profiter du choix des styles aux utilisateurs d'IE (c'est à dire malheureusement l'écrasante majorité)

J'oubliais un grand cri primal : non ! pas persistant le cookie, pas persistant !

Là, je ne comprends pas.... un cookie persistant permet juste à l'internaute de retrouver le style qu'il a choisi. S'il a choisi un style qui ne lui plait pas, c'est son problème.... Le problème du webmaster, c'est de permettre à l'internaute une modification facile... un webmaster qui apprend à coder pour permettre les modifications de styles doit aussi selon moi présenter clairement des explications sur les possibilités de modifier les styles.... (un mini mode d'emploi....)

Ceci dit, si je constate que vous êtes nombreux à être en désaccord avec moi, je reverrai peut-être ma position. Pour l'instant, je ne fais que considérer les internautes comme raisonnablement responsables, rien d'autre.

Quand je vais sur certains sites qui sont très intéressants et très bien faits par ailleurs, je trouve que ces explications manquent trop souvent.... et je me demande si je comprendrais si je n'étais pas déjà au parfum.... Dites vous bien que tous les internautes ne sont pas parfaitement au courant des potentialités de leur navigateur et aussi des possibilités que l'on peut leur offrir, tout le monde ne peut pas tout savoir..... bref, d'une certaine manière, mon discours fait aussi partie de l'accessibilité.

Dino

Lien vers le commentaire
Partager sur d’autres sites

Sans oublier d'écrire correctement le formulaire html en question pour qu'il soit accessible selon l'initiative WAI ...

Dans ce cas, la page Utilisation des formulaires d'OpenWeb te permettra d'y veiller...

pour exemple, voici le code html que j'ai pour mon site Ecrits.net :

<form action="switcher.php" method="post">
<fieldset>
<legend accesskey="s">Couleurs de peau :</legend>
<label for="set">Feuille de Style : </label>
<select name="set" id="set" tabindex="10">
<optgroup label="Style CSS">
<option label="Automnal Spirit" value="Automnal_Spirit">Automnal Spirit</option>
<option label="FireSkin Poesy" value="FireSkin_Poesy">FireSkin Poesy</option>
<option label="Nude Skin" value="Nude_Skin">Nude Skin</option>
<option label="Violine Glasses" value="Violine_Glasses">Violine Glasses</option>
<option label="Neo WebPaper" value="Neo_WebPaper">Neo WebPaper</option>
<option label="Luz n Flash" value="Luz_n_Flash" selected="selected">Luz n Flash</option>
</optgroup>
</select>
<label for="soumettre">Changez la Feuille : </label>
<input type="submit" name="soumettre" id="soumettre" value="Effeuille..." tabindex="11"/>
</fieldset>
</form>

Attention, précision utile à rappeller :

Il est important de rajouter l'attribut id dans chacun des éléments select, input et autres texteare, en plus de l'attribut name... cela permet aux éléments labels de fonctionner correctement en rapport avec l'élément ciblé.

L'attribut id prend la même valeur que l'attribut name, bien sûr !

Lien vers le commentaire
Partager sur d’autres sites

Guest CraJK

ARF, tous ça se complique alors si il faut que je passe par un JS, je croyais tout simplement qu'il fallait que je mette dans mon entete toutes mes feuilles de style et les secondaire avec un attributs "alternatif" et je pensais qu'il y avait une histoire de (si mes souvenirs sont bons) de "acceskey".

Cependant, je vois que ça vous interresse et je vous en remercie....

Je vais étudier ces liens et je repasse. ;)

Lien vers le commentaire
Partager sur d’autres sites

Ne t'embarasse pas avec les accesskeys...

Va voir le code source de ma page (en signature).... pour l'acccès à la page des styles, c'est indiqué (premier lien dans la colonne de gauche dans la page d'accueil)

C'est assez simple au bout du compte....

c'est du JS simple que j'utilise... et je te rappelle que je me suis inspiré de

http://www.alistapart.com/articles/phpswitch/

Dino

Lien vers le commentaire
Partager sur d’autres sites

Dino : je viens de faire un petit test avec un invité qui "consomme" du Web depuis quelques temps mais que la technique indiffère. Réactions aux explications de http://www.canaldumidi.com/pages/styles.htm :

- Il en faut, des trucs, pour que ça marche !

- Tu as bien le Mozilla-là, le java-machin et le macaroni (cookie pour lui) ?

- Faut que je change quoi pour la dimension du texte ?

Bref, je n'ai lâchement pas osé lui montrer ma propre page d'explication qui ne vaut sans doute pas mieux :hypocrite:

J'en retiens (pour donner un avis plus personnel que ci-dessus) :

- que les explications qui commencent par une avalanche de mises en garde et de conditions techniques pour que ça marche... sont dissuasives plus qu'utiles;

- qu'il est inutile de mêler la question des navigateurs et celles des styles;

- que c'est tout de même plus transparent sans obligation de javascript

- que la béquille "style switcher"... est tout de même plutôt boiteuse :P

Tiens, si je refais des styles alternatifs, je me contenterai des <link rel="... qui conviennent pour les futurs navigateurs qui feront ça proprement ;)

Lien vers le commentaire
Partager sur d’autres sites

Sur ce coup laurent, on rigole....

Vu que tes pages m'ont un tantinet inspiré....

t'aurais du les citer, mais comme t'es modeste, si tu ne le fais pas, je m'en chargerai quelques posts plus loin.... je trouve qu'elles étaient extra....

Bon, ceci dit, tes observations ne m'étonnent pas au bout du compte... on est peut être trop consciencieux, et l'internaute moyen, il s'en fout.... après tout on n'a pas à s'excuser du "risque que ça ne marche pas". C'est peut être aussi aux internautes a être à jour....

Mais tout de même, est-ce que "ton gars, ton essayeur" a eu envie d'essayer.... et a vraiment eu envie de cliquer sur un autre style, c'est ça qui compte....

Si mes explications "à la noix pour lui" l'ont empeché d'essayer, c'est un vrai problème, sinon, ce n'est pas si grave.... that is the question....

Au fait, as tu aussi pensé a demander à ton "essayeur" s'il connaissait les fonctionalités des pages de styles dans les mozilla, firefox et opera ?

<edit> sur la question de la béquille, je suis d'accord, mais vrai qu'on n'a pas le choix </edit>

Dino

Lien vers le commentaire
Partager sur d’autres sites

Guest CraJK

ok dinostrate, je pars étudier ton code source.......

Je tiens à te féliciter pour ton site que je connaissais déjà depuis quelques temps car je suis natif de Carcassonne mais que je réside en Guyane alors je viens souvent voir tes photos pour me ressourcer.

Alors je te dis un grand merci pour m'aider mais un grand merci pour ton site qui me remonte le moral dans mes jours de déprimme........ :up:

Lien vers le commentaire
Partager sur d’autres sites

Si l'attribut accesskey est décrié en ce moment côté accessibilité web, il importe à contrario de ne pas oublier les attributs tabindex, dans les élèments textearea, select et autres input. (qui permettent ainsi de naviguer grâce à la touche tab dans les éléments du formulaire...)

Si le switcher est une technique, certes à défaut d'attendre qu'un jour se soit correctement géré par tous grâce rien qu'à la présence de l'élément link, il vaut mieux lui préférer un switcher php que JS, car d'un point de vue accessibilité, il est préférable de gérer un script côté serveur, plutôt que côté client !

CrackJ, si tu veux l'explication pour un switcher PHP, cette page l'explique : http://ben2boot.com/tech/traductions/ala/phpswitch/

Après, il y a toujours plus ou moins des adaptations, selon sa propre volonté, à faire...

Modifié par ste
Lien vers le commentaire
Partager sur d’autres sites

Sur ce coup laurent, on rigole....

Vu que tes pages m'ont un tantinet inspiré....

t'aurais du les citer, mais comme t'es modeste, si tu ne le fais pas, je m'en chargerai quelques posts plus loin.... je trouve qu'elles étaient extra....

heu... Préviens-moi avant de citer, que je m'auto-censure : j'ai la fâcheuse habitude de laisser traîner un peu n'importe quoi sur le Web :P

Bon, ceci dit, tes observations ne m'étonnent pas au bout du compte... on est peut être trop consciencieux, et l'internaute moyen, il s'en fout.... après tout on n'a pas à s'excuser du "risque que ça ne marche pas". C'est peut être aussi aux internautes a être à jour....

Mais tout de même, est-ce que "ton gars, ton essayeur" a eu envie d'essayer.... et a vraiment eu envie de cliquer sur un autre style, c'est ça qui compte....

Cette histoire de style switcher, ça me fait penser au téléphone portable.

Il faut vous dire qu'en dehors de deux trois trucs sur le Web, je suis résolument hostile au supposé progrès, et tout spécialement au téléphone. C'est pourquoi j'ai été très étonné il y a quelques temps chez des amis de voir que leurs filles avaient encore un nouveau portable tout coloré, au moins le 3e depuis le début de l'année.

Meuh non ! M'a-t-on expliqué gentillement : c'est juste la "coque" (ça s'écrit comme ça?) qu'on change. C'est fun !

Le rapport ? La coque du bidulophone est "fun" parce que c'est juste un accessoire très simple qui donne à bon compte l'illusion volontaire d'avoir vraiment changé quelque-chose.

Les CSS alternatives... prendront dans le mythique "grand public" quand il en sera de même pour elles : une technique aussi transparente que l'aperçu avant impression, un clic sur un bouton avec un petit logo sympa, et c'est tout.

D'ici là, rien que le mot "style" (ou "présentation", etc...) est mauvais. Bref, c'est un truc de geek (très rigolo, je le répète).

Bon, j'arrête d'intervenir dans ce sujet : au fil de mes messages, je deviens de plus en plus sceptique :blink:

Lien vers le commentaire
Partager sur d’autres sites

Bref, c'est un truc de geek (très rigolo, je le répète).

Bon, j'arrête d'intervenir dans ce sujet : au fil de mes messages, je deviens de plus en plus sceptique  :blink:

Sûr, que tu vas nous les démotiver, là...

Lien vers le commentaire
Partager sur d’autres sites

D'ici là, rien que le mot "style" (ou "présentation", etc...) est mauvais. Bref, c'est un truc de geek (très rigolo, je le répète).

Moi j'aime bien le terme « Apparence » surtout lorsque chaque lien est une zoulie icône toute mignonne qui donne envie de cliquer dessus :D

Puis quand on voit ce que ça fait, c'est encore plus tout zouli et tout mignon :wub:

Modifié par Anubis
Lien vers le commentaire
Partager sur d’autres sites

Bref, au bout du compte, pour la présentation des styles ou habillages ou apparences, le meilleur conseil, c'est peut être de dire : faites comme vous le pensez, et on verra bien.... ;) et l'essentiel, c'est que ce soit bien codé et que ça fonctionne...

Dino

Lien vers le commentaire
Partager sur d’autres sites

l'essentiel, c'est que ce soit bien codé et que ça fonctionne...

En effet ...

Et, j'espère que CrakJ n'aura pas craqué avec tout cela, et qu'il sera se servir des liens et de nos recommandations diverses pour créer son fameux switcher ; car, rappelons-le, c'est quand même le but de son approche !

Lien vers le commentaire
Partager sur d’autres sites

Et, j'espère que CrakJ n'aura pas craqué avec tout cela

Rassures toi, un tel Carcassonnais ne peut pas craquer pour des vétilles... en tout cas, c'est ce que je pense.... il suffit de le laisser respirer un peu.... mais bon, les compléments techniques sont toujours les bienvenus... si vous avez des idées, vous pouvez toujours continuer....

Au fait, entre JS et PHP j'avoue que parfois, je me pose des questions, mais c'est un autre débat qu'il faudra peut être mener sous un autre titre.... ;)

Dino

Lien vers le commentaire
Partager sur d’autres sites

Guest CraJK

@ ste

Et, j'espère que CrakJ n'aura pas craqué avec tout cela, et qu'il sera se servir des liens et de nos recommandations diverses pour créer son fameux switcher

Et bien non, je n'ai pas craqué, c'est juste que je suis en vacance et que même en vacance le net me hante mais en ce moment et là ou je suis, je n'ai pas de connexion MALHEUREUSEMENT :evil:

Bref, qoui qu'il en soit j'ai opté pour le script de Dinostrate, car j'ai testé plusieurs script en PHP qui ne fonctionnait pas sous easy PHP.

_AT_Dinostrate

Au fait, entre JS et PHP j'avoue que parfois, je me pose des questions

Bien moi, si je peux faire le même boulot avec du JS, je prend et je limite ainsi mes requetes.

Lien vers le commentaire
Partager sur d’autres sites

Salut CraJK

Je pense que c'est la solution la plus simple, mais je tiens à rappeler que ce n'est pas mon script à moi... c'est quasiment celui de :

http://www.alistapart.com/articles/phpswitch/

même si j'ai fait quelques petites modifs....

Chez eux, les explications sont claires, même s'il y a une petite anomalie dans la récapitulation.

Mais ce serait bien mieux si les caractères qu'ils utilisent pour les exemples étaient plus lisibles.

En tout cas, en attendant que tous les navigateurs s'y mettent, on ne peut qu'utiliser une telle béquille (selon l'expression de LaurentDenis)

a+

Dino

Lien vers le commentaire
Partager sur d’autres sites

Guest CraJK

Quoi qu'il en soit, pendant mon mois de vacance à Carcassonne, je travaille un peu sur mon site qui est à l'abandon et qui deviendra j'espère une référence en matière de CSS 2 (en tous cas ça en prend l'allure....) et je ferais un lien pour ton site pour te remercier de ton aide.

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...