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

Listes en onglets

modifier
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

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.

Préprocesseurs

modifier

http://lesscss.org/