페이지를 갱신하지 않고 웹 사이트의 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 새로고침 키 누르기 등 간단한 조작을 합니다.어쨌든, 이 방법은 에러 발생이 적고, 시판되고 있는 일부 자동화 솔루션보다 훨씬 복잡하지 않습니다.
몇 가지 예(다른 예도 자유롭게 제안):
크롬:
파이어폭스:
여기 저의 작은 프로젝트가 있습니다. 시험해 보세요
에서의 CSS 자동
, 이렇게 할 수 있어요.CSS
★★★★★★★★★★★★★★★★★를 통해jQuery
:
$(".classToBeReplaced").switchClass( "classToBeReplaced", "newClass", 1000 );
,도할 수 .toggleClass
★★★★★★ 。
http://api.jquery.com/toggleClass/
http://jqueryui.com/demos/switchClass/
파이어폭스를 위한 파이어버그.
첨부/별도 창에 있는 플러그인입니다.HTML/CSS에 대한 변경이 즉시 나타나고 요소가 강조 표시됩니다.
JS 해킹에 비해 이점은 실수로 프로덕션 인스턴스에 복사할 수 없다는 것입니다.
Live Reload를 찾고 있습니다.
브라우저 확장으로 사용할 수 있어 구현이 용이함
새로운 오픈 소스 코드 에디터(브래킷)에는 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
'programing' 카테고리의 다른 글
Uglify를 통한 웹 팩 최적화JS 플러그인으로 인해 런타임 오류가 발생함 (0) | 2023.04.03 |
---|---|
리액트와 함께 장고를 형성하다JS (0) | 2023.04.03 |
Internet Explorer 8에서 정의되지 않은 JSON 개체 (0) | 2023.04.03 |
Reactive Web Server Factory 빈이 없어 Reactive Web Application Context를 시작할 수 없습니다. (0) | 2023.04.03 |
SQL 스크립트를 실행하고 애플리케이션 부팅 시 데이터를 얻는 방법 (0) | 2023.04.03 |