![]() That left developers having to figure out which elements had which vendor prefixes and to update them when/if the vendor finally decided to drop the prefix altogether.Īutoprefixer is a command line tool that will take care of vendor prefixes. I’ve chosen not to implement these postcss plugins There are PostCSS tools that will do it for you when/if needed. ![]() Note that Autoprefixer does not handle ePub specific vendor prefixes. In their race to be first to implement a css feature, vendors added it behind a vendor-specific prefix (-webkit for Safari, Chrome and Opera, -o for Opera before they adopted Webkit, -moz for Firefox and -ms for Microsoft) to hide it for the browsers that had not adopted it or implemented differently. There are Grunt and Gulp plugins available AutoPrefixerĪutoprefixer helps in dealing with ‘prefix hell’ for the most part. We do this reduction first to make sure that we won’t have to run Autoprefixer and UnCSS again after reducing the number of Media Queries in our final CSS file. The idea behind this is to reduce the number of Media Queries and their associated rules. The first optimization is to consolidate our Media Queries using Combine MQ. }).on("error", (console, chalk.red("Sass Errorn"))) LoadPath: "./vendor/bootstrap-sass/assets/stylesheets" In the example below we create a task and then pipe the different plugins as input until the last pipe is for the destination of the product. Gulp is a stream oriented task runner where the emphasis is connecting (piping) the output one task to the input of the next. ![]() Prep CSS starting with SASS, autoprefix et. Usually a combination of one or more tasks defined abov Cleans the CSS based on what"s used in the specified files into the equivalent css file on the css/ directory Converts all the files under scss/ ending with. load all our packages configured there. load-grunt will read the package file and automatically it will measure how long things take for performance require it at the top and pass in the grunt instance In the example below we define our tasks, along with the options and settings for each, and finally we define a custom task that includes all the steps we want to take. It is very configuration heavy the Gruntfile.js configuration file is full of instructions for how to run each task. Grunt is the first task runner I saw and the one I still work with. the harder it gets to remember the command line tools you have to use to accomplish these tasks Grunt/Gulp Build SystemĪfter a long time saying I didn’t need a build system but, the more tools and techniques I’ve discovered. I followed it up with this post about advanced features to make CSS more manageable. I have written about SASS and some of its features Part of the fat trimming is the use of variables and reducing the number of redundant selector rules that we write. It allows you to build more complex structures that you can with pure CSS. I’ve been a fan of SASS ever since I first read about it a few years ago. Ruby is installed in most (if not all) Linux and OS X systems. SASS and related libraries require Ruby and the SASS gem. They both must be installed on your system before any of the tools discussed will work. The main requirement for the chosen tools is that they have both a command line tool or a grunt/gulp build system plugin.įor tools like CodeKit, a Macintosh application, or Prepros, cross platform, they must support all the tool discussed.īoth of these task runners, and the plugins that run within them, depend on Node.js and NPM. In researching front end techniques I’ve discovered a few techniques to make CSS development more bearable and to cut the size of our CSS files at the same time. One thing that has always stopped me from fully embracing frameworks is that they use an insane amount of code and it’s really difficult to trim until I’m done with a project and, at that time, I usually don’t want to have to look at CSS for a few weeks. While I learned these tricks as a front end developer they apply equally to creating content for e-books. After reading India Amos Degristling the sausage: BBEdit 11 Edition I thought I’d share my tricks for making CSS files as small as possible.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |