lundi 25 mai 2009
Ou plutôt en fonction de la largeur de la fenêtre du navigateur.
En effet, la résolution ne fait pas le moine si votre visiteur n'a pas choisi le plein écran!
Cette méthode utilise le Javascript à bon escient, je ne pense pas qu'on pourrait s'en passer.
Dans la page HTML:
<head>
<title>titre</title>
<link type="text/css" href="partie-commune.css" rel="Stylesheet" />
<script type="text/javascript" src="monscript.js"></script>
</head>
<body>
et dans monscript.js:
var largeurDeFenetre;
if (typeof window.innerWidth!='undefined') {
largeurDeFenetre = window.innerWidth;
} else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth !='undefined' && document.documentElement.clientWidth != 0) {
largeurDeFenetre = document.documentElement.clientWidth;
} else {
largeurDeFenetre = document.getElementsByTagName('body')[0].clientWidth;
}
La variable "largeurDeFenetre" contient donc maintenant la largeur de la fenêtre du navigateur lors du rafraîchissement de la page HTML. On écrit ensuite une petite fonction qui va charger une nouvelle page CSS:
function loadcss(cssfile) {
var fileref = document.createElement("link");
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", cssfile);
document.body.appendChild(fileref);
}
Façon cuisine moderne grâce à l'exploitation du DOM, tout va bien.
Finalement, on charge telle ou telle page CSS selon cette largeur de fenêtre:
window.onload = function() {
if(largeurDeFenetre<=950) {
loadcss("css/petit.css"); }
else {
loadcss("css/grand.css"); } }
Cette fonction est appelée lors du chargement de la page. Elle même charge telle ou telle page selon la largeur calculée plus tôt.
Libellés : css, html, informatique, javascript, programmation
0 Comments:
Subscribe to:
Publier les commentaires (Atom)
