gulp-css-hairline

Dispose with the CSS border pixels, refer to CSS retina hairline

Javascript

if (window.devicePixelRatio && devicePixelRatio >= 2) {
  var testElem = document.createElement('div');
  testElem.style.border = '.5px solid transparent';
  document.body.appendChild(testElem);
  if (testElem.offsetHeight == 1)
  {
    document.querySelector('html').classList.add('hairline');
  }
  document.body.removeChild(testElem);
}

Install

$ npm install --save-dev gulp-css-hairline

Usage

var gulp = require('gulp');
var hairline = require('gulp-css-hairline');

gulp.task('default', function () {
    return gulp.src('assets/input.css')
        .pipe(hairline())
        .pipe(gulp.dest('dist/'));
});

Options

options.htmlCls

Type: String

Default value: hairline

Note: html's className.

Ignore a specific style

You can ignore a style with a comment /*hairline:skip*/.

.ignored{
  border:1px #000 solid; /*hairline:skip*/
}

License

Copyright (c) 2015 Cao Ren under the MIT License.