CSSでページを作成しました。ここで、エディターからブラウザーに変更し、ページ全体を更新して、小さな変更をすべて確認する必要があります。しかし、アニメーションがあるので、ページを更新したくありません。
では、CSSの更新後にサイトが自動的に更新されるように使用できるものはありますか?
たぶんJavaScript、jQuery、Ajaxなどで?
CSSでページを作成しました。ここで、エディターからブラウザーに変更し、ページ全体を更新して、小さな変更をすべて確認する必要があります。しかし、アニメーションがあるので、ページを更新したくありません。
では、CSSの更新後にサイトが自動的に更新されるように使用できるものはありますか?
たぶんJavaScript、jQuery、Ajaxなどで?
回答:
ここにあります:http://cssrefresh.frebsite.nl/
CSSrefreshは、Webページに含まれているCSSファイルを監視する小さくて邪魔にならないJavaScriptファイルです。CSSファイルを保存するとすぐに、ブラウザを更新しなくても、変更が直接実装されます。
javascriptファイルを挿入するだけで動作します!
ただし、注意:サーバー上にファイルがある場合にのみ機能します。
あなたが開発した場合崇高テキストおよびGoogle ChromeのまたはAppleのSafari、あなたは使うべきエメットLiveStyleを。これは、より強力なライブCSSリローダーです。
今ではCSSリフレッシュの代わりに使用しています。
この素晴らしいプラグインの詳細については、SmashingMagazineによる投稿をお読みください。
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);
});
}
OSXおよびWindows用のブラウザプラグインとして機能します。バージョン管理に誤ってコミットする可能性のある追加のJavaScriptを埋め込む必要がないため、これが気に入っています。
ブラウザのプラグイン/拡張機能が最も簡単な解決策だと思います。個々のサイトにコードを変更する必要はありません。また、Web上の任意のサイトで使用できます。これは、メモリ内の何かをすばやく変更してツールバーを非表示にしたり、バグを一時的に修正したりする場合に便利です。それをいじり終えたら、キーを押すことができ、すべてのCSSが通常に戻ります。
インストールされると、(ほとんどの)CSSでリロードされたプラグイン/拡張機能はCSSを自動的にリロードしません。ただし、通常は、ツールバーボタン、コンテキストメニュー項目、または単純なキーを押してCSSを再読み込みするなどの単純なもので作業します。この方法はとにかくエラーが発生しにくく、自動化されたソリューションのいくつかよりもはるかに複雑ではないことがわかりました。
いくつかの例(他のいくつかを提案してください):
クロム:
Firefox:
これが私の小さなプロジェクトです。GithubでCSS自動リロードを試してみてください
はい、CSS
ビアを操作できますjQuery
:
$(".classToBeReplaced").switchClass( "classToBeReplaced", "newClass", 1000 );
このtoggleClass
方法を使用することもできます。
FireFoxのFirebug。
添付/別ウィンドウのプラグインです。HTML / CSSへの変更が即座に表示され、要素が強調表示されます。
JSハックに対する利点は、これを誤って本番インスタンスにコピーできないことです。
新しいオープンソースのコードエディターであるbracketsには、エディターでCSSを編集できるライブ開発機能があり、すぐにChromeブラウザーに反映されます。現在はCSS編集でのみ機能しますが、HTML編集も間もなく開始されます。