CSS-Wunschliste 2019

Avatar of Chris Coyier
Chris Coyier am

DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!

Was wünschen Sie sich, dass CSS nativ könnte, was es jetzt nicht kann? Zuerst werfen wir einen Blick auf das letzte Mal, als wir das im Jahr 2013 getan haben.

  1. ❌ „Ich möchte ein Element auswählen können, basierend darauf, ob es einen anderen bestimmten Selektor enthält“
  2. ❌ „Ich möchte ein Element basierend auf seinem Inhalt auswählen können“
  3. ❌ „Ich hätte gerne mehrere Pseudo-Elemente“
  4. ❌ „Ich möchte Elemente/Übergänge zu height: auto; animieren/überblenden können“
  5. ❌ „Ich hätte gerne Dinge von Sass, wie @extend, @mixin und Verschachtelung“
  6. ❌ „Ich hätte gerne ::nth-letter, ::nth-word usw.“
  7. ✅ „Ich möchte, dass alle wichtigen Browser automatisch aktualisiert werden“

Autsch. Na ja. Ich bin mir nicht sicher, wie dringend all diese Dinge tatsächlich angefragt werden oder wie machbar es ist, sie überhaupt zu implementieren. Es sind lediglich Ideen, die meiner Meinung nach im Jahr 2013 nützlich gewesen wären, und wie sich herausstellt, bin ich immer noch dieser Meinung.

Dieses Mal lasse ich mir keine eigene Liste erstellen, sondern werfen wir einen Blick ins Internet auf andere Leute, die CSS-Wünsche zusammengestellt haben.

TL;DR Liste

Bei der Betrachtung verschiedener Gesprächsquellen über Dinge, die sich die Leute für CSS wünschen, scheinen dies die häufigsten Anfragen zu sein.

  • Eltern-Queries. Das heißt, ein beliebiges Element auswählen und dann das Elternelement davon auswählen. Wir haben einige Beweise dafür, dass es mit :focus-within möglich ist.
  • Container-Queries. Ein bestimmtes Element auswählen, wenn das Element selbst bestimmten Bedingungen unterliegt.
  • Standardisierte Gestaltung von Formularelementen.
  • Enthält/Besitzt-Selektoren.
  • Übergänge zu auto-Abmessungen.
  • Verbesserte Handhabung von Viewport-Einheiten.

Bemerkenswert ist, dass interessanterweise nur wenige Leute nach Stil-Scoping fragen. Es kam ein wenig zur Sprache, aber nicht viel. Es scheint ein so wichtiger Teil der CSS-in-JS-Konversation zu sein, daher bin ich überrascht, so wenig Erwähnung davon im Kontext allgemeiner „Was braucht CSS?“-Gespräche zu finden.

Jen Simmons fragte, was auf unseren Listen steht

Bemerkenswerte Antworten aus dem Thread

  • Seitenverhältnisse (es ist kompliziert in CSS, kommt wahrscheinlich zu HTML, und vielleicht bekommen wir es eines Tages nativ in CSS mit einer Eigenschaft)
  • Ausschlüsse
  • Regionen
  • Subgrid (es kommt!)
  • text-wrap: avoid-widows-and-orphans
  • Nesting
  • Umriss mit Radius
  • Animierte Hintergrundverläufe (ohne sie durch Verschieben oder andere Tricks zu fälschen)
  • text-overflow:ellipsis über mehrere Zeilen / Zeilenbegrenzung
  • 0-zu-auto-Übergänge
  • Elternselektoren
  • Asynchrones @import
  • Mathematische Funktionen wie sqrt(), sin() und cos()
  • font-min-size und font-max-size
  • Masonry

Tab Atkins wollte wissen, welche Teile von CSS uns am meisten Probleme bereiten

Bemerkenswerte Antworten aus dem Thread

  • Unzählige Anfragen nach einer standardisierten Möglichkeit zur Gestaltung von Formularelementen – nicht nur aus gestalterischen Gründen, sondern auch aus Gründen der Barrierefreiheit, um zu verhindern, dass Styling mit Standards getauscht wird.
  • Möglichkeit, die Browserunterstützung für mehr als nur Eigenschaften/Werte mit @supports zu testen
  • Verbesserte Handhabung von Viewport-Einheiten und ihrer Beziehung zu anderen Browser-UIs
  • Verbesserte Handhabung von Mehrspaltenlayouts
  • Elastisches Scrollen

Tommy Hodgins machte einen CSS+JS-Adventskalender auf Twitter, der interessante Möglichkeiten dokumentiert

