diff --git a/config/_default/hugo.yaml b/config/_default/hugo.yaml index cff0111..3427092 100644 --- a/config/_default/hugo.yaml +++ b/config/_default/hugo.yaml @@ -36,6 +36,7 @@ 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 7fdcbe8..88610ca 100644 --- a/content/blog/embracing-modern-css/index.en.md +++ b/content/blog/embracing-modern-css/index.en.md @@ -11,7 +11,11 @@ tags: summary: | entrer le résumé description: | - entrer la 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. --- I recently stumbled upon a note on a page of [Plain Vanilla] in which I learned @@ -55,7 +59,6 @@ header { makes more sense to me than ```css - a { text-decoration: none; } @@ -79,7 +82,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 @@ -148,8 +151,8 @@ label { } ``` -I missed the [CSS Custom Properties] module from 2017, which allowed me to write -the same thing in pure CSS: +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: ```css :root { @@ -161,16 +164,24 @@ 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]: https://www.w3.org/TR/css-variables/ +[CSS Custom Properties for Cascading Variables Module Level 1]: https://www.w3.org/TR/css-variables/ ## Classless CSS @@ -407,6 +418,125 @@ 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 ` + +
+ Corps de la fenêtre +
+
+ + +
+ + + +``` + +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 `