Sfumato browser support and compatibility with other tooling.
There are various concerns regarding compatibility, from web browsers that support the generated CSS, to how well Sfumato can scan source files in various programming languages and frameworks.
Sfumato is built with high performance 64-bit .NET C# code, and works great in Windows, macOS, and Linux versions that support the .NET runtime. You just need to have the .NET runtime installed, which is a simple process outlined in the installation section.
For ASP.NET based projects, the Sfumato Core Nuget package can be used instead of the CLI tool. This package allows you to build or watch for changes as the project is running. You just need to be using a compatible .NET runtime and you're good to go. See the project setup and usage section for details.
Sfumato was built to support modern web browsers, and the core features of the framework depend on these browser versions:
Chrome 111 (released March 2023)
Safari 16.4 (released March 2023)
Firefox 128 (released July 2024)
Sfumato also includes support for some newer CSS features like @starting-style, text-wrap: balance, and text-wrap: pretty that have limited browser support. As is true for all Sfumato features, if your target web browsers don't support a feature, don't use it.
If you're unsure about the support for a modern platform feature, visit https://caniuse.com/ to see if your target web browser is listed.
Sfumato is a full-featured CSS build tool designed for a specific workflow, and is not suitable for use with other CSS preprocessors like Sass, Less, or Stylus.
Since Sfumato is designed for modern browsers, you don't really need a preprocessor for things like nesting or variables. And Sfumato will bundle your imports, add vendor prefixes, etc.
Sfumato is all you need to style your web front-end.
Sfumato automatically bundles other CSS files you include with @import, without the need for a separate preprocessing tool.
In the example above the CSS code from framework.css is merged into your CSS and processed with the rest for Sfumato features. Because it specifies the components layer its styles can be overridden by utility classes.
The styles from buttons.css cannot be overridden by utility classes unless you append them with the important flag, like text-xl!.
All modern browsers support CSS custom properties (variables) without the need for a preprocessor. Internally, Sfumato relies heavily on CSS custom properties, so if you can use Sfumato in your project, you can use them too.
The web browsers supported by Sfumato also support CSS class nesting, so there's no need to use a preprocessor for that feature.
Note: Using nesting in your custom CSS works in the browsers supported by Sfumato.
When it comes to scanning code files for utility classes, Sfumato generally supports most languages and frameworks. There are some minor caveats, but broadly speaking it should just work. Below are some points to note about specific platforms.
If you're using Sfumato with these tools, for the best experience we recommend avoiding <style> blocks in your components. Just use utility classes in the markup, following the Sfumato pattern.
The Razor syntax used by ASP.NET, Blazor, and Razor Pages projects includes the use of the '@' sign as an escape code for blocks of C# code. You must use two '@@' in sequence to output a single character as plain text. Sfumato supports this, so in your Razor files (*.razor, *.cshtml, etc.) you can double the @ symbols in utility classes, like those used for container styles.
