css-vendor

What is css-vendor?

The css-vendor npm package is designed to help developers handle vendor prefixes in CSS. It provides utilities to detect the correct vendor prefix for a given CSS property or value, ensuring compatibility across different browsers.

What are css-vendor's main functionalities?

Detecting Vendor Prefix for a Property

This feature allows you to detect the correct vendor prefix for a given CSS property. The code sample demonstrates how to get the vendor-prefixed version of the 'transform' property.

const vendor = require('css-vendor');
const property = 'transform';
const vendorProperty = vendor.prefix.css + property;
console.log(vendorProperty); // Outputs: '-webkit-transform' or other vendor prefix based on the browser

Detecting Vendor Prefix for a Value

This feature allows you to detect the correct vendor prefix for a given CSS value. The code sample demonstrates how to get the vendor-prefixed version of the 'flex' value.

const vendor = require('css-vendor');
const value = 'flex';
const vendorValue = vendor.prefix.css + value;
console.log(vendorValue); // Outputs: '-webkit-flex' or other vendor prefix based on the browser

Checking for Vendor Support

This feature allows you to check if a given CSS property is supported by the browser with the correct vendor prefix. The code sample demonstrates how to check support for the 'transform' property.

const vendor = require('css-vendor');
const property = 'transform';
const isSupported = vendor.supported(property);
console.log(isSupported); // Outputs: true or false based on browser support

Other packages similar to css-vendor

autoprefixer

Autoprefixer is a PostCSS plugin that parses your CSS and adds vendor prefixes to CSS rules using values from the Can I Use website. It is more comprehensive than css-vendor as it automatically adds prefixes to your entire stylesheet based on the target browsers you specify.

prefixfree

Prefixfree is a JavaScript library that allows you to write your CSS without vendor prefixes and it will add them for you at runtime. Unlike css-vendor, which is more of a utility for detecting prefixes, prefixfree modifies your CSS on the fly.

stylelint

Stylelint is a modern linter that helps you avoid errors and enforce conventions in your styles. While it is not specifically focused on vendor prefixes, it can be configured to check for proper use of vendor prefixes among other CSS best practices.

README

CSS vendor prefix detection and property feature testing.

Vendor prefixes

console.log(cssVendor.prefix.js) // e.g. WebkitTransform

console.log(cssVendor.prefix.css) // e.g. -webkit-transform

Property support feature test

cssVendor.supportedProperty(prop)

Test if property is supported, returns false if not. Returns string if supported. May add a vendor prefix if needed.

console.log(cssVendor.supportedProperty('animation')) // e.g. -webkit-animation

Value support feature test

cssVendor.supportedValue(prop, value)

Test if value is supported, returns false if not. Returns string if supported. May add a vendor prefix if needed.

console.log(cssVendor.supportedValue('display', 'flex')) // e.g. -webkit-flex

Run tests

yarn
yarn test

License

MIT