Bonjour à tous et à toutes,

Je souhaite utiliser modernizr pour afficher d'autre css aux navigateurs qui ne sont pas compatible avec les flexbox mais je n'arrive pas à le faire fonctionner comme je veux.
L'exemple si dessous fonctionne bien, le texte test et en vert si le navigateur prend en charge les flexbox et en rouge si il ne les prend pas en charge.

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
 
.no-flexwrap .box { color: red; }
.flexwrap .box { color: green; }
 
<?php echo'<script src="'.ROOTPATH.'/js/modernizr-custom.js" type="text/javascript"></script>';
if (Modernizr.flexwrap) {
echo'<div class="flexwrap box">test</div>';
} else {
  echo'<div class="no-flexwrap box">test</div>';
}
<?
Voici ce que j'essaie de faire
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
 
<?php
echo'<script src="'.ROOTPATH.'/js/modernizr-custom.js" type="text/javascript"></script>';
        if (Modernizr.flexbox && Modernizr.flexwrap) {
            $header_flex = 'header_yes';
            $element_header = 'element_header_yes';
        } else {
            $header_flex = 'header_no';
            $element_header = 'element_header_no';
        }
?>
Dans mon fichier css j'ai ajouté les class header_yes, header_no, element_header_yes et element_header_no mais quand j'affiche le code source c'est toujours la class header_yes et element_header_yes même quand le navigateur ne prend pas en charge les fexbox.

Comment puis-je faire pour changer mes class css selon si le navigateur et compatible ou pas avec les flexbox ?

Merci de votre aide.