Introduction aux CSS. Une présentation générale de ce que sont les styles CSS, de leur intérêt, et de leur usage.
Associer HTML et CSS. Les différentes techniques pour associer des styles CSS à une page HTML.
Syntaxe des CSS. La syntaxe de base du CSS est finalement très simple, dès qu'on a acquis la signification des mots comme propriété, sélecteur, directive...
Sélecteurs CSS. La souplesse des styles CSS est due en grande partie à la diversité des sélecteurs qui permettent de cibler facilement un ou des éléments dans le document.
Héritage en CSS. Description du mécanisme d'héritage en CSS (Cascading), tellement important qu'il est inclus dans le nom CSS = Cascading Styles Sheet.
Règles de priorité. A maîtriser absolument : les règles de priorité définissent quelle règle doit être utilisée lorsque plusieurs se contredisent.
Techniques de mise en page.
box-model. Les règles de base qui définissent le positionnement et les dimensions des éléments sur la page, dans le cas d'un positionnement classique de ces derniers (static).
responsive design. La mise en page responsive (Responsive Design) : quelques notions de base pour concevoir des mises en page qui s'adaptent aux dimensions de plus en plus diverses des terminaux, depuis l'écran de TV géant, jusqu'à la montre connectée.
media queries. Un outil très puissant de CSS pour faciliter la création de mises en page qui s'adaptent aux possibilités du périphérique.
container queries. Les Container Queries facilitent la mise en forme des composants, en adaptant les styles aux dimensions du conteneur.
Confinement (Containment). La technique du confinement (Containment) permet d'optimiser les calculs lors de la restitution de pages complexes.
flex-box. Les mises en page par boîtes flexibles (Flex-box).
Grilles. Les mises en page avec une grille, beaucoup plus souples que les anciens tableaux du HTML.
Multi-colonage. Très utilisée en imprimerie, les mises en page sur plusieurs colonnes sont également faciles à définir en CSS.
Défilements avec accrochages. Les défilements avec accrochages (Scroll Snap) pour ajuster les défilements en fonction du contenu de l'élément.
Couches de cascade. Les couches de cascade (Cascade Layers) permettent une gestion plus fine et plus souple des priorités que le mécanisme de cascade habituel.
Régions (flux nommés). Les mises en page par régions, ou par flux nommés (Named flows) se rapprochent de la mise en page traditionnelle : le contenu remplit successivement les réserves positionnées sur la page.
Modes d'écriture en fonction des langues.
Modes d'écriture. Les modes d'écriture (Writing Modes) ou comment s'adapter aux particularités des différentes langues (sens et direction d'écriture).
écriture bidirectionnelle. Les techniques permettant de mixer dans un même élément des textes écrits dans des directions différentes. Par exemple inclure un mot arabe dans un texte en langue latine.
Polices de caractères.
Polices web. De plus en plus riches, les polices de caractères non seulement incluent les glyphes des langues du monde entier, mais proposent des possibilités de plus en plus nombreuses.
Gestion des couleurs.
Dégradés de couleurs. Les différents types de dégradés (linéaire, circulaire ou radial) et des exemples d'utilisation.
Espaces de couleurs. CSS offre maintenant la possibilité de travailler dans un espace de couleurs (Color Space) plus étendu que le classique sRGB.
Les animations.
Animations en CSS. Les techniques pour animer les dimensions, la couleur, etc. des éléments de la page.
Animations pilotées par un défilement. Les animations pilotées par un défilement (Scroll-driven Animations) permettent de faire évoluer les caractéristiques d'un élément (dimensions, couleur, etc.) à partir d'une barre de défilement.
Transformations. Un outil extrêmement puissant de CSS pour déplacer ou déformer la forme d'un élément (texte ou image).
Notions diverses.
Annotations Ruby. Les annotation Ruby sont de petits textes écrits au dessus ou à côté du texte principal. Elles sont surtout utilisées dans les langues utilisant des sinogrammes, pour apporter une précision, par exemple sur la prononciation. Exemple : 北
Javascript et CSS. Quelques exemples de code Javascript pour interagir avec les styles CSS.
Chemins SVG. La balise path en SVG ou la fonction path() en CSS permettent de définir un tracé complexe comportant aussi bien des parties rectilignes que des courbes.