Le langage CSS/Techniques avancées


Remplacement d'un texte par une imageModifier

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 listesModifier

Liste « plate »Modifier

Listes en ongletsModifier

Menu déroulantModifier

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émentModifier

contentModifier

quotesModifier

ValidationModifier

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/.

MinificationModifier

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énationModifier

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.

CSSOOModifier

PréprocesseursModifier

SASSModifier

LESSModifier

http://lesscss.org/