Mise à jour sur CSS

[Er1gon359]

1- @property at-rule
Le plus gros problème était qu'avant pour faire des changements de couleurs/des menus colorés dynamique, cela était assez compliquer du aux faite que nous déclarions des variable mais maintenant avec @property on peut maintenant donné des types spécifique comme color, number, pourcentage, ... cela va permettre aux navigateurs de pouvoir lire vos variables et de pouvoir l'utiliser dans l'animation.

2- @starting-style
cela va nous permettre de définir le style d'un élément pour qu'il l'affiche, cela va  particulièrement être utile lorsque l'on utilise des dialog ou des popover ou encore tout ce qi peut être caché avec display: none puis nous devons le remontrer avec la commande display:block. Mais avec cette commande on pourra maintenant choisir directement ou on veux le placer lorsqu'il s'ouvre 

3- round(), rem(), mod()
c'est trois nouvelles fonction permettent de faire des maths dans CSS (même si on pouvait déjà en faire avant)
rem() et mod() fonctionne comme la fonction modulo en python et/ou Javascrpit
roud() permet d'utiliser différents calculs d'arrondissement

4- Fonction light-dark

Quand on utilise un mode sombre et un mode clair pour un site web cela peut être compliquer pour faire le code car on doit créer deux blocs différents, les appelés alors qu'avec cette nouvelles fonction juste besoin de créer un seul bloc de mettre les deux et le site changera en fonction du thème de l'ordinateur si il est définie en sombre ou clair de base.
ex:
.omni-theme{
    bakground: light-dark(white,black);
    color: light-dark(dark,white);
}

5- :user-valid pseudo class
Pour designer l'interface Utilisateur avec la validation qui change de couleur par exemple en utilisant
input:valid{
    color:green;
}
    
intput:invalid{
    color:red;
}
généralement ceux qui va se passer c'est que votre champs sera déjà rouge avant même que l'utilisateur ne rentre quoi que ce soit, le cadre deviendra rouge;
Mais maintenant avec cette nouvelle commande les changements ne se produiront uniquement après que l'utilisateur est rentré quelque choses.

input:user-valid{
    color:green;
}

intput:user-invalid{
    color:red;
}

6- interpolate-size
Quand on veut construire un menu déroulant (drop-down menu)
 on veux généralement animer quand il s'ouvre et se ferme. Généralement on est déçu car ce n'est pas possible quand on a height mis sur auto.
avec cette fonction qui s'écrira
.dropdown{
    interpolate-size: allow-keywords;
}
on pourra le faire beaucoup plus simplement et cela s'alignera proprement

De plus le logo de CSS vient également de changer car la fille du créateur Eric Meyer est décédé pour lui rendre hommage il a décidé de renommer une couleur avec son nom RebeccaPurple même si de base elle s'appelait Becca elle voulais qu'on l'appelle Rebecca.

[EnZ0]

Admin sys,on ne met pas les mains dans le code CSS au quotidien, ces évolutions ont quand même un impact sur notre travail d'infrastructure.

Par exemple, la fonction light-dark pour gérer automatiquement les thèmes clairs/sombres peut réduire la charge serveur en évitant de charger des feuilles de style supplémentaires. De même, les nouvelles fonctionnalités mathématiques et les optimisations de rendu peuvent améliorer les performances globales des applications web qu'on héberge.

Pour des SISR, l'important est surtout de comprendre l'impact sur les performances et la sécurité. Ces nouvelles fonctionnalités CSS permettent de faire plus de choses côté client, ce qui peut alléger la charge serveur. C'est toujours bon à savoir quand on dimensionne l'infrastructure !

Laissons les détails d'implémentation aux développeurs pendant qu'on s'occupe de faire tourner les serveurs qui hébergent tout ça