CSS „Dekorationen“

Ein Leser schrieb mir neulich und fragte nach diesem CSS-Schnipsel, auf den er in Wikipedias Common.css gestoßen war.

.mw-collapsible-leftside-toggle .mw-collapsible-toggle {
  /* @noflip */
  float: left;
  /* @noflip */
  text-align: left;
}

Was hat es mit diesem @noflip auf sich? So nennen sie eine "CSS-Dekoration", und ich denke, das ist ein treffender Begriff dafür. Im Grunde sind es nur CSS-Kommentare, aber offensichtlich passiert hier mehr, denn diese sehen aus wie programmatische Anweisungen, die eine Funktionalität haben.

Ohne eine Art CSS-Verarbeitung werden diese Kommentare nichts bewirken. Aus dem Stegreif bin ich mir nicht zu 100% sicher, welcher CSS-Prozessor hier verwendet wird, aber ich denke, es ist vernünftig anzunehmen, dass er bei der Ausführung ein "Rechts-nach-links"-Stylesheet erzeugt, das float: left in float: right und text-align: left in text-align: right umwandelt.

Ich denke, es lohnt sich zu erwähnen, dass es heutzutage wahrscheinlich klüger ist, das nativ unterstützte text-align: start zu verwenden, damit Sie nicht auf CSS-Verarbeitung und alternative Stylesheets angewiesen sind. Ich glaube nicht, dass es ein "logisches" Äquivalent für float gibt, leider, aber es gibt vielleicht eine Möglichkeit, das Layout neu zu gestalten (mit Grid?), sodass das "Umkehren" unnötig wird. Allerdings ist das Umschließen von Elementen um ein Element herum ziemlich einzigartig für float, daher gibt es hier vielleicht keine einfache Alternative.

Bei einer kleinen Recherche scheint die Quelle von /* @noflip */ CSSJanus zu sein.

Das Repo deutet darauf hin, dass es von Wikimedia stammt, also denke ich, das ist geklärt. Es sieht so aus, als ob die Technologie ihren Weg zu anderen Dingen gefunden hat, wie ein Plugin für styled-components, ein Plugin für Sublime Text, und Salesforce hat es sogar in seinem Designsystem verwendet.

Es gibt einen weiteren Prozessor namens css-flip (archiviert, von Twitter), der anscheinend genau dasselbe tat, und die README zeigt, wie viele Eigenschaften dies benötigen könnten

background-position, background-position-x, border-bottom-left-radius, border-bottom-right-radius, border-color, border-left, border-left-color, border-left-style, border-left-width, border-radius, border-right, border-right-color, border-right-style, border-right-width, border-style, border-top-left-radius, border-top-right-radius, border-width, box-shadow, clear, direction, float, left, margin, margin-left, margin-right, padding, padding-left, padding-right, right, text-align transition transition-property

Es hätte mich sehr überrascht, wenn es dafür kein PostCSS-Plugin gäbe, und eine kleine Suche ergab postcss-rtl, aber leider wurde es vom Besitzer ebenfalls veraltet erklärt.

---

Das alles begann jedoch mit der Rede von "CSS-Dekorationen", die wir, denke ich, als "CSS-Kommentare mit Prozessor-Direktiven darin" definieren. Das, das ich persönlich am häufigsten verwende, ist dieses

/* prettier-ignore */
.cool {
  linear-gradient(
    to left,
    pink
    pink 20%
    red  20%
    red
  )
}

Ich liebe Prettier, aber wenn ich mir die Mühe mache, ein wenig CSS selbst für die Lesbarkeit zu formatieren, füge ich auf der vorherigen Zeile /* prettier-ignore */ ein, damit es diese nicht verändert.

Verwenden Sie irgendwelche CSS-Dekorationen in Ihren Codebasen?