81

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

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

4

13 に答える 13

82

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

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

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

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

編集：LiveStyle

SublimeTextとGoogleChromeまたはAppleSafariを使用して開発する場合は、 EmmetLiveStyleを使用する必要があります。これは、より強力なLiveCSSリローダーです。
今ではCSSRefreshの代わりに使用しています。

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

于 2012-10-02T07:48:02.023 に答える
10

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);
    });
}
于 2012-10-02T07:48:24.923 に答える
4

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

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

于 2012-10-07T20:59:13.347 に答える
4

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

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

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

クロム：

  • tin.cr（自動リロードを含み、ブラウザ内の変更をソースファイルに保持できます）
  • CSSリフレッシュ

Firefox：

于 2012-10-11T02:15:42.123 に答える
3

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

于 2012-10-11T08:11:44.970 に答える
2

FireFoxのFirebug。

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

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

于 2012-10-13T19:32:38.117 に答える
2

CSSはい、ビアを操作できますjQuery：

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

この方法を使用することもできますtoggleClass。

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

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

于 2012-10-02T07:50:29.443 に答える
1

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

于 2012-10-14T20:24:15.293 に答える
1

あなたはライブリロードを探しています：

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

http://livereload.com/

于 2012-10-12T05:41:41.470 に答える
1

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

于 2012-10-14T05:57:42.753 に答える
0

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

オープンソースであり、仕掛品であるライブCSS、Javascript、およびHTMLエディター。 github

于 2012-10-11T11:24:46.747 に答える
0

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

于 2012-10-15T10:10:58.743 に答える
0

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

于 2015-01-16T22:22:04.537 に答える