Personal tools
You are here: Home Symfony Trucs et astuces CSS
Document Actions
  • Send this page to somebody
  • Print this page
  • Add Bookmarklet

Trucs et astuces CSS

by Pierre-Yves Landuré last modified 2009-12-22 15: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

Posted by kane thornwyrd at 2011-01-17 13: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

Posted by Lone Wolf at 2011-01-18 11:21
Bonjour,

merci pour votre commentaire.


Powered by Plone CMS, the Open Source Content Management System

This site conforms to the following standards:

Wikio