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를 다시로드합니다. 이 방법은 오류 발생 가능성이 적고 자동화 된 솔루션 중 일부보다 훨씬 덜 복잡합니다.
몇 가지 예 (다른 것을 제안해도 좋습니다) :
크롬:
Firefox :
답변
여기 내 작은 프로젝트가 있습니다. Github에서 CSS 자동 새로 고침을 시도해보세요.
답변
예 CSS비아를 조작 할 수 있습니다 jQuery.
$(".classToBeReplaced").switchClass( "classToBeReplaced", "newClass", 1000 );
toggleClass방법을 사용할 수도 있습니다 .
답변
FireFox 용 Firebug.
첨부 / 별도 창에있는 플러그인입니다. HTML / CSS에 대한 변경 사항이 즉시 나타나고 요소가 강조 표시됩니다.
JS 해킹에 비해 장점은 실수로 프로덕션 인스턴스에 복사 할 수 없다는 것입니다.
