Le langage CSS/Techniques avancées

Un livre de Wikilivres.
Aller à la navigation Aller à 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 :

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