10 Astuces CSS pour vous sauver la vie ! #2

Après un premier article présentant 10 astuces à connaître pour éviter de s’arracher les cheveux sur du CSS, voici la suite toujours aussi utile !

A première vue, le CSS est un langage, voire un « format », facile et rapidement assimilable. Seulement, il y a de nombreuses subtilités à connaître avant de maîtriser entièrement le duo xHTML/CSS. Je vais délivrer certaines connaissances, astuces ou autres trucs pouvant vous éviter de perdre des heures de recherches.

Comme vous le verrez, certaines astuces sont assez avancées et peu communes, pourtant certaines sont incroyablement utiles !


1. Superposer des éléments avec z-index

Longtemps peu utilisé, notamment à cause d’Internet Explorer qui le gérait très mal, cette propriété permet de gérer la superposition d’éléments en définissant un ordre. La règle est simple : l’élément au z-index le plus élevé se trouve au-dessus. Mais il y a une subtilité à connaître : les éléments sont obligés d’être positionnés avec la propriété CSS position dont la valeur peut être absolute, relative ou fixed.

Exemple rapide rien que pour vous :

<div id= »test1″>…</div>

<div id= »test2″>…</div>

<div id= »test3″>…</div>

Le CSS avec test1 tout en haut, test2 tout en bas et test3 au milieu de l’axe Z (superposition). A noter qu’ils possèdent tous une position, sinon le z-index ne marcherait pas.

div#test1 {position: absolute; z-index: 10;}

div#test2 {position: absolute; z-index: 3;}

div#test3 {position: relative; z-index: 8;}



 

2. Appliquer un style uniquement au premier élément d’un parent

Il est possible d’appliquer un style différent au premier élément d’un parent comme une liste, une div ou autre si l’élément est une balise HTML comme p, li, etc… Exemple :

div#test p:first-child {text-decoration: underline;}



3. Appliquer un style uniquement au dernier élément d’un parent

De même pour le dernier élément d’une liste ou de n’importe quel conteneur. Exemple :

div#test p:last-child {color: red;}



4. A partir d’une seule liste, faire deux colonnes facilement en CSS

Pour qu’une liste unique soit automatiquement coupée en deux colonnes quelque soit sa longueur (comme la liste des catégories et thèmes dans la colonne à droite sur Design Spartan), il y a une astuce CSS très utile.

Tout d’abord le HTML avec une liste <ul> et ses <li> :

<ul class= »liste »>
<li><a href= »# » rel= »tag »>Actualité</a></li>
<li><a href= »# » rel= »tag »>Général</a></li>
<li><a href= »# » rel= »tag »>Tutoriels</a></li>
<li><a href= »# » rel= »tag »>Présentation</a></li>
<li><a href= »# » rel= »tag »>Mes Créations</a></li>
<li><a href= »# » rel= »tag »>Soumettre lien</a></li>
<li><a href= »# » rel= »tag »>Publicité</a></li>
<li><a href= »# » rel= »tag »>Ressources</a></li>
<li><a href= »# » rel= »tag »>Astuce PS</a></li>
</ul>

Ensuite, le CSS associé :<

ul.liste{width : 291px;}

ul.liste li {
display:block;
width : 140px;
height : 25px;
float:left;
}

ul.liste li[float= »left »] + li {
float:none;
}

Et le tour est joué ! Il faut donc assigner une largeur à la liste <ul> et transformer chaque élément de la liste <li> en block et leur attribuer une largeur et une hauteur. L’astuce est ensuite de les faire flotter avec un float:left; et de ne pas faire flotter ceux-ci : ul.liste li[float= »left »] + li.


5. La propriété « zoom », dernier espoir face à Internet Explorer

On le sait, IE c’est le mal, Satan lui-même navigue sur IE  ! Il vous est peut-être arrivé (en tout cas ce fut malheureusement mon cas) de tomber sur un bug du type « haslayout ». Spécifique à IE 6 et IE7 (corrigé sur IE8…), il s’agit de bugs propres à la mécanique interne du programme de Microsoft.

Mon problème fut par exemple le suivant : lorsque ma page se charge, il n’y a aucun problème puis lorsque je scrolle plus bas et que je remonte, je constate que ma div est devenue invisible sur plusieurs pixels en hauteur (sans rechargement de page), elle est devenue partiellement invisible sous une autre div.

