Le blog de Guillaume Bizet

[css]
a[href $='.pdf'] { padding-left: 22px; background: transparent url(img/pdf.png) no-repeat center left;}
a[href $='.gif'] { padding-left: 22px; background: transparent url(img/image.png) no-repeat center left;}
a[href $='.png'] { padding-left: 22px; background: transparent url(img/image.png) no-repeat center left;}
a[href $='.jpg'] { padding-left: 22px; background: transparent url(img/image.png) no-repeat center left;}
a[href $='.doc'] { padding-left: 22px; background: transparent url(img/word.png) no-repeat center left;}
a[href $='.xls'] { padding-left: 22px; background: transparent url(img/excel.png) no-repeat center left;}
a[href $='.css'] { padding-left: 22px; background: transparent url(img/texte.png) no-repeat center left;}
a[href $='.txt'] { padding-left: 22px; background: transparent url(img/texte.png) no-repeat center left;}
a[href $='.php'] { padding-left: 22px; background: transparent url(img/php.png) no-repeat center left;}
a[href $='.zip'] { padding-left: 22px; background: transparent url(img/compress.png) no-repeat center left;}
a[href $='.rar'] { padding-left: 22px; background: transparent url(img/compress.png) no-repeat center left;}
a[href $='.tar.gz'] { padding-left: 22px; background: transparent url(img/package.png) no-repeat center left;}
a[href $='.pkg.gz'] { padding-left: 22px; background: transparent url(img/package.png) no-repeat center left;}
etc ...

[css]
a[href ^="aim:"]  { padding-left: 22px; background: transparent url(img/aim.png) no-repeat center left;}
a[href ^="msnim:"] { padding-left: 22px; background: transparent url(img/msn.png) no-repeat center left;}
a[href ^="xmpp:"] { padding-left: 22px; background: transparent url(img/jabber.png) no-repeat center left;}
a[href *="icq.com"]  { padding-left: 22px; background: transparent url(img/icq.gif) no-repeat center left;}
a[href *="edit.yahoo.com/config/send_webmesg?"]  { padding-left: 22px; background: transparent url(img/yahoo.gif) no-repeat center left;}
a[href ^="skype:"]  { padding-left: 22px; background: transparent url(img/skype.png) no-repeat center left;}

[css]
a[href *="youtube.com/"] { padding-left: 22px; background: transparent url(img/youtube.png) no-repeat center left;}
a[href *="metacafe.com/"] { padding-left: 22px; background: transparent url(img/metacafe.png) no-repeat center left;}
a[href *="flickr.com"] { padding-left: 22px; background: transparent url(img/flickr.png) no-repeat center left;}
a[href *="zooomr.com"] { padding-left: 22px; background: transparent url(img/zooomr.png) no-repeat center left;}
a[href *="imageshack.us"] { padding-left: 22px; background: transparent url(img/imageshack.png) no-repeat center left;}
a[href *="bubbleshare.com"] { padding-left: 22px; background: transparent url(img/bubbleshare.png) no-repeat center left;}

Auteur: Guillaume BIZET

Restez au courant de l'actualité et abonnez-vous au Flux RSS du blog ou du Flux RSS de cette catégorie

• Tweeter

• CSS
• Standards web
• W3C
• Xhtml

Julien ·  18 octobre 2007, 09:51

Oui effectivement c'est sympa

Vivement le jour où tous les navigateurs supporteront pleinement le CSS !

En attendant, grâce à jquery tu peux très facilement palier ce manque avec un truc du style: $("ahref $='.pdf'").css({padding-left: "22px"; background: "transparent url(img/pdf.png) no-repeat center left";});

Vive javascript ^^

giz404 ·  18 octobre 2007, 09:53

Cette technique semble être la même que celle mise en oeuvre par Alexandre Balmes dans son framework BIC : http://www.alexandrebalmes.fr/webde...

Julien ·  18 octobre 2007, 09:54

Petit bug, il faut évidement laisser les autour de href $='.pdf'

Groumphy ·  18 octobre 2007, 10:26

Ah oui... Super sympathique !!
A utiliser impérativement !

RpGmAx ·  18 octobre 2007, 11:17

Yes niquel merci d'avoir relayé l'info !

hapax ·  18 octobre 2007, 14:57

Ah si tout le monde surfait avec Firefox notre vie serait tellement plus simple et plus belle... 8-|

En tout cas c'est une belle trouvaille, merci !

Matt ·  21 octobre 2007, 00:10

Génial! J'étais pas du tout au courant qu'on pouvait faire ça en css! Merci pour l'info! =).

Guillaume ·  22 octobre 2007, 19:53

merci du tuyau !!

note à moi-même : trouver du temps pour utiliser tous les t¸rouvailles de Guillaume Bizet sur mes sites web...

Rwick ·  24 octobre 2007, 17:46

Bonjour à tous,
J'ai un soucis lors de l'implémentation de cette technique css
( c'est là que mon moi intérieur se dit : "Pk moa ? :S" ^^ )

a[href $='.pdf'] {padding-left: 22px; background: transparent url("../images/icon_pdf.gif") no-repeat center left;}

Voici le seul ( pour l'instant ) exemple qui pourrai me servir.

L'image est bien stocker au bonne endroit ( j'ai même essayer avec le chemin absolu => Pas mieu :/ )

Anticipation de question Inside xD Oui, je modifie bien le bon fichier css ( de tte façon je n'en ai que un :P )

je ne comprends pas pourquoi cela ne marche pas. Si quelqu'un à une suggestion ? *-)

Voici mon lien au cas il serait mal formaté.

<?php <a href=\"http://www.geodd.com/".$PathFichierEncours."\">".$FichierLivraisonEncours."</a>
?>

Guillaume ·  24 octobre 2007, 18:13

@Rwick : peux tu me fournir une page online sur laquelle tout est en place et où cela devrait marcher.

Merci

Rwick ·  25 octobre 2007, 09:39

Salut guillaume.
Désolé c'est sur le back-office :S v faire une page test sur le site de prod atta.. je revien vers toa dans 10 min

Rwick ·  25 octobre 2007, 09:52

Voilou, c'est fait => http://fr.geodd.com/include/test.ph...
et le css => http://fr.geodd.com/include/icone_c...
et l'image de l'icone => http://fr.geodd.com/images/icon_pdf...
je vais chercher en attendant.. ( je ne décrocherait tant que je 'ny arriverai pas de toute façon. ( c'est sa d'être breton => un peu tête de con xD ), mais ton aide ou celle d'autres participant sera grandement apprécié

Rwick ·  25 octobre 2007, 10:04

C'est bon sa marche. Merci kan meme. j'avais même pas vu qu'il me manquai le "$" dans le CSS donc forcément sa marchait moins bien
Bonne journée à tous et merci encore à toi, guillaume de ce tips css

aucune annexe