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


81

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

では、CSSの更新後にサイトが自動的に更新されるように使用できるものはありますか?
たぶんJavaScript、jQuery、Ajaxなどで?


1
あなたのウェブサイトにその場でテスト変更にクロームのdeveloperstoolkitを使用することができ、それが働いている場合、あなたは...あなたの.cssファイルに追加することができます
Mathlight

こんにちは、みんな。今、私は同じものを検索しますが、HTMLファイルの変更を探します!誰でも?

@カレン、まったく異なる回答が必要になるため、新しい質問を投稿してください。
AMK 2012年

1
@TWCrapの推奨には+1。私はいつもそうしています。
パリス2012年

回答:


81

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

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

javascriptファイルを挿入するだけで動作します!

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


編集:LiveStyle

あなたが開発した場合崇高テキストおよびGoogle ChromeのまたはAppleのSafari、あなたは使うべきエメットLiveStyleを。これは、より強力なライブCSSリローダーです。
今ではCSSリフレッシュの代わりに使用しています。

この素晴らしいプラグインの詳細については、SmashingMagazineによる投稿をお読みください。


8
これは素晴らしいことですが、Webサイトを本番環境にデプロイする前に削除することを忘れないでください。そうしないと、サーバーにかなりの不要な負荷がかかります。
Bazzz 2012年

1
その本当に非常に素晴らしい..!
dhaval 2012年

1
@dTDesign、これが正解である場合、なぜ報奨金があるのですか?
AMK 2012年

私はこのフォーラムにそれほど長くはありません。これが何であるかを最初に試し、私はバッジを獲得しました。そして、私はそれがいくつかの答えを必要とするのでそれをマークしません、そのマークされた原因はそれ以上の注意が必要です。正しいのは私の答えだけではありません。
マイケルシュミット

2
@mcmwhfy:cssの後にjsを挿入すると、サーバー上でのみ機能します。それは... XAMPPか何かでも動作します
マイケル・シュミット

11

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);
    });
}

最初にあなたの答えに感謝します私はdTDesignによる提案を試します、私は少し簡単に見えるので、私はjqueryに精通していないので...しかしもう一度感謝します

4

見ていhttp://livereload.com/を

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


4

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

インストールされると、(ほとんどの)CSSでリロードされたプラグイン/拡張機能はCSSを自動的にリロードしません。ただし、通常は、ツールバーボタン、コンテキストメニュー項目、または単純なキーを押してCSSを再読み込みするなどの単純なもので作業します。この方法はとにかくエラーが発生しにくく、自動化されたソリューションのいくつかよりもはるかに複雑ではないことがわかりました。

いくつかの例(他のいくつかを提案してください):

クロム:

  • tin.cr(自動リロードを含み、ソースファイルへのブラウザ内変更を永続化できます)
  • CSSリフレッシュ

Firefox:




2

FireFoxのFirebug。

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

JSハックに対する利点は、これを誤って本番インスタンスにコピーできないことです。



1

新しいオープンソースのコードエディターであるbracketsには、エディターでCSSを編集できるライブ開発機能があり、すぐにChromeブラウザーに反映されます。現在はCSS編集でのみ機能しますが、HTML編集も間もなく開始されます。


1

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


0

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


0

使用してみてくださいCSSブラシ、ライブCSSを作成するためのクロムのプラグインを。すべてのCSSをテキストエディターで記述し、ブラウザーに戻ってリロードする必要はありません。テキストエディターで行っているかのようにCSSをライブで記述します。ここでは、文脈依存メニュー、重複プロパティの使用、完全なCSSパスの選択、またはページから直接要素のフィルター処理されたパスなど、テキストエディターよりも多くの機能を利用できます。


弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.