Le langage CSS/Techniques avancées
Remplacement d'un texte par une image modifier
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.
URL des liens pour version imprimable modifier
À l'impression, l'URL des liens n'est pas visible à moins que le texte affiché contenu dans l'élément <a> soit déjà une copie de l'URL.
Il existe un autre moyen en utilisant une règle CSS pour les liens quand le media d'affichage est pour l'impression : ajouter le contenu de l'attribut href après le lien.
@media print {
a::after {
content: " (" attr(href) ") ";
}
}
Variations autour des listes modifier
Liste « plate » modifier
Cette section est vide, pas assez détaillée ou incomplète. Listes en onglets modifier
Menu déroulant modifier
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 :
<ul class="menu">
<li>Galaxies</li>
<li class="titre-sous-menu">
Système solaire
<ul class="sous-menu">
<li>Soleil</li>
<li>Mercure</li>
<li>...</li>
</ul>
</li>
</ul>
Ensuite le CSS :
.menu {
background-color: red; /* exemple */
color: white;
display: inline-block;
}
.titre-sous-menu {
display: inline-block;
}
.sous-menu {
display: none;
}
.titre-sous-menu:hover .sous-menu {
display: block;
}
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
content
modifier
quotes
modifier
Validation modifier
Afin de vérifier qu'il n'y a pas d'erreur de syntaxe dans le code CSS, il existe des outils de validation en ligne comme https://jigsaw.w3.org/css-validator/.
Minification modifier
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
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 donc à la concaténation des feuilles de style CSS.
CSSOO modifier
Cette section est vide, pas assez détaillée ou incomplète. Préprocesseurs modifier
SASS modifier
Cette section est vide, pas assez détaillée ou incomplète.