css, gif, png et navigateurs !

[adatim]

Salut à tous,

j'ai un petit problème de compatibilité tout ce qu'il y a de plus normal mais j'aimerais savoir si je peux le régler.

Je vous explique. J'ai un logo qui a besoin d'une transparence et gif ma la gère très mal même en s'appliquant un maximum au niveau du détourage ...

Je veux donc utiliser un png 24 mais je ne peux pas me permettre que ie par exemple me l'affiche avec un beau fond gris ...

Ce que j'aimerais faire c'est -si c'est possible- détecter si le navigateur peut lire le png24 et si non lui envoyer un gif ... sans avoir pour autant à réaliser une liste de navigateurs ... mais est-ce possible ? je ne pense pas mais si quelqu'un avait cette solution ca m'aiderait

Merci

Lionel

[Dudu]

Bonjour,

Cette image est-elle appelée directement dans le code HTML ou bien dans la feuille de style ?

Si c'est dans la feuille de style, rien de plus simple

#id {
background: url(path/to/image.png) !important;
background: url(path/to/image.gif);
}

[Eric (11)]

Sinon, il existe bien des solutions javascript ou js pour ce genre de soucis, ou encore à la limite un petit soft permettant de rajouter une couche de la teinte au choix dans le png. Mais bon, la solution de Dudu est la plus simple est la plus rapide à mettre en place selon le cas defigure bien sur :-)

Eric.

Modifié 10 Mai 2005 par Eric (11)

[Denis]

#id {
background: url(path/to/image.png) !important;
background: url(path/to/image.gif);
}

Ou encore, avec les merveilleux sélecteurs universels / contextuels / adjacents, j'oublie le terme exact. Enfin, ceci :

 #id {background: url(path/to/image.gif)}
body>#id {background: url(path/to/image.png)}

Ainsi, IE ne saura lire la seconde ligne et se contentera d'afficher le .gif alors que tout bon navigateur digne de ce nom saura interpréter la seconde ligne et affichera le .png (en passant par-dessus la lecture du .gif, par effet de cascades).

Quoi, un troll ? Ok, je sors ---> []

[adatim]

Merci bcp pour l'ensemble de ces solutions !! je ne pensais pas à le faire en css effectivement mais je peux faire de la sorte sans pbs ...

J'aime bcp ta solution Denis ou comment évincer ie fodrait que j'y pense plus souvent à ca

[Dudu]

Les 2 solutions ont de toutes façons pour but d'évincer IE.

En fait, elles ont en commun ceci: plutôt que de créer de toutes pièces un script qui va venir détecter le User-Agent d'Explorer (tout en évitant de comptabiliser Opera/Firefox/Safari/ Omniweb si ceux-ci sont configurés pour se faire passer pour IE, etc etc..) avec tous les problèmes que cela pose, on piège juste IE. On le fait tomber dans ses propres lacunes en déclarant un code qu'il ne va pas comprendre. Et en s'arrangeant pour qu'il lise une autre déclaration CSS "par défaut".

C'est vrai que je n'avais pas pensé aux sélecteurs, c'est moins bourrin que de coller des "!important" partout, et çà rend le code plus clean, bien joué m'sieur C²

PS: l'adjectif adéquat pour ce sélecteur je ne sais pas trop non plus. Ce dont je suis sûr c'est que ce n'est pas "universel". Le sélecteur universel c'est * dont l'utilisation la plus utilisée est

* { margin: 0; padding: 0 }

pour sucrer toutes les marges par défaut des navigateurs

[edit] ayé j'ai trouvé.

> est appelé "direct-child selector" par les anglophones. En français, aucune idée par contre. [/edit]

Modifié 10 Mai 2005 par Dudu

[Denis]

En fait, le principal intérêt d'une solution purement CSS c'est qu'elle ne risque pas d'être basée sur un javascript propriétaire ou sur une solution de browser sniffing qui ne serait pas pleinement fonctionnelle (ex. autoriser Netscape 6, mais pas fireFox 1.0).

