Le langage CSS/Techniques avancées

Un livre de Wikilivres.
Sauter à la navigation Sauter à la recherche


Remplacement d'un texte par une image[modifier | modifier le wikicode]

Le texte doit être balisé et identifié de manière unique, par exemple par

<h1 id="premier_titre">Titre</h1>

dans le fichier XHTML. On masque alors le texte par le paramètre

display:none

dans le CSS et on affiche l'image, (avec tous les attributs ) en fond.

Les personnes non voyantes auront un CSS spécial, affichant le titre, sans l'image.

Variations autour des listes[modifier | modifier le wikicode]

Liste « plate »[modifier | modifier le wikicode]

Listes en onglets[modifier | modifier le wikicode]

Menu déroulant[modifier | modifier le wikicode]

Pour créer un menu déroulant, nous allons tout d'abord fixer l'exemple : Un menu qui comporte le lien vers Système Solaire, où se trouve ensuite un sous-menu avec la liste des planètes.

Première partie, HTML :

 1 <ul class="menu">
 2     <li>Galaxies</li>
 3     <li class="titre-sous-menu">
 4         Système solaire
 5         <ul class="sous-menu">
 6             <li>Soleil</li>
 7             <li>Mercure</li>
 8             <li>...</li>
 9         </ul>
10     </li>
11 </ul>

Ensuite le CSS :

 1 .menu {
 2     background-color: red; /* exemple */
 3     color: white;
 4     display: inline-block;
 5 }
 6 
 7 .titre-sous-menu {
 8     display: inline-block;
 9 }
10 
11 .sous-menu {
12     display: none;
13 }
14 
15 .titre-sous-menu:hover .sous-menu {
16     display: block;
17 }

Notre menu est maintenant créé. On peut aussi améliorer la mise en page, mais cela, c'est à vous de le faire.

Modification du texte de l'élément[modifier | modifier le wikicode]

content[modifier | modifier le wikicode]

quotes[modifier | modifier le wikicode]

Validation[modifier | modifier le wikicode]

Afin de vérifier qu'il n'y a pas d'erreur de syntaxe dans le code CSS, il existe des outils comme https://jigsaw.w3.org/css-validator/.

Minification[modifier | modifier le wikicode]

Réduire le temps de chargement en supprimant tous les caractères non indispensables à l'exécution du code, comme les espaces.

Des outils comme https://github.com/fmarcia/UglifyCSS le font automatiquement.

Concaténation[modifier | modifier le wikicode]

Moins un site Internet possède de fichiers différents, et plus il sera rapide à charger car le nombre de connexions HTTP sera moindre. Certains outils de minification procèdent dont à la concaténation des CSS.

CSSOO[modifier | modifier le wikicode]

Préprocesseurs[modifier | modifier le wikicode]

SASS[modifier | modifier le wikicode]

LESS[modifier | modifier le wikicode]

http://lesscss.org/