Geekly Articles each Day
📜 ⬆️ ⬇️

Change CSS in real time

image

"Oh, how did you get to refresh the browser page after every small edit of the css code!"

I decided to automate this business so that once, I changed the code in css in my favorite editor, and the changes were immediately displayed in the browser. And so in the evening a small library called " cssWatch.js " appeared. I will not paint for a long time, what yes how. Only the essence.
')
And so, what does cssWatch.js do?

And this script makes, what is required of it - it updates css styles right in the browser.

  1. Connect cssWatch.js to the project
  2. Open the desired page in the browser
  3. Make changes to css files, and the result is immediately displayed on the page.


How to connect?


We connect cssWatch.js to the page:

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>cssWatch</title> <link rel="stylesheet" type="text/css" href="example.css"> <link rel="stylesheet" type="text/css" href="example2.css"> <script src="cssWatch.js"></script> <!--  --> </head> <body> <h2>     :</h2> <div class="b-block"> example.css </div> <div class="b-block2"> example2.css </div> </body> </html>


And yet, no other manipulations are needed. Now styles will be automatically updated.

I note that to check whether css has changed, the server response headers are used, i.e. cssWatch.js will not work (or rather will not work as expected) on files opened directly from the file system (for example, from the desktop).

By default, the script listens on all the style files on the page, but you can turn off unnecessary ones. This is done by adding the cssWatch attribute to the link tag:

  <link rel="stylesheet" type="text/css" href="example.css"> <link rel="stylesheet" cssWatch="no" type="text/css" href="example2.css"> <!--      -->


ssWatch.js can be connected to any project, with any nesting level of css files.

Download the archive with the library and an example.

View in the browser how it works.
True there is no interactivity, because I do not change the css files, but through the browser console you can see how it works.

Thanks for attention. I will be glad to hear your opinion.

PS> I haven't tested it in IE. While there is no way to put it.

> I post the source code so that there are no unnecessary questions:

Source
  var cssWatch = { /** *    css ( ) */ interValUpdate: 100, /*------   -----------------------------------------------------*/ arrayCssFiles: new Array(), arrayLastModified: new Array(), arrayCssObj: new Array(), counter: 0, ajax: function (obj) { var _this = this; var request=null; var lastModified = ''; try { request = new XMLHttpRequest(); } catch (e) { try { request=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { request=new ActiveXObject("Microsoft.XMLHTTP"); } } var url = obj.url+'?_=' + Math.random(); request.onreadystatechange = function (text,text2) { if (request.readyState == 4) { lastModified = /Last-Modified[]?:([^\n]+)/ig.exec(request.getAllResponseHeaders()); lastModified = lastModified[1]; if (request.status == 200) { _this.arrayCssObj[_this.counter].setAttribute('href',_this.arrayCssFiles[_this.counter]+'?_=' + Math.random()); if (lastModified) { _this.arrayLastModified[_this.counter] = lastModified.replace(/^\s+/, '').replace(/\s+$/, ''); } } setTimeout(function () {              if (_this.counter < _this.arrayCssObj.length - 1) { _this.counter++; _this.loadCss(); } else { _this.counter = 0; _this.loadCss(); } },_this.interValUpdate); } }; request.open("HEAD", url, true); if (_this.arrayLastModified[_this.counter]) { request.setRequestHeader("If-Modified-Since", _this.arrayLastModified[_this.counter]); } request.send(null); return request; }, parse : function () { var _this = this; var arrayLink = document.getElementsByTagName('link'); var arrayLinkLength = arrayLink.length; for (var i = 0; i < arrayLinkLength; i++) { if (arrayLink[i].getAttribute('href').substr(-4) == '.css' && arrayLink[i].getAttribute('cssWatch') != 'no') { _this.arrayCssFiles[_this.arrayCssFiles.length] = arrayLink[i].getAttribute('href'); _this.arrayCssObj[_this.arrayCssFiles.length - 1] = arrayLink[i]; } } if (_this.arrayCssFiles.length > 0) {<b> this.loadCss(); }</b> }, loadCss: function () { var _this = this; this.ajax({url:_this.arrayCssFiles[_this.counter]}); }, create: function () { var _this = this; if (document.readyState == 'complete') { this.init(); } else { setTimeout(function () { _this.create(); },50); } } }; cssWatch.create();




UPD. On Denver and similar packages, cssWatch.js also works.
UPD2. A typo crept into the code ... instead
  setTimeout(function () { _this.parse(); },50);


need to
  setTimeout(function () { _this.create(); },50);

On Habré, I corrected the code. In the archive I can not yet ... today I will correct it.
I apologize ... it was meant as necessary, you just can not write scripts "looking at night"

Source: https://habr.com/ru/post/147979/

More articles:


All Articles