페이지를 갱신하지 않고 웹 사이트의 CSS를 갱신하다

페이지를 갱신하지 않고 웹 사이트의 CSS를 갱신하다

CSS로 페이지를 만들었습니다.이제 편집기에서 브라우저로 전환하여 페이지 전체를 새로 고쳐야 변경 내용을 볼 수 있습니다.하지만 페이지를 새로 고치고 싶지 않아요. 애니메이션이 몇 개 있거든요.

그럼 CSS 업데이트 후 제 사이트가 자동으로 업데이트 될 수 있는 것이 있나요?
JavaScript, jQuery, Ajax 같은 걸로요?

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

CSSrefresh는 웹 페이지에 포함된 CSS 파일을 감시하는 작고 방해되지 않는 Javascript 파일입니다.CSS 파일을 저장하면 브라우저를 새로 고칠 필요 없이 변경이 직접 구현됩니다.

javascript 파일을 삽입하기만 하면 됩니다!

단, 주의:서버에 파일이 있을 때만 작동합니다!

---

편집: LiveStyle

Sublime Text와 Google Chrome 또는 Apple Safari로 개발한다면 Emet Live Style을 사용해야 합니다.이것은 보다 강력한 라이브 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용 브라우저 플러그인으로 기능합니다.버전 관리에서 실수로 커밋할 수 있는 추가 javascript를 삽입할 필요가 없기 때문에 마음에 듭니다.

브라우저 플러그인/확장이 가장 쉬운 해결책이라고 생각합니다.개별 사이트에 대한 코드 변경은 필요하지 않습니다.또, Web상의 어느 사이트에서도 사용할 수 있습니다.이것은, 툴바를 숨기거나 버그를 일시적으로 수정하기 위해서 메모리내의 무언가를 재빠르게 수정했을 경우에 편리합니다.그 조작을 마치면, 키를 누르면 모든 CSS가 정상으로 돌아옵니다.

설치 후 (대부분) CSS가 새로고침된 플러그인/확장은 자동으로 새로고침되지 않습니다.단, 보통 툴바버튼, 컨텍스트메뉴 항목, CSS 새로고침 키 누르기 등 간단한 조작을 합니다.어쨌든, 이 방법은 에러 발생이 적고, 시판되고 있는 일부 자동화 솔루션보다 훨씬 복잡하지 않습니다.

몇 가지 예(다른 예도 자유롭게 제안):

크롬:

• tin.cr(자동 새로고침 기능을 사용하여 소스 파일에 대한 변경 내용을 유지할 수 있음)
• CSS 리프레시

파이어폭스:

• CSS 새로고침
• CSS 리프레시

여기 저의 작은 프로젝트가 있습니다. 시험해 보세요
에서의 CSS 자동

, 이렇게 할 수 있어요.CSS★★★★★★★★★★★★★★★★★를 통해jQuery:

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

,도할 수 .toggleClass★★★★★★ 。

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

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

파이어폭스를 위한 파이어버그.

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

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

Live Reload를 찾고 있습니다.

브라우저 확장으로 사용할 수 있어 구현이 용이함

http://livereload.com/

새로운 오픈 소스 코드 에디터(브래킷)에는 CSS를 편집하여 크롬 브라우저에 즉시 반영할 수 있는 라이브 개발 기능이 있습니다.현재는 CSS 편집만 가능하지만 HTML 편집이 곧 시작됩니다!

Firebug for Firefox는 제가 선호하는 방법입니다.https://addons.mozilla.org/de/firefox/addon/firebug/ HTML 및 CSS 편집, CSS 규칙(삭제하지 않고)의 신속한 비활성화, HTML 추가 또는 삭제 등을 할 수 있습니다.디자인을 수정하고 싶지 않으시다면 선택하실 수 있습니다.변경 내용을 로컬 복사본에 저장할 수도 있지만, 저는 이 기능을 거의 사용하지 않습니다.

Firefox를 사용하는 경우 링크된 스타일시트 새로고침 옵션이 있는 Firefox의 애드온에서 웹 개발자 도구 모음 1.2.2를 설치할 수 있습니다.

CSS 라이브를 작성하기 위한 크롬 플러그인인 CSS Brush를 사용해 보십시오.텍스트 에디터에 모든 CSS를 쓰고 브라우저로 돌아와 새로고침할 필요는 없습니다.텍스트 에디터에서 하고 있는 것처럼 CSS를 라이브로 쓸 필요가 없습니다.컨텍스트 의존 메뉴, 중복 속성 사용, 완전한 CSS 경로 또는 페이지에서 직접 요소의 필터링된 경로 선택 등 텍스트에디터보다 많은 기능을 사용할 수 있습니다.

이것이 도움이 될 수 있다 -> chaicode

오픈소스와 wip.github의 라이브 CSS, Javascript, HTML 에디터

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