Une liste de souhaits CSS pour 2025

2024 est une année brillante pour la conversion CSS: View transversale, animation pilotée par défilement, positionnement de l'ancrage, hauteur de l'animation: automatique, et plus encore. Bien que cela semble un peu déplacé, nous attendons toujours plus de fonctionnalités de CSS. De nombreuses fonctionnalités!

Nous avons réfléchi à certaines idées ... et certaines de vos idées.

Liste de souhaits de Geoff

Je pense que nous avons déjà beaucoup d'excellents outils CSS maintenant. Nous avons beaucoup de grandes choses - et neuves! —— Function, j'essaie toujours d'en apprendre beaucoup.

Mais! Il y a toujours de la place pour plus de bonnes choses, non? Ou peut-être qu'il y a de la place pour quatre nouvelles choses. Si je peux demander de nouvelles fonctionnalités CSS, je les choisirais. 1.

ça arrive bientôt! Ou si vous pensez que le groupe de travail CSS (CSSWG) a décidé d'ajouter la condition if () à la spécification du module de valeur CSS, alors il existe déjà. C'est une énorme amélioration, même s'il faut un an ou deux (ou plus ?!) Pour être défini officiellement et aller au navigateur.

Ma compréhension de If () est qu'il s'agit d'un composant clé dans la mise en œuvre des requêtes de style conteneur, ce que je veux finalement. Être capable d'appliquer conditionnellement les styles en fonction du style d'un autre élément peut être considéré comme le Saint Graal de CSS. Nous pouvons déjà styliser l'élément en fonction du style d'autres éléments: a (), donc cela étendra cette magie, y compris les styles conditionnels.

2.

Cela ressemble plus à une fonction de "glaçage sur le gâteau", car je pense qu'il appartient entièrement au royaume du préprocesseur CSS et je crois qu'il est bon d'avoir des outils pour des abstractions légères, telles que des fonctions d'écriture ou des mélanges dans CSS. Mais si quelqu'un m'offre un mixin, je ne dirais certainement pas non. C'est probablement la dernière paille qui écrase le préprocesseur CSS et me permet d'écrire un CSS pur 100% du temps, car maintenant j'ai tendance à utiliser Sass lorsque j'ai besoin de mixin ou de fonction.

J'ai écrit un tas de notes sur la proposition de mixin et ses spécifications initiales pour vous faire savoir pourquoi je veux cette fonctionnalité.

3.

Oui, s'il vous plaît! Il s'agit d'une commodité mineure de développeur qui rend CSS comparable à l'écriture d'annotation dans d'autres langues. Je suis presque sûr qu'écrire des annotations JavaScript dans mon CSS devrait figurer dans ma liste des erreurs CSS les plus stupides (même si je ne l'ai pas mis là).

4.

Je déteste juste l'arithmétique, d'accord? ! Parfois, je veux juste un mot ou un titre court que la taille s'adapte au conteneur dans lequel il se trouve. Nous pouvons utiliser des outils comme CLAMP () pour la typographie fluide, cependant, c'est toujours un calcul avec lequel je ne veux pas me soucier. Vous pourriez penser que l'utilisation de requêtes de conteneurs et de requêtes de conteneur pour le paramètre de taille de police peut être une solution, mais ce n'est pas mieux que les unités de la fenêtre.

Liste de souhaits de Ryan

Je suis juste un développeur CSS simple et petit et je suis très satisfait de toutes les nouvelles fonctionnalités qui sont apparues dans mon navigateur au cours des dernières années.

5.

Je n'ai pas besoin de plus de persuasion dans le positionnement de l'ancrage CSS, je le crois déjà! Après avoir appris comment cela fonctionne pendant la majeure partie de novembre, je savais que je ne serais pas en mesure de l'utiliser de sitôt en décembre.

À la fin de 2024, seuls les navigateurs à base de chrome le soutiennent, et malheureusement, la seltage et l'amélioration progressive ne sont pas faciles. Cependant, un polyfill est disponible (ce qui est génial), mais cela signifie ajouter un autre morceau de code JavaScript, qui contraste avec le problème résolu par le positionnement de l'ancrage.

Mais j'étais patient, j'ai attendu longtemps pour obtenir: est entré dans le navigateur, et maintenant c'est " nouvellement disponible " dans la ligne de base pendant un an (pouvez-vous le croire?).

6. J'aime le positionnement de l'ancrage, j'aime les popups, ils correspondent très bien!

La chose intelligente à propos des popups est qu'ils apparaissent dans # top-couche, vous pouvez donc éviter d'empiler des problèmes liés à l'index z. C'est peut-être que la plupart des gens ont besoin, mais ce sera amusant d'avoir d'autres moyens d'y déplacer les éléments. De plus, maintenant que je sais que # le haut-coucher existe, je veux l'utiliser pour faire plus de

choses - je veux savoir ce qui existe.

Que s'est-il passé exactement? D'accord, je devrais probablement commencer par la spécification. Il s'avère que le projet de niveau 4 du module de mise en page CSS traite de la couche supérieure, de son objectif et des méthodes de gestion des styles d'éléments qui y sont contenus. Fait intéressant, # Top-couche est contrôlé par l'agent utilisateur et semble être un sous-produit de l'API plein écran.

Les dialogues et les pop-ups sont actuellement possibles, mais de manière optimiste, l'existence de ces fonctionnalités pourrait signifier que les éléments peuvent être promus pour # top-couche à d'autres manières à l'avenir. Il s'agit très probablement d'un cas de type Coyote / Road Runner, car je ne suis pas sûr de ce que j'en ferai une fois que je l'obtiendrai.

