Le langage CSS/Techniques avancées
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.
URL des liens pour version imprimable
[modifier | modifier le wikicode]À 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 | modifier le wikicode]Liste « plate »
[modifier | modifier le wikicode]
Cette section est vide, pas assez détaillée ou incomplète. 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 :
<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 | 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 de validation en ligne 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 donc à la concaténation des feuilles de style CSS.
Cette section est vide, pas assez détaillée ou incomplète. Préprocesseurs
[modifier | modifier le wikicode]SASS
[modifier | modifier le wikicode] Cette section est vide, pas assez détaillée ou incomplète.