@media screen and (max-width:) { non pris en compte sous safari 6.0.1

Bonjour à tous,
Je me suis lancé il y a peu dans le rélisation de mon site perso récemment.
Avant la mise en ligne définitive de celui-ci, j'aurais aimé régler un problème de médias queries.
Sous Chrome et Firefox tous fonctionne en quand je suis en local.
Par contre quand je le test en ligne les 3 # tailles d'images ne fonctionnent pas et les deux navigateur ne m'affiche rien.

<picture alt="">
<source src="small.jpg" media="(min-width: 0px)">
<source src="medium.jpg" media="(min-width: 1025px)">
<source src="large.jpg" media="(min-width: 1281px)">
<noscript> <img src="small.jpg" alt=""> </noscript>
</picture></div>

Sous Safari les images fonctionnent par contre c'est le

@media screen and (max-width:) {

qui n'est pas pris en compte.

L'adresse du site en question: http://www.nicolasbonte.com/index3

Je précise que mon niveau et assez faible en programmation.
Bien à vous.
Modifié par nicoledude (04 Oct 2012 - 14:05)

L'élément picture est en discussion au W3C et n'est pas encore implémenté dans les navigateurs.

Connaitrais-tu un moyen de contourner ce problème?

Je me suis pourtant inspiré d'un exemple qui lui fonctionne
http://wil.to/picturefill/

Il n'y a pas un bout de Javascript qui fait tourner le tout?

Si, mais je l'ai avais importé et placer dans mon header.

matchmedia.js
picturefill.js

Sinon tu le gere directement dans les CSS.

<div class="img_s"><img src="small.gif"/></div>
<div class="img_m"><img src="medium.gif"/></div>
<div class="img_l"><img src="large.gif"/></div>

et dans la css

.img_m{display:none;}
.img_large{display:none;}
@media screen and (min-width:1025px){
.img_s{display:none;}
.img_m{display:block;}
.img_l{display:none;}
}
@media screen and (min-width:1281px){
.img_s{display:none;}
.img_m{display:none;}
.img_l{display:block;}
}

Et la bonne image est affiché quand la taille est la bonne