Un lector me escribió el otro día preguntándome sobre este fragmento de CSS que encontraron en Common.css de Wikipedia:
.mw-collapsible-leftside-toggle .mw-collapsible-toggle {
/* @noflip */
float: left;
/* @noflip */
text-align: left;
}Que es eso @noflip ¿negocio? Eso es lo que llaman un “decorador de CSS” y creo que es un buen término para ello. En realidad, son solo comentarios CSS, pero claramente hay más cosas aquí, ya que parecen declaraciones programáticas que tienen funcionalidad.
Sin algún tipo de procesamiento CSS, esos comentarios no harán nada. En mi cabeza, no estoy 100% seguro de qué procesador CSS está en uso aquí, pero creo que es razonable suponer que cuando se ejecuta, produce una hoja de estilo de “derecha a izquierda” que cambia float: left en float: right y text-align: left en text-align: right.
Creo que vale la pena señalar que probablemente sea más inteligente en estos días usar el soporte nativo text-align: start para que no tenga que confiar en el procesamiento de CSS y hojas de estilo alternativas para ayudarlo. No creo que haya un equivalente “lógico” para float, desafortunadamente, pero puede haber una manera de refactorizar el diseño (¿usando la cuadrícula?) De modo que “voltear” sea innecesario. Aunque, envolver elementos alrededor de un elemento es bastante exclusivo de float, por lo que es posible que no haya una alternativa simple aquí.
Buscando un poco, parece que la fuente de /* @noflip */ es CSS Janus.
El repositorio sugiere que está hecho por Wikimedia, así que creo que es un caso resuelto. Parece que la tecnología se ha abierto camino hacia otras cosas, como un complemento para componentes con estilo, un complemento para Sublime Text, y Salesforce incluso lo usó en su sistema de diseño.
Hay otro procesador llamado css-flip (archivado, de Twitter) que parece que hizo exactamente lo mismo, y el LÉAME muestra cuántas propiedades podrían necesitar esto:
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
Me habría sorprendido enormemente si no hubiera un complemento PostCSS para esto, y una pequeña búsqueda arrojó postcss-rtl, pero, por desgracia, también ha sido obsoleto por el propietario.
Sin embargo, todo esto comenzó hablando de “decoradores de CSS”, que supongo que estamos definiendo como “comentarios de CSS que tienen directivas de procesador”. El que personalmente uso más es este:
/* prettier-ignore */
.cool {
linear-gradient(
to left,
pink
pink 20%
red 20%
red
)
}Me encanta Prettier, pero si me tomo el tiempo de formatear un poco de CSS para facilitar la lectura, tiraré un /* prettier-ignore */ en la línea anterior para que no se meta con ella.
¿Utiliza algún decorador CSS en sus bases de código?