Tommys Liste

  • Elternelement-Selektor
  • Hat-Selektor
  • Nächster Selektor
  • Erster im Dokument (wie bei querySelector)
  • Älterer Geschwister-Selektor
  • Vorheriger Geschwister-Selektor
  • Enthält-Selektor
  • Regex-Selektor
  • Berechneter Stil-Selektor
  • :nth-letter / :nth-word
  • Pseudo-Medien-Selektoren
  • Nicht-leer Gültig/Ungültig-Selektor
  • Element-Queries
  • Attribut-Vergleichsselektoren
  • Benutzerdefinierte Spezifität
  • Sichtbarkeits-Selektoren
  • Überlauf-Erkennungs-Selektor
  • Benutzeragenten-Erkennungs-Selektor
  • Speicher-Queries
  • Datums-Queries
  • Protokoll-Queries
  • Tiefes Hover

Wir haben auch gefragt

Bemerkenswerte Antworten aus dem Thread

  • Container-Queries
  • Hat-Selektor
  • Regionen
  • Farbanpassungsfunktionen
  • Nesting
  • Shader
  • Übergang zu auto-Abmessungen / Übergang von display: none;
  • Vorheriger Geschwister-Selektor
  • font-size: fit;
  • Gestaltung von grid-template-areas
  • Animation zwischen grid-template-areas
  • Typen für benutzerdefinierte Eigenschaften
  • clip-path akzeptiert Pfade
  • inline-styles: ignore;
  • Seitenverhältnisse
  • Scoping
  • // einzeilige Kommentare
  • Eckformen
Psst! Erstellen Sie ein DigitalOcean-Konto und erhalten Sie 200 $ kostenloses Guthaben für Cloud-basiertes Hosting und Services.

