What is doiuse?
The doiuse npm package is a tool for checking your CSS against browser support. It helps developers ensure that their CSS is compatible with the browsers they intend to support by identifying unsupported or partially supported CSS features.
What are doiuse's main functionalities?
Check CSS for browser support
This feature allows you to check your CSS code against a list of browsers to see if any features are not supported. The code sample demonstrates how to use doiuse with PostCSS to process a CSS string and log any warnings about unsupported features.
const doiuse = require('doiuse');
const postcss = require('postcss');
const css = 'a { display: flex; }';
postcss([doiuse({ browsers: ['> 1%', 'last 2 versions'] })])
.process(css)
.then(result => {
result.warnings().forEach(warn => {
console.warn(warn.toString());
});
});
Custom browser support configuration
This feature allows you to specify custom browser support configurations. The code sample shows how to configure doiuse to check CSS against Internet Explorer 10 and the last two versions of all other browsers.
const doiuse = require('doiuse');
const postcss = require('postcss');
const css = 'a { display: grid; }';
postcss([doiuse({ browsers: ['ie >= 10', 'last 2 versions'] })])
.process(css)
.then(result => {
result.warnings().forEach(warn => {
console.warn(warn.toString());
});
});
Other packages similar to doiuse
caniuse-lite
caniuse-lite is a smaller, more compact version of the caniuse database that provides data on browser support for various web technologies. Unlike doiuse, caniuse-lite does not directly check your CSS but provides the data that can be used by other tools to perform such checks.
autoprefixer
Autoprefixer is a PostCSS plugin that parses your CSS and adds vendor prefixes to CSS rules using values from the Can I Use database. While doiuse checks for unsupported features, Autoprefixer automatically adds necessary prefixes to ensure compatibility with specified browsers.
stylelint
Stylelint is a powerful CSS linter that helps you avoid errors and enforce consistent conventions in your stylesheets. It can be extended with plugins to check for browser compatibility issues, similar to doiuse, but offers a broader range of linting capabilities.
doiuse
Lint CSS for browser support against caniuse database.
NOTE: This is a very, very initial release. Feedback or contributions
are quite welcome!
TL;DR
var postcss = require('postcss');
var doiuse = require('doiuse');
postcss(doiuse({
browsers:['ie >= 6', '> 1%'],
onUnsupportedFeatureUse: function(usageInfo) {
var versions = usageInfo.featureData.missing;
var browsers = [];
for(browser in versions) {
browsers.push(
browser + ' (' + Object.keys(versions[browser]).join(',') + ')'
);
}
var loc = usageInfo.usage.source;
console.log(
loc.id + ' line ' + loc.start.line + " : " +
usageInfo.feature + ' not supported by ' + browsers.join(',')
);
}
})).process("a { background-size: cover; }")
How it works
In particular, the approach to detecting features usage is currently quite naive.
Refer to the data in /src/data/features.coffee.
- If a feature in that dataset only specifies
properties
, we just use those
properties for substring matches against the properties used in the input CSS. - If a feature also specifies
values
, then we also require that the associated
value matches one of those values (again, with a substring match).
TODO:
API Details:
postcss(doiuse(opts)).process(css)
, where opts
is:
{
browsers: ['ie >= 8', '> 1%']
onUnsupportedFeatureUse: function(usageInfo) { }
}
And usageInfo
looks like this:
{
feature: 'css-gradients',
featureData:{
missing: {
ie: { '8': 'n' }
},
caniuseData: {
},
usage:
}
Called once for each usage of each css feature not supported by the selected
browsers.
License
MIT
NOTE: The files in test/cases are from autoprefixer-core, Copyright 2013 Andrey Sitnik andrey@sitnik.ru. Please see https://github.com/postcss/autoprefixer-core.