Clever Geek Handbook

CSSをリアルタイムで変更します

画像



「ああ、CSSコードを少しでも編集するたびにブラウザページを更新するのはうんざりです！」



私はこのビジネスを自動化することに決めたので、一度、お気に入りのエディターでcssのコードを変更すると、その変更はすぐにブラウザーに表示されました。 そのため、夕方には「 cssWatch.js 」という小さなライブラリが登場しました。 ええ、どうやって長い間ペイントしません。 ちょうどポイント。



では、cssWatch.jsは何をしますか？


そして、このスクリプトは必要なことを行います-それはブラウザで直接CSSスタイルを更新します。



  1. cssWatch.jsをプロジェクトに接続します
  2. ブラウザで目的のページを開きます
  3. cssファイルに変更を加えると、結果がすぐにページに表示されます




接続方法



cssWatch.jsをページに接続します。 



<!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>




それでも、他の操作を行う必要はありません。 これで、スタイルが自動的に更新されます。



cssが変更されたかどうかを確認するために、サーバーの応答ヘッダーが使用されることに注意してください。 cssWatch.jsは、ファイルシステム（デスクトップなど）から直接開かれたファイルでは機能しません（より正確には、期待どおりに機能しません）。



デフォルトでは、スクリプトはページ上のすべてのスタイルファイルをリッスンしますが、不要なファイルを無効にすることができます。 これは、 cssWatch属性をlinkタグに追加することにより行われます。 



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




CssWatch.jsは、CSSファイルのネストのレベルを問わず、どのプロジェクトにも接続できます。



ライブラリとサンプルを含むアーカイブをダウンロードします。



ブラウザでの動作を確認してください。

真の双方向性はそうではありません、なぜなら 私はcssファイルを変更しませんが、ブラウザコンソールを使用して、その動作を確認できます。



ご清聴ありがとうございました。 あなたの意見を聞いてうれしいです。



PS> IEではテストしませんでした。 それを置く方法はありませんが。



>不要な質問がないようにソースコードを拡散しました。



ソースコード 
  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。 デンバーおよび同様のパッケージでは、cssWatch.jsも機能します。

UPD2。 タイプミスがコードに忍び込んだ...代わりに 

  setTimeout(function () { _this.parse(); },50);




する必要がある 

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


Habrでコードを修正しました。 私はまだアーカイブに入れることができません...私は今日それを修正します。

申し訳ありません...それは必要に応じて行われたもので、「夜を見て」スクリプトを書くことはできません


More articles:


All Articles