web-dev-qa-db-ja.com

ページを更新せずにWebサイトのCSSを更新する

CSSを使用してページを作成しました。ここで、エディターからブラウザーに変更して、ページ全体を更新する必要があります。これは、小さな変更をすべて確認するためです。しかし、いくつかのアニメーションがあるため、ページを更新したくありません。

CSSの更新後にサイトが自動的に更新されるということを使用できますか？
JavaScript、jQuery、Ajaxなどを使用している可能性がありますか？

javascriptjqueryhtmlcssajax
81
user1671245

ここにあります： http://cssrefresh.frebsite.nl/

CSSrefreshは、Webページに含まれるCSSファイルを監視する小さくて邪魔にならないJavaScriptファイルです。 CSSファイルを保存するとすぐに、ブラウザを更新することなく、変更が直接実装されます。

Javascriptファイルを挿入するだけで機能します！

ただし、注意：サーバー上にファイルがある場合にのみ機能します！

編集：LiveStyle

Sublime Text およびGoogle ChromeまたはApple Safariで開発する場合、 Emmet LiveStyle =。これは、より強力なLive CSS-Reloaderです。
今、CSS Refreshの代わりに使用します。

この素晴らしいプラグインに関する詳細情報が必要な場合は、 Post by Smashing Magazine をご覧ください。

80
Michael Schmidt

JQueryを使用すると、外部スタイルシートを再ロードする関数を作成できます。

/**
 * Forces a reload of all stylesheets by appending a unique query string
 * to each stylesheet URL.
 */
function reloadStylesheets() {
    var queryString = '?reload=' + new Date().getTime();
    $('link[rel="stylesheet"]').each(function () {
        this.href = this.href.replace(/\?.*|$/, queryString);
    });
}
11
Sebass van Boxel

http://livereload.com/ をご覧ください。

OS XとWindowsのブラウザープラグインとして機能します。誤ってバージョン管理にコミットする可能性のある追加のJavaScriptを埋め込む必要がないため、気に入っています。

4
Hendrik

ブラウザのプラグイン/拡張機能が最も簡単なソリューションであると思います。個々のサイトのコードを変更する必要はありません。また、Web上のどのサイトでも使用できます。これは、メモリ内の何かを本当にすばやく変更してツールバーを非表示にしたり、バグを一時的に修正したりする場合に便利です。一度それをいじり終えたら、キーを押すとすべてのCSSが正常に戻ります。

一度インストールされると、（ほとんどの）CSS再ロードされたプラグイン/拡張機能は、CSSを自動的に再ロードしません。ただし、通常は、ツールバーボタン、コンテキストメニュー項目、またはCSSをリロードするための単純なキーを押すなどの単純な操作を行います。とにかく、この方法はエラーが少ない傾向があり、自動化されたソリューションのいくつかよりもずっと簡単です。

いくつかの例（他のいくつかを提案してください）：

クロム：

  • tin.cr （自動再読み込みを含み、ブラウザ内のソースファイルへの変更を保持できます）
  • CSS更新

Firefox：

4
Jon Adams

これが私の小さなプロジェクトです。やってみてください
GithubでのCSS自動リロード

3
Albert Einstein

はい、CSSを介してjQueryを操作できます。

$(".classToBeReplaced").switchClass( "classToBeReplaced", "newClass", 1000 );

toggleClassメソッドを使用することもできます。

http://api.jquery.com/toggleClass/

http://jqueryui.com/demos/switchClass/

2
Darren

FireFoxのFirebug。

これは、添付/個別のウィンドウのプラグインです。 HTML/CSSへの変更はすぐに表示され、要素が強調表示されます。

JSハッキングよりも優れている点は、これを誤って本番インスタンスにコピーできないことです。

2
Levente Pánczél

新しいオープンソースコードエディター ブラケット には、エディターでCSSを編集できるLive Development機能がありますchromeブラウザにすぐに反映されます。現在はCSS編集でのみ機能しますが、HTML編集は近日中に開始されます！

1
jeffslofish

FirefoxのFirebugは私の好みの方法です： https://addons.mozilla.org/de/firefox/addon/firebug/ HTMLとCSSを編集できますその場で、CSSルールを（削除せずに）すばやく無効にし、HTMLを追加または削除します。デザインを微調整したくない場合は、これがあなたの選択です。ローカルコピーに変更を保存することもできますが、その機能はほとんど使用しません。

1
Zim84

ライブリロードを探しています：

ブラウザの拡張機能として利用可能で、実装が簡単です

http://livereload.com/

1
Brian Noah

これは役立つかもしれません-> chaicode

そのオープンCSSとwipであるライブCSS、Javascript、HTMLエディター。 github

0
zeusdeux

Firefoxを使用している場合、Web Developer Toolbar 1.2.2をFirefoxのアドオンからインストールできます。これには、リンクされたスタイルシートをリロードするオプションがあります。

0
Kunal

CSS Brush 、a chrome CSSをライブで作成するためのプラグインを使用してみてください。テキストエディタですべてのCSSを作成し、ブラウザに戻ってリロードする必要はありません。テキストエディターで行うようにCSSをライブで記述します。コンテキストセンシティブメニューのようなテキストエディターよりも多くの機能があり、プロパティを複製し、完全なCSSパスまたは要素のフィルターパスを直接選択します。ページから。

0
ramu