Parse CSS and add vendor prefixes to CSS rules using values from Can I Use.
JavaScript C# CSS
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.nuget
Autoprefixer.Tests
Autoprefixer
BundleTransformer.Autoprefixer
.gitignore
Autoprefixer.sln
LICENSE
README.md

README.md

DEPRECATED

This package is no longer maintained, as there is now an official BundleTransformer packages that does the same. Please see https://www.nuget.org/packages/BundleTransformer.Autoprefixer

Autoprefixer for .NET

This is a .NET adaptation of Autoprefixer, a great Javascript library by Andrey Sitnik.

Parse CSS and add vendor prefixes to CSS rules using values from Can I Use.

Write your CSS rules without vendor prefixes (in fact, forget about them entirely):

:fullscreen a {
    transition: transform 1s
}

Process your CSS by Autoprefixer:

using (var autoprefixer = new Autoprefixer.Compiler(() => new V8JsEngine()) {
	var prefixed = autoprefixer.Prefix(css, 
	   new BrowserSpecification()
            .BrowserVersionGreaterThan(Browsers.Explorer, 7)
			.WithMinimumUsagePercentage(0.01)
	);
}

It will use the data on current browser popularity and properties support to apply prefixes for you:

:-webkit-full-screen a {
    -webkit-transition: -webkit-transform 1s;
    transition: transform 1s
}
:-moz-full-screen a {
    transition: transform 1s
}
:-ms-fullscreen a {
    transition: transform 1s
}
:fullscreen a {
    -webkit-transition: -webkit-transform 1s;
    transition: transform 1s
}

Installation

You can use it independently, or with BundleTransformer.

Autoprefixer is installed via Nuget.

Independent installation

> Install-Package Autoprefixer

Everything you need is in the Autoprefixer namespace (see example above). You'll also need to pick a Javascript engine to use, we recommend the JavaScriptEngineSwitcher.V8 Nuget package.

BundleTransformer

Install-Package BundleTransformer.Autoprefixer.Unofficial

This is an unofficial translator for BundleTransformer. To configure it, make the following changes to your web.config (assuming you already have BundleTransformer set up correctly):

<configuration>
  <configSections>
    <sectionGroup name="bundleTransformer">
      <section name="core" type="BundleTransformer.Core.Configuration.CoreSettings, BundleTransformer.Core"/>
	  <!-- add this line: -->
      <section name="autoprefixer" type="BundleTransformer.Autoprefixer.Configuration.AutoprefixerSettings, BundleTransformer.Autoprefixer"/>
    </sectionGroup>
    <sectionGroup name="jsEngineSwitcher">
      <!-- you probably have this -->
      <section name="core" type="JavaScriptEngineSwitcher.Core.Configuration.CoreConfiguration, JavaScriptEngineSwitcher.Core"/>
    </sectionGroup>
  </configSections>

  <bundleTransformer xmlns="http://tempuri.org/BundleTransformer.Configuration.xsd">
    <core>
      <css>
        <translators>
		  <!-- add this line AFTER any other translators: -->
          <add name="AutoprefixerTranslator" type="BundleTransformer.Autoprefixer.Translators.AutoprefixerTranslator, BundleTransformer.Autoprefixer" enabled="true"/>
        </translators>
      </css>
    </core>
    <autoprefixer cascade="true">
      <!-- pick your javascript engine -->
      <jsEngine name="V8JsEngine"/> 
      <browsers>
        <clear/>
        <!-- write definitions from https://github.com/ai/autoprefixer -->
        <add definition="last 3 version"/>
      </browsers>
    </autoprefixer>
  </bundleTransformer>

Visual cascade

cascade determines if you want a visual cascade of vendor-prefixes:

a {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box
}