A reader wrote to me the other day asking about this bit of CSS they came across in Wikipedia’s Common.css:
.mw-collapsible-leftside-toggle .mw-collapsible-toggle {
/* @noflip */
float: left;
/* @noflip */
text-align: left;
}
What’s that @noflip
business? That’s what they are calling a “CSS decorator” and I think that’s a fine term for it. Really they are just CSS comments, but clearly there is more going on here as those look like programmatic statements that have functionality.
Without some kind of CSS processing, those comments will do nothing. Off the top of my head, I’m not 100% sure what CSS processor is in use here, but I think it’s reasonable to assume that when it runs, it produces a “right-to-left” stylesheet that turns float: left
into float: right
and text-align: left
into text-align: right
.
I think it’s worth noting that it’s probably smarter these days to use the natively supported text-align: start
so that you don’t have to rely on CSS processing and alternate stylesheets to help you. I don’t think there is a “logical” equivalent for float
, unfortunately, but there may be a way to refactor the layout (using grid?) such that “flipping” is unnecessary. Although, wrapping elements around an element is pretty unique to float
, so there might not be a simple alternative here.
Searching around a little, it seems like the source of /* @noflip */
is CSSJanus.

The repo suggests it’s made by Wikimedia, so I think that’s a solved case. It looks like the tech has made it’s way to other things, like a plugin for styled-components, a plugin for Sublime Text, and Salesforce even used it in their design system.
There is another processor called css-flip (archived, from Twitter) that looks like it did the exact same thing, and the README shows just how many properties might need this:
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
It would have hugely surprised me if there wasn’t a PostCSS plugin for this, and a little searching turned up postcss-rtl, but alas, it’s also been deprecated by the owner.
This all started with talking about “CSS decorators” though, which I guess we’re defining as “CSS comments that have processor directives in them.” The one I personally use the most is this:
/* prettier-ignore */
.cool {
linear-gradient(
to left,
pink
pink 20%
red 20%
red
)
}
I love Prettier, but if I take the time to format a bit of CSS myself for readability, I’ll chuck a /* prettier-ignore */
on the previous line so it doesn’t mess with it.
Do you use any CSS decorators in your codebases?
C’est cool
I really expected Chrome to support inline-start and inline-end for Float by now. But that doesn’t even seem to be on their to-dos, which is odd as there are multiple efforts to add logical CSS functionality. I wonder if this is just an oversight or if there is something special about Float I don’t realize.
I use:
This generates IE-specific syntax for CSS Grid, when I’m arranging grids with
grid-template-areas
. See https://github.com/postcss/autoprefixer/blob/main/README.md#does-autoprefixer-polyfill-grid-layout-for-ie.With regards RTL support, I use these 2 PostCSS plugins, allowing me to author CSS logical properties directly in my CSS:
float: left;
andfloat: right;
would be the noflip versions andfloat: inline-start;
andfloat: inline-end;
the logical versions (which, in this case, do not seem to be wanted).I can’t remember to have had the need for them in CSS. My first idea would have been to call them preprocessor directives, though. It could be interesting to write CSS decorators in another language to implement things such as @noflip, but I can’t see many use cases nowadays. Before custom properties, @supports and logical properties they might have had more use cases.
I’d definitely use
/* ask boss for new computer */
Which animates a flickering background in IE to make it look like the monitor/PC is dying, and
/* fix safari focus bug */
To automatically bump a 13 year old Safari bug as shown here
I think it’s directive for some backend css interpreter/compiler for right to left written texts (like Arabic etc) to keep some layout elements always at same place when there’s