css en fonction du browser

west00
Les bases HTML/CSS

Bonjour,

Désolé si le sujet a déjà traité mais je ne l'ai pas trouvé.
Je vous explique, je suis en train de réaliser pour un ami un site web en HTML5/CSS3 avec un certain nombre d'animations sur la page. Mon problème est qu'avec la répétition des lignes en fonction des navigateurs, je me retrouve avec des fichiers CSS que je trouve particulièrement volumineux (2x20Ko ça fait beaucoup...)
Je me demandais donc si vous sauriez comment je pourrais faire pour alléger le chargement ?
Personnellement je pensais à une détection du browser et load du css contenant les informations le concernant uniquement => ça divisera presque par 4 (webkit, moz, o, ms) la taille des css d'animations... le problème c'est que je ne trouve pas comment le faire et je me dis que je ne dois pas être le seul à vouloir optimiser mes pages en ne chargeant que ce qui est utile.

Merci d'avance :)

4 réponses

snollito

Tu peux détecter les versions d'IE avec les commentaires conditionnels HTML, tu peux aller voir un article ici. Tu peux aussi compresser tes fichiers CSS, voici l'article ici.

Tralala8

Bonjour,

Il existe, si je me souviens bien, une fonction Javascript qui est navigator.appName. Je ne saisons comment l'utiliser (ça fait longtemps) mais tu devrais trouver sur Google. Maintenant, il existe plus que probablement une méthode plus appropriée.

snollito

La détection du navigateur en JS ou le chargement d'un CSS minimifié, niveau chargement et propreté, je pense que la seconde méthode est plus adaptée.

tarekdj

Bonjour,
tu pourras utiliser http://yepnopejs.com/ pour un chargement conditionnel des js/css et utiliser http://www.cleancss.com/ pour compresser tes fichiers css.