페이지를 새로 고침하지 않고 웹 사이트의 CSS 업데이트

페이지를 새로 고침하지 않고 웹 사이트의 CSS 업데이트

---

CSS로 페이지를 만들었습니다. 이제 편집기에서 브라우저로 변경하고 전체 페이지를 새로 고쳐야 만 작은 변경 사항을 모두 확인할 수 있습니다. 하지만 애니메이션이 있기 때문에 페이지를 새로 고침하고 싶지 않습니다.

그렇다면 CSS 업데이트 후 내 사이트가 자동으로 업데이트되도록 사용할 수있는 것이 있습니까?
JavaScript, jQuery, Ajax 등을 사용할 수 있습니까?

---

여기 있습니다 : http://cssrefresh.frebsite.nl/

CSSrefresh는 웹 페이지에 포함 된 CSS 파일을 모니터링하는 작고 방해가되지 않는 자바 스크립트 파일입니다. CSS 파일을 저장하자마자 브라우저를 새로 고칠 필요없이 변경 사항이 직접 구현됩니다.

자바 스크립트 파일을 삽입하기 만하면 작동합니다!

그러나 참고 : 서버에 파일이있을 때만 작동합니다!

---

편집 : LiveStyle

Sublime Text 및 Google Chrome 또는 Apple Safari로 개발하는 경우 Emmet LiveStyle 을 사용해야합니다 . 이것은보다 강력한 Live CSS-Reloader입니다.
이제 CSS Refresh 대신 사용합니다 .

이 멋진 플러그인에 대한 자세한 정보를 원하시면 Post by Smashing Magazine을 읽어보십시오.

---

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

---

http://livereload.com/을 살펴보십시오 .

OS X 및 Windows 용 브라우저 플러그인으로 작동합니다. 버전 관리에 실수로 커밋 할 수있는 추가 자바 스크립트를 포함 할 필요가 없기 때문에 마음에 듭니다.

---

브라우저 플러그인 / 확장 프로그램이 가장 쉬운 솔루션이라고 생각합니다. 개별 사이트에 대한 코드 변경이 필요하지 않습니다. 그리고 그것들은 웹의 모든 사이트에 사용될 수 있습니다. 이것은 제가 메모리에서 무언가를 빠르게 수정하여 툴바를 숨기거나 일시적으로 버그를 수정하는 경우에 유용합니다. 작업이 끝나면 키를 누르면 모든 CSS가 정상으로 돌아갑니다.

일단 설치되면 (대부분의) CSS 다시로드 된 플러그인 / 확장 프로그램은 CSS를 자동으로 다시로드하지 않습니다. 그러나 일반적으로 도구 모음 버튼, 상황에 맞는 메뉴 항목 및 / 또는 CSS를 다시로드하기위한 간단한 키 누름과 같은 간단한 작업을 수행합니다. 이 방법은 오류 발생 가능성이 적고 자동화 된 솔루션 중 일부보다 훨씬 덜 복잡합니다.

몇 가지 예 (다른 것을 제안해도 좋습니다) :

크롬:

• tin.cr (자동 새로 고침을 포함하고 소스 파일에 대한 브라우저 내 변경 사항을 유지할 수 있음)
• CSS 새로 고침

Firefox :

• CSS 리로디드
• CSS 새로 고침

---

여기 내 작은 프로젝트가 있습니다. Github에서 CSS 자동 새로 고침을 시도해보세요.

---

예 CSS비아를 조작 할 수 있습니다 jQuery.

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

toggleClass방법을 사용할 수도 있습니다 .

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

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

---

FireFox 용 Firebug.

첨부 된 / 별도의 창에있는 플러그인입니다. HTML / CSS에 대한 변경 사항이 즉시 나타나고 요소가 강조 표시됩니다.

JS 해킹에 비해 장점은 실수로 프로덕션 인스턴스에 복사 할 수 없다는 것입니다.

---

Live Reload를 찾고 있습니다.

브라우저 확장으로 사용할 수 있으며 구현하기 쉽습니다.

http://livereload.com/

---

The new open-source code editor, brackets, has a Live Development feature where you can edit CSS in the editor and it will immediately be reflected in the chrome browser. It currently only works for CSS editing, but HTML editing is coming soon!

---

Firebug for Firefox is my prefered method: https://addons.mozilla.org/de/firefox/addon/firebug/ You can edit HTML and CSS on the fly, quickly deactivate CSS rules (without deleting them), add or remove HTML and so on. If you wan't to tweak your design this is your choice. You can even save changes to a local copy, but I hardly ever use that feature.

---

If you are using Firefox then you can install Web Developer Toolbar 1.2.2 from Add-on of Firefox which has option of Reload Linked Stylesheets.

---

Try using CSS Brush, a chrome plugin for creating CSS live. You needn't have to write all CSS in a text editor, come back to browser and reload it, rather write the CSS live as if you were doing it in a text editor. You will have more features than a text editor here like context-sensitive-menu, use duplicate properties, select complete CSS path or a filtered path of a element directly from the page.

---

This might help -> chaicode

Its a live CSS, Javascript and HTML editor that is opensource and a wip. github

참고URL : https://stackoverflow.com/questions/12686331/update-the-css-of-a-website-without-refreshing-the-page