Outils personnels
Vous êtes ici : Accueil Symfony Trucs et astuces CSS
Actions sur le document
  • Send this page to somebody
  • Print this page
  • Add Bookmarklet

Trucs et astuces CSS

Par Pierre-Yves Landuré - Dernière modification 22/12/2009 14:20

Un aide mémoire qui contient quelques petits bouts de CSS bien utiles.

Références

Si vous avez besoin d'informations sur une propriété CSS, je vous invite à visiter la page CSS 2 de DevGuru.com.

Boutons trop larges dans Internet Explorer

Si vous trouvez vos boutons INPUT trop larges dans Internet Explorer, il vous suffit de rajouter les lignes suivantes à leur style CSS:

overflow: visible;
padding: 0em 0.2em;

CSS visibles uniquement par certains navigateurs

Ces hacks sont à utiliser avec modération.

Firefox, Opera, Safari

Le sélecteur suivant fera en sorte que votre CSS ne soit pas visible par Internet Explorer (quelque soit la version) :
* > .classe {}

Internet Explorer 4, 5 et 6

Le sélecteur suivant fera en sorte que votre CSS ne soit visible que par Internet Explorer 6 et inférieur :

* html .classe { }

Internet Explorer 7

Le sélecteur suivant fera en sorte que votre CSS ne soit visible que par Internet Explorer 7 :

*:first-child+html .classe {}

Eléments flottants

Les éléments flottants ont tendance à disparaître dans Internet Explorer (certainement le bug le plus chiant de ce truc (non, ce n'est pas un navigateur)). Pour éviter cela, il y a une méthode simple. Ajoutez le style suivant au conteneur de l'élément flottant qui disparait :

height: 1%;

Pour aller plus loin

Si vous souhaitez que la hauteur de votre conteneur s'adapte à la hauteur des éléments flottants qu'il contient, voici le style à appliquer :

.conteneur:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.conteneur { display: inline-block; }
.conteneur { display: block; }

Un autre style possible est :

.conteneur {
height: 1%
}

* > .conteneur {
height: auto;
overflow: auto;
}

Le sélecteur "* >" fait en sorte que ce style ne soit pas visible par Internet Explorer toutes versions.

Source : Merci à Ed Eliot pour l'article Methods for containing floats.

Références

Bonne pratique

Posté par kane thornwyrd le 17/01/2011 12:02
Les hacks CSS sont, certes, pratiques mais reposent sur des "failles" d'interprétations pouvant du jour au lendemain être colmatées.
De plus cela diminue fortement la lisibilité de vos feuilles.
La bonne pratique en la matière est l'emploi de commentaires conditionnels :

<!--[if IE]>
<link href="ie-only.css" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if lte IE 6]>
<link href="ie6-and-under.css" rel="stylesheet" type="text/css" />
<![endif]-->

Etc.
Je vous laisse vous documenter à ce sujet.

commentaires conditionnels

Posté par Lone Wolf le 18/01/2011 10:21
Bonjour,

merci pour votre commentaire.


Réalisé avec Plone

Ce site respecte les normes suivantes :

Wikio