Kommentare

  1. Bert de Vries
    Permalink to comment#

    Vielleicht nicht ganz zum Thema, aber es gibt eine Sache, die ich mir bei CSS wirklich wünschen würde. Ich wünschte, es gäbe eine Möglichkeit zu sehen, welche CSS-Regeln nie verwendet werden. So etwas wie eine Protokolldatei, die ein- und ausgeschaltet werden kann und alle Selektoren auflistet, die nicht verwendet werden oder auf einer bestimmten HTML-Seite immer überschrieben werden. Ich weiß nicht, ob so etwas möglich ist, aber es wäre sehr nett, es zu haben. Nur um das CSS aufzuräumen. Ich habe so etwas noch nie gefunden oder Anfragen dafür.

  2. Peter
    Permalink to comment#

    Wie wäre es mit: Media-Queries basierend auf der Ausrichtung des Viewports (Hochformat / Querformat)

    Oder ist das schon möglich?

  3. Alex
    Permalink to comment#

    Ich wünsche mir ein einfaches
    text-align: center center;
    zum horizontalen und vertikalen Zentrieren.
    Im Jahr 2019 müssen wir immer noch seltsame Hacks oder unlogische div-Verschachtelungen verwenden.

    • Brad
      Permalink to comment#

      Das ist ein Layout-Problem, kein Textausrichtungsproblem. Und es ist kein Einzeiler, aber Flexbox erledigt das sehr einfach.

    • Josiah
      Permalink to comment#

      Wenn Sie die Höhe des Containers kennen, der den Text enthält, und der Text nur eine Zeile hat, ist dies sehr einfach zu bewerkstelligen. Setzen Sie die Zeilenhöhe auf die Höhe des Elements.

      Zugegebenermaßen ist das ein sehr spezifischer Anwendungsfall und deckt die meisten Fälle nicht ab. Wenn Sie die Containerhöhe nicht kennen und/oder der Text mehrzeilig ist, können Sie position: relative; top: 50%; transform: translateY(-50%); verwenden.

      Siehe meine Demo, die beide Methoden zeigt. Ich stimme zu, dass text-align: center center schön wäre. Es würde jedoch erfordern, eine vorhandene Regel zu ändern, um sie zu einer Kurzschreibweise zu machen. Anstelle von text-align bräuchten wir text-align-vertical und text-align-horizontal, und einfach text-align würde zur Kurzschreibweise werden, und wenn nur ein Wert übergeben würde, würde er auf beide angewendet? Wäre text-align: center dasselbe wie text-align: center center? Das wäre problematisch. Denn wenn Sie text-align: left schreiben würden, würde das versuchen, "left" auf text-align-vertical anzuwenden?

      Die Idee ist gut, aber ich bin mir nicht sicher, wie sie umgesetzt werden würde.

  4. Luca
    Permalink to comment#

    Ich denke, wenn die gleichen Dinge von vielen Leuten und seit 2013 immer wieder gewünscht werden ... vielleicht sollte sich das W3 fragen, ob „werden wir die Bedürfnisse der Entwickler erfüllen?“ und einige Meinungen überdenken...
    Persönlich würde ich mir auf jeden Fall Elternelement-Selektoren und Container-Queries wünschen... vor allem.

    • Gibran Malheiros
      Permalink to comment#

      Einige Vorschläge haben riesige Herausforderungen, nehmen Sie Container-Queries zum Beispiel, eine solche Funktion könnte leicht eine Endlosschleife von Neuzuständen auslösen, wenn zwei Elemente auf Änderungen auf eine Weise reagieren, die das andere Element zum Ändern auslöst und so weiter, wie Eltern und Kind oder zwei Geschwister.

      Dann der Elternelement-Selektor, für den ich keinen offiziellen Vorschlag finden konnte, aber die meisten Artikel schlagen eine Syntax mit < oder :parent vor. Es ist nicht einfach, so etwas einzuführen, stellen Sie sich Folgendes vor: a < img, um Anker auszuwählen, die ein Bildkind haben, aber dann schreibt jemand: a < img + span oder a < img > span, das kann wahnsinnig machen, es widerspricht sogar dem „Cascade“-Teil von CSS.

  5. Iss dein Geist
    Permalink to comment#

    Elternelement-Selektoren stehen ganz oben auf meiner Liste, etwas wie

    .my-child-element:parent(.my-parent-element) {
    // Style the parent
}
  6. Ana Tudor
    Permalink to comment#

    Verläufe animieren, ohne auf background-position oder background-size zurückzugreifen. Das haben wir seit mehr als einem halben Jahrzehnt in IE10+ und Edge, aber niemand schien es je bemerkt zu haben und jetzt wird es sowieso alles fallen gelassen.

    Ach ja, es ist nicht so, dass Chrome jetzt nicht etwas noch Besseres hätte – die Möglichkeit, CSS-Variablen zu animieren, was bedeutet, dass wir verschiedene Komponenten eines Verlaufs unterschiedlich animieren können.

    Betrachten wir zum Beispiel den folgenden Verlauf

    linear-gradient(var(--ang), var(--col-0) var(--pos-0), var(--col-1))

    Hier können wir eine andere Animation (anderer Satz von Keyframes, andere Dauer, andere Timing-Funktion, andere Verzögerung) für jede CSS-Variable haben, während das Animieren des Verlaufs selbst (wie heute in Edge möglich) bedeutet, alles auf die gleiche Weise zu animieren.

    Natürlich ist das alles noch hinter einem Flag (Experimental Web Platform features aus chrome://flags), das anscheinend schwer zu finden ist, gemessen daran, wie oft mir gesagt wird, dass meine Houdini-Demos nicht funktionieren. Für alle, die mehr wissen möchten, habe ich einen Artikel darüber hier geschrieben.

    clip-path: path(). Es wurde bereits in Firefox implementiert. Leise, ohne ein Wort darüber zu sagen. Es benötigt layout.css.clip-path-path.enabled auf true in about:config, um zu funktionieren.

    Meine ehrliche Meinung? Meh. Und hier ist der Grund: Der Wert in path() ist ein Zeichenkettenwert, der, genau wie der Wert des d-Attributs eines SVG-Pfades, nur einheitenlose Werte akzeptiert. Was bedeuten diese Werte in CSS? Pixel! Die Koordinaten, die für diesen Pfad verwendet werden, sind also immer Pixelkoordinaten relativ zur oberen linken Ecke des ausgeschnittenen Elements. Hier ein Test. Muss in Firefox mit dem oben genannten Flag auf true geöffnet werden.

    Möchten Sie auf diese Weise etwas Responsives? Tut mir leid, nein. Eine bessere Option ist es, ein Kind-SVG zu verwenden und dessen d aus dem CSS zu modifizieren. Funktioniert nur in Chrome und spiegelt nicht die neuesten Spezifikationsänderungen wider, aber zumindest ist es responsiv! Grundlegendes Beispiel und etwas Interessanteres.

    Nützliche mathematische Funktionen wie floor(), abs(), pow(), trigonometrische Funktionen. Dies ist eine, die ich persönlich oft brauche. Aus dem Stegreif, einige Anwendungsfälle

    1. Modulo. Ich habe vielleicht eine Reihe ähnlicher Elemente, die ich, sagen wir mal, auf einem Kreis positioniere (denken Sie an so etwas. Dies geschieht durch Setzen einer Index-Benutzereigenschaft --i auf jedem von ihnen und einer weiteren Benutzereigenschaft --n, die die Gesamtzahl der Elemente auf ihrem Elternelement darstellt, und dann durch Setzen der Element-transform auf rotate(calc(var(--i)*1turn/var(--n))) translate($r). Und jetzt nehmen wir an, ich möchte jedes zweite Element schwarz machen. Derzeit kann ich das mit etwas wie :nth-child(odd) { background: black } tun, aber wenn ich Modulo verwenden könnte, könnte ich den background *nur einmal* (!!!) mit background: hsl(348, 83%, calc((var(--i)%2)*47%)) setzen. Demo.

    2. abs(). Ausgehend vom gleichen Beispiel von auf einem Kreis verteilten Elementen, sagen wir, ich möchte, dass ihre opacity für die erste Hälfte des Kreises linear ansteigt und für die zweite Hälfte linear abfällt. Mit abs() könnten wir opacity: calc(1 - abs(2*(var(--i) - .5*var(--n))/var(--n))) haben, aber jetzt müssen wir das Vorzeichen für die Hälfte der Elemente ändern und das bedeutet, die Anzahl der Elemente in einem Selektor wie :nth-of-type(-n + 6) fest zu codieren.

    3. pow(). Sagen wir, ich möchte eine sekundäre Drehung haben. Oder sagen wir, ich möchte eine kubische Erhöhung der height von Elementen.

    4. Trigonometrische Funktionen. Mein primärer Anwendungsfall ist die Synchronisation von Rotationswinkeln und Skalierungsfaktoren oder Translationsdistanzen, wenn ich mehrere Elemente animiere, sodass sich Ecken/Kanten während der gesamten Animation entsprechen. In dieser Demo muss ich den Rotationswinkel der hellgelben Quadrate und den Post-Skew-Skalierungsfaktor der orangen Quadrate synchronisieren. Dies wird erreicht, indem die trigonometrischen Berechnungen in JS durchgeführt und dann die Werte an die Benutzereigenschaften gesetzt werden, die in der transform verwendet werden. Ich könnte auch versuchen, es mit verschiedenen Timing-Funktionen für Rotationswinkel und Skalierungsfaktoren oder Translationsdistanzen zu simulieren, wie ich es in dieser Demo getan habe, aber das ist nur das Festcodieren des cubic-bezier() für jeden Fall.

  7. Claudio Jesiaj
    Permalink to comment#

    Ich denke, „Cascade“ Style Sheet hat ein großes Problem mit dem „Cascade“-Konzept.
    d.h.

    div {.styel1.};
div p {.styel2.};
div p .someclass {.styel3.};
div p .someclass:hover {.styel4.};

    warum nicht auf „Cascade“ schreiben? Etwas wie

     div [
      {.styel1.}
      p [
          {.styel2.}
          .someclass [
               {.styel3.}
               :hover {.styel4.}
          ]
       ]
 ]

    Pro
    * Sie sehen die Kaskade wirklich an einem Ort.
    * Es ist einfach zu ändern und zu debuggen.
    * Es ist kompakter und reduziert die Dateigröße.

    • Gibran Malheiros
      Permalink to comment#

      Das ist mit Präprozessoren wie SASS bereits möglich, aber es wäre schön, es nativ in reinem CSS zu haben.

  8. Shalanah Dawson
    Permalink to comment#

    Führend im Web, führend im Web!!! :)

    Genug mit line-height, es ist ernsthaft schrecklich.

    Führung würde einen vertikalen Rhythmus (wenn Sie ihn wünschen) ermöglichen und, was noch wichtiger ist, den Abgleich von Druck und Web oder Web und Druck nahtloser zu gestalten (oder das gesamte Spektrum von Druck zu Web zu Druck).

    Ich habe hart daran gearbeitet, einen Weg zu finden, Führung im Web zu schaffen, aber es hätte nicht schwer sein dürfen. (https://github.com/shalanah/baseline).

    Außerdem ein Lob für konsistentes White-Space-Wrapping für Text über Browser hinweg.

  9. Gibran Malheiros
    Permalink to comment#

    Ist der „vorherige Geschwister-Selektor“ das Gegenteil des „benachbarten Geschwister-Kombinators“?
    Wenn ja, setze ich alle meine Münzen darauf!

  10. Philipp
    Permalink to comment#

    CSS-Blendmodi (wie multiplizieren, Farbton und überlagern) würden, wenn sie Mainstream und unterstützt würden, die Dinge für Designer, die das visuelle Spektrum erweitern wollen, erheblich verbessern.

  11. Thibaut Allender
    Permalink to comment#

    Seitenverhältnisse kommen wahrscheinlich auch. Es gibt zumindest einen Entwurf
    https://drafts.csswg.org/css-sizing-4/#ratios

  12. lamka02sk
    Permalink to comment#

    Ich hätte gerne etwas, um zu überprüfen, ob sich ein Element in einer Sticky-Position befindet. Zum Beispiel einen Selektor wie :sticky.

Dieser Kommentarbereich ist geschlossen. Wenn Sie wichtige Informationen teilen möchten, kontaktieren Sie uns bitte.

© .