Eine CSS -Wunschliste für 2025

2024 ist ein brillantes Jahr für CSS: Cross-Document View-Konvertierung, scrollengetriebene Animation, Ankerpositionierung, Animationshöhe: Automatisch und mehr. Während es ein bisschen fehl am Platz klingt, freuen wir uns immer noch auf weitere Funktionen von CSS. Viele Funktionen!

Wir haben einige Ideen mit Brainstorming ... und einige Ihrer Ideen.

Geoffs Wunschliste

Ich denke, wir haben jetzt schon viele hervorragende CSS -Tools. Wir haben viele tolle Dinge - und neu! —— -Funktion, ich versuche immer noch, viele von ihnen zu lernen.

Aber! Es gibt immer Platz für mehr gute Sachen, oder? Oder vielleicht gibt es Platz für vier neue Dinge. Wenn ich nach neuen CSS -Funktionen fragen kann, würde ich diese wählen. 1.

Es kommt bald! Oder wenn Sie der Meinung sind, dass die CSS -Arbeitsgruppe (CSSWG) beschlossen hat, die Bedingung if () zur CSS -Wertmodul -Stufe 5 -Spezifikation hinzuzufügen, ist dies bereits vorhanden. Dies ist eine enorme Verbesserung, auch wenn es ein oder zwei Jahre (oder mehr?!) Dauert, um formell definiert zu werden und zum Browser zu gehen.

mein Verständnis von if () ist, dass es eine Schlüsselkomponente bei der Implementierung von Abfragen im Containerstil ist, was ich letztendlich möchte. In der Lage zu sein, Stile entsprechend dem Stil eines anderen Elements in bedingten Anwenden von CSS anzuwenden. Wir können das Element bereits nach dem Stil anderer Elemente stylen: Has (), sodass dies diese Magie, einschließlich der bedingten Stile, erweitert.

2

Dies ist eher wie eine "Zuckerguss -Kuchen" -Feature, da ich der Meinung bin, dass es vollständig dem CSS -Präzessor -Bereich gehört und glaube, dass es gut ist, Werkzeuge für leichte Abstraktionen wie Schreiben von Funktionen oder Mischungen in CSS zu haben. Aber wenn mir jemand einen Mixin anbietet, würde ich sicherlich nicht nein sagen. Dies ist wahrscheinlich der letzte Strohhalm, der den CSS -Präprozessor zerquetscht und es mir zu 100% der Zeit reine CSS schreiben kann, da ich jetzt dazu neige, SASS zu verwenden, wenn ich Mischung oder Funktion brauche.

Ich habe eine Reihe von Notizen über den Mixin -Vorschlag und seine ersten Entwurfsspezifikationen geschrieben, um Ihnen mitzuteilen, warum ich diese Funktion wünsche.

3.

Ja, bitte! Dies ist ein kleiner Entwickler, der CSS mit der Annotation -Schrift in anderen Sprachen vergleichbar macht. Ich bin mir ziemlich sicher, dass das Schreiben von JavaScript -Anmerkungen in meinem CSS in meiner Liste der dümmsten CSS -Fehler sein sollte (auch wenn ich es nicht dorthin gesetzt habe).

4

Ich hasse nur die Arithmetik, okay? ! Manchmal möchte ich nur ein Wort oder einen kurzen Titel, in dem diese Größe in den Container passt, in dem es sich befindet. Wir können Tools wie Clamp () für die Fluid -Typografie verwenden. Dies ist jedoch immer noch eine Mathematik, mit der ich mich nicht kümmern möchte. Sie könnten denken, dass die Verwendung von Containerabfragen und Containerabfragen Einheiten für die Einstellung der Schriftgröße möglicherweise eine Lösung sein könnte, aber das ist nicht besser als Ansichtsfenstereinheiten.

Ryans Wunschliste

Ich bin nur ein einfacher CSS -Entwickler für kleine Stadt und bin sehr zufrieden mit all den neuen Funktionen, die in den letzten Jahren in meinem Browser erschienen sind.

5.

