diff --git a/config/_default/hugo.yaml b/config/_default/hugo.yaml index 3427092..cff0111 100644 --- a/config/_default/hugo.yaml +++ b/config/_default/hugo.yaml @@ -36,7 +36,6 @@ outputFormats: markup: highlight: - lineNumbersInTable: false noClasses: false goldmark: parser: diff --git a/content/blog/embracing-modern-css/index.en.md b/content/blog/embracing-modern-css/index.en.md index 88610ca..7fdcbe8 100644 --- a/content/blog/embracing-modern-css/index.en.md +++ b/content/blog/embracing-modern-css/index.en.md @@ -11,11 +11,7 @@ tags: summary: | entrer le résumé description: | - The article explores recent developments in CSS, such as nested rules, CSS - variables, and classless CSS, which allow for cleaner and more efficient - stylesheet writing. It also mentions future features like CSS mixins, custom - CSS properties, and CSS scopes, which promise to further enhance the way user - interfaces are styled. + entrer la description --- I recently stumbled upon a note on a page of [Plain Vanilla] in which I learned @@ -59,6 +55,7 @@ header { makes more sense to me than ```css + a { text-decoration: none; } @@ -82,7 +79,7 @@ I have a few reasons for this: to grasp; * I can move around a group of selector without forgetting a declaration; * I can use my IDE code folding based on indent to close a group and navigate - long CSS files. + long CSS files; Since the [CSS Nesting Module] is [Baseline Widely Available] and is supported by [90% of users], It can be used to write nested CSS. So now, this is a thing in @@ -151,8 +148,8 @@ label { } ``` -I missed the [CSS Custom Properties for Cascading Variables Module Level 1] -module from 2017, which allowed me to write the same thing in pure CSS: +I missed the [CSS Custom Properties] module from 2017, which allowed me to write +the same thing in pure CSS: ```css :root { @@ -164,24 +161,16 @@ label { &.error { color: var(--color-error); } - - &.success { - color: var(--color-success); - } } .notification { &.error { background-color: var(--color-error); } - - &.success { - background-color: var(--color-success); - } } ``` -[CSS Custom Properties for Cascading Variables Module Level 1]: https://www.w3.org/TR/css-variables/ +[CSS Custom Properties]: https://www.w3.org/TR/css-variables/ ## Classless CSS @@ -418,125 +407,6 @@ Though in some cases, it can easily be replaced with CSS variables: [SASS Mixin Guide]: https://sass-lang.com/documentation/at-rules/mixin/#arguments [CSS Functions and Mixins Module]: https://www.w3.org/TR/2025/WD-css-mixins-1-20250515/ -### CSS Custom Properties - -This one is a nice little feature from the [CSS Properties and Values API Level -1] module which extends CSS variables nicely. - -They allow to define the type, initial value and inheritance rule of a custom -variables. For example: - -```css {linenos=true} -@property --my-color { - syntax: ""; - inherits: false; - initial-value: black; -} - -.primary { - --my-color: red; -} - -.secondary { - --my-color: 10px; -} - -button { - background-color: var(--my-color); - color: white; -} - -``` - -Here, the definition of `--my-color` on line 12 is not valid (it is a length and -not a color). As the property value is not inherited from a parent, the initial -value will be used: a ` - - - - - - -``` - -Voici le [composant Modal de Tailwind Plus] : - -```html -
- - -
-``` - -Comparez-les avec le [composant Modal de PicoCSS] : - -```html - -
-
- -

- Titre de la fenêtre -

-
- - Corps de la fenêtre - -
- - -
-
-
-``` - -Cela fait une énorme différence en termes de simplicité, de lisibilité et -d'accessibilité (notez que les attributs ARIA sont rendus inutiles car le -balisage sémantique porte déjà cette information). - -[TailwindCSS]: https://tailwindcss.com -[Sélecteurs CSS Niveau 4]: https://drafts.csswg.org/selectors-4/ -[BootstrapCSS]: https://getbootstrap.com -[PicoCSS]: https://picocss.com -[composant Modal de Bootstrap]: https://getbootstrap.com/docs/4.3/components/modal/#live-demo -[composant Modal de Tailwind Plus]: https://tailwindcss.com/plus/ui-blocks/application-ui/overlays/modal-dialogs -[composant Modal de PicoCSS]: https://picocss.com/docs/modal - -## `@import` pour diviser les fichiers CSS - -Un dernièr point pour lequel j'aimais utiliser SASS était la possibilité de -diviser les fichiers CSS en fichiers plus petits pour les rendre plus faciles à -comprendre. Par exemple : - -```scss -@use 'reset'; -@use 'typography'; -@use 'layout'; -@use 'content'; -``` - -Avec le module [CSS Cascading and Inheritance Level 5], CSS a cela nativement : - -```css -@import url('reset.css'); -@import url('typography.css'); -@import url('layout.css'); -@import url('content.css'); -``` - -De ma compréhension, les fichiers CSS `@import`és sont téléchargés en parallèle, -ce qui réduit le coût d'avoir plusieurs fichiers à télécharger. Les règles -CSS `@import` ont même l'avantage d'être conditionnelles. Par exemple : - -```css -@import url("light.css") only screen and (prefers-color-scheme: light); -@import url('dark.css') only screen and (prefers-color-scheme: dark); -``` - -[CSS Cascading and Inheritance Level 5]: https://drafts.csswg.org/css-cascade-5/ - -## Les évolutions que j'attends avec impatience - -Voici quelques spécifications que j'ai hâte d'utiliser. Je ne les utilise pas -encore en raison du support des navigateurs ou parce que je n'en ai pas encore -eu besoin. Mais je suis impatient de les essayer. - -### Mixins CSS - -Les Mixins CSS sont également une fonctionnalité majeure de SASS, et favorisent -un code CSS plus propre et plus réutilisable. - -CSS les aura avec le [Module des fonctions et mixins CSS], qui est encore un -brouillon, et dans lequel les mixins ne sont pas encore spécifiés. - -En attendant, voici un exemple du [Guide des Mixins SASS] : - -```scss -@mixin rtl($property, $ltr-value, $rtl-value) { - #{$property}: $ltr-value; - - [dir=rtl] & { - #{$property}: $rtl-value; - } -} - -.sidebar { - @include rtl(float, left, right); -} -``` - -Bien que dans certains cas, cela puisse être facilement remplacé par des -variables CSS : - -```css -:root { - --sidebar-float: left; -} - -[dir=rtl] { - --sidebar-float: right; -} - -.sidebar { - float: var(--sidebar-float); -} -``` - -[Guide des Mixins SASS]: https://sass-lang.com/documentation/at-rules/mixin/#arguments -[Module des fonctions et mixins CSS]: https://www.w3.org/TR/2025/WD-css-mixins-1-20250515/ - -### Propriétés Personnalisées CSS - -Celle-ci est une petite fonctionnalité sympa du module [CSS Properties and -Values API Level 1] qui étend les variables CSS. - -Elles permettent de définir le type, la valeur initiale et la règle d'héritage -d'une variable personnalisée. Par exemple : - -```css {linenos=true} -@property --my-color { - syntax: ""; - inherits: false; - initial-value: black; -} - -.primary { - --my-color: red; -} - -.secondary { - --my-color: 10px; -} - -button { - background-color: var(--my-color); - color: white; -} -``` - -Ici, la définition de `--my-color` à la ligne 12 n'est pas valide (c'est une -longueur et non une couleur). Comme la valeur de la propriété n'est pas héritée -d'un parent, la valeur initiale sera utilisée : un `