11548 sujets

JavaScript, DOM et API Web HTML5

Script modernizr

Bonjour,

J'ai construit un site en html5 et css3.
Malgré les moz, webkit & o que j'ai insérés dans mes fichiers css, la compatibilité est totalement inopérante dans les anciennes versions des navigateurs courants (firefox, safari, etc.)

Suite à un article paru sur ce site, j'ai utilisé les scripts fourni par Modernizr. Dans un 1er temps j'ai utilisé un script custom pour radius, box-shadow, text-shadow mais pas de résultat.
J'ai alors utilisé le script global ( http://www.modernizr.com/downloads/modernizr-latest.js )

Mais toujours pas de résultats ... la compatibilité avec les vieilles versions est une catastrophe ! =(
En fait, j'ai créé un dossier "scripts" dans lequel j'ai intégré modernizr-latest.js.

Également, j'ai retiré les moz, webkit & o que j'avais insérés dans mes fichiers css. Comme pas de résultats, je les ai réintégrés mais toujours pareil.

Dans mes pages php, voici comment j'ai renseigné ceci :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
		<meta name="description" content="Présentation du club de vol à voile Le Luberon Sous le Vent" />
		<meta name="keywords" content="planeur, planeurs, provence, luberon, lubéron, luberon sous le vent, lubéron sous le vent, vélivole, vélivoles, velivole, velivoles, baptême de l'air, baptêmes de l'air, bapteme de l'air, baptemes de l'air, baptême air planeur, baptêmes air planeur, bapteme air planeur, bapteme air planeur, vol, vols, vol libre, vol à voile, vol a voile, vol en planeur, vols en planeurs, vol planeur, vols planeurs, treuil, thermique, thermiques, onde, ondes" />
		<link rel="stylesheet" href="css/style_generic.css" type="text/css" />
		<link rel="stylesheet" href="css/style_accueil.css" type="text/css" />
		<script type="text/javascript" src="scripts/modernizr-latest.js"></script>
        <!--[if lt IE 9]>
            <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        <title>Luberon Sous le Vent - planeurs en Provence</title>
	</head>


Voici l'url de mon site => http://luberon-sous-le-vent.toile-libre.org/

Est-ce que j'ai oublié quelque chose ou bien mal fait un truc ?
Merci d'avance pour votre aide.

À+
lool
Modifié par lool_lauris (04 Feb 2012 - 20:02)
Il faut bien comprendre que Modernizr n'est pas un polyfill.

Il ne permet en aucun cas d'imiter ou de rendre compatible des propriétés CSS 3. Il permet seulement d'en détecter le support afin de nous laisser à ce moment mettre en place des polyfills, ou de contourner le problème avec un fallback.

Mais en aucun cas Modernizr ne fait quoi que ce soit par lui même pour améliorer la compatibilité.
Merci pour ta réponse.

Je ne sais pas encore ce qu'est un polyfill ni un fallback ... normal je débute.
Donc le script de Modernizr ne me sert strictement à rien ?
Pas vraiment d'intérêt à le conserver dans mes pages !..
Eh bien, lis la documentation et tu verras si tu en as besoin ou pas...

http://www.modernizr.com/docs/

Et si finalement ce que tu cherche sont des polyfills, l'équipe de Modernizr en tient une liste relativement complète ici:

https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills

Également, un article sur Modernizr et son principe ici même sur Alsacréations:

http://www.alsacreations.com/astuce/lire/996-amelioration-progressive-modernizr-et-selecteurs-css.html

(Et si tu veux mon avis personnel, je me sers de Modernizr sur presque tous mes projets. Je te conseillerais donc vivement de prendre le temps de bien l'étudier si tu compte aller plus loin avec CSS 3 et HTML 5)
Sujet clos
Aller à