7.

Personnellement, la Cascade a changé ma façon d'écrire CSS. Je pense que ce serait formidable si nous pouvions inclure un attribut de couche sur la balise . Imaginez pouvoir inclure une réinitialisation CSS dans votre projet, par exemple:

ou, ajoutez dynamiquement la section CSS en fonction de la page que vous avez visitée et intégrez-la dans votre cascade:

Cette fonctionnalité est proposée sur le repo CSSWG, tout comme la plupart des choses dans la vie: c'est compliqué .

<code><link href="https://cdn.com/some/reset.css" layer="reset" rel="stylesheet"></code>

Les navigateurs sont particulièrement pointilleux sur les attributs qu'ils ne reconnaissent pas, ainsi que des préoccupations claires concernant la manipulation des secours. Le sujet a également été soumis au W3C Technology Architecture Group (TAG) pour discussion, donc il y a encore de l'espoir!

Liste de souhaits de Juandi

<code>
<link href="/styles/main.css" rel="stylesheet">
<link href="/components/card.css" layer="components" rel="stylesheet"></code>

Je dois admettre que je n'étais pas là quand Internet était sauvage et que les gens avaient des compteurs de clics. En fait, je pense que je suis assez jeune par rapport à votre connaisseur de réseau moyen. Bien que je sache comment faire des dispositions avec Float (le premier cours Web que j'ai choisi est très obsolète), je n'ai pas eu à le supporter pendant longtemps avant d'utiliser la grille Flexbox ou CSS et je n'ai jamais serré mes dents sur IE et le support du navigateur.

Donc, par rapport aux fonctionnalités dont le réseau avait vraiment besoin dans le passé - et même certaines des actuelles, le souhait suivant peut sembler une demande triviale. Quoi qu'il en soit, voici trois demandes triviales que j'espère voir en 2025:

8.

C'est l'une de ces choses que vous jurez, elle devrait déjà être possible avec CSS. La situation est la suivante: je me retrouve à vouloir connaître le nombre total d'index ou d'éléments enfants d'un élément dans son frère. Je ne peux pas utiliser la fonction compteur () car parfois j'ai besoin d'entiers au lieu de chaînes. La méthode actuelle consiste à coder en hard l'index dans html:

<code><link href="https://cdn.com/some/reset.css" layer="reset" rel="stylesheet"></code>

lait
œufs
fromage

ou, écrivez chaque index dans CSS:

<code>
<link href="/styles/main.css" rel="stylesheet">
<link href="/components/card.css" layer="components" rel="stylesheet"></code>

De toute façon, je laisse toujours le sentiment qu'il devrait être plus facile de citer ce numéro; Il rendra le code pour les animations entrelacées plus belles, concises, ou tout simplement modifier le style en fonction du nombre total.

Heureusement, il existe déjà un projet de proposition de travail pour les fonctions de frères-Count () et Sibling-Index (). Bien que la syntaxe puisse changer, j'espère en savoir plus sur eux en 2025.

<code></code>

9.

J'ai volé ceci à Adam Argyle, mais je souhaite qu'il y ait une meilleure façon d'équilibrer la disposition des walts flexibles. Lorsque les éléments enveloppent les lignes un par un alors que le récipient se rétrécit, ils se retrouvent avec un écart seul (je ne le déteste pas), soit le grandir (ce qui me fait me sentir très douloureux):

Je souhaite qu'il y ait un moyen plus natif d'équilibrer les éléments de rupture de ligne:

C'est définitivement ennuyeux.

10.

J'aime vraiment le CSSWG et tout ce qu'il fait, alors j'ai passé beaucoup de temps à lire leur projet de travail, leurs questions GitHub ou ses notes sur leurs réunions. Mais même si j'aime passer d'un lien à un autre dans leur github, il est difficile de trouver toutes les questions liées à une discussion particulière.

Je pense que cela augmente la barre pour avoir commencé à exprimer vos opinions sur certains sujets. Si vous voulez vous impliquer dans une question, vous devez comprendre la vue d'ensemble de toute la discussion (ce qui dit, pourquoi certaines choses ne fonctionnent pas, d'autres choses à considérer, etc.), mais elle est généralement dispersée sur plusieurs questions ou réunions. Bien que les questions soient longues, ce n'est pas un problème (j'aime les lire), mais il n'est tout simplement pas conscient d'une partie de la discussion quelque part.

Donc, même si ce n'est pas un souhait CSS direct, j'espère qu'il y a un moyen plus facile de connaître toute l'histoire de la discussion avant de s'impliquer.

Qu'y a-t-il sur votre liste de souhaits?

Nous avons demandé! Vous avez répondu! Voici quelques choix de la foule:

• Faire tourner directement l'image d'arrière-plan, par exemple le rotate d'arrière-plan: 180deg
• CSS Random () avec des paramètres de portée, d'extension et de type
• Un mode de positionnement du point d'ancrage CSS permet de positionner la position du curseur, du pointeur ou du point de contact de la souris
• Un sélecteur de chaîne utilisé pour interroger un mot spécifique dans un bloc de texte et appliquer un style chaque fois que le mot apparaît
• une classe native. Visuellement cachée.
• Position: collante avec a: collé cordée

Je vous souhaite tout le meilleur en 2025 ...

La trajectoire de CSS-Tricks n'a pas toujours été aussi fluide au cours des dernières années, donc notre plus grand souhait pour 2025 est de continuer à écrire et à inspirer des discussions sur le Web. Joyeux 2025!

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!