Ich brauche keine mehr Überzeugung über die CSS -Ankerpositionierung, ich glaube es schon! Nachdem ich gelernt hatte, wie es den größten Teil des Novembers funktioniert, wusste ich, dass ich es im Dezember nicht so schnell nutzen könnte.

Ende 2024 unterstützen nur Browser auf Chrombasis, und leider sind Fallback und progressive Verbesserung nicht einfach. Es gibt jedoch eine Polyfill (was großartig ist). Dies bedeutet jedoch, ein weiteres Stück JavaScript -Code hinzuzufügen, das mit dem durch die Ankerpositionierung gelösten Problem gegenüberliegt.

Aber ich war geduldig, ich habe lange gewartet, um zu bekommen: Ist in den Browser eingetreten, und jetzt ist es für ein Jahr " neu verfügbar " (können Sie es glauben?).

6. Ich mag die Ankerpositionierung, ich mag Popups, sie passen sehr gut zusammen!

Das Clevere an Popups ist, dass sie in #Top-Layer erscheinen, sodass Sie vermeiden können, Probleme im Zusammenhang mit Z-Index zu stapeln. Dies mag alles sein, was die meisten Menschen brauchen, aber es wird Spaß machen, andere Möglichkeiten zu haben, die Elemente dort zu bewegen. Jetzt, wo ich weiß, dass #Top -Layer existiert, möchte ich es verwenden, um mehr

Dinge zu tun - ich möchte wissen, was da draußen ist.

Was genau ist passiert? Okay, ich sollte wahrscheinlich mit der Spezifikation beginnen. Es stellt sich heraus, dass der CSS-Positionslayout-Modul Level 4-Entwurf #Top-Layer, ihren Zweck und die Methoden zur Behandlung der darin enthaltenen Elemente erörtert. Interessanterweise wird #Top-Layer vom Benutzeragenten gesteuert und scheint ein Nebenprodukt der Vollbild-API zu sein.

Dialoge und Pop-ups sind derzeit möglich, aber optimistisch kann die Existenz dieser Merkmale bedeuten, dass Elemente in Zukunft auf andere Weise zu #Top-Layer gefördert werden können. Dies ist höchstwahrscheinlich ein Coyote/Road Runner -Fall, da ich nicht sicher bin, was ich damit anfangen werde, wenn ich ihn bekomme.

7.

persönlich veränderte die Kaskade die Art und Weise, wie ich CSS geschrieben habe. Ich denke, es wäre großartig, wenn wir ein Ebenenattribut in das -Tag aufnehmen könnten. Stellen Sie sich vor, Sie könnten einen CSS -Reset in Ihr Projekt aufnehmen, zum Beispiel:

oder fügen Sie den CSS -Abschnitt entsprechend der Seite, die Sie besucht haben, dynamisch hinzu und integrieren Sie ihn in Ihre Kaskade:

Diese Funktion wird auf dem CSSWG -Repo vorgeschlagen, genau wie die meisten Dinge im Leben: Es ist kompliziert .

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

Browser sind besonders wählerisch in Bezug auf Attribute, die sie nicht erkennen, sowie klare Bedenken hinsichtlich des Umgangs mit Fallbacks. Das Thema wurde auch zur Diskussion der W3C Technology Architecture Group (Tag) eingereicht, daher gibt es immer noch Hoffnung!

Juandis Wunschliste

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

Ich muss zugeben, dass ich nicht da war, als das Internet wild war und die Leute Klickzähler hatten. Tatsächlich denke ich, dass ich im Vergleich zu einem durchschnittlichen Netzwerkkenner ziemlich jung bin. Obwohl ich weiß, wie man Layouts mit Float erstellt (der erste Webkurs, den ich ausgewählt habe, ist sehr veraltet), musste ich es lange nicht ertragen, bevor ich Flexbox oder CSS -Raster verwendete und meine Zähne nie auf den IE- und Browserunterstützung biss.

Im Vergleich zu den Funktionen, die das Netzwerk in der Vergangenheit wirklich benötigt hat - und sogar einige der aktuellen, scheint der folgende Wunsch eine triviale Anfrage zu sein. Wie auch immer, hier sind drei triviale Anfragen, die ich hoffe, im Jahr 2025 zu sehen:

