CSS 'decorations'

This article discusses "CSS decorators"—CSS comments containing processor directives—and their use in handling right-to-left (RTL) languages and code formatting. Let's rephrase it for clarity and improved flow.

The article begins by examining a snippet of CSS from Wikipedia's Common.css:

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

The author questions the purpose of /* @noflip */, identifying it as a CSS decorator, essentially a comment with programmatic functionality. This functionality only manifests when processed by a tool like CSSJanus (used by Wikimedia), which generates RTL stylesheets. In this case, float: left becomes float: right, and text-align: left becomes text-align: right.

The author suggests that using text-align: start is a more modern and robust approach for handling text alignment in RTL contexts, eliminating the need for CSS processing. While there's no direct equivalent for float, layout refactoring (potentially using CSS Grid) might offer a solution.

The article then explores the history of CSS processors for RTL conversion, mentioning CSSJanus, the now-archived css-flip, and the deprecated postcss-rtl. These tools highlight the extensive list of CSS properties requiring adjustments for RTL support (including float, text-align, margin, padding, and many more).

The author concludes by introducing another common CSS decorator: /* prettier-ignore */. This directive prevents the Prettier code formatter from altering manually formatted CSS, maintaining the author's preferred style. The article ends by asking readers about their use of CSS decorators in their projects.

The above is the detailed content of CSS 'decorations'. For more information, please follow other related articles on the PHP Chinese website!