5

I have a dillema working with CSS. I use a pre-processor to add all necessary vendor prefixes to CSS when it's served, keeping my source code short and simple. However the issue is, by far the most effective way to to edit styles realistically (and see real-time updating of the page) is to use the web page's dev tools in whichever browser(s) you're currently testing, edit the CSS there, and copy/paste it to the source code after making significant changes.

So then my CSS source code is full of vendor prefixes.

Is there a simple solution to this? What solutions exist to solve this problem?

J.Todd
  • 3,823

2 Answers2

3

What you want is live/hot reload.

If you use live reloading, as soon as you make and save a change to your css file, the tools will rebuild the final css and load the new version into the browser. No need to refresh, it just happens. That way you can make change and see quick feedback, just like if you had modified the dev tools in the browser. But your changes are already in your source (no need to copy back).

How do to this depends on your the rest of your stack. But the chances are that whatever tool you are using to build your css: grunt/gulp/webpack/etc has addons to support livereload available.

Winston Ewert
  • 24,862
1

Sounds like you need a de-processor to remove the prefixes. Could you write one in JavaScript and embed it in a local page? What I'm imagining is a page with two text boxes, you copy your modified CSS into one box, press a button to run the prefix-removal code, and the un-prefixed code appears in the other text box. Then you simply C&P the processed code back into your application source. If you're really good you could probably write a browser extension to de-prefix whatever code is highlighted and display it in a separate dialog, but I'm nowhere near that good so I really can't guess how much effort that would take.

TMN
  • 11,363