2013 CSS-Wunschliste

Ich bin ziemlich zufrieden mit CSS. Ich weiß, es ist üblich, sich über CSS zu beschweren und wie es nie dazu gedacht war, Webseiten so zu bauen, wie wir es heute tun, und dass es für viele Aufgaben ungeeignet ist und bla bla bla. Aber ich weiß nicht. Ich arbeite jeden Tag damit und habe das Gefühl, dass es die Arbeit ziemlich gut erledigt. Vielleicht habe ich nicht die schicken Gedanken großer Denker, die alternative Universen vorhersagen können, in denen perfektere Sprachen existieren. Oder so.

Wie Hakim sagt

Wenn man bedenkt, dass CSS zum Stylen von Textdokumenten entwickelt wurde, ist es ziemlich beeindruckend, was wir heute damit machen können.

— Hakim El Hattab (@hakimel) 24. Januar 2013

Was hält also 2013 für CSS bereit? Tab Atkins arbeitet direkt an den CSS-Spezifikationen und hat seinen eigenen Plan für das Jahr dargelegt. Das klingt alles gut für mich. Besonders gut gefällt mir der Fokus auf Flexbox und Grid. Diese werden sehr mächtige Layout-Werkzeuge bieten, die uns so lange dienen werden, wie das Web 2D ist. Und der Fokus auf natives @extend, was erstaunlich wäre.

Ehrlich gesagt, vertraue ich Tabs eigenen Instinkten, wie CSS weiterentwickelt werden muss, mehr als meinen eigenen, da er so involviert ist und ein Systemverständnis hat. Man kann nicht einfach alles hineinstopfen, was irgendein Autor sagt, dass er es will, sonst endet man in einem Chaos. Nun, trotzdem, als Autor, hier sind einige Dinge, die ich gerne dort hineingestopft hätte.

1. Ich möchte ein Element auswählen können, basierend darauf, ob es einen anderen bestimmten Selektor enthält

Zum Beispiel, wähle ein Blockquote aus, wenn es einen Absatz enthält.

blockquote::contains("p") {
  /* Not like this, since it's not a pseudo element, but something like it */
}

Ich habe das Gefühl, dass das ständig vorkommt und es seltsam erscheint, dass es nicht möglich ist. Das ist im gleichen Sinne wie der Elternselektor, den ich immer noch möchte und der eine ganze Dose Wurm ist.

2. Ich möchte ein Element auswählen können, basierend auf dem Inhalt, den es enthält

Inhalt, also buchstäblich Textinhalt, egal ob er in einem anderen Element steht oder nicht. Wie

h1::match-string("coyier") {
  /* Not this again, since it's not a pseudo element, but something like it */
}

Ich finde, ich sollte Elemente ansprechen können, wenn sie meinen Namen enthalten, wenn ich möchte. Oder stellen Sie sich eine Seite wie Twitter vor. Sie sollten in der Lage sein, einen Tweet, der ein bestimmtes Wort enthält, auf eine bestimmte Weise zu gestalten, wenn Sie möchten. Oder Suchergebnisse.

3. Ich möchte mehrere Pseudoelemente

Wie in

.speech-bubble::before(2) {
  /* Or ::before::before or something, smart people can decide */
}

Wie wir hier diskutiert haben, ist es eine gute Idee. Web Components / Shadow DOM ist cool, aber es ist zu komplex für etwas so Einfaches wie das Bedürfnis nach einem zusätzlichen bedeutungslosen Element, um es anzuhängen und ein visuelles Design-Detail zu vervollständigen.

4. Ich möchte etwas zu height: auto; animieren/übergängen können

Wie in

.flash-message {
  height: 0;
  opacity: 0;
  transition: all 0.2s ease;
}
.flash-message.loaded {
  height: auto;  /* nope */
  opacity: 1;    /* yep */
}

Der Browser könnte die Höhe eines Elements erkennen, wenn es height: auto; (anstatt dessen aktuellen Wert) darauf hat, oder? Also herausfinden und zu diesem Wert animieren.

5. Ich möchte ein gutes Stück vom Zeug von Sass haben

In Reihenfolge, wie großartig es wäre

1. @extend – d.h. dieser Selektor erbt das Zeug von diesem Selektor
2. @mixin / @include – d.h. wiederverwendbare/veränderbare Blöcke
3. Verschachtelung – d.h. .modul { hintergrund: schwarz; h2 { farbe: weiß; } }

Ich würde die Grenze bei Dingen wie Schleifen ziehen, die CSS zu weit in die Programmierung und sofortige Lesbarkeit treiben. Ich bin nicht einmal ein großer Fan von Variablen als native Funktion, obwohl ich denke, dass es dafür zu spät ist. Die Farbfunktionen wären süß, wenn sie auf einfache, offensichtliche, lesbare Weise gemacht werden könnten.

6. Ich möchte ::nth-letter, ::nth-word, etc. haben

::nth-everything, wirklich. Buchstaben, Wörter, Zeilen und mit all ihren verwandten Selektoren. Für ausgefallene Sachen wie diese

article.poem p:first-child::nth-line(-n+2) {
  font-variant-caps: small-caps;
  color: red;
}

Ich verstehe, dass der größte Blocker hier Sprachen sind. In einigen Sprachen repräsentiert ein Zeichen ein ganzes Wort, und das macht diese Konzepte unscharf. Mir scheint, dass dies jedoch überwunden werden könnte.

Der größte aller Wünsche…

Wäre, dass alle wichtigen Browser, auch mobile, eine schicke automatische Aktualisierung integriert hätten, die den Browser ohne jegliche Benutzerintervention aktualisiert. Wie Google Chrome Desktop. In fünf Jahren wäre es schön, wenn wir gar nicht mehr über Browserversionen sprechen würden. Wir würden sie nur noch beim Namen nennen, weil offensichtlich jeder, der sie benutzt, die neueste Version hat.