Javascript & Webdesign » Largeur

CSS3 Media Queries en Javascript pour les vieux navigateurs

Bruno Bichet — Mon, 06 Dec 2010 07:57:07 +0000

CSS3-MediaQueries-JS est une bibliothèque Javascript qui permet d’utiliser les Medias Queries dans IE 5+, Firefox 1+ et Safari 2 — Firefox 3.5+, Opera 7+ et Safari 3+ étant nativement compatibles avec cette propriété CSS3. Les Medias Queries offre un mécanisme pour isoler certaines propriétés ou pré-requis techniques pour appliquer aux agents utilisateurs correspondants une déclaration ou une feuille de style CSS spécifique.

L’appel à la feuille de style externe suivante :

Permet d’adresser la CSS `shetland.css` uniquement aux navigateurs possédant une résolution horizontale (`max-device-width`) inférieure ou égale à 480px.

Voir aussi le plugin jQuery CSS 3 Media Queries for all Browser. via

Des colonnes fixes et ajustées en largeur avec CSS et jQuery

Bruno Bichet — Sun, 20 Dec 2009 15:30:48 +0000

Smart Columns with CSS & jQuery est un tutoriel qui explique comment créer des colonnes dont le nombre s’ajuste à de la taille de la fenêtre disponible sans laisser de blancs disgracieux quand la largeur disponible n’est pas un multiple de la largeur d’une colonne. Hum, le mieux c’est encore de voir l’exemple et de s’amuser à changer les dimensions du viewport. Etonnant, non ?

Connaitre la taille du « viewport » en Javascript

Bruno Bichet — Sat, 19 Dec 2009 15:46:41 +0000

Get viewport size (width and height) with javascript — Parce qu’il est parfois utile de connaitre la largeur et la hauteur disponible dans la fenêtre du navigateur.

Emuler la propriété max-width pour IE6

Bruno Bichet — Mon, 14 Dec 2009 12:49:00 +0000

maxWidthFixForIE6.js — Les expressions Javascript de Microsoft sont énormément utilisée pour pallier l’absence de support de telle ou telle fonctionnalité par pour IE6 en particulier ou Internet Explorer en général alors que leur utilisation grève les performances déjà inquiètantes du dernier de la classe. Il vaut mieux faire appel à du bon vieux Javascript !

window.onload = checkAvailableWidth;
window.onresize = checkAvailableWidth;
function checkAvailableWidth(){
    var container = document.getElementById("container");
    container.style.width = (document.body.clientWidth > 1100)? "1100px" : "auto";
}