Journal Un site avec sans Hack CSS ?

Posté par  .
Étiquettes :
0
27
oct.
2004
Bonjour,

j'aurais une question qui me torture l'esprit depuis un bout de temps...
Un site qui veux avoir un public très vaste et acceuillir un grand nombre de personnes doit-il, oui ou non utiliser les hacks CSS ?

Juste pour info, un hack CSS permet d'affecter certaines propriétés CSS notemment en fonction du navigateur utilisés, le tout sans script côté client et "quasiment" proprement.

Je m'explique, on fait un site conforme aux recommandations du W3C, ok ce n'est pas difficile, on respecte les règles de bases, on n'utilise pas de tableaux pour la mise en page, etc... bref on respecte l'éthique du W3C mais justement, utilisé les hacks CSS n'est ce pas justement contraire aux standarts du W3C ?

Certain navigateurs, interprètent mal certaines propriétés du CSS, (pour ne pas inciter au troll je ne dirais pas de noms :p), cela finit bien souvent par un site bien structurer comme il faut, bien coder comme il faut mais... pas n'ayant pas le même aspect partout du fait des propriétés buggés dans ces navigateur...
La solution préconisée est généralement de trouver une autre méthode pour arriver au même résultat ou d'utiliser les hack CSS... donc bon... je ne sais pas trop là...