Trève de détails, certains bugs ne s’expliquent pas, en revanche, une astuce de dernier recours a été trouvé : l’élément qui est affecté par ce problème d’affichage se voit affecté la propriété CSS suivante : zoom:1;

Dans mon cas, le problème a disparu comme par magie et je pense que c’était la seule solution sinon re-modifier toute la structure de ma page.


6. Améliorer la qualité des images redimensionnée dans IE

Dans tous les navigateurs, lorsqu’on redimensionne une image en HTML ou CSS, sa qualité se dégrade (plus ou moins vite selon le navigateur). Firefox le bien-aimé possède d’office cette propriété mais pas Internet Explorer. Voici donc une propriété CSS pour améliorer nettement le traitement des images sous IE :

img {-ms-interpolation-mode: bicubic;}



7. Une autre solution pour afficher des puces pour vos listes

Tout le monde connaît j’espère le lot de propriétés CSS « list-style » (list-style-image, list-style-type, etc…). Voici une astuce pour mettre n’importe quelle image et éviter les ennuis d’affichages :

La liste en HTML :

<ul>
<li>élément liste 1</li>
<li>élément liste 2</li>
<li>élément liste 3</li>
</ul>

Et le CSS associé :

li {
list-style-type: none;
background-image: url(nouvelle_puce.png);
background-repeat: no-repeat;
background-position: 0 0.3em;
padding-left: 12px;
}

C’est assez simple, on prend une image en « background » à la place des puces classiques. En revanche, pour éviter les soucis d’aligment de l’image, il faut ajouter un background-position pour que l’image soit bien en face du texte. Dernière chose, le « padding-left » sert à ce que l’image ne se superpose pas sur le texte. Encore une astuce : on peut combiner ces trois propriétés background en une seule.


8. Créer des blocs aux coins arrondis en CSS3, sans image

Le code suivant donnera a la div des coins arrondis de 3px (taille de l’arrondi) :

div.test {
background-color: black;

-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
}

 

9. Regrouper les sélecteurs pour des propriétés identiques

Comme dans tout langage ou format informatique, la redondance est à éviter. Pour cela, il faut entre autre regrouper les sélecteurs ayant des propriété identiques :

h1,h2,h3,h4,h5,h6 {

font-family: »Lucida Grande »,Lucida,Arial,Helvetica,sans-serif;

color:#444;

margin: 10px

}

Ainsi, on a assigné aux 6 tailles de titre les propriétés en une fois au lieu de le répéter 6 fois pour chacun.



10. Votre astuce CSS !

A vous de soumettre votre astuce ou conseil portant sur le CSS !


Pour plus d’astuces :

10 Astuces CSS pour vous sauver la vie ! #1

J’espère que ces 10 conseils vous serviront et permettront à votre capital capillaire de se maintenir longtemps (de ne pas vous arracher les cheveux en somme)… Je pense faire encore une série d’astuces dans ce style et n’hésitez pas à soumettre vos astuces ou connaissances en CSS !

 

Auteur: Gaétan Weltzer, comme toujours en fait.

Articles qui pourraient vous plaire

