CSS 스타일 시트를 비교하고 줄이는 데 사용하는 도구

문제

CSS 파일 (style1.css)을 참조하는 페이지 (page1.html)가 있습니다.

모두 좋은.

Page1.html은 style2.css를 추가로 참조하기 위해 필요하지만 참조를 추가하면 Page1.html의 일부 물건이 나사로 올라갑니다.

이 문제를 일으키는 Style2.css에 대해 어떻게 결정할 수 있습니까? 일부 차이 도구? 일부 프로세스?

해결책

개똥 벌레 어떤 규칙이 재정의되고 있는지, 그리고 규칙이 어떤 스타일 시트에서 나오는지 보여줍니다.

문제 요소를 선택하면 적용되는 규칙을 보여줍니다. 그런 다음 효과를 참조/끄기로 전환 할 수 있습니다.

다른 팁

두 개의 CSS 스타일 시트를 직접 비교하여 차이점을 즉시 확인하십시오. http://www.alanhart.co.uk/archives/2010/12/15/compare-css-stylesheet-tool/

사이트의 CSS를 변경할 때 매우 편리하고 변경 사항을 기억할 수 없습니다 (원본의 백업을 비교하여 비교하는 한).

예, Diff 도구를 사용합니다 (확산 무료) 두 CSS 파일 사이에서 비슷한 점을 확인하십시오.

파일이 비슷한 레이아웃이있는 경우 Diffmerge (또는 해당 문제에 대한 Diffing 도구)가 좋지만 매우 다른 경우 (CSS가 예상되는 것처럼) 전체 파일을 하나의 큰 차이로 쉽게 표시 할 수 있습니다. 전혀 사용하지 마십시오.

이 상황에서 내가 할 일은 Firefox에 DOM Inspector를 설치하는 것입니다.

그런 다음 두 번째 스타일 시트를 포함시키고 페이지를 봅니다.

Bocked 요소를 마우스 오른쪽 버튼으로 클릭하고 "이것을 검사하십시오". 그런 다음 DOM 검사관의보기 모드를 CSS로 변경하십시오. 현재 요소에 적용되는 현재 스타일 캐스케이드를 보여주고 어떤 파일과 어떤 라인을 참조합니다.

이렇게하면 상충되는 스타일이 어디에 있는지 알아낼 수 있습니다.

이것은 자동 프로세스가 아니지만 스타일이 99% 동일하지 않으면 차이가 작동하지 않습니다.

이 PHP 클래스를 전에 사용했습니다. 잘 작동합니다.

모든 좋은 대답 .... 나는 이번에 올바른 것을 선택할 것을 혐오합니다.

믹스에 추가하기 위해 ... 동료가 FF 용 웹 개발자 도구 모음을 추천했습니다.

나는 CSS view 스타일 정보를 사용한 다음 이상한 것들을 클릭했습니다 ... 나는 새로운 스타일 시트에서 규칙을 빨리 찾았으며 그 높이를 근본적으로 바꾸고있었습니다.

사용하는 개발자를 위해 Visual Studio 2008 누가 이것을 읽을 수 있는지 :

WYSIWYG 디자이너에서 HTML 요소를 선택하면 CSS 속성 창을 사용하여 모든 CSS 규칙 및 다양한 CSS 규칙에서 상속 된 계단식 설정을 포함하여 해당 설정을 볼 수 있습니다.

속성 창에서 규칙을 클릭하면 각 CSS 설정의 소스를 식별 할 수 있습니다. 따라서 페이지 나 요소가 특정 방식으로 보이는 이유를 쉽게 파악할 수 있습니다.

Diffchecker (온라인) 도구. 매우 유용하고 빠릅니다. http://www.diffchecker.com/

라이센스 : CC-BY-SA ~와 함께 속성

제휴하지 않습니다 StackOverflow