[wp-trac] [WordPress Trac] #27078: Use Autoprefixer for CSS vendor prefixes

[WordPress Trac]

#27078: Use Autoprefixer for CSS vendor prefixes
------------------------------+-----------------------
 Reporter:  ocean90           |      Owner:
     Type:  task (blessed)    |     Status:  new
 Priority:  normal            |  Milestone:  3.9
Component:  Build/Test Tools  |    Version:
 Severity:  normal            |   Keywords:  has-patch
  Focuses:                    |
------------------------------+-----------------------
 == Preamble ==

 [https://github.com/ai/autoprefixer Autoprefixer] parses CSS and adds
 vendor prefixes to CSS rules using values from the [http://caniuse.com/
 Can I Use].

 So instead of prefixing the CSS by ourselves, let Autoprefixer handle
 this.

 == Build Tool ==

 For our build process we can use the Grunt plugin
 [https://github.com/nDmitry/grunt-autoprefixer grunt-autoprefixer].

 == Patch ==

 The attached patch does two things:

 1. Adds the ''autoprefixer'' task to Gruntfile.js. The task will run
 *after* the files are minified. Why? We are still supporting patches from
 core.svn. So we have to prevent changes in the non-minfied files,
 otherwise patches won't apply correctly to core.svn or if made from
 core.svn.
 2. Removes existing CSS rules which are already prefixed.

 Files which should be prefixed are: wp-admin/css/*.min.css, wp-
 admin/css/colors/*/*.min.css and wp-includes/css/*.min.css. (Third party
 styles excluded.)

 == Discussion ==

 '''What does it mean to just prefix the minified files?'''
 When running a non-build version (or `SCRIPT_DEBUG` is true) some admin
 screens could look a bit broken (I'm looking at Firefox at the moment).

 '''How much do we care about broken admin screens if non-build?'''
 The patch removes the prefixed lines of `border-radius`, `transition`,
 background gradients, `box-shadow` and `transform`. We could also remove
 the prefixed versions of :-*-placeholder and just use :placeholder.
 Autoprefixer will handle this too. But having just :placeholder means,
 that it doesn't work in any browser.

 '''Do we need a watch task for Autoprefixer?'''
 If yes, we have to minify the files too. But what about `SCRIPT_DEBUG`?

 '''Which browser versions should we support?'''
 Autoprefixer supports different ways to declare
 [https://github.com/ai/autoprefixer#browsers browser support]. Either by
 global usage statistics or version specific. I have decided to use the
 versions for now:

 * Firefox >= 20
 * Explorer >= 7
 * Chrome >= 20
 * Android >= 2.1 (Kindle, …)
 * Opera >= 16.0
 * Safari >= 6.0

--
Ticket URL: <https://core.trac.wordpress.org/ticket/27078>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform