Petite Introduction aux Langages HTML/XHTML : Les Pseudo-éléments. Programmation Internet - P o u r D é b u t a n t J.B. Dadet DIASOLUKA Luyalu Nzoyifuanga +243 - 851278216 - 899508675 - 995624714 902263541 - 813572818 La dernière révision de ce texte est disponible sur CD. Les pseudo-éléments permettent de générer et d’afficher des contenus qui ne sont pas dans le corps du document (texte, numérotation automatique, listes). On les fait en principe précéder d’un double deux-points, mais la plupart des user agents s’en sortent avec un seul double point, et même W3C utilise un seul deux-points. Par exemple ce code HTML : Son code-source pour le copier-coller : <!DOCTYPE html> <html lang="fr"> <head> <title>Exemple de qqs pseudoelements</title> <style type="text/css"> p{background:#dfd} p .d::before { content: open-quote "p. d:before (w space)" close-quote; } p.d::before { content: open-quote "p.d:before (wo space)" close-quote; } *::before{ color:red; font-size:130%; font-style:italic } </style> </head> <body> <p class="d">P1 Ce Texte, avant SPAN. <span class='d'>Ce Texte, dans SPAN. </span> Ce Texte, après SPAN. </p> <p>P2 Ce Texte, avant SPAN. <span class="d">Ce Texte, dans SPAN. </span> Ce Texte, après SPAN. </p> <p id="d">P3 Ce texte, entièrement dans P ID="d". </p> <p>P4 <b>Note:</b> Il est préférable de toujours spécifier < !DOCTYPE html>. </p> </body> </html> L’HTML ci-dessus s’affiche comme ceci : Les pseudo-éléments les plus courants sont : 1. :before et :after ou mieux, ::before et ::after. Un « content » est le contenu associé à un élément dans le document source . Le contenu d’un élément peut être : du texte (littéral), un nombre ou un sousélément dont il est dès lors parent (tout élément sauf le root ou racine a un parent => Document tree ou arbre/hiérarchie du document). Certains éléments n’ont pas de contenu, ils sont appelés « empty » = élément vide. Le contenu à afficher par un pseudo-élément est spécifié par sa propriété content, qui peut avoir les valeurs suivantes : 1. Valeurs littérales : a. <string> Chaîne de caractères b. <uri> URL (ressource externe) c. <counter> Fonctions (counter() ou counters()) restituant les valeurs en cours de tous les compteurs ayant ce nom, séparées par la valeur de son paramètre string ci-dessous, et dans le style spécifié par style (décimal par défaut). Syntaxe : i. « counter(name) » ou ii. « counter(name, style) » pouvant s’écrire sous deux formes : 1. « counter(name, string=liststyle-type) » ou 2. « counter(name, string=liststyle-type, style) ». 2. attr(X) 3. open-quote | close-quote | no-open-quote | no-close-quote Guillemets d’ouverture et de fermeture selon le format (style) spécifié dans la propriété « quotes ». no-open-quote et no-close-quote n’affichent rien (empty strings), mais incrémentent (décrémentent) le niveau d’emboîtement des guillemets (quotes). 4. inherit list-style-type : Tous les styles sont autorisés ('disc', 'circle', 'square', 'none'). Exemples : blockquote::before { content: counter(cptr, hebrew) ". " } h1::before { content: counter(titre, upperroman) " - " } cite::after { content: " [" counter(genies, none) "] " } div.note::before { content: counter(div, disc) " " } p::before { content: counter(det, upper-latin) } Remarques : 1. La valeur initiale de content est une chaîne vide (empty string). 2. La valeur de content s’applique à tous les médias : Pour les contenus média-sensibles (médias spécifiques, p.e. texte littéral pour tout groupe de média, images pour seulement les groupes visuels + bitmap, fichiers son pour seulement le groupe de médias aural), la déclaration du content doit se faire dans les règles pour @media. « Responsive Web Design » : Pour que par exemple une séquence audio soit émise automatiquement à la fin du chargement d’une page Web, on peut utiliser le « Media Querie » (requêtes de media) suivant : @media aural { body:after { content: url("URL de l’audio ") } } Le media-query / règle @media « @media aural » renferme TOUS les styles destinés au media : @media print { #menu, #footer, aside { display:none; } body { font-size:1em; color:black; background: url(img.png) right center norepeat; } } ul li em { padding-left: 30px; } Une media query accepte des opérateurs logiques : and (et), only (seulement), not (non), « , » (ou). À l’importation : <link rel="stylesheet" media="screen and (min-width: 200px) and (max-width: 340px)" href="handheld.css" type="text/css" /> Dans un style : @media only screen and (min-width: 200px) and (max-width: 340px) , (max-width: 1151px) { .bloc { display:block; clear:both; } } Notez que les expressions de @media sont entre parenthèses. @media screen and (min-width: 200px){} Maintenant analysons rapidement notre premier code HTML ci-dessus : <!DOCTYPE html> (balise ouverte) est nécessaire, il indique au « user agent » (navigateur) la nature du document, HTML. <style></style> est la zone de définition des styles. 1. p {background:#dfd} définit tous les paragraphes avec le fond défini par la propriété background. 2. p .d::before { content: open-quote "p. d:before (w space)" close-quote; } * définit les propriétés de ce qui doit être généré devant (before) tout élément HTML contenu dans un paragraphe (p) quel que soit son niveau d’imbrication dans le paragraphe (notez la présence d’espace entre « p » et « .d ») et ayant la class="d". Notez aussi les double deux-points devant le before pour l’indiquer en tant que pseudo-élément. * Les éléments SPAN dans P1 & P2 dans le code ci-dessus répondent à cette condition : notez le (w space = avec espace = with space) : . * Notez que le texte généré, en rouge, se trouve bien devant le texte contenu dans SPAN. 3. p.d::before { content: open-quote "p.d:before (wo space)" close-quote; } * définit les propriétés de ce qui doit être généré devant (before) tout paragraphe (élément HTML p) ayant la class="d" (notez l’absence d’espace entre « p » et « .d »). * Le paragraphe P1 dans le code ci-dessus répond à cette condition : notez le (wo space = sans espace = without space) : . * Notez que le texte généré, en rouge, se trouve bien devant P1. 4. *::before{ color:red; font-size:130%; font-style:italic } * indique que tout élément (*) comportant un pseudo-élément ::before doit avoir un texte en rouge d’une taille 1,3× et en italique. * Le paragraphe P1 ainsi que les SPAN dans P1 & P2 répondent à cette condition. * Rien dans P3 et P4 ne répond à cette règle : <html lang="fr"> (ligne 2) indique la langue du format automatique des guillemets : 1. Le français donne : mais pas avec tous les user agents. 2. L’anglais donne : FORMATAGE DES GUILLEMETS POUR L’ÉLÉMENT HTML « Q » : Pour l’élément (balise) q, on peut aussi définir l’apparence du guillemet, avec la propriété quotes. Voici les guillemets avec leur style par défaut : <style> q:before { content: open-quote } q:after { content: close-quote } </style> <body> <p>Dites <q>toujours <q>MERCI <q>en <q>toute et <q>toute</q> circonstance</q> dans</q> vie</q></p> </body> Ce code s’affiche comme ceci : Pour définir d’autres styles par défaut pour les paires de guillemets (quotes) automatiques dans l’élément « q » selon le niveau d’imbrication des quotes, on fait ceci : <style> q:before { content: open-quote } q:after </style> { content: close-quote } <body> <p>Dites <q>toujours <q>MERCI <q>en <q>toute et <q>toute</q> circonstance</q> dans</q> vie</q></p> </body> Avec l’affichage suivant : On peut définir le style des paires de quotes en fonction de la langue définie dans la balise <html> : <HTML lang="en"> <HTML lang="fr"> <HTML lang="no"> ... Exemple : <html lang="fr"> <head> <title>Les « Guillemets » (quotes)</title> <style> q:lang(en) { quotes: '"' '"' "'" "'" } q:lang(fr), q:lang(no) { quotes: "«" "»" "<" ">" } </style> </head> <body> <p>Les <q>guillemets</q>autour de ce texte </body> </html> Les pseudo-éléments permettent de créer des listes numérotés, avec la propriété-fonction « counter ». Notez « counter » au singulier. <style> ol { counter-reset: c_name 3} li { display: block } li:before { content: "Note " counter(c_name,upper-roman) " : "; counter-increment: c_name } </style> <body> <ol> <!-- Réinitialise c_name à 3 --> <li>Un Item <!-- Incremente c_name (= 4) --> <li>Un autre Item <!-- Incremente c_name (= 5) --> </ol> </body> Affichage : Les pseudo-éléments permettent aussi de créer des listes numérotés complexes du genre 2.1.3. Cela est rendu possible par le fait que les « counters » redéfinies dans un niveau imbriqué crée une copie/instance d’elle qui garde dans ce niveau la valeur (la chaîne de caractères) dans ::before parent. Notez « counters » au pluriel. <style> ol { counter-reset: c_name } li { display: block } li:before { content: "_" counters(c_name, ".") ": "; counter-increment: c_name; } </style> <body> <ol> <li>item <ol> <li>item <li>item <li>item <ol> <li>item </ol> <ol> <li>Item </ol> <li>item </ol> <li>item <ol> <li>item </ol> <li>item <li>item </ol> <ol> <li>item <li>item </ol> </body> Affichage : Nous avons parlé ci-dessus de « display:marker » qui réserve une place (block) entre autres pour les listes. Un exemple de son utilisation : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <html lang="fr" style="background:hsla(253 , 97% , 23%, 0.05)"> <head> <title>List avec markers</title> <style type="text/css"> ol { counter-reset: cptr; } li { display: block } li::before { display: marker; marker-offset: 3em; content: counter(cptr, upper-roman) "* "; counter-increment: cptr; width: 7em; text-align: right; } </style> </head> <body> <ol>LIST DS MARKER. <li> Primo. <li> Secundo. <li> Tertio. </ol> </body> </html> Affichage : Pour avoir automatiquement un titre suivi d’une petite définition générée sur la même ligne, puis le développement sur les autres lignes, on peut utiliser le code suivant : <style> h5 { display: inline } h5:after { content: " : " } p#pi { display:inline } p:before { content: "* " } </style> <body> <h5>LES MOTARDS</h5> <p id="pi">Ils sont appelés chez nous WEWA <p>N'importe quoi d'autre sur les WEWA <h5>LES PILOTES</h5> <p id="pi">représentent aussi chez nous les chauffeurs <p>N'importe quoi d'autre sur les Pilotes </body> Ce code de 379 bytes peut être réduit à 338 bytes comme ceci avec en plus moins d’acrobaties (hacks) : <style> h5 { display: run-in } h5:after { content: " : " } p:before { content: "* " } </style> <body> <h5>LES MOTARDS</h5> <p>Ils sont appelés chez nous WEWA <p>N'importe quoi d'autre sur les WEWA <h5>LES PILOTES</h5> <p>représentent aussi chez nous les chauffeurs <p>N'importe quoi d'autre sur les Pilotes </body> Les deux codes s’affichent exactement comme ceci: « display:run-in » permet de placer dans un même bloc l’élément qui le contient et l’élément qui suit directement (adjacent à) ce dernier comme s’ils étaient tous deux de type « inline ». « display:compact » les traite comme chacun étant de type block. En quelque sorte, « compact » est au « block » ce que « run-in » est au « inline ». Quant à l’alignement des éléments dans la liste, on utilise « list-style » : <style> ol { list-style:outside upper-roman; } ol.c { list-style:inside decimal-leadingzero} </style> <body> <ol>LIST (OUTSIDE) <li>Un Item <li>Un autre Item </ol> <ol class="c">LIST (INSIDE) <li>Un Item <li>Un autre Item </ol> </body> En fait, ça n’épargne pas la marge de droite. Kinshasa, le 31 mai 2019 (11:42:41 PM). Mots-clés : CSS, Pseudo-éléments, Internet, Hyper-Text Markup Language, Hyper-Texte, lien hypertexte, hyperlien, BALISE, Tag, élément, inline DIASOLUKA Nz. Luyalu Docteur en Médecine, Chirurgie & Accouchements (1977), CNOM : 0866 - Spécialiste en ophtalmologie (1980) Études humanités : Scientifique - Mathématiques & Physique. Informaticien-amateur, Programmeur et WebMaster. Chercheur indépendant, autonome et autofinancé, bénévole, sans aucun conflit d’intérêt ou liens d'intérêts ou contrainte promotionnelle avec qui qu’il soit ou quelqu’organisme ou institution / organisation que ce soit, étatique, paraétatique ou privé, industriel ou commercial en relation avec le sujet présenté. +243 - 851278216 - 899508675 - 991239212 - 902263541 - 813572818 [email protected] Autre Lecture : https://www.scribd.com/document/374738470/Le-Plus-GrandSecret-de-La-Creation D’autres publications pouvant aussi intéresser : • • • • • • • • • • • • • • • • • https://www.scribd.com/document/377036251/Le-Dosage-Des-Medicaments-en-Cac-Cas https://www.scribd.com/document/377035454/Le-Hasard-Des-Thermometres-Non-contact-a-Infrarouge https://www.scribd.com/document/376222482/Petite-Introduction-Aux-Fonctions-JavaScript https://www.scribd.com/document/376221919/La-Foi-en-Jesus-Christ-Pour-Quoi-Faire https://www.scribd.com/document/375689778/Lacuite-visuelle-angulaire https://www.scribd.com/document/375349851/La-variable-This https://www.scribd.com/document/375024162/Fonctions-Imbriquees-en-JS https://www.scribd.com/document/374789297/Format-Interne-Des-Objets-JavaScript https://www.scribd.com/document/374788758/Iterations-en-JavaScript https://www.scribd.com/document/374738470/Le-Plus-Grand-Secret-de-La-Creation https://www.scribd.com/document/374597969/Nouvelle-Formule-d-IMC-indice-de-doduite-Selon-Dr-Diasoluka https://www.scribd.com/document/373847209/Property-Descriptors https://www.scribd.com/document/373833282/l-Objet-Global-Window https://www.scribd.com/document/372665249/Javascript-Tome-II https://www.scribd.com/document/355291488/motilite-oculaire-2 https://www.scribd.com/document/355291239/motilite-oculaire-I https://www.scribd.com/document/355290248/Script-d-Analyses-Des-Reflexes-Pupillomoteurs • • • • • • • https://www.scribd.com/document/321168468/Renseignements-Id-et-Anthropometriques https://www.scribd.com/document/320856721/Emission-31-Jul-2016 https://www.scribd.com/document/318182982/Complication-Visuelle-du-Traitement-de-La-Malaria https://www.scribd.com/document/318180637/Rapport-Entre-Oxymetrie-Et-Type-Respiration https://www.scribd.com/document/315746265/Classification-Des-Medicaments https://www.scribd.com/document/315745909/Incongruences-Heresies-et-Heterodoxies-de-la-Notion-de-Laboratoire https://www.scribd.com/document/315745725/Rapport-Entre-Oxymetrie-Et-Type-Respiration