Postcss-colorblind will check all instances of colour in your stylesheet and then highlight potential issues for users with any of the following conditions. Postcss-focus checks the CSS for instances of :hover and automatically adds the :focus selector alongside. Fortunately there are PostCSS plugins that can take care of repetitive tasks and accessibility checks like this for us.
We are all guilty of missing the occasional focus selector here and there, or of putting of repetitive CSS tasks in favor of the more creative ones. This is hugely beneficial when it comes to maintaining large projects and safeguarding the output CSS code.
Convert prepros to grunt full#
This unique approach gives developers full control over the codebase and limits the potential for creating bloated or badly written CSS. Unlike existing pre processors such as Sass, Less and Stylus with PostCSS you have full control over which features are enabled. 3) Take only what you needĪs most developers have now found out some of the functions available in pre-processors can have a negative impact on CSS performance. Existing functionality can be migrated to PostCSS over time, if at all. This allows for a much simpler transition without the need to make wholesale changes to a codebase. PostCSS can be added to your build process alongside a pre-prosesor not just instead of one. The good news is you don’t have to abandon you're current set up, or all the functions and Mixins you have already written. You probably already have a workflow set up that you're happy with, whether your using Sass, Less or any other CSS tool, to stop and migrate to a new processor would be time consuming. Interfaces like this however would not be suitable for custom plugins.įurther reading on installation can be found on the PostCSS Github page 2) Integration with current pre-processors postcss -c config.json -o result.css input.cssĬompile tools like Prepros also offer support for some of PostCSS's most popular plugins. By installing postcss-cli CSS can be compiled with the following command.
There is also a CLI version of PostCSS for those who don't wish to use a task runner. Var autoprefixer = require('autoprefixer') PostCSS is written in JavaScript and integrates seamlessly with task runners like Gulp and Grunt.
1) Simple set upĪdding PostCSS to your workflow is probably a lot easier then you think, particularly if you are already using a task runner and/or pre-processor. PostCSS is not an all or nothing tool, plugins can be added to what is an otherwise clean slate allowing developers to take much greater control over the features used and the resulting CSS.īelow are just a few of the reasons to start using PostCSS today. Nothing groundbreaking there then, but unlike existing pre-processors PostCSS aims to improve the usability of CSS by solving long standing issues with CSS at scale such as global scope and inheritance. PostCSS makes it possible to transform or extend syntaxes and features of CSS. Var prefixer = postcss() Ĭleaner.process(css).Published on February 23rd 2016 Cathy Dutton Write your CSS rules without vendor prefixes (in fact, forget about themĪutoprefixer will use the data based on current browser popularity and property It is recommended by Google and used in Twitter and Taobao. PostCSS plugin to parse CSS and add vendor prefixes to CSS rules using valuesįrom Can I Use.
0 kommentar(er)
