davidbgk
/
larlet-fr-david-cache


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239
							<!doctype html><!-- This is a valid HTML5 document. -->
<!-- Screen readers, SEO, extensions and so on. -->
<html lang="fr">
<!-- Has to be within the first 1024 bytes, hence before the `title` element
  See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
<meta charset="utf-8">
<!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
<!-- The viewport meta is quite crowded and we are responsible for that.
  See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- Required to make a valid HTML5 document. -->
<title>Exercices (de feuille) de styles (archive) — David Larlet</title>
<meta name="description" content="Publication mise en cache pour en conserver une trace.">
<!-- That good ol' feed, subscribe :). -->
<link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/">
<!-- Generated from https://realfavicongenerator.net/ such a mess. -->
<link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png">
<link rel="manifest" href="/static/david/icons2/site.webmanifest">
<link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c">
<link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
<meta name="msapplication-TileColor" content="#f7f7f7">
<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
<meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)">
<!-- Is that even respected? Retrospectively? What a shAItshow…
  https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/ -->
<meta name="robots" content="noai, noimageai">
<!-- Documented, feel free to shoot an email. -->
<link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
<!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<script>
    function toggleTheme(themeName) {
        document.documentElement.classList.toggle(
            'forced-dark',
            themeName === 'dark'
        )
        document.documentElement.classList.toggle(
            'forced-light',
            themeName === 'light'
        )
    }
    const selectedTheme = localStorage.getItem('theme')
    if (selectedTheme !== 'undefined') {
        toggleTheme(selectedTheme)
    }
</script>

  <meta name="robots" content="noindex, nofollow">
  <meta content="origin-when-cross-origin" name="referrer">
  <!-- Canonical URL for SEO purposes -->
  <link rel="canonical" href="https://blog.professeurjoachim.com/billet/2023-01-05-exercices-de-feuille-de-styles">

<body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all">


<article>
  <header>
    <h1>Exercices (de feuille) de styles</h1>
  </header>
  <nav>
    <p class="center">
      <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
      </svg> Accueil</a> •
      <a href="https://blog.professeurjoachim.com/billet/2023-01-05-exercices-de-feuille-de-styles" title="Lien vers le contenu original">Source originale</a>
    </p>
  </nav>
  <hr>
  <p>Ces temps-ci j’ai environ 4 projets persos démarrés (plus 3 à l’état d’ébauche), auxquels j’ajoute un ou deux projets open source auxquels je contribue. C’est pour ça que quand j’ai cinq minutes, je fais des petits trucs sur mon blog, qui n’est pas comptabilisé dans les projets cités plus haut.</p>