Ce n'est donc pas tant d'évincer IE (même si l'idée a quelque chose de plaisant), mais bien de se servir de certaines de ses faiblesses pour contourner certaines autres de ses faiblesses. Après tout, aussi en retard puisse t-il être, il demeure tout aussi incontournable.

Direct-child, ça serait probablement "sélecteur enfant" ou "Filial" alors. Si je me fie à Daniel Glazman, qui en connait quand même un bon bout sur la question :

http://daniel.glazman.free.fr/books/css2/chap3.html

Le sélecteur enfant serait :

#id > .class {...}

Et le sélecteur adjacent serait :

#id + .class {...}

[Eric (11)]

Enfin ce qui malheureux c'est quand ces solutions d'évincement d'IE on soit obligé d'avoir deux formats différents pour une seule image !

Eric.

[Denis]

Bah, IE 7 s'en vient, il y a toujours lieu d'espérer...

[adatim]

oui mais combien de personnes auront encore ie6 voir ie5 dans les années à suivre ? donc même si ie7 arrive je crains que l'on soit condamné à ce genre de lourdeur encore un bon moment ...

[Denis]

De moins en moins, c'est certain... mais toujours un peu trop selon notre propre perspective, c'est aussi assuré. En fait, moi ce qui m'inquiète le plus, c'est justement ce qui arrivera si du jour au lendemain, un éventuel IE se mettait à comprendre les sélecteurs enfants et autres, sans pour autant mieux supporter les CSS (dont notamment le fameux modèle de boite)...

Personnellement j'utilise beaucoup les sélecteurs de ce type pour passer par-dessus les inégalités de MSIE. Si l'équipe qui développe le navigateur commence à bien implémenter les possibilités de CSS-3, sans pour autant régler ce fichu box model, le Web risque de sérieusement commencer à se dégrader pour les utilisateurs de IE qui visitent les sites conformes aux normes...

Ça, ou du coup, il y aura plein de lignes de CSS devenues caduques dans nos petits sites Web respectifs !

[Dudu]

Je fais partie des pessimistes concernant IE7 mais je n'irais pas jusque là

Je m'explique.

Combien de fois sur des forums de ce genre voit-on des posts du type "[un navigateur] n'est pas compatible !! ". Et souvent la variable [un navigateur] prend la valeur de Firefox, ou bien Safari, ou encore Opera, bref tous ces navigateurs qui ne corrigent pas (ou n'adaptent pas) le code.

(Aparté: la différence, pour un navigateur, entre la correction d'erreur et l'adaptation farfelue n'est souvent pas très grande. Du coup je ne sais jamais quel terme employer).

Pourquoi çà ? En y réflechissant, c'est un phénomène tout à fait normal. Une majorité d'internautes, s'ils savent très bien surfer, ne connaissent finalement pas grand chose ni au code, ni au fait que différents navigateurs vont tourner sous différents moteurs de rendu (Khtml, Gecko, MS), ni à plein d'autres paramètres qui peuvent rentrer en compte dans ce genre de situations. Ils accusent donc en toute bonne foi ce qu'ils appréhendent le mieux et qui leur est le plus proche: le navigateur.

C'est ainsi qu'on a vu récemment, lors de cette vague typiquement windowsienne de switch IE->FF, nombre de personnes dire "oh mais quelle horreur, mon site préféré ne s'affiche pas comme avant, je retourne sous IE qui lui m'affichait bien la page" (c'est en général au moment précis où on lit ce genre de choses qu'on commence à s'arracher les cheveux et à se manger les mains).

Alors qu'en fait, c'est tout simplement le site ou la page qui est juste mal foutu, avec quelques erreurs de code. Or du mauvais code passé à la moulinette d'un navigateur qui respecte les standards en se contrefoutant des erreurs et des balises proprio, çà rend visuellement la page telle qu'elle a été conçue: mal.

Or le fait est qu'une majorité de gens utilisant des outils informatiques sans bien les connaître (ce n'est pas péjoratif) utilisent Windows. Donc Explorer comme navigateur. Or si Explorer 7 se voit implémenter les attributs CSS3 sans prendre en charge un box model correct, grand nombre de sites vont s'afficher n'importe comment. Et les utilisateurs d'IE vont tous dire qu'IE est pourri etc etc..

Et Microsoft de continuer son inéxorable descente.

Enfin je vois les choses comme çà

À ce propos, je suis persuadé aussi qu'on va se trainer IE 5 et IE 6 pendant un bout de temps encore. Aujourd'hui, chez Dudu, c'est journée statistiques. Je teste plein de trucs, j'en bidouille d'autres, j'adapte à ma manière, et surtout après je regarde. Et bien j'ai vu pas mal de IE 5 (IE 5 Win j'entends Pour les Macs, c'est normal, MS a arrêté le dév d'IE à la version 5.2.3 et de toute façon personne ne l'utilise). Et pourtant IE 6 est sorti depuis quelque temps déjà.

[Eric (11)]

Pour les Macs, c'est normal, MS a arrêté le dév d'IE à la version 5.2.3 et de toute façon personne ne l'utilise). Et pourtant IE 6 est sorti depuis quelque temps déjà.

<{POST_SNAPBACK}>

[enroc]

Alors je me demandais si l'approche suivante était valable aussi (bon c'est possible que je me trompe en long en large et en travers aussi), ça concerne apache :

- avoir sur le serveur image.gif, image.png

- appeler l'image avec http://www.exemple.com/image

- le serveur décide lui même quoi envoyer.

Exemple testé avec Firefox, qui affiche le PNG et IE qui affiche le GIF

http://cmerot.free.fr/corentin/other/image

Et si il y en a qui ont de l'experience avec apache, la question est : c'est une solution fiable ?

au passage : c'est ça le concept d'URI, l'URI c'est "image", qui a 2 URL "image.gif" et "image.png" ?

[adatim]

a ce niveau là ce qui me gène c'est que si on prend la source on obtient :

<img alt="L'image « ;http://cmerot.free.fr/corentin/other/image » ne peut être affichée, car elle contient des erreurs." src=&quot;http://cmerot.free.fr/corentin/other/image">

Donc je crains le pire ... mais je n'ai pas testé avec tous les navigateurs mais vu ce que firefox corrige c'est déjà étrange ...

Quant à opera c'est même pas la peine de lui demander de charger la page il ne veut pas en entendre parler ...

Lionel

[enroc]

Pour moi ce n'était pas tellement le navigateur qui est en cause, c'est le serveur apache qui négocie ce qu'il doit envoyer avec le navigateur qui lui envoie dans HTTP_ACCEPT ce qu'il peut lire.

Pour IE j'ai :

image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, application/x-shockwave-flash, */*

Et pour FF j'ai :

text/xml,application/xml,application/xhtml+xml,text/html;q=0.9,text/plain;q=0.8,image/png,*/*;q=0.5

De là le serveur envoie soit image.gif soit image.png

Sinon pour l'image qui contient des erreurs, je comprend pas pouquoi. Je l'ai faite avec Gimp. Il faudrait peut-être essayer avec d'autres images.