Le programmeur otaku

Le but de l'article d'aujourd'hui est de voir si on peut utilisé la nouvelle balise <nav> de HTML 5 pour créer un menu horizontal compatible avec les navigateurs récents et les anciens Internet Explorer.

Donc pour la version 1, commençons par une petite page de test très simple.

<!DOCTYPE html>
<html>
<head>
   <title>Test <nav> HTML5</title>
   <link rel="stylesheet" type="text/css" media="screen" href="../../Styles/Base.css" />
   <style type="text/css">
       /* nav layout (horizontal menu) */
       nav {margin:1em 0; line-height:2em;}
       nav a {display:inline-block; padding:0 10px;}

       /* nav design */
       nav {background:#333333; border:1px solid black;}
       nav a {color:#cccccc; border-right:1px solid #cccccc;}
       nav a:hover {background:#666666; color:#ffffff;}
   </style>
</head>
<body>
   <h1>Test <nav> HTML5</h1>

   <div>Texte avant le menu</div>

   
   <nav>
       <a href="#">Page 1</a><a href="#">Page 2</a><a href="#">Page 3</a><a href="#">Page 4</a><a href="#">Page 5</a>
   </nav>

   <div>Texte après le menu</div>
</body>
</html>

Chrome 16

Firefox 8

Internet Explorer 9

Internet Explorer 8

Internet Explorer 7

Internet Explorer 6

Donc après les tests de la première version, on se rend facilement compte que les anciens Internet Explorer n'applique pas le CSS que j'ai mis sur la balise <nav>.

Donc pour la version 2 je vais esayer d'intégrer un plugin JavaScript dont j'avais entendu parler sur le Web : html5shiv. Ce plugin est sensé améliorer la compréhension des balises HTML 5 pour les vieux Internet Explorer.

<![endif]-->

</head>
<body>
    <h1>Test <nav> HTML5</h1>

    <div>Texte avant le menu</div>

    
    <nav>
        <a href="#">Page 1</a><a href="#">Page 2</a><a href="#">Page 3</a><a href="#">Page 4</a><a href="#">Page 5</a>
    </nav>

    <div>Texte après le menu</div>
</body>
</html>

Chrome 16

Firefox 8

Internet Explorer 9

Internet Explorer 8

Internet Explorer 7

Internet Explorer 6

Après les tests de la deuxième version avec html5shiv, on voit que les vieux Internet Explorer applique maintenant mon CSS appliquer sur la balise <nav>.
Mais contairement aux navigateurs récents qui semble interpréter par défaut la balise <nav> comme un élément "block", les vieux Internet Explorer semble interpréter la balise <nav> comme un élément "inline-block".

Donc pour la version 3, je vais ajouter une spécification dans mon CSS pour afficher la balise <nav> comme un élément "block" dans tout les navigateurs.

<!DOCTYPE html>
<html>
<head>
   <title>Test <nav> HTML5</title>

    <link rel="stylesheet" type="text/css" media="screen" href="../../Styles/Base.css" />
    <style type="text/css">
        /* nav layout (horizontal menu) */
        nav {display:block; margin:1em 0; line-height:2em;}
        nav a {display:inline-block; padding:0 10px;}

        /* nav design */
        nav {background:#333333; border:1px solid black;}
        nav a {color:#cccccc; border-right:1px solid #cccccc;}
        nav a:hover {background:#666666; color:#ffffff;}
    </style>

    
</head>
<body>
    <h1>Test <nav> HTML5</h1>

    <div>Texte avant le menu</div>

    
    <nav>
        <a href="#">Page 1</a><a href="#">Page 2</a><a href="#">Page 3</a><a href="#">Page 4</a><a href="#">Page 5</a>
    </nav>

    <div>Texte après le menu</div>
</body>
</html>

Chrome 16

Firefox 8

Internet Explorer 9

Internet Explorer 8

Internet Explorer 7

Internet Explorer 6

Après trois versions, le rendu semble être assez similaire dans les navigateurs récents et les vieux Internet Explorer.

Voici quelques liens utiles :

Me voilà de retour après quelques mois d'absence sur mon blog.
Fidèle à mes habitudes je vais essayer de partager de nouvelles choses utiles pour tout FrontEnd Developper qui se respecte (javascript, jQuery, css, html 5, mvc, php, ...).

Trève de bavardage, passons au sujet du jour : Modifier la façon d'afficher un alert() JavaScript.

Je me suis donné comme défi de rendre l'affichage de mes alert() JavaScript plus sexy dans mes applications web.
Voici le code résultant de mes recherches et de mes tests pour remplacer automatiquement l'affichage des vieux alert() JavaScript par de jolie jQuery UI dialog.

<!DOCTYPE html>
<html>
<head>
   
   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
   <link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/dot-luv/jquery-ui.css" />

   
   <script type="text/javascript">
        window.alert = function(native) {
            return function(message) {
                try {
                    // display the alert message with the jquery ui dialog
                    jQuery("<div>" + message + "</div>").dialog({
                        modal:true, resizable:false, draggable:false,
                        buttons: {
                            Ok: function() { $(this).dialog("close"); }
                        }
                    });
                } catch(e) {
                    // display the alert with the native browser alert
                    native(message);
                }
            }
        }(window.alert);
   </script>
</head>
<body>
   <h1>JavaScript Custom alert()</h1>

   <p>
        
        <a href="#" onclick="alert('There is my beautiful alert !');return false;">Display an alert</a>
   </p>
</body>
</html>

Testé avec IE6, IE7, IE8, IE9 x86, IE9 x64, Chrome 15, Firefox 8.

Le programmeur otaku

vendredi 9 décembre 2011

Menu horizontal avec HTML 5

vendredi 11 novembre 2011

Modifier l'affichage des alert() JavaScript

lundi 6 juin 2011

Méditation du programmeur