8.

Dies ist eines der Dinge, die Sie schwören, dass es mit CSS bereits möglich sein sollte. Die Situation ist wie folgt: Ich möchte die Gesamtzahl der Indizes oder Kinderelemente eines Elements in seinem Geschwister kennen. Ich kann die Funktion counter () nicht verwenden, da ich manchmal Ganzzahlen anstelle von Zeichenfolgen brauche. Die aktuelle Methode besteht darin, den Index in HTML zu harten:

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

Milch
Eier
Käse

oder schreiben Sie jeden Index in CSS:

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

In beiden Fällen lasse ich immer das Gefühl, diese Nummer zu zitieren. Damit wird der Code für verschachtelte Animationen schöner, prägnanter oder verändert einfach den Stil basierend auf der Gesamtzahl.

Zum Glück gibt es bereits einen arbeitenden Entwurfsvorschlag für Geschwister- () und Geschwister-Index () -Funktionen. Während sich die Syntax ändern kann, hoffe ich, dass ich im Jahr 2025 mehr über sie erfahren kann.

<code></code>

9.

Ich habe das von Adam Argyle gestohlen, aber ich wünschte, es gäbe einen besseren Weg, um das Layout von Flex-Wrap-Layout auszugleichen. Wenn Elemente die Linien nacheinander wickeln, wenn der Behälter schrumpft, bleibt ihnen entweder eine Lücke allein (ich hasse es nicht) oder wächst, um sie zu füllen (wodurch ich mich sehr schmerzhaft fühle):

Ich wünschte, es gäbe eine native Art, Linien -Break -Elemente auszugleichen:

Das ist definitiv ärgerlich.

10.

Ich mag CSSWG und alles, was es tut, also habe ich viel Zeit damit verbracht, ihre Arbeiten, Github -Fragen oder Notizen zu ihren Meetings zu lesen. Aber während ich gerne von einem Link zu einem anderen in ihrem Github springe, ist es schwierig, alle Fragen zu einer bestimmten Diskussion zu finden.

Ich denke, das erhöht die Messlatte, um Ihre Meinung zu bestimmten Themen auszudrücken. Wenn Sie sich in eine Frage einlassen möchten, sollten Sie das Gesamtbild all der Diskussion verstehen (was gesagt, warum manche Dinge nicht funktionieren, andere Dinge zu berücksichtigen usw.), aber es ist normalerweise über mehrere Fragen oder Besprechungen verteilt. Obwohl die Fragen langwierig sein mögen, ist es kein Problem (ich lese sie gerne), aber es ist einfach nicht bekannt, dass ein Teil der Diskussion irgendwo existiert.

Obwohl es kein direkter CSS -Wunsch ist, hoffe ich, dass es eine einfachere Möglichkeit gibt, die ganze Geschichte der Diskussion kennenzulernen, bevor sie sich engagieren.

Was steht auf Ihrer Wunschliste?

wir haben gefragt! Du hast geantwortet! Hier sind einige Möglichkeiten aus der Menge:

• Drehen Sie das Hintergrundbild direkt, z. B. Hintergrund-Rotate: 180-° C
• cSS random () mit Parametern von Bereich, Erweiterung und Typ
• A CSS -Anker -Punkt -Positionierungsmodus ermöglicht die Positionierung des Maus -Cursors, des Zeigers oder der Berührungsposition
• Ein String -Selektor, der verwendet wird, um ein bestimmtes Wort in einem Textblock abzufragen und jedes Mal einen Stil anzuwenden, wenn das Wort
angezeigt wird
• ein native .visuell-versteckte Klasse.
• Position: klebrig mit A: Stuck Pseudo-Klasse

Ich wünsche Ihnen alles Gute im Jahr 2025 ...

Die Flugbahn von CSS-Tricks war in den letzten Jahren nicht immer so reibungslos, sodass unser größter Wunsch für 2025 darin besteht, weiterhin Diskussionen über das Web zu schreiben und zu inspirieren. Happy 2025!

Das obige ist der detaillierte Inhalt vonEine CSS -Wunschliste für 2025. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!