26512 sujets

CSS et mise en forme, CSS3

Bonjour,

Afin de proposer les feuilles de style alternative, il y a le switch, mais admettons que je n'ai pas PHP sur mon hébergeur ... Smiley decu

Il y a bien Affichage > feuille de style dans les navigateurs, mais encore faut-il penser à aller voir si l'on propose des feuilles alternatives ... Smiley ohwell

Je me rappelle avoir vu (il y a longtemps) un article sur pompage qui proposait de changer la feuille de style via un lien ...

J'ai retrouvé un code permettant ceci, mais il contient du JavaScript :


<a href="#style" onclick="javascript:Style('Style 1')" title="Choisir ce design">Style 1</a>


Existe-t-il une méthode utilisant les liens, sans utiliser le Javascript ?

Merci Smiley smile
Modifié par Gunner4902 (24 Mar 2007 - 14:09)
Modérateur
Salut,
Gunner4902 a écrit :
Existe-t-il une méthode utilisant les liens, sans utiliser le Javascript ?
Sans utiliser JavaScript ni un langage serveur, ça me paraît difficile. Smiley cligne

Au pire, tu peux utiliser le mécanisme de feuilles de styles alternatives avec une surcouche JavaScript.
Julien Royer a écrit :
Salut,
Sans utiliser JavaScript ni un langage serveur, ça me paraît difficile. Smiley cligne

Au pire, tu peux utiliser le mécanisme de feuilles de styles alternatives avec une surcouche JavaScript.


Je m'en doutais, je n'avais pas regardé le code source à l'époque ... il devait y avoir du JS dessous Smiley murf

Merci pour la confirmation Smiley smile
Une méthode très simple avec Firefox :
Affichage > Style de la page > ...

Les navigateurs ayant peu exploité ou mis en avant ce type de fonctionnalité, on se sent souvent obligé de rajouter un élément d'interface dans le site lui-même pour donner aux visiteurs le choix entre plusieurs styles alternatifs. Mais le simple fait d'indiquer des styles alternatifs peut suffire.

Pour info, dans le head des pages d'Openweb on trouve ceci :
<link rel="stylesheet" type="text/css" href="/style/original/screen.css" media="screen" title="Normal" />
<link rel="stylesheet" type="text/css" href="/style/original/print.css" media="print" title="Normal" />
<link rel="alternate stylesheet" type="text/css" href="/style/fondnoir/screen.css" media="screen" title="Fond noir" />
<link rel="alternate stylesheet" type="text/css" href="/style/fondnoir/print.css" media="print" title="Fond noir" />
<link rel="alternate stylesheet" type="text/css" href="/style/fondnoir_medium/screen.css" media="screen" title="Fond noir/gros caract&egrave;res" />
<link rel="alternate stylesheet" type="text/css" href="/style/fondnoir_medium/print.css" media="print" title="Fond noir/gros caract&egrave;res" />
<link rel="alternate stylesheet" type="text/css" href="/style/minimale/screen.css" media="screen" title="Minimal" />
<link rel="alternate stylesheet" type="text/css" href="/style/minimale/print.css" media="print" title="Minimal" />
<link rel="alternate stylesheet" type="text/css" href="/style/sanshabillage/screen.css" media="screen" title="Sans habillage" />
<link rel="alternate stylesheet" type="text/css" href="/style/sanshabillage/print.css" media="print" title="Sans habillage" />
Modérateur
Florent V. a écrit :
Une méthode très simple avec Firefox :
Affichage > Style de la page > ...

Ca a été évoqué au début du sujet. Smiley cligne
Gunner4902 a écrit :


Existe-t-il une méthode utilisant les liens, sans utiliser le Javascript ?



Quel est l'intérêt pour un dispositif aussi fantaisiste, qui en outre n'implique pas du tout l'accès au contenu, de ne pas utiliser une solution javascript ?
Modifié par Christian Le Bouler (24 Mar 2007 - 18:50)
Modérateur
Christian Le Bouler a écrit :
Quel est l'intérêt pour un dispositif aussi fantaisiste, qui en outre n'implique pas du tout l'accès au contenu, de ne pas utiliser une solution javascript ?
Que ce gadget rigolo soit accessible à ceux qui ne disposent pas de JavaScript ? Smiley cligne
Julien Royer a écrit :
Que ce gadget rigolo soit accessible à ceux qui ne disposent pas de JavaScript ? Smiley cligne

Pourquoi pas, effectivement. Mais attention à l'expression « accessible à ceux qui ne disposent pas de Javascript », qui n'a pas tout à fait la même portée suivant la chose dont on parle.

Lorsqu'il s'agit de rendre accessible aux utilisateurs ne disposant pas de Javascript un contenu ou une fonctionnalité essentielle du site, c'est effectivement un objectif important.

Ici, il s'agit juste de pouvoir changer l'apparence du site. L'enjeu n'est pas le même.
Modérateur
Florent V. a écrit :
Mais attention à l'expression « accessible à ceux qui ne disposent pas de Javascript », qui n'a pas tout à fait la même portée suivant la chose dont on parle.

Euh oui peut-être... Enfin bon, je ne vois absolument pas en quoi l'expression est déplacée.
Ben je dis pas que c'est déplacé. Juste que si on a exclus les solutions utilisant Javascript juste parce que « Bouh Javascript c'est pas accessible », il faut se poser des questions.
Julien Royer a écrit :

je ne vois absolument pas en quoi l'expression est déplacée.


