28220 sujets

CSS et mise en forme, CSS3

Sous titre: HTML et sens, Javascript et comportement.


Je poste ici pour la première fois (après avoir déjà abandonné 2 posts Smiley biggol ) en espérant ne pas trop me foirer, et ne pas trop m'être planté de section (mais ni HTML et CSS ni JS ne me semblait adaptés).


Je suis actuellement en train de créer quelques pages pour une application intranet relativement complexe (pour une autre boite que celle dans laquelle je fais mon stage en bonus), et l'une des "zones" à développer a pour but de permettre la classification des articles d'un texte (en catégories).

Cette classification se ferait à coup de radio buttons, à chaque groupe de radio correspondant un article et chaque radio au sein d'un groupe figurant une catégorie (c'est à la fois le plus logique à mon sens et relativement imposé par le cahier des charges soumis). Jusque ici pas de problème, sauf que ce formulaire doit être stylé (normal) à coup de CSS (normal aussi), et là le drame:
MSIE, Firefox et Opera... il n'y en a pas deux qui prennent en compte les mêmes propriétés (ou les appliquent de la même manière) à un radio button Smiley biggol ce qui est relativement gênant (surtout que l'un des 3 applique les propriétés de manière relativement infâme).

Me lamentant sur un autre forum, un ami m'a suggéré d'utiliser du Javascript pour émuler des radio buttons stylés (plus pour plaisanter qu'autre chose, il sait que je ne suis pas trop en faveur du JS, trop courant et trop mal utilisé à mon gout de manière générale)... et en y pensant l'approche peut se justifier:
1- Création du markup valide/logique
2- Remplacement à coup de JS du markup par l'émulation javascript (donc pas de pertes d'informations dans un sens ou dans l'autre)
3- Styling de l'émulation à coup de CSS

Je ne me suis pas encore lancé dans le codage de la chose, mais il me semble que l'approche est défendable surtout dans la mesure ou elle vise à pallier à des manques au niveau des implémentations ou à des incohérences cross-browsers (donc à modifier les comportement des navigateurs pour unifier ceux ci).

Je voulais donc savoir ce que les membres éminents d'Alsa pouvaient penser de l'approche (le remplacement se ferait à partir d'une page parfaitement valide lisible et fonctionnel avec l'utilisation du gestionnaire d'évènements JS).
(À noter: la cible de base est censée être MSIE, probablement le seul navigateur sous lequel l'appli sera testée Smiley biggol , mais je suis trop touché pour ne pas essayer de faire quelque chose de correct dans le plus de navigateurs possibles)
Modérateur
Est-ce que tu veux faire des radios buttons et des checkboxs avec des images, comme présenté ici :

http://www.ibilab.net/webdev/exemples/checkbox_personnalise.htm

Et codé de cette façon :

http://www.ibilab.net/webdev/articles/Javascript/personnalisez-checkbox-radiobutton-8.htm

?

À mon avis, il n'y a pas trop de mal, mais bon, est-ce vraiment important que ces types de champ soient personnalisés ? Ne vaut-il pas mieux que l'utilisateur voit la même chose d'un site à l'autre, d'une application web à l'autre, question de bien reconnaître chacun des types de champ ? La couleur pourrait changer, mais au niveau de la forme des champs, je pense qu'il vaut mieux ne pas trop dépayser l'utilisateur. J'ajouterai aussi que tantôt il m'ait arrivé un petit désagrément. Le réseau ou mon ordinateur était devenu très lent, et je ne voyais plus les checkboxs ou les radios buttons en images, parce que les images de la page ne s'étaient pas encore chargé. C'est un cas rare, mais ca peut venir nuire à l'accessibilité. Je dis rare, mais qui sait si l'utilisateur n'aura pas désactivé les images.

C'est très beau oui, original, mais j'ai certaines réserves à ce sujet. Je laisse les autres dire ce qu'ils en pensent.

Smiley smile
Modifié par Merkel (22 Mar 2005 - 16:53)
Merkel a écrit :
Est-ce que tu veux faire des radios buttons et des checkboxs avec des images, comme présenté ici :

http://www.ibilab.net/webdev/exemples/checkbox_personnalise.htm

Et codé de cette façon :

http://www.ibilab.net/webdev/articles/Javascript/personnalisez-checkbox-radiobutton-8.htm

?

C'est dans l'idée, mais avec une complexité largement inférieure.
a écrit :
À mon avis, il n'y a pas trop de mal, mais bon, est-ce vraiment important que ces types de champ soient personnalisés ?

Personalisés non (ils resteront ronds), stylés oui, je freine déjà des 4 fers pour pas mal d'autres trucs alors que je ne suis que stagiaire (le cahier des charges du proto a réaliser pue les tables et les frames à 15km, le JS que certains veulent coller de partout, ...), si je commence à détruire le design je vais me faire écharper... (de plus l'application étant relativement spécifique un certain stylage aide à la compréhension et diminue l'austérité)
(et je rappelle que c'est un projet d'intranet, et la réalisation du proto afin d'essayer d'avoir le marché pour ne rien arranger)
a écrit :
La couleur pourrait changer, mais au niveau de la forme des champs, je pense qu'il vaut mieux ne pas trop dépayser l'utilisateur.

Je n'ai pas pour but de changer la forme, les seules propriétés que je désirais utiliser actuellement sont les tailles (ignorés par Opera et MSIE) et color/background-color (ignorés par Firefox et implémentés différement dans Opera et MSIE).
a écrit :
C'est très beau oui, original, mais j'ai certaines réserves à ce sujet. Je laisse les autres dire ce qu'ils en pensent.

Smiley smile

Là encore (je me répète), point n'est question d'originalité, je désire simplement pouvoir utiliser ce qui n'est pas implémenté (ou l'est bizarrement) dans la relation radio/CSS.
Modérateur
Masklinn a écrit :
Je n'ai pas pour but de changer la forme, les seules propriétés que je désirais utiliser actuellement sont les tailles (ignorés par Opera et MSIE) et color/background-color (ignorés par Firefox et implémentés différement dans Opera et MSIE).


De quelle façon pense-tu le faire ? En remplacant les champs par des images comme dans l'exemple ? Ou bien d'une tout autre façon ?
Merkel a écrit :


De quelle façon pense-tu le faire ? En remplacant les champs par des images comme dans l'exemple ? Ou bien d'une tout autre façon ?

Malheureusement, je ne vois pas encore d'autre moyen que le changement d'images actuellement (je suis néamoins ouvert à toute forme de proposition)
Modérateur
Je n'en connais pas d'autres non plus...

Les seuls problèmes que je peux voir seraient au niveau de l'accessibilité, à savoir lorsque les images ne sont pas chargées correctement, ou après un certain délai ; ou lorsque le navigateur de l'utilisateur ne supporte pas les images ou que celles-ci sont désactivées.

Comme c'est un Intranet, évidemment, tu peux indiquer aux utilisateurs de ne pas désactiver les images.

Un autre point, bien qu'il est probablement négligeable vu les exigeances au niveau graphique, c'est que sur MAC par exemple, les champs, que ce soit des checkboxs ou des radiobuttons, ont un aspect complètement différent de sur PC. Les utilisateurs de MAC auraient peut-être préféré que l'aspect reste le même, un aspect auquel ils sont familiés. D'un autre côté, comme tu le dis, si ce n'est que pour changer la taille, la couleur et le fond de ces champs, ce n'est pas grave.

Comme c'est pour un intranet, que le javascript ne sera pas obligatoire, que tu es forcé de styliser certains champs sans trop les changer, et que ce script ne vient pas trop nuire à l'accessibilité comme je l'ai mentionné plus haut, je pense qu'il n'y a pas de mal à utiliser ce genre de script vu les circonstances.

Il y a peut-être des choses que je n'ai pas remarqué, voyons voir l'avis des autres membres.
Modifié par Merkel (22 Mar 2005 - 17:38)
Merkel a écrit :
Je n'en connais pas d'autres non plus...

Les seuls problèmes que je peux voir seraient au niveau de l'accessibilité, à savoir lorsque les images ne sont pas chargées correctement, ou après un certain délai

Complètement vrai Smiley ohwell
a écrit :
ou lorsque le navigateur de l'utilisateur ne supporte pas les images ou que celles-ci sont désactivées.

Autant la 2e partie est possible, autant j'ai du mal à concevoir un navigateur gérant le JS et pas les images Smiley lol
a écrit :
Un autre point, bien qu'il est probablement négligeable vu les exigeances au niveau graphique, c'est que sur MAC par exemple, les champs, que ce soit des checkboxs ou des radiobuttons, ont un aspect complètement différent de sur PC. Les utilisateurs de MAC auraient peut-être préféré que l'aspect reste le même, un aspect auquel ils sont familiés.

Normalement pas de maceux, mais encore un point très vrai (les différences d'affichage natif des contrôles)
a écrit :
Il y a peut-être des choses que je n'ai pas remarqué, voyons voir l'avis des autres membres.

Smiley lol
Modérateur
Masklinn a écrit :

Autant la 2e partie est possible, autant j'ai du mal à concevoir un navigateur gérant le JS et pas les images


Ce ne serait pas que le navigateur supporterait le JS et non les images, ce serait plutôt que l'utilisateur l'aurait configuré ainsi. Peut-être quelqu'un aimant les fonctions Javascript intégrées au site mais pas devoir télécharger une tonne d'images, pour gagner en vitesse de chargement. Comme sur les forums où les signatures possèdent des images de 700 pixels par 400 pixels de haut, que les signatures en image prennent plus d'espace que le texte, dans ces cas-là, je n'hésiterais pas à désactiver les images tout en conservant le Javascript. Évidemment, c'est un cas très rare, et l'utilisateur qui le fait devrait - en théorie - être au courant comment les réactiver et qu'il doit le faire pour ton intranet. Smiley smile

Peut-être aussi que ceux naviguants sans les images mais avec Javascript sont plus nombreux qu'on le croit. Je suis pas statisticien non plus... faudrait faire un sondage par téléphone, j'aimerais bien être harcelant aussi Smiley biggol
Modifié par Merkel (22 Mar 2005 - 17:51)
Masklinn a écrit :
les seules propriétés que je désirais utiliser actuellement sont les tailles (ignorés par Opera et MSIE) et color/background-color (ignorés par Firefox et implémentés différement dans Opera et MSIE).


Un détail qui te sera peut-être utile : Opera 8.0 bêta 3 (et donc Opera 8 final par la suite) a modifié son implémentation sur ce point. A tester...
Laurent Denis a écrit :


Un détail qui te sera peut-être utile : Opera 8.0 bêta 3 (et donc Opera 8 final par la suite) a modifié son implémentation sur ce point. A tester...

Je viens de vérifier, l'affichage est le même que dans Opera 7.54v2 sur ce point
(et accessoirement j'arrive pas à trouver comment on désactive le fade in/fade out des menus sur Opera 8.0)