Les Glyphicons peuventt être utilisés dans le texte, boutons, barres d'outils, navigation, formulaires, etc..
Voici quelques exemples de glyphicons :
Glyphicon de l’impression :
Glyphicon de l’acccueil :
Utilisation des éléments <details> et <summary> en HTML : Concevez des bascules élégantes sans JavaScript
HTML5 est arrivé, enfin, il est en route, avec une multitude d'éléments qui facilitent l'interaction de l'utilisateur avec le contenu de la page. Et il le fait nativement et facilement : le développeur n'a qu'à ajouter ces éléments et c'est le navigateur qui met en œuvre les ressources nécessaires à leur bon fonctionnement.
L'un de ces nouveaux éléments interactifs est detailset son enfant summary .
Les éléments <details> et <summary> permettent de créer des blocs de contenu qui peuvent être masqués ou affichés par l'utilisateur. Lorsqu'un utilisateur clique sur le texte du résumé (<summary>), le bloc de contenu associé (<details>) est affiché ou masqué, offrant ainsi une expérience interactive.
Fondamentalement, son fonctionnement est identique à celui de la fonction de bascule : l'élément d'entrée masque tout son contenu à l'exception de ce qui est inclus dans l'élément d'entrée et ne l'affiche que lorsque l'utilisateur clique sur le contenu de l'élément d'entrée. La table des matières de cet article est construite sur la base des éléments details et summary.
Nous pourrions dire que son comportement est celui de l'élément typique qui, par défaut, affiché réduit et qui, à la demande du visiteur, se déploie pour montrer son contenu. Comme le montre l'exemple qui suit.
L'élément html details en détails
Cet outil de balisage html est la norme minimale fonctionnelle. Mais rien ne vous empêche d'ajouter des éléments à l'intérieur de : details.
<details>
<summary>Listes</summary>
<dl>
<dt>Un</dt>
<dd>Definición de Un</dd>
<dt>Deux</dt>
<dd>Definición de Deux</dd>
</dl>
</details>
Ce qui donne :
Listes
- Un
- Definition de Un
- Deux
- Definition de Deux
Cela vous semble familier ? Remplacez la liste de définitions (dl) par une liste non ordonnée (ul) et vous obtenez le menu déroulant typique à un niveau, dans lequel nous enregistrons tout ce qui est nécessaire pour afficher et masquer les options.
Toutefois, ce balisage peut être poussé plus loin car l'élément admet d'autres éléments en tant qu'enfants. Il suffit que chacun d'entre eux ait un enfant correspondant pour qu'il soit fonctionnel : details details summary
Exemple : Marquage html de details et de summary
Exemple : Copier le code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tutoriel : Les éléments details et Summary </title>
<style>
</style>
</head>
<body>
<details>
<details>
<summary>Copyright 2010.</summary>
<p> - Tous droits réservés. </P>
<p> Tout le contenu et les graphiques sur ce site sont une propriété réservée.
</p>
</details>
</body>
</html>
Et voilà nous venons de créer un menu en accordéon rien qu’avec du html.
On peut y ajouter du CSS comme on le désire et à volonté. Pour ce faire lire la suîte.
Styles CSS pour les éléments details et summary
Vous avez peut-être remarqué que je n'ai ajouté aucun style CSS aux exemples présentés jusqu'à présent. Tout ce qui concerne leur fonctionnement est défini par le navigateur. Le navigateur définit aussi les styles par défaut, comme pour n'importe quel autre élément.
Pour leur donner une apparence personnelle autre que celle par défaut , il suffit d'utiliser leur nom comme sélecteur CSS :
details {
/*styles très élégants *//
}
summary {
/*styles très élégant *///
}
Styles CSS pour les détails affichés
Il est possible d'appliquer des règles spécifiques pour l'affichage de l'élément après avoir cliqué sur son .details summary correspondant.
Pour ce faire, nous utilisons une caractéristique spéciale qui se produit lorsque l'on clique sur l'élément .details summary (comme pour d'autres éléments tels que les éléments radius).
Lorsque l'on clique sur l'élément summary enfant de chaque details parent, le navigateur ajoute à ce dernier (le parent) l'attribut open sans valeur (il n'ajoute ni le signe égal = ni la chaîne textuelle qui le suit entre guillemets).
Pour constater ce fait, dans votre navigateur faites un clic doit et cliquer sur inspecter puis développer l’arborescence de votre élément et cliquer sur un élément summary pour voir l’attribut open qui est ajouté comme le montre l’image suivante :
L'élément Details avec l'attribut open après avoir cliqué sur l'élément summary
C'est là qu'intervient une vieille connaissance : le sélecteur CSS par nom d'attribut HTML :
details[open] {
/* styles très chic pour l'élément details dans son état déplié */
}
details[open] > summary {
/* styles très chic pour l'élément summary dans son parent details affiché */
}
Pour supprimer le petit triangle affiché avant l'élément <summary> d'un élément HTML <details>, vous pouvez utiliser du CSS pour masquer le marqueur par défaut. Voici un exemple de code CSS pour accomplir cela :
```css
summary::-webkit-details-marker {
display: none;
}
summary::marker {
display: none;
}
Dans ce code, nous utilisons des sélecteurs CSS pour cibler le marqueur de détails spécifique (`::-webkit-details-marker`) et le marqueur générique (`::marker`) afin de les masquer en utilisant la propriété `display: none;`.
Ajoutez ce code CSS à votre feuille de styles ou incorporez-le directement dans votre balise <style> si vous l'utilisez dans un fichier HTML. Cela supprimera le triangle par défaut devant l'élément ` <summary>`.
Pour remplacer le petit triangle affiché avant l'élément HTML ` <summary>` de l'élément ` <details>`, vous pouvez utiliser du CSS pour personnaliser l'apparence de l'indicateur. Voici un exemple de code CSS qui peut être utilisé pour remplacer le triangle par un autre symbole :
summary::before {
content: "\25B6"; /* Code Unicode d'un triangle vers la droite */
display: inline-block;
margin-right: 5px; /* Marge entre le symbole et le texte du summary */
transform: rotate(90deg); /* Rotation du symbole si nécessaire */
}
Dans cet exemple, nous utilisons le pseudo-élément `::before` pour ajouter du contenu avant l'élément ` <summary>`. La propriété `content` définit le contenu affiché, qui est le code Unicode d'un triangle pointant vers la droite. Vous pouvez modifier ce contenu pour afficher le symbole souhaité. La propriété `display: inline-block` permet de rendre le pseudo-élément visible et d'occuper de l'espace dans le flux du texte. La propriété `margin-right` ajoute une marge à droite du symbole, vous pouvez ajuster cette valeur selon vos besoins. Enfin, la propriété `transform` permet de faire une rotation du symbole si nécessaire.
Ajoutez ce code CSS à votre feuille de style ou intégrez-le directement dans votre balise ` <style>` dans la section ` <head>` de votre document HTML. De cette manière, le symbole sera affiché à la place du triangle par défaut avant l'élément ` <summary>`.
Animation de l'ouverture et de la fermeture des éléments details On peut animer l'affichage du contenu des éléments détails de multiples façons : avec des transitions ou des keyframes (animations).
Le pliage est impossible à animer avec le CSS seul. La raison : lorsque l'on clique sur l’élément sommary, la règle display : none est instantanément appliqué et cela signifie que la fermeture (disparition du contenu) est brusque, sans possibilité de la retarder ou de l'annuler.
Par conséquent, toute autre déclaration CSS que nous essayons d'appliquer le sera après sa disparition.
Une démonstration complète
Et pour couronner le tout, Une vieille connaissance se fait plus facilement avec les éléments details et le summary : la navigation interne sur la même page à partir d'un sommaire ou d'une table des matières avec un lien vers chaque chapitre ou section.
Dans cette démo, nous nous amusons avec d'autres nouveautés CSS, comme le défilement en douceur (pas de sauts) du scroll. Voir l'article CSS scroll control pour plus de détails.
Sachez que par défaut, le contenu défile vers le bas .
Exemple : Disposition en grille + details & summary + scroll-behavior
Cliquer ici pour voir l’exemple
Exemple : Copier le code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo: Disposition en grille + details & summary + scroll-behavior</title>
<style>
* {margin:0;padding:0;border:0 none; position: relative;} *,*:before,*:after {box-sizing:inherit;}
html {
box-sizing: border-box;
--sinSerif: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
--conSerif: Georgia, Garamond, Cambria,"Times New Roman",serif;
--monosP: 'Courier New', 'PT Mono', 'Source Code Pro', Menlo, Consolas, Monaco, monospace;
--fn: #9cb8b3;
--cl: #efedce;
--ot: #707e9d;
}
html {
font-family: var(--sinSerif);
font-weight: 300;
}
/**
The Grid Layout and
scroll control (scroll-behavior)
**/
body {
display: grid;
grid-template-columns: 275px 1fr;
grid-template-areas:
"header header"
"somaire content";
height: 100vh;
overflow: hidden;
background: #225;
color: #225;
}
header {
grid-area: header;
height: 10vh;
display: flex;
background: #fc780d;
font-size: 2.5vw;
}
.somaire {
grid-area: somaire;
display: flex;
flex-direction: column;
overflow-x: hidden;
overflow-y: hidden;
height: 90vh;
max-height: 2em;
padding-left: 1.5rem;
color: #fff;
transition: 2.5s;
}
.somaire[open] {
max-height: 90vh;
overflow-x: hidden;
overflow-y: visible;
}
article {
grid-area: content;
scroll-behavior: smooth;
height: 90vh;
overflow-x: hidden;
overflow-y: auto;
background: #fca707;
padding: 0 1rem 1rem .5rem;
}
/**
estétiques
**/
h1 {
margin: auto;
font-weight: 400;
font-size: inherit;
font-min-size: 1rem;
font-max-size: 30px;
}
h2 {
font-family: var(--conSerif);
font-weight: 400;
color: #f5f5f5;
}
h2 ~ h2 {
margin-top: 1.5rem;
}
h3 {
font-weight: 400;
margin-top: .5rem;
padding-left: 1rem;
}
p {
padding-left: 1rem;
transition: .5s .3s;
}
p:last-of-type {
margin-bottom: 5rem;
}
summary {
outline: none;
cursor: pointer;
}
.somaire > summary {
font-size: 130%;
font-variant: small-caps;
margin-left: -.5rem;
}
.somaire > summary::after {
content: '☰';
display: inline-block;
padding-left: 1rem;
text-decoration: none;
}
.somaire[open] > summary::after {
content: '\00D7';
display: none;
}
nav {
padding: 0 0 2rem .5rem;
transition: 1s;
}
ol {
counter-reset: numerar;
list-style-type: none;
line-height: 1.5;
}
ol ol {padding-left: 1.5rem}
li::before {
content: counters(numerar, '.') "";
counter-increment: numerar;
position: absolute;
left: -2.5rem;
width: 2rem;
text-align: right;
}
a {
text-decoration: none;
color: yellow;
}
a:hover,
summary:hover {
text-decoration: underline;
}
article :active,
article :focus,
article :target,
article :active + p,
article :focus + p,
article :target + p {
background: rgba(255,255,255,.35);
box-shadow: 0 0 2px rgba(0,0,0,.2);
}
article :active + p,
article :focus + p,
article :target + p {
font-size: 110%;
font-weight: 400;
}
@media screen and (max-width: 600px) {
body {
grid-template-columns: 1fr;
grid-template-areas:
"header"
"content";
overflow-y: auto;
}
article {
height: auto;
overflow: visible;
}
header {
height: auto;
padding: 1rem;
font-size: 5vw;
}
.somaire {display: none;}
}
</style>
</head>
<body>
<header>
<h1>Disposition de la grille + details et summary + comportement de défilement</h1>
</header>
<details class='somaire'>
<summary>Table des matières</summary>
<nav>
<ol>
<li><a href="#La_feuille_de_styles">La feuille de style</a></li>
<li><a href="#La_regle_Css">La règle Css</a></li>
<li><a href="#Selecteurs_de_Css">Selecteurs de Css</a></li>
<li><a href="#Declaration_Css">Déclaration Css</a></li>
<li><a href="#Propriete_Css">Propriété css</a></li>
<li>
<details>
<summary>Valeur de la Propriété Css</summary>
<ol>
<li><a href="#Valeur_de_la_Propriete_Css">Valeur</a></li>
<li><a href="#Mesure">Mesure</a></li>
<li><a href="#Mot_cle">Mot clé</a></li>
<li><a href="#Annotation_fonctionnelle">Annotation fonctionnelle</a></li>
<li><a href="#Chaine_de_texte">Chaine de texte</a></li>
</ol>
</details>
</li>
<li><a href="#Commentaires">Commentaires</a></li>
<li>
<details>
<summary>Règles @ et propriété racourcie</summary>
<ol>
<li><a href="#Regle_du_jeu">Règle du jeu et propriété immobilière</a></li>
<li><a href="#Regles_.40">Règles @ (at rules)</a></li>
<li><a href="#Propriete_immobiliere">Propriété immobilière</a></li>
</ol>
</details>
</li>
<li>
<details>
<summary>Erreurs</summary>
<ol>
<li><a href="#Erreurs">Les erreurs et leurs conséquences</a></li>
<li><a href="#Erreur_dans_selecteur">Erreur dans le sélecteur</a></li>
<li><a href="#Erreur_dans_syntaxe">Erreur dans la syntaxe de commentaire Css</a></li>
<li>
<details>
<summary>Omissions</summary>
<ol>
<li><a href="#Omi_caracteres">Omission de certains caractères</a></li>
<li><a href="#Crochets">Crochets droits et crochets gauches</a></li>
<li><a href="#Guillemets">Guillemets</a></li>
</ol>
</details>
</li>
</ol>
</details>
</li>
<li><a href="#Boites">Boites et modèles de boites</a></li>
<li><a href="#Cascade">Cascade, spécificité et héritage</a></li>
<li><a href="#Couche_css">Des couches CSS ?</a></li>
<li><a href="#Attributs">Attributs Css ?</a></li>
<li><a href="#Lien_externe">Liens externes</a></li>
</ol>
</nav>
</details>
<article>
<h2 id="La_feuille_de_styles">La feuille se style</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Scelerisque purus semper eget duis at tellus at urna. Justo nec ultrices dui sapien eget mi proin sed. Et malesuada fames ac turpis egestas maecenas pharetra convallis. Etiam non quam lacus suspendisse. Nunc eget lorem dolor sed viverra ipsum..</p>
<h2 id="La_regle_Css">La règle Css</h2>
Posuere ac ut consequat semper viverra nam. Fringilla ut morbi tincidunt augue interdum. Egestas sed sed risus pretium quam vulputate dignissim suspendisse. Habitasse platea dictumst quisque sagittis purus. Porta nibh venenatis cras sed felis eget velit aliquet. Amet est placerat in egestas. Montes nascetur ridiculus mus mauris. Sit amet facilisis magna etiam.</p>
<h2 id="Selecteurs_de_Css">Selecteur de Css</h2>
<p>Amet commodo nulla facilisi nullam vehicula ipsum a arcu cursus. Mollis aliquam ut porttitor leo. Massa eget egestas purus viverra accumsan. Lacus sed turpis tincidunt id aliquet risus feugiat in ante. Vitae purus faucibus ornare suspendisse sed nisi lacus sed viverra. Tristique senectus et netus et malesuada fames ac. Sed risus ultricies tristique nulla. Et tortor consequat id porta nibh venenatis. .</p>
<h2 id="Declaration_Css">Declaration Css</h2>
<p>Eu volutpat odio facilisis mauris sit amet. Aliquam malesuada bibendum arcu vitae elementum curabitur. Tellus at urna condimentum mattis pellentesque id nibh tortor. Gravida rutrum quisque non tellus orci ac. Amet nisl suscipit adipiscing bibendum est ultricies. Est sit amet facilisis magna etiam tempor orci. </p>
<h2 id="Propriete_Css">Propriété Css</h2>
<p> Fusce id velit ut tortor pretium. Augue mauris augue neque gravida in. Porttitor rhoncus dolor purus non enim praesent. Scelerisque eu ultrices vitae auctor eu augue ut lectus. Duis ultricies lacus sed turpis tincidunt id. In nulla posuere sollicitudin aliquam ultrices sagittis orci. Eu lobortis elementum nibh tellus. Egestas purus viverra accumsan in nisl nisi scelerisque eu. Euismod nisi porta lorem mollis aliquam ut. Vitae tempus quam pellentesque nec. Viverra nibh cras pulvinar mattis nunc sed blandit libero. Faucibus et molestie ac feugiat sed lectus. Eleifend mi in nulla posuere sollicitudin. Diam volutpat commodo sed egestas egestas fringilla phasellus faucibus. Dictumst vestibulum rhoncus est pellentesque elit. Massa massa ultricies mi quis. Nulla facilisi etiam dignissim diam quis. Commodo quis imperdiet massa tincidunt nunc. Tristique senectus et netus et malesuada fames ac turpis.</p>
<h2 id="Valeur_de_la_Propriete_Css">Valeur de la Propriété Css</h2>
<h3>Valeur</h3>
<p>Egestas diam in arcu cursus euismod quis viverra nibh cras. Nunc mi ipsum faucibus vitae aliquet nec. Euismod elementum nisi quis eleifend quam adipiscing. Id ornare arcu odio ut sem nulla pharetra diam sit. Vitae auctor eu augue ut lectus arcu bibendum. Nam at lectus urna duis convallis convallis tellus id interdum. Sagittis purus sit amet volutpat consequat mauris nunc. Volutpat blandit aliquam etiam erat velit scelerisque in dictum. Eu feugiat pretium nibh ipsum consequat nisl vel pretium. Fringilla ut morbi tincidunt augue interdum velit euismod in. Tellus pellentesque eu tincidunt tortor aliquam. Aliquam etiam erat velit scelerisque in dictum non consectetur.</p>
<h3 id="Mesure">Mesure</h3>
<p>Auctor elit sed vulputate mi sit. Venenatis tellus in metus vulputate eu scelerisque felis imperdiet. Nascetur ridiculus mus mauris vitae.</p>
<h3 id="Mot_cle">Mot clé</h3>
<p>Tellus elementum sagittis vitae et leo duis ut diam. Quam id leo in vitae turpis. Arcu dictum varius duis at consectetur. Quis commodo odio aenean sed adipiscing diam. Vel eros donec ac odio. Praesent tristique magna sit amet. </p>
<h3 id="Annotation_fonctionnelle">Anotation foncionelle</h3>
<p>Urna nunc id cursus metus aliquam eleifend. Arcu ac tortor dignissim convallis aenean et tortor at risus. Cursus risus at ultrices mi tempus imperdiet nulla malesuada. Sem integer vitae justo eget magna.</p>
<h3 id="Chaine_de_texte">Chaine de texte</h3>
<p> Malesuada fames ac turpis egestas maecenas pharetra convallis. Sit amet facilisis magna etiam tempor orci eu. Faucibus interdum posuere lorem ipsum dolor sit amet.</p>
<h2 id="Commentaires">Commentaires</h2>
<p>Donec massa sapien faucibus et molestie ac feugiat sed lectus. Sed tempus urna et pharetra. Cursus mattis molestie a iaculis. Ut etiam sit amet nisl purus in mollis nunc. Id diam maecenas ultricies mi eget mauris pharetra et ultrices. Imperdiet proin fermentum leo vel.</p>
<h2 id="Regle_du_jeu">Règles @ et propriété racourcie</h2>
<h3 id="Regles_.40">Régles @</h3>
<p>Vitae ultricies leo integer malesuada nunc vel risus commodo viverra. Odio morbi quis commodo odio. Auctor elit sed vulputate mi sit amet mauris. Sagittis purus sit amet volutpat.</p>
<h3 id="Propriete_immobiliere">Propriétés immobiliéres</h3>
<p>Parturient montes nascetur ridiculus mus. Senectus et netus et malesuada fames ac turpis. Elementum pulvinar etiam non quam lacus suspendisse faucibus. Augue mauris augue neque gravida in fermentum. Posuere ac ut consequat semper viverra nam.</p>
<h2 id="Erreurs">Les erreurs et leurs conséquences</h2>
<p>Imperdiet massa tincidunt nunc pulvinar sapien et. Iaculis urna id volutpat lacus laoreet non curabitur gravida. Fringilla ut morbi tincidunt augue interdum velit. Faucibus interdum posuere lorem ipsum dolor sit amet consectetur adipiscing. Purus viverra accumsan in nisl nisi. Urna condimentum mattis pellentesque id nibh tortor id aliquet. Bibendum ut tristique et egestas quis ipsum suspendisse ultrices. Facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum. Quis varius quam quisque id diam vel quam elementum.</p>
<h3 id="Erreur_dans_selecteur">Erreur dans le selecteur</h3>
<p>Gravida arcu ac tortor dignissim convallis aenean et tortor. Consectetur a erat nam at. Mattis molestie a iaculis at erat pellentesque adipiscing commodo. Suspendisse faucibus interdum posuere lorem ipsum dolor sit amet. Lectus quam id leo in vitae turpis massa. Integer malesuada nunc vel risus commodo viverra maecenas. Sodales ut etiam sit amet nisl purus in mollis. Sed libero enim sed faucibus turpis in eu mi. Faucibus purus in massa tempor nec feugiat nisl pretium. Eu sem integer vitae justo eget magna fermentum iaculis. Ut diam quam nulla porttitor. Pharetra pharetra massa massa ultricies.</p>
<h3 id="Erreur_dans_syntaxe">Erreur dans la syntaxe Css</h3>
<p>Praesent tristique magna sit amet purus gravida quis blandit. Vel elit scelerisque mauris pellentesque pulvinar pellentesque habitant. Ut pharetra sit amet aliquam. Sollicitudin tempor id eu nisl nunc mi ipsum faucibus. Urna et pharetra pharetra massa massa ultricies mi quis hendrerit.</p>
<h3 id="Omi_caracteres">Omition de certains caractères</h3>
<h4 id="Crochets">Parentaises et corchets </h4>
<p>Dolor magna eget est lorem ipsum dolor sit. Orci nulla pellentesque dignissim enim sit amet venenatis. Leo a diam sollicitudin tempor id eu nisl nunc. Dignissim sodales ut eu sem integer vitae justo eget. Sed lectus vestibulum mattis ullamcorper velit. Lorem donec massa sapien faucibus et molestie ac feugiat sed. Porta non pulvinar neque laoreet suspendisse interdum.</p>
<h4 id="Guillemets">Guillemets</h4>
<p>Tempor commodo ullamcorper a lacus vestibulum. Non sodales neque sodales ut etiam sit amet. Dictum non consectetur a erat nam at lectus urna. Dui ut ornare lectus sit amet est placerat. Velit scelerisque in dictum non consectetur a. Congue mauris rhoncus aenean vel elit scelerisque mauris pellentesque.</p>
<h2 id="Boites">Boites et modéles de boites</h2>
<p>Vel elit scelerisque mauris pellentesque pulvinar pellentesque habitant morbi tristique. A diam maecenas sed enim ut sem. Mattis aliquam faucibus purus in massa. Urna neque viverra justo nec ultrices. Hendrerit gravida rutrum quisque non tellus orci. Mi proin sed libero enim. Enim lobortis scelerisque fermentum dui faucibus in.</p>
<h2 id="Cascade">Cascade, spécificité et héritage</h2>
<p>Nunc vel risus commodo viverra. Nam aliquam sem et tortor consequat id porta. In eu mi bibendum neque egestas. Donec pretium vulputate sapien nec. Purus ut faucibus pulvinar elementum. Rhoncus dolor purus non enim praesent. Sit amet nisl purus in mollis nunc. Hac habitasse platea dictumst vestibulum rhoncus. Rhoncus urna neque viverra justo.</p>
<h2 id="Couche_css">Des couches CSS?</h2>
<p>Eget arcu dictum varius duis at consectetur. Et magnis dis parturient montes nascetur. Eget nulla facilisi etiam dignissim. Nisl purus in mollis nunc sed. Vulputate enim nulla aliquet porttitor lacus luctus accumsan tortor.</p>
<h2 id="Attributs">Attributs Css</h2>
<p>Volutpat est velit egestas dui. Leo a diam sollicitudin tempor. Aenean sed adipiscing diam donec. Pellentesque habitant morbi tristique senectus et. Libero nunc consequat interdum varius sit amet. Vitae et leo duis ut diam quam nulla porttitor massa.</p>
<h2 id="Lien_externe">Lien externe</h2>
<p>Faucibus purus in massa tempor nec feugiat nisl pretium fusce. Vel risus commodo viverra maecenas. Faucibus interdum posuere lorem ipsum dolor sit. In cursus turpis massa tincidunt dui ut ornare. Et malesuada fames ac turpis egestas.</p>
</article>
</body>
</html>
Dans cette démo, nous utilisons d'autres nouvelles fonctionnalités CSS, telles que le défilement en douceur (pas de sauts) de la barre de défilement. Dans l'article Contrôle de défilement CSS, vous trouverez tous les détails à ce sujet.
Explication du code ci-dessus
Le code CSS fourni définit les styles pour une disposition en grille, l'utilisation des éléments <details> et <summary>, et le comportement de défilement.
Voici une explication détaillée du code CSS :
Les premières lignes définissent certaines variables CSS personnalisées à l'aide de la notation --nom-variable: valeur;. Ces variables sont utilisées pour spécifier des couleurs et des polices.
Ensuite, on définit le style pour l'élément <body>. Il utilise une disposition en grille avec deux colonnes, une de 275 pixels de largeur et l'autre qui occupe le reste de l'espace disponible. L'élément <body> occupe 100% de la hauteur de la vue (100vh) et a une couleur de fond et de texte définie.
L'élément <header> est un en-tête qui occupe la première ligne de la grille. Il a une hauteur de 10% de la hauteur de la vue (10vh), une couleur de fond et une taille de police spécifiées.
L'élément <details> avec la classe somaire est utilisé comme table des matières. Il occupe la première colonne de la grille et est configuré pour se déplier et afficher le contenu lorsqu'il est ouvert. Il a une hauteur de 90% de la hauteur de la vue (90vh), une couleur de texte spécifiée et une transition de 2,5 secondes lorsqu'il est ouvert.
L'élément <article> occupe la deuxième colonne de la grille et contient le contenu principal de la page. Il a une hauteur de 90% de la hauteur de la vue (90vh), un défilement fluide (scroll-behavior: smooth), une couleur de fond spécifiée et une marge intérieure.
Le reste du code CSS définit les styles pour différents éléments HTML tels que les titres (<h1>, <h2>, <h3>), les paragraphes (<p>), les liens (<a>), etc. Il y a également des styles pour les états actifs et survolés des éléments, des styles spécifiques pour les écrans de petite taille (600 pixels de largeur ou moins) et des styles pour les listes ordonnées (<ol>) utilisées dans la table des matières.
En résumé, ce code CSS définit les styles pour une mise en page en grille, un en-tête, une table des matières déroulante et le contenu principal de la page, ainsi que les styles pour différents éléments HTML utilisés dans la page.
Retour à l'accueil du site