28173 sujets

CSS et mise en forme, CSS3

Tests CSS : bonne idée ou pas ?

Bonjour,

J'ai eu l'idée de créer une page web qui, selon le navigateur dans lequel on la lance, permette un diagnostic rapide et visuel des différentes propriétés et hacks CSS qui posent habituellement problème.

Je vous ai préparé une demo (sans prétention aucune) de ce que pourrait être le résultat. A votre avis un tel "outils" serait utile ?



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>

  <title>DebugCSS</title>

  <script type="text/javascript" language="javascript">
    // <![CDATA[

      function modeRendu() {

        var mode = document.compatMode;

        document.getElementById('mode').innerHTML = mode;

      }

      function addLoadEvent(func) {
        var oldonload = window.onload;
        if (typeof window.onload != 'function') {
            window.onload = func;
        } else {
          window.onload = function() {
            if (oldonload) {
              oldonload();
            }
            func();
          }
        }
      }

      addLoadEvent(function() {
        modeRendu();
      })


    // ]]>
  </script>

  <style type="text/css">

    body {font-size: medium; font-family: 'Trebuchet MS', sans-serif;}

    h1 {font-size: large; background-color: #5AF; color: white; padding-left: 5px;}

    code {font-size: medium;}

    #underscore {background-color: white; _background-color: black;}

    #important {background-color: white !important; background-color: black;}

    #paddingstd {padding:0; margin:0; width:500px; height:30px; background-color:red;}

    #padding {margin:0; padding: 0 200px; width:100px; height: 30px; background-color: green;}

    #before:before {content: "fonctionne avec votre navigateur";}

    #after:after {content: "fonctionne avec votre navigateur";}

    .textwhite {color: white;}
    .textblack {color: black;}

  </style>

</head>
<body>

  <h1>Mode de rendu de la page</h1>

  <p>Page &laquo; XHTML 1.0 Strict &raquo;, mode de rendu &laquo;&nbsp;<span id="mode">Info non disponible (JavaScript inactif)</span>&nbsp;&raquo;.</p>

  <h1>Argument CSS &laquo;&nbsp;<code>!important</code>&nbsp;&raquo;</h1>

  <div id="important">

    <div class="textblack">Votre navigateur intepr&egrave;te l'argument CSS &laquo;&nbsp;<code>!important</code>&nbsp;&raquo;.</div>
    <div class="textwhite">Votre navigateur n'intepr&egrave;te pas l'argument CSS  &laquo;&nbsp;<code>!important</code>&nbsp;&raquo;.</div>

  </div>

  <h1>Attributs pr&eacute;fix&eacute;s par &laquo;&nbsp;<code>_ [soulign&eacute;/underscore]</code>&nbsp;&raquo;</h1>

  <div id="underscore">

    <div class="textblack">Votre navigateur n'intepr&egrave;te pas les attributs CSS pr&eacute;fix&eacute;s par &laquo;&nbsp;<code>_</code>&nbsp;&raquo;.</div>
    <div class="textwhite">Votre navigateur intepr&egrave;te les attributs CSS pr&eacute;fix&eacute;s par &laquo;&nbsp;<code>_</code>&nbsp;&raquo;.</div>

  </div>

  <h1>Interpr&egrave;tation de l'attribut CSS &laquo;&nbsp;<code>padding</code>&nbsp;&raquo;</h1>

  <div id="paddingstd">

    <div id="padding"></div>

  </div>

  <p>Si vous voyez du rouge, c'est que votre navigateur n'interp&egrave;te pas l'attribut &laquo;&nbsp;<code>padding</code>&nbsp;&raquo; conform&eacute;ment aux standards.</p>

  <h1>Attribut &laquo;&nbsp;<code>content</code>&nbsp;&raquo; et pseudo-classes &laquo;&nbsp;<code>:before</code>&nbsp;&raquo; et &laquo;&nbsp;<code>:after</code>&nbsp;&raquo;</h1>

  <p>La combinaison de &laquo;&nbsp;<code>content</code>&nbsp;&raquo; et &laquo;&nbsp;<code>:before</code>&nbsp;&raquo; doit produire du texte dans les crochets [<span id="before">]</span></p>
  <p>La combinaison de &laquo;&nbsp;<code>content</code>&nbsp;&raquo; et &laquo;&nbsp;<code>:after</code>&nbsp;&raquo; doit produire du texte dans les crochets <span id="after">[</span>]</p>

</body>
</html>


Merci d'avance pour vos réponses.

fabien
Sujet clos
Aller à