<p>L’avantage avec le blog, c’est que la base est là, la baraque est construite, et que je peux juste faire des expériences de style, comme si je repeignais un mur, mais en moins salissant.</p>
<p>Tel qu’il est actuellement, le blog est propulsé par <a href="https://getkirby.com/">Kirby</a>, mon petit chouchou pour la gestion simple de sites qui n’ont pas de gros besoins de fonctionnalités. J’ai un modèle de page d’accueil qui liste les billets du blog, j’ai un modèle de page de billet, et un modèle de page par défaut.</p>
<p>Les styles ont été conçus à partir de zéro. Mes seules règles : que le site soit lisible et accessible, et que je ne m’empèche pas d’utiliser des propriétés CSS modernes.</p>
<p>Parmi les exemples de propriétés modernes, le mode sombre et les liens.</p>
<p>Les couleurs du site sont gérées par le biais de propriétés CSS personnalisées. Une teinte est définie, et déclinée en plusieurs variantes, nommées en fonction du contraste qu’elles ont avec la couleur de fond.</p>
<pre class="hljs"><code data-language="css"><span class="hljs-selector-pseudo">:root</span> {
    <span class="hljs-attribute">--color-base</span>: <span class="hljs-number">120deg</span>;

    <span class="hljs-attribute">--color-action-low-contrast</span>: <span class="hljs-built_in">hsl</span>(var(--color-base), <span class="hljs-number">80%</span>, <span class="hljs-number">80%</span>);
    <span class="hljs-attribute">--color-action-medium-contrast</span>: <span class="hljs-built_in">hsl</span>(var(--color-base), <span class="hljs-number">70%</span>, <span class="hljs-number">40%</span>);
    <span class="hljs-attribute">--color-action-high-contrast</span>: <span class="hljs-built_in">hsl</span>(var(--color-base), <span class="hljs-number">60%</span>, <span class="hljs-number">25%</span>)
}</code></pre>
<p><strong>Le mode sombre</strong> est géré par une media-query spécifique, qui modifie les propriétés des couleurs, sans toucher à la teinte de base.</p>
<pre class="hljs"><code data-language="css"><span class="hljs-keyword">@media</span> screen <span class="hljs-keyword">and</span> (<span class="hljs-attribute">prefers-color-scheme:</span> dark) {
    <span class="hljs-selector-pseudo">:root</span> {
        <span class="hljs-attribute">--color-action-low-contrast</span>: <span class="hljs-built_in">hsl</span>(var(--color-base), <span class="hljs-number">20%</span>, <span class="hljs-number">25%</span>);
        <span class="hljs-attribute">--color-action-medium-contrast</span>: <span class="hljs-built_in">hsl</span>(var(--color-base), <span class="hljs-number">50%</span>, <span class="hljs-number">50%</span>);
        <span class="hljs-attribute">--color-action-high-contrast</span>: <span class="hljs-built_in">hsl</span>(var(--color-base), <span class="hljs-number">100%</span>, <span class="hljs-number">80%</span>);
    }
}</code></pre>
<p>Pour voir les deux versions, j’ai trouvé cette excellente (et minuscule) extension Firefox, qui permet d’alterner entre le mode clair et le mode sombre, quels que soient les réglages du système ou du navigateur : <a href="https://github.com/Cimbali/toggle-dark-mode">https://github.com/Cimbali/toggle-dark-mode</a>.</p>
<p><strong>Les liens</strong> utilisent des propriétés CSS peu connues, mais très pratiques : <code>text-decoration-thickness</code> qui régit l’épaisseur du trait de décoration (ici un soulignement) et <code>text-underline-offset</code> qui cible le trait de soulignement pour le décaler. Ces deux propriétés sont utilisables sur tous les navigateurs depuis 2021, et elles sont animables via la propriété <code>transition</code>. En animant aussi la couleur du trait de soulignement et celle du texte, <a href="#test-de-lien" id="test-de-lien">on obtient ce résultat</a>. Le seul reproche que je peux faire à cette technique, c’est que je ne peux pas ajouter de marge intérieure au trait (qui est plutôt un bloc coloré qui contient le texte) pour le rendre un peu plus large que le texte qu’il contient.</p>
<h2>Un site en jachère…</h2>
<p>Un blog, ça vit, ça meurt… Je le sais, j’en ai entretenu une demi-douzaine en vingt ans (je viens de vérifier la date d’enregistrement de mon premier nom de domaine : ça dit <code>Creation Date: 2003-01-23T17:55:34Z</code>, j’étais au lycée), et la quasi-totalité ne sont plus entretenus, voire même plus sur le web (hé oui, pour les dix ans de mon premier je l’ai détruit, ce qui lui a valu un petit épitaphe sur le carnet d’un ami).</p>
<p>J’avais envie de présenter le manque d’entretien de ce carnet par un biais amusant et facilement compréhensible. Quand on a un jardin, si on le laisse tranquille plusieurs mois, les herbes folles poussent et les feuilles des arbres couvrent le sol. C’est le temps qui passe, c’est la nature.</p>
<p>Sur ce carnet, c’est pareil. Plus le temps s’écoulera entre deux mises à jour, plus les pages verront des plantes et des feuiles mortes. Si elles deviennent trop nombreuses et gênent à la lecture, <a href="#rateau">il est possible de les ratisser</a>.</p>
<h2>…qui évolue un petit peu selon les saisons</h2>
<p>En restant sur un thème de rythme de la nature, et du fait que ce rythme ne s’applique pas au web, j’ai eu envie d’insérer un autre témoin du temps qui passe. Là, il ne sera pas lié à mon entretien de cet espace web mais plutôt au jour de l’année.</p>
<p>Comme je l’ai abordé plus haut, la couleur est définie au format HSL, ou Hue/Saturation/Lightness, soit <a href="https://fr.wikipedia.org/wiki/Teinte_saturation_luminosit%C3%A9">Teinte/Saturation/Luminosité</a> en français. Grâce à la manière dont j’ai séparé la définition de la teinte dans la définition des couleurs, si je change la valeur de la teinte, les valeurs de saturation et de luminosité ne seront pas touchées. </p>
<p>Les valeurs de teinte sont définies en degré, selon leur angle sur le cercle chromatique. Il y a donc 360 couleurs. Et 365 jours dans l’année. Vous voyez où je veux en venir ?</p>
<p>En arrondissant un peu, chaque jour peut avoir une couleur différente selon son numéro dans l’année. Comment l’avoir ? En PHP c’est facile : <code>&lt;?= date('z') ?&gt;</code> nous fournit la valeur, qu’on colle donc dans une définition de style sur l’élément <code>html</code> : </p>
<pre class="hljs"><code data-language="html"><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"fr"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"--color-base: &lt;?= date('z') ?&gt;deg;"</span>&gt;</span></code></pre>
<p>Mais attendez ! Le cercle chromatique partirait du rouge en janvier, colorerait le printemps en jaune, l’été en vert puis bleu, et l’automne en violet. J’ai ajusté ça en inversant la valeur du jour, et en choissant un point de départ différent. Comme ça on a bleu (hiver), vert (printemps), orange (été) rouge et violet (automne). Ça se tient mieux, à mon avis.</p>
<p>Et comme je pouvais le faire, j’ai ajouté un filtre à l’icône de raccourci, qui dépend lui aussi de la date actuelle, pour décaler la teinte de l’icône et donc adapter sa couleur en fonction de la couleur principale du blog. L’emoji qui précède le titre du site a lui aussi reçu ce traitement lorsqu’on ne passe pas la souris sur le titre.</p>
<h2>Avec des emoji qui dépassent un peu</h2>
<p>En parlant de l’emoji qui précède le titre, là aussi il y a quelques trucs CSS pour que ça fonctionne.</p>
<p>L’emoji est placé par rapport au positionnement du titre, en retrait par rapport à la colonne de contenu. Jusque là tout va bien. Mais initialement, elle dépassait aussi sur format mobile—et était coupée par le bord de l’écran. Il a fallu trouver une solution.</p>
<p>La colonne de contenu est définie sans avoir besoin de <code>media-query</code>. En effet, ma définition se fonde sur la valeur minimale entre 86% de la largeur de la fenêtre, et la largeur maximum de ligne, qui est de 44 hauteurs de caractère à la taille par défaut. Soit, en CSS :</p>
<pre class="hljs"><code data-language="css"><span class="hljs-selector-pseudo">:root</span> {
    <span class="hljs-attribute">--max-body-width</span>: <span class="hljs-number">86vw</span>;
    <span class="hljs-attribute">--max-line-length</span>: <span class="hljs-number">44rem</span>;
}

