Quizz CSS : La priorité des régles de style
Voici une page HTML dans laquelle de nombreuses règles CSS contradictoires se battent pour changer la couleur de l'élément BODY.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Test style</title>
<style type="text/css"><!--
html, body {
overflow: hidden;
border-style: none;
border-width: 0px;
border-color: transparent;
}
html > body {
background: blue;
}
.body {
background: yellow;
}
#body {
background: red;
}
--></style>
<script type="text/javascript"><!--
window.onload = function onLoad() {
try {
document.body.style.background="white";
} catch (ex) {}
try {
document.body.currentStyle.background="green";
} catch (ex) {}
try {
document.body.runtimeStyle.background="orange";
} catch (ex) {}
}
--></script>
</head>
<body id="body" class="body">
</body>
</html>
Mes questions sont assez simples :
- Quelle sera la couleur affichée de la page ? Sera-t-elle différente sous IE et sous FF ? Si oui, pourquoi ?
- Quelle est l'ordre de priorité des régles CSS et JavaScript ci-dessus ?
- Quelle aurait été l'éffet du terme " !important " placé dans une des régles ci-dessus ?
Ce post vous a plu ? Ajoutez le dans vos favoris pour ne pas perdre de temps à le retrouver le jour où vous en aurez besoin :
François REMY est un jeune développeur belge plein d'entrain qui traite surtout des technologies du web et de DotNet dans ses articles.
