CSS로 페이지를 만들었습니다. 이제 편집기에서 브라우저로 변경하고 전체 페이지를 새로 고쳐야 만 작은 변경 사항을 모두 살펴볼 수 있습니다. 하지만 애니메이션이 있기 때문에 페이지를 새로 고침하고 싶지 않습니다.
그렇다면 CSS 업데이트 후 내 사이트가 자동으로 업데이트되도록 사용할 수있는 것이 있습니까?
JavaScript, jQuery, Ajax 등을 사용할 수 있습니까?
CSS로 페이지를 만들었습니다. 이제 편집기에서 브라우저로 변경하고 전체 페이지를 새로 고쳐야 만 작은 변경 사항을 모두 살펴볼 수 있습니다. 하지만 애니메이션이 있기 때문에 페이지를 새로 고침하고 싶지 않습니다.
그렇다면 CSS 업데이트 후 내 사이트가 자동으로 업데이트되도록 사용할 수있는 것이 있습니까?
JavaScript, jQuery, Ajax 등을 사용할 수 있습니까?
답변:
여기 있습니다 : http://cssrefresh.frebsite.nl/
CSSrefresh는 웹 페이지에 포함 된 CSS 파일을 모니터링하는 작고 방해가되지 않는 자바 스크립트 파일입니다. CSS 파일을 저장하면 브라우저를 새로 고칠 필요없이 변경 사항이 직접 구현됩니다.
자바 스크립트 파일을 삽입하기 만하면 작동합니다!
그러나 참고 : 서버에 파일이있을 때만 작동합니다!
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 해킹에 비해 장점은 실수로 프로덕션 인스턴스에 복사 할 수 없다는 것입니다.
새로운 오픈 소스 코드 편집기 인 brackets 에는 편집기에서 CSS를 편집 할 수 있는 라이브 개발 기능이 있으며 즉시 크롬 브라우저에 반영됩니다. 현재 CSS 편집에서만 작동하지만 HTML 편집이 곧 제공 될 예정입니다!
Firefox 용 Firebug는 제가 선호하는 방법입니다. https://addons.mozilla.org/de/firefox/addon/firebug/ HTML 및 CSS를 즉석에서 편집하고, CSS 규칙을 삭제하지 않고 빠르게 비활성화하고, HTML을 추가 또는 제거 할 수 있습니다. 등등. 디자인을 수정하고 싶지 않다면 이것이 당신의 선택입니다. 변경 사항을 로컬 복사본에 저장할 수도 있지만 해당 기능을 거의 사용하지 않습니다.
CSS 라이브를 만들기위한 크롬 플러그인 인 CSS Brush를 사용해보세요 . 텍스트 편집기에서 모든 CSS를 작성하고 브라우저로 돌아와서 다시로드 할 필요가 없습니다. 오히려 텍스트 편집기에서 수행하는 것처럼 CSS를 실시간으로 작성하십시오. 상황에 맞는 메뉴, 중복 속성 사용, 전체 CSS 경로 선택 또는 페이지에서 직접 요소의 필터링 된 경로 선택과 같은 텍스트 편집기보다 더 많은 기능을 사용할 수 있습니다.