Le gros point noir des hack CSS vient aussi des problèmes "par après", le navigateur verra surement ses bugs corrigées un jour ou l'autre (vaudrait mieux...) et les hacks CSS pourrait continuer à fonctionner par ces navigateurs, cependant comme les propriétés CSS seraient "justes", le navigateur n'affichera pas correctement la page...
Je m'exprime mal ici mais je ne savait pas comment le dire autrement, veuillez m'excuser.

  • # Impossible

    Posté par  (site web personnel) . Évalué à 4.

    Si tu veux toucher 99% des utilisateurs, et faire un site au moins "un peu joli", c'est tout bonnement impossible. Internet Explorer se démerde vraiment mal avec le CSS : certaines fonctions ne sont pas implémentées (comme position: fixed), d'autres sont interprêtées différement de la norme (position: absolute je crois bien, une histoire de margin/padding, ... (liste hyper longue)).

    Après il y a justement les anciennes et les nouvelles versions des navigateurs : Mozilla 1.0 ne fonctionnait pas aussi bien que Mozilla 1.7, idem entre Internet Explorer 4.0 et la version 6.0. Ensuite il y a tous les autres : Opera, Konqueror, Internet Explorer pour Mac, etc.

    Bien sûr, tu peux faire ton autiste et faire un site 100% conforme W3C, et tant pis pour les autres ... Moi qui développe sous Linux avec Firefox + EditCSS, j'étais bien emmerdé quand j'ai fait une démo sous Internet Explorer. En fait, j'ai eu deux très mauvaises suprises :
    1) Menu absent ... Problème de position: (...) mal interprété
    2) Bout de CSS qui fait tout simplement planter Internet Explorer ... (de mémoire, ça touchait à p:first-letter, bug connu, mais jamais corrigé)

    Désolé, mais le guerre des navigateurs n'est pas terminée.

    En attendant, faire plusieurs feuilles de style : partie commune, et partie spécifique à tel ou tel navigateur (avec un bout de javascript pour détecter le moteur de rendu utilisé ...). En passant, c'est pas très cool car Mozilla a écrit ses propres extensions CSS : -moz-border-radius (bords arrondis) et une autre pour la transparence. Bon, je crois bien que ça va être dans la future norme CSS3, mais quand même, c'est mal ...

    @+ Haypo

    • [^] # Re: Impossible

      Posté par  . Évalué à 7.

      En passant, c'est pas très cool car Mozilla a écrit ses propres extensions CSS : -moz-border-radius (bords arrondis) et une autre pour la transparence. Bon, je crois bien que ça va être dans la future norme CSS3, mais quand même, c'est mal ...

      non, ce n'est pas mal. mozilla ce n'est pas seulement mozilla-navigator, et les possiblilites offertes par cette suite applicative ne sont pas limitees au web. en plus ils ont clairement demarque leurs extensions grace au nom, contrairement a d'autres, et ca aussi c est bien.

      --
      pouet

      • [^] # Re: Impossible

        Posté par  (site web personnel) . Évalué à 4.

        Effectivement, c'est loin d'être mal, c'est même conforme à la norme : une balise spécifique DOIT être précédée d'un identifiant spécifique.
        -moz-* pour mozilla, -ie-* pour IE (par exemple)

        L'avantage, c'est que l'extension spécifique est bien mise en évidence. Et qu'elle n'a aucune chance d'être confondue avec un truc du standard.

    • [^] # Re: Impossible

      Posté par  . Évalué à 2.

      99 % ? Ça descend rapidement à 90 et la chute semble même s'accélerer, à l'échelle de l'intertie d'IE bien sûr.

  • # Et le contenu ?

    Posté par  (site web personnel) . Évalué à 9.

    Si tu veux avoir un public très vaste, il faut du contenu intéressant et faire en sorte que le site s'affiche correctement partout.

    Si le site est intéressant, la mise en page peut être sobre et donc réalisable en XHTML+CSS si ça te chante (bien que 99% des visiteurs ne s'en soucient pas)
    Le seul truc important, c'est de tout tester avec IE et Gecko dans un premier temps, et de vérifier quand même si tout passe bien avec Safari/Konqueror, et autre en fonction de la cible (ya bcp d'entreprise officiellement en Netscape 4, mais là exit les CSS)


    Pour répondre simplement à ta question, mon opinion est qu'il vaut mieux avoir un design simple que de devoir gérer des hacks CSS ou Javascript pour 2/3 effets inutiles.

    • [^] # Re: Et le contenu ?

      Posté par  . Évalué à 2.

      Pour le contenu je suis d'accord, pour avoir un public très vaste il faut forcément avoir du contenu intéressant.

      Par contre, je ne pense pas que l'interêt principal du couple XHTML/CSS soit de plaire aux visiteurs, effectivement ceux ci ne s'en soucient pas, cependant du code en XHTML et la séparation du graphisme des données via une CSS permet de modifier un site très facilement, si le graphisme doit être modifié on ne touche que la CSS, si l'on veux rajouter des données on ne touche qu'à la page en XHTML... C'est un atout non négligeable... de plus, utiliser XHTML/CSS apporte un gain de rapidité côté client, le navigateur sait exactement comment réagir puisqu'il sait quel DTD il doit utiliser. Enfin, utiliser XHTML/CSS permet "en théorie" de ne pas se soucier des autres navigateurs lorsque le tout est bien codé.

      Le dernier point est que le site utilisera forcément des CSS assez complexes et utilisera surement l'ECMAScript dans certains cas (ouverture de pop-ups, ...).
      Un petit lien vers la page actuelle pour bien voir ce que ça serait : http://molinch.ath.cx/web_test/site_japon/beta/(...)
      (ps : c'est juste là pour voir, rien n'est finit et les news n'ont aucun sens)

    • [^] # Re: Et le contenu ?

      Posté par  . Évalué à 2.

      Tu/vous sais/savez, on peut utiliser CSS avec HTML et faire du sémantique, propre quoi. XHTML n'a rien inventé.

      • [^] # Re: Et le contenu ?

        Posté par  (site web personnel) . Évalué à 2.

        Bah à partir du moment où tu fais toutes la présentation en CSS, c'est presque plus simple de faire du XHTML que du HTML. Ce n'est pas plus compliqué en tout cas.

  • # Le contenu, le contenu...

    Posté par  . Évalué à 8.

    Un site, c'est d'abord du contenu, peu importe si ça ne s'affiche pas au pixel près de la même manière chez deux personnes différentes.

    Car de toute manière, ton site ne s'affichera jamais de la même manière sur un Mozilla dernière mouture, sur l'écran de ma calculette qui fait 33x10 caractères et qui lance lynx sur un émulateur de terminal, et sur l'écran du dernier portable gprs.

    Et puis même s'il pouvait s'afficher partout comme chez toi, mon voisin daltonien qui ne peut voir le site que si les couleurs sont bien choisies, mon autre voisin malvoyant qui doit avoir une taille de police d'au moins 36px, un collègue aveugle qui fait appel à un lecteur oral, moi qui ai désactivé le javascript, l'autre les CSS, mon cochon d'inde qui ne perçoit que les mouvements, tout ce beau monde ne verra jamais ton site de la même manière.

    Mais le dénominateur commun, c'est le contenu, à supposer que tu fasses un site pour que les gens le lisent. Si tu veux faire une démonstration de design, il est clair que HTML et CSS n'est pas la meilleure des solution. Pour ça, il y a le Flash, les images (bah oui, on peut "compiler" tout un site sous forme de fichiers graphiques si on veut), ou encore un beau fichier PDF.

    Donc, en conclusion, adoptons un design sobre, et qui s'affiche correctement chez tout le monde, et écrivons des sites dont le contenu est intéressant :)

    Pour ceux qui font des sites, j'ai un petit document assez intéressant qui traite de l'accessibilité :
    http://www.la-grange.net/accessibilite/(...) [Plongez dans l'accessibilité]

    • [^] # Re: Le contenu, le contenu...

      Posté par  . Évalué à 4.

      Désolé de contredire tes idées qui sont pourtant très belles, mais un site internet pour une entreprise c'est avant tout une publicité, et dans ce cas, la forme est au moins aussi importante que le fond, et on se fout complétement de ton voisin daltonien s'il ne représente que 0.5% de la cible potentielle.
      C'est dur, mais c'est comme ca que ca se passe (et à la rigueur je peux comprendre ce point de vue bien que sur le fond je préfère faire des sites propres)

      • [^] # Re: Le contenu, le contenu...

        Posté par  (site web personnel) . Évalué à 3.

        pour info, 5 à 8% des hommes sont daltoniens.
        0.5% des femmes.

        à part si ton site présente de la lingerie, les daltoniens sont bien plus nombreux que tes 0.5%.

      • [^] # Re: Le contenu, le contenu...

        Posté par  . Évalué à 3.

        et dans ce cas, la forme est au moins aussi importante que le fond

        C'est une idée que j'entends souvent mais qui me laisse sceptique. Tout comme la publicité, on n'achète pas un produit parce que la pub nous a plus. Au tout début des pubs TV c'était le cas. Les consommateurs s'empressaient d'acheter le produit vedette qu'on voyait à la télé. Aujourd'hui il y a saturation. Les gens se souviennent de "la pub pour la voiture avec le gars qui fait ci" sans même se souvenir de la marque du produit. Au moment de l'achat les gens prennent le produit les moins cher, celui qui en fait le plus, etc. Et donc il vaut mieux montrer sur son site qu'on a le produit qui-fait-le-café que d'avoir un joli site et un produit creux.

        Pour en revenir aux sites d'entreprises, je remarque juste que les sites de grosses boites (ex Microsoft, Oracle, Renault, etc) ne font pas trop dans le tape à l'oeil et le flash à tout va. C'est clair, sobre, on s'y retrouve. Je crois que les grandes entreprises ont compris que si on veut attirer le public il faut lui mettre la bonne information sous le nez, le bon argument, la phrase qui fait dire "c'est ça que je veut" et pas le matraquer avec des trucs qui clignotent.
        C'est plutot du côté des petites boites qui n'ont pas de département com' et des d'jeunes qu'on trouve des sites en flash et des machins qui suivent la souris.

        on se fout complétement de ton voisin daltonien s'il ne représente que 0.5% de la cible potentielle

        C'est de moins en moins le cas. Certains pays (UK) ont adopté des lois imposant l'accéssibilité des sites. Je crois que c'est aussi en cours aux US (il va y avoir du boulot). Dans ma boite on a des clients qui nous demande si on est conforme aux lois UK. Ce n'est pas trop le cas pour le moment mais on sens bien qu'il va falloir corriger ça vite. Ce genre de question revient régulièrement.

        Et puis faire un site cochonerie-free c'est aussi moins de casse tête en maintenance. C'est l'argument que nous utilisons vis à vis de la direction pour pousser aux respect des standards. Récemment un client a envisagé de passer tous ses postes client sous Opera pour des raisons de sécurité (les trous d'IE, les spywares, toussa). On a récolté pas mal de bugs à corriger en urgence à cause de vieux bouts de javascript qui restaient dans les coins. Finalement ils sont passé à Mozilla (sur lequel on teste plus). Mais ce n'était pas la première fois. Avant il y avait eu "l'utilisateur mac" (bah oui c'est le seul qu'on a répertorié en 8 ans...) qui avait des problèmes sur certaines pages. Au final ca coute moins cher de faire les choses proprement et ça fait plus sérieux auprès des clients.

        • [^] # Re: Le contenu, le contenu...

          Posté par  (site web personnel) . Évalué à 3.

          Aujourd'hui il y a saturation. Les gens se souviennent de "la pub pour la voiture avec le gars qui fait ci" sans même se souvenir de la marque du produit. Au moment de l'achat les gens prennent le produit les moins cher, celui qui en fait le plus, etc.

          Alors pourquoi tout le monde achète cette merde d'iPod ? :)

          L'association LinuxFr ne saurait être tenue responsable des propos légalement repréhensibles ou faisant allusion à l'évêque de Rome, au chef de l'Église catholique romaine ou au chef temporel de l'État du Vatican et se trouvant dans ce commentaire

    • [^] # Re: Le contenu, le contenu...

      Posté par  . Évalué à 2.

      Pour le problème des navigateur j'ai fait de multiples tests, pour l'instant tout semblait fonctionner, j'ai également testé en mode texte avec links et lynx cela était également lisible et compréhensible.

      Par contre pour les tests sur le daltonisme je ne sais pas du tout :(, y'a t'il des logiciels permettant de voir ce que verrait un daltonien ou autre ? (mais en même le site ne peux se permettre d'avoir un design plus sobre...)

      "Mais le dénominateur commun, c'est le contenu, à supposer que tu fasses un site pour que les gens le lisent. Si tu veux faire une démonstration de design, il est clair que HTML et CSS n'est pas la meilleure des solution. Pour ça, il y a le Flash"
      Selon moi le Flash n'a pas sa place sur le web, même dans une démonstration de design... tout d'abord cela alourdit considérablement le site, ensuite cela réduit l'accéssibilité et... cela utilise beaucoup de ressources systèmes... enfin, le Flash ne peux être "parsé" (ou très difficilement...) ce qui limite fortement son utilisation...
      Pour les images "compilés", il s'agit des mêmes problèmes, sinon le PDF doit servir de format pour des documents, par document je veux dire uniquement les données (avec une mise en forme évidemment), ce qui ne peux pas s'appliquer à une démonstration de design...

      • [^] # Re: Le contenu, le contenu...

        Posté par  . Évalué à 4.

        > y'a t'il des logiciels permettant de voir ce que verrait un daltonien ou autre ?

        http://wellstyled.com/tools/colorscheme2/index-en.html(...)

        > Selon moi le Flash n'a pas sa place sur le web,

        http://www.redbullrampage.com/(...)

        Limiter au maximum son utilisation ok, dire qu'il n'a pas sa place c'est aller un peu loin. (cf yetisport aussi :-) on peut faire des choses pratiques avec, c'est comme pour tout il faut choisir le bon outil pour la bonne tache

      • [^] # Re: Le contenu, le contenu...

        Posté par  . Évalué à 1.

        Par contre pour les tests sur le daltonisme je ne sais pas du tout :(, y'a t'il des logiciels permettant de voir ce que verrait un daltonien ou autre ?

        En solution pas forcément très pratique, tu peux prendre une capture d'écran et utiliser les filtres d'affichages de Gimp pour simuler la perception d'une personne ayant des problèmes avec les couleurs. Il y a d'ailleurs plusieurs filtres car plusieurs déficiences de la perception des couleurs.

  • # IE7 ...

    Posté par  (site web personnel) . Évalué à 3.

    En jouant avec ça : http://dean.edwards.name/IE7/(...) tu peux presque oublier de te soucier des (fortes) restrictions de IE coté CSS...

  • # Bis repetita non placent pas toujours

    Posté par  (site web personnel) . Évalué à 1.

    Personnellement, je considère les hacks CSS comme un équivalent aux méthodes de détection du navigateurs pour tenir compte de leur incompatibilité.

    Donc dans cette logique, les hacks contribuent à faire survivre le non respect des standards ("pas grave, y'a un hack"), et "ça c'est mal".

    Maintenant, rejeter la population défavorisée du web (ceux qui n'ont pas un navigateur respectueux des standards), c'est mal aussi.

    Tant que CC/PP (Composite Capabilities/Preferences Profile) ne sera pas généralisé, je pense qu'il y a plusieurs approche possibles, en fonction des moyens :


    site statique en HTML/XHTML
    Feuille de style "simple", compatible avec tous les navigateur supportant peu ou prou les navigateurs
    site dynamique (PHP, ASP, etc...)
    Donner la possibilité d'utiliser plusieurs thèmes, dont un très simple comme pour le cas précédent (a priori par défaut), et un super chiadé avec tout le design voulu au départ. En option, que le thème utilisé par défaut dépende de l'user-agent, et/ou qu'un label "recommendé" apparaisse en vis à vis du thème.


    PS : zut, pas de mise en forme pour les listes "dl" et pour "q"

  • # hack CSS conforme

    Posté par  . Évalué à 2.

    Un hack CSS que j'aime bien c'est


    border: 1px solid #f00 !important; /*directive appliquées par les navigateur CSS1 compliant*/
    border: 2px solid #0f0; /*directives appliquées par ie*/


    Dam

  • # Hacks CSS

    Posté par  (site web personnel) . Évalué à 5.

    Le seul hack que j'utilise sur mon site perso pour certains thèmes est celui de la position fixed.

    body > div#bandeau {
    position: fixed; /* salete d'IE ... gere pas fixed */
    }

    Je n'en utilise pas d'autres, et je vois juste ce "hack" comme un petit "plus" pour les navigateurs autres que IE.

    La dernière grosse intégration CSS que j'ai faite (ou plutôt que je suis en train de faire) passe bien partout (IE 6.0, Mozilla, Konqueror, Safari, etc...).

    http://dominique.hoffmann.free.fr/new_club_dvd/(...)

    Les seuls gros bugs avérés sont sous IE 4.01, IE 5.01 (mouarf x2), et le reste passe sous IE 5.5. (un tout piti bug, mais qui n'empêche pas la navigation).

    Après ceux qui ne sont pas contents, je leur dis de passer au moins à IE 6.0, sinon à Firefox...

    Pour être franc, je ne connais que très peu de hacks CSS...

    • [^] # Re: Hacks CSS

      Posté par  (site web personnel) . Évalué à 1.

      Pour le position: fixed, il y a un "hack", qui a le mérite de rester conforme :


      
div#bandeau {
      
  position: absolute ;
      
  top: 0 ; 
      
}
      

      
div#contenu {
      
  overflow: auto ;
      
}

    • [^] # Re: Hacks CSS

      Posté par  (site web personnel) . Évalué à 0.

      Le problème du position:fixed c'est que si ca déborde tu ne peux pas le récupérer ....
      Il faudrait le lier avec overflow ...

  • # ça dépend de la cible

    Posté par  . Évalué à 3.

    Si tu fais un site perso, fais du XHTML Strict et CSS : parce que la première raison d'être d'un site perso, c'est quand même de se faire plaisir.

    Si tu fais un site pour une boîte, 2 possibilités :
    - soit tu es obligé de respecter une charte graphique, et alors bonjour la prise de tête. Respecter les normes W3C c'est tout à fait possible, soit tu détectes le navigateur par PHP ou Javascript (ou autre ?) et tu fais plusieurs feuilles de styles adaptées, soit tu fais des hacks CSS. Mais si tu as besoin de la compatibilité Nestcape 4 / IE 4 oublie, fais des tableaux...
    - soit tu décides toi de la charte. Alors tu trouves le meilleur compromis présentation/compatibilité.

    Ta question à la base sur les hacks CSS : selon moi oui il faut les utiliser à 200%. C'est "mal" mais c'est la vie. Avec le temps les navigateurs vont se rénover et on pourra éliminer les hacks. 1 fichier à retoucher... si tu fais ça en tableaux le jour où tu veux changer c'est *tous* les fichiers que tu dois te taper... et le contenu à mettre à jour en plus.

    Le surfeur de base n'en a rien à f***** que ton site soit en CSS-Positioning ou en mise en pages tableaux. C'est la responsabilité d'un webmaster de les convaincre de changer leur Netscape 4 pour quelque chose de plus récent. Sans aller jusqu'à imposer le dernier Firefox évidemment, il faut rester compatible avec IE 6 minimum, IE 5 de préférence, pour ne pas obliger tout le monde à installer un nouveau logiciel.

Suivre le flux des commentaires

Note : les commentaires appartiennent à celles et ceux qui les ont postés. Nous n’en sommes pas responsables.