Page 1 of 1

Autoprefixer

Posted: Wed Aug 10, 2016 8:23 pm
by Tata
I have found very interesting and absolutely helpful package for Sublime Text editor (running on iMAC). Creating webpages (on iMAC) I often faced the problem with compatibility - especially testing things in all available browsers, having somewhere saved all specific differences. Now, there is Autoprefixer installed in Sublime text. The usage is absolutelz simple. I write the stylesheet in CSS editor because it is very comfortable (possible in Sublime text as well, however). After it work either in FF or Safari, I open the file in Sublime Text and let the Autoprefixer do his job. I don't need to care about what where shall be added. Autoprefixer does its work.
Clear stylesheet:

Code: Select all

.banner{
   width: 100%;
   min-height: 300px;
   background: #ffd599 url(images/header.png) center center;
     background-repeat:no-repeat;
   background-size:100%;
   background-position:center;   
   display: inline-flex;
   flex-flow: wrap row;
   justify-content: center;
}

Checked by Autoprefixer:

Code: Select all

.banner{
   width: 100%;
   min-height: 300px;
   background: #ffd599 url(images/header.png) center center;
     background-repeat:no-repeat;
   background-size:100%;
   background-position:center;   
   display: -webkit-inline-flex;   
   display: -ms-inline-flexbox;   
   display: inline-flex;
   -webkit-flex-flow: wrap row;
       -ms-flex-flow: wrap row;
           flex-flow: wrap row;
   -webkit-justify-content: center;
       -ms-flex-pack: center;
           justify-content: center;
}

An excellent online service is here> https://autoprefixer.github.io/. The only you need to make is copy your stylesheet, paste it there and copy paste back into the file the generated result.
Also, you may find helpful http://caniuse.com/ and http://www.doiuse.com/.