<span class="hljs-selector-tag">body</span> {
    <span class="hljs-attribute">width</span>: <span class="hljs-built_in">min</span>(var(--max-body-width), <span class="hljs-built_in">var</span>(--max-line-length));
}</code></pre>
<p>Pour rentrer le titre (et son icône) dans la colonne, il faut ajouter une marge :</p>
<ul>
<li>qui ne soit jamais supérieure à la largeur de l’icône (pour ne pas trop décaler le titre vers la droite)</li>
<li>qui ne soit jamais négative (à l’inverse, pour ne pas décaler le titre vers la droite)</li>
<li>qui dépende de la différence entre la largeur maximale de la ligne et la largeur courante de l’écran (cette valeur est négative en écran large et positive en écran mobile)</li>
</ul>
<p>Ce qui donne, en CSS :</p>
<pre class="hljs"><code data-language="css"><span class="hljs-selector-tag">h1</span> {
    <span class="hljs-attribute">--icon-width</span>: <span class="hljs-number">1.25em</span>;
    <span class="hljs-attribute">margin-left</span>:
        <span class="hljs-built_in">min</span>(
            var(--icon-width),
            <span class="hljs-built_in">max</span>(
                <span class="hljs-number">0px</span>, calc(var(--max-line-length) - <span class="hljs-built_in">var</span>(--max-body-width))
            )
        );
}</code></pre>
<p>Et voilà, suite à ça j’ai pas trop de conclusion à apporter à l’article. Si ça se trouve je recommencerai tout le travail de style dans trois semaines, ou dans trois ans. Ça va dépendre de mon avancée sur mes autres projets, je pense. D’ici là, on va essayer de ne pas laisser pousser trop d’herbes folles.</p>
</article>


<hr>

<footer>
  <p>
    <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
      </svg> Accueil</a> •
    <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
      </svg> Suivre</a> •
    <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
      </svg> Pro</a> •
    <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
      </svg> Email</a> •
    <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
      </svg> Légal</abbr>
  </p>
  <template id="theme-selector">
      <form>
          <fieldset>
              <legend><svg class="icon icon-brightness-contrast">
                <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
              </svg> Thème</legend>
              <label>
                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
              </label>
              <label>
                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
              </label>
              <label>
                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
              </label>
          </fieldset>
      </form>
  </template>
</footer>
<script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
<script>
    function loadThemeForm(templateName) {
        const themeSelectorTemplate = document.querySelector(templateName)
        const form = themeSelectorTemplate.content.firstElementChild
        themeSelectorTemplate.replaceWith(form)

        form.addEventListener('change', (e) => {
            const chosenColorScheme = e.target.value
            localStorage.setItem('theme', chosenColorScheme)
            toggleTheme(chosenColorScheme)
        })

        const selectedTheme = localStorage.getItem('theme')
        if (selectedTheme && selectedTheme !== 'undefined') {
            form.querySelector(`[value="${selectedTheme}"]`).checked = true
        }
    }

    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
    window.addEventListener('load', () => {
        let hasDarkRules = false
        for (const styleSheet of Array.from(document.styleSheets)) {
            let mediaRules = []
            for (const cssRule of styleSheet.cssRules) {
                if (cssRule.type !== CSSRule.MEDIA_RULE) {
                    continue
                }
                // WARNING: Safari does not have/supports `conditionText`.
                if (cssRule.conditionText) {
                    if (cssRule.conditionText !== prefersColorSchemeDark) {
                        continue
                    }
                } else {
                    if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
                        continue
                    }
                }
                mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
            }

            // WARNING: do not try to insert a Rule to a styleSheet you are
            // currently iterating on, otherwise the browser will be stuck
            // in a infinite loop…
            for (const mediaRule of mediaRules) {
                styleSheet.insertRule(mediaRule.cssText)
                hasDarkRules = true
            }
        }
        if (hasDarkRules) {
            loadThemeForm('#theme-selector')
        }
    })
</script>
</body>
</html>