L'expression n'est pas du tout déplacée effectivement. On a quand même le droit d'utiliser le terme accessible en dehors du contexte strict de l'accessibilité web. C'est aussi un mot du langage courant après tout Smiley smile
Modifié par Christian Le Bouler (25 Mar 2007 - 10:25)
Modérateur
Florent V. a écrit :
Ben je dis pas que c'est déplacé. Juste que si on a exclus les solutions utilisant Javascript juste parce que « Bouh Javascript c'est pas accessible », il faut se poser des questions.
Je ne crois pas que ce soit l'idée ici. Pour ma part, je ne pense pas faire cet amalgame. Smiley smile
Christian Le Bouler a écrit :
C'est aussi un mot du langage courant après tout Smiley smile
Certes. Smiley smile

J'aurais peut-être dû employer un autre mot, car celui-là est fortement connoté. Je me flagellerai ce soir. Smiley lol
Julien Royer a écrit :
J'aurais peut-être dû employer un autre mot, car celui-là est fortement connoté. Je me flagellerai ce soir. Smiley lol


En fait, je voulais plutôt souligner le fait que parler d'une fonctionnalité « accessible pour les utilisateurs qui n'ont pas Javascript » pouvait créer une confusion chez les lecteurs potentiels de cette discussion.

Je me doute bien que vous deux (Julien et Christian) êtes parfaitement au clair sur cette question. Mais pour le néophyte qui découvre à peine la notion d'accessibilité (qui exclue de nombreux usages inopportuns de Javascript), il peut en venir à penser que faire un style switcher en Javascript c'est mal, car pas accessible.

Ça n'est évidemment pas le cas. Je ne m'avancerai pas à affirmer qu'il ne s'agit pas d'une question d'accessibilité numérique, mais même si c'est le cas un style switcher est une fonctionnalité non essentielle, et le fait qu'elle ne soit pas accessible à une petite partie des utilisateurs n'est pas particulièrement problématique, loin de là.

Bien sûr, si le style switcher repose sur Javascript, il peut être intelligent de le générer en Javascript (de sorte que l'on n'aura pas de lien « changer l'apparence de la page » inactif si JS est désactivé).

---

Et voilà. Suis-je un peu plus clair ? Smiley sweatdrop
En fait je pars toujours du raisonnement suivant :
un langage coté client peut etre désactivé, sans que l'internaute en ai conscience, donc je n'utilise jamais de solution client. Je préfère ne pas mettre quelque chose en place si celà ne peut intéresser tout le monde (d'après les stats 8% des internautes désactiveraient JS)
D'où l'avantage des solutions serveurs, mais sur les offres genre neuf.fr ou ovh 20gp, le php n'est pas disponible ...
Voiloà toute l'histoire Smiley cligne
Gunner4902 a écrit :
Je préfère ne pas mettre quelque chose en place si celà ne peut intéresser tout le monde

Pour ma part je vois les choses autrement. Je distingue d'un côté les fonctionnalités essentielles, et de l'autre non pas les « gadgets » mais les enhancements, ou améliorations facultatives.

Je considère par exemple qu'un menu en position: fixed ou un style switcher font partie de ces améliorations facultatives (pas systématiquement bien sûr, chaque cas étant différent). De même qu'une amélioration ergonomique en ajax « unobstrusive* ». Ou que l'utilisation de max-width pour limiter la largeur d'une ligne de texte. Ou encore qu'un script JS de vérification de formulaire en plus de la nécessaire vérification côté serveur.

Mais ça n'est que mon avis, bien entendu. Smiley cligne

---
* Toujours pas de traduction satisfaisante pour cet adjectif ?
Globalement je suis d'accord avec toi. Il est vrai que le CSS (j'en discutai justement aujourd'hui) est sous exploité et n'est relegué (trop souvent) qu'à une simple supplantation des <table> ...
Je ne sais pas l'avenir de CSS (version 4 ou 5, donc dans quelques années), mais CSS gagnerai à permettre de faire du design Web et à permettre de jouer avec les feuilles CSS (dans la formule d'appel) de manière plus souple et plus autonome, par exemple, je pense qu'une propriété comme border-radius est l'annoncement d'un CSS permettant le design sans image, mais comme tu le dis dans ton poste, celà n'engage que moi ! rire Smiley cligne
Gunner4902 a écrit :
je pense qu'une propriété comme border-radius est l'annoncement d'un CSS permettant le design sans image


J'en doute fort parce que ce que ce genre de propriété permet restera de toute façon assez sommaire par rapport à ce que l'imagination peut envisager y compris pour un simple encadrement de bloc.

Par contre il est vrai que cela permettra de faire des choses plus élaborées en restant dans des méthodes simples. Ce qui sera un bien.
Modifié par Christian Le Bouler (26 Mar 2007 - 10:15)
Ce qui permettrait vraiment d'avancer au niveau graphique, ça serait la gestion de plusieurs niveaux de background pour un même élément. J'ai cru comprendre que c'est discuté pour CSS3.
Je rêve (naivement ?) d'un CSS qui interpreterait le vectoriel afin de pouvoir tracer des formes simples en background ... peut-être un jour !

Idem, CSS devrait pouvoir gèrer les calculs de ce genre

margin: 20em -5px

en effet, dans certaines mises en page, le fait de ne pouvoir déduire des pixels d'un width, margin ou autre, entraine trop souvent le recours à des div supplémentaires (à noter que je n'utilise pas ces méthodes, mais qu'elles sont couramment utilisées sur le Web Smiley cligne )