Commentaires (21)

  1. J’ai récemment utilisé la technique des z-index, qui peut être vraiment utile pour certain sites. Je connaissais ce fameux zoom:1; mais je n’ai pas encore eu un bug (je le met donc de coté)…
    Ce n’est pas vraiment une astuce , mais j’utilise toujours un reset pour chaque feuilles de styles, histoire de tout remettre à 0 tel que celui de E.Meyer disponible ici : http://meyerweb.com/eric/tools/css/reset/

  2. Juste une petite erreur pour le point 6, la propriété s’applique pour IE, pas pour Firefox.
    -ms, c’est pour microsoft, et -moz pour firefox.
    Si je me rappelle bien, l’interpolation bicubique se fait d’office sur Firefox.

  3. Merci beaucoup pour ces astuces CSS 1 et 2, très pratique!!!
    J’en profites aussi pour placé que j’aime beaucoup le nouveau design, et oui je passes souvent mais je ne poste pas trop, bonne continuation et joyeuses fêtes!!!

  4. Je me sers souvent de la première astuce !
     
    Pour la dixième, j’en donne une qui peut être utile aux débutants (on fait comme on peut hein LOL) :
    Pour faire deux collones de même taille (exemple au hasard mais très utilisé :  menu + corps), créez vos 2 divs dont vous définirez des largeur et mettez les dans un div global « conteneur » dont la largeur sera la somme de celle de vos 2 divs.  Mettez au div « conteneur » un background-image qui regroupe les background des 2 divs. En fait, on a une seule collone, mais divisée à l’aide de divs enfants. C’est l’astuce des collones FACTICES.

  5. Autre astuce pour les bugs de IE en complément de l’astuce du premier article : La propriété CSS !important permet de mettre des attributs prioritaire sur firefox (mais annulée sur IE) exemple :
    .test{
    background-image:url(‘fond.gif’);
    background-image:url(‘fond.png’) !important; }

  6. Je connais ce hack depuis longtemps et je ne l’ai jamais mis pour la simple raison qu’il vaut mieux essayer de s’en passer pour coder proprement, la solution propre est la feuille de style alternative.

    Néanmoins, ce hack peut être très utile s’il est utilisé une ou deux fois dans une feuille. 🙂

  7. Une autre proposition pour l’astuce 10 : Lorsqu’on positionne un élément en absolu (top / left / right / bottom) on le positionne par rapport à son plus proche parent positionné. Par défaut, en général c’est le <body>, mais tous les éléments peuvent être positionnés. Si on souhaite conserver le rendu « normal » (donc ne pas avoir à le placer au pixel) on peut le faire en utilisant la valeur position: relative; qui est la valeur par défaut de la propriété ; ainsi, l’élément sera considéré comme positionné tout en gardant sa place habituelle.
    Du coup, par exemple si on a un design contenu dans une div #contenant, et qu’on souhaite créer un bandeau qui fait toute la largeur de cette div et qui est toujours en pied de div, il suffit de faire :
    HTML :
    <html>
    <body>
    <div id= »contenant »>
    <div id= »footer »>Mon footer</div>
    </div>
    </body>
    </html>
    Et CSS :
    #contenant { position: relative; }
    #footer {
    width: 100%; /* Un élément positionné perd sa taille normale et n’a pour taille que son contenu */
    position: absolute;
    bottom: 0;
    left: 0;
    }
    Et le tour est joué ! Le bandeau « footer » restera toujours en bas de la div. C’est plus pratique que de jouer avec les margins ou pire, avec les tableaux !

  8. L’astuce dévoillée par Maniak peut s’avérer très utile, par exemple, moi je m’en sert énormément pour réaliser des thèmes pour l’extension Stylish ( http://halo.goldzoneweb.info/themes-stylish.html ), ainsi on est certain que le thème sera bien appliqué !
    Sinon, en ce qui concerne le prochain lot d’astuces, ca serait peut-être sympa d’y aborder les déférents hacks et correctifs permettant de rendre une image transparente via les css dans IE6, l’utilisation des dégradés via le css3: (voici d’ailleur un excellent article à ce sujet https://developer.mozilla.org/index.php?title=fr/Utilisation_de_d%C3%A9grad%C3%A9s ) ou encore la possibilité d’utiliser des polices exotiques via la propriété @font-face (ou autres solutions javascript) !

  9. Laurent je prends note de ta requête ! Surtout que depuis peu il existe (ENFIN) un hack pour les images transparentes pour IE6 qui affecte les propriétés CSS (donc background etc)…

    Je verrai aussi pour me pencher un peu plus sur les propriétés CSS3 comme drop-shadows, etc… 🙂

  10. Pour la transparence, si je ne me trompe pas j’avais laché un com. lors du lancement de la nouvelle version de Design Spartan concernant le filtre css développé par Microsoft: Alpha Image Loade.

  11. Bonjour,

    Merci pour vos astuces très utiles !

    Par rapport à l’article 4, comment faire en sorte d’avoir un background sur tout le ul ?
    En effet, si j’applique un style background, seule la première ligne est affectée, je vois avec firebug que la balise ul prend seulement la hauteur de la première ligne et ne prend pas en compte la hauteur de li suivantes.

    Merci d’avance !

Répondre à Laurent - Annuler la réponse

L’âme d’un artiste ? Inscris-toi sur DigitalPainting.school

Fermer