CSS 축소 및 압축: 팁 및 도구 (1)

CSS 최적화 도구

옵션:

• 줄바꿈을 삭제하지 않습니다(예 또는 아니요).
• URL, 파일, 붙여넣은 텍스트 등을 처리할 수 있는 CSS입니다.

복권 우편

선택 옵션: 없음

CSS 정리

선택적 옵션(각각에 대해 예 또는 아니요를 선택할 수 있음):

• 선택기 재정렬
• 속성 재정렬
• 최적화 선택기 및 해당 속성(0, 1 또는 2)
• 속기 속성 병합
• 보안 최적화만
• 색상 압축
• 압축글꼴 가중치
• 소문자 선택기
• 속성이 있는 글꼴(소문자 또는 대문자)
• 불필요한 백슬래시 제거
• 변환!중요한 해킹
• 마지막 세미콜론 ";"을 제거합니다.
• 메모 저장
• 잘못된 속성 제거(CSS2.1, CSS2.0 또는 CSS1.0)
• 파일로 입력

핀게이츠

선택적 옵션(각각에 대해 예 또는 아니요를 선택할 수 있음):

• 긴 색상 이름을 16진수로 변환
• 긴 16진수 코드를 짧은 16진수 코드로 변환
• 긴 16진수 코드를 색상 이름으로 변환
• RGB를 16진수로 변환
• 측정항목 0개 삭제
• 동일한 규칙을 병합합니다.
• 동일한 선택기를 결합
• 속성 병합
• 중복 속성 제거
• 여백과 패딩에서 쓸모없는 값을 제거합니다.
• 통계를 보여주다
• 컬러 형식으로 출력
• 출력에 최소 크기 사용

PHP 내부자

선택 옵션: 없음

세븐포티

옵션:

• 자르기 옵션: 500, 1000, 1500 또는 2000

이 도구는 YUI 압축기를 기반으로 하지만 IE 해킹을 자동으로 제거합니다 . 개발자는 IE 해킹이 기본 CSS 파일에 혼합되어 유지 관리하기 어려워지는 대신 단일 파일에 나타나야 한다고 설명합니다.

페이지 열

선택사항: 없음

권장되는 데스크탑 CSS 압축 도구

YUI 압축기 및 TB 압축기

YUI Compressor 는 Yahoo 프런트엔드 팀이 개발한 프런트엔드 코드 압축 도구로 매우 강력합니다. Java 실행 환경이 필요합니다. java 명령을 사용하여 CSS 및 JS 파일을 수동으로 압축하거나 ant를 사용하여 컴파일 중에 일괄적으로 압축할 수 있습니다.

Taobao 프런트 엔드 팀의 Yu Bo는 설치 및 제거가 매우 쉬운 YUI 압축기로 패키지된 Windows 플랫폼 압축 도구를 사용합니다. 강력한 YUI Compressor와 마찬가지로 TBCompressor는 CSS뿐만 아니라 JS도 압축할 수 있습니다.

여기에서 다운로드하세요 . TBCompressor에 대해 자세히 알아보기 – JS 및 CSS 압축 도구

또한 Qu Chao의 " TBCompressor를 통한 CSS 파일 압축 프로세스 개선 "을 읽어보는 것이 좋습니다.

웹 2.0 자원 최적화 도구

Delphi 7을 사용하여 중국인이 개발한 데스크톱 도구도 CSS와 JS를 압축할 수 있습니다. 추천합니다. 저자가 프로젝트의 소스코드를 공개했다는 점도 언급할 만하다.

병합CSS

CSS Forest 웹마스터 Gui Ge가 제작한 AIR 기반 도구로, 여러 파일 병합, @import 가져온 파일 병합 등과 같은 유용한 기능이 많이 있습니다. 자세한 소개를 확인하세요 .

약어 및 속성 병합에 대한 도구의 지원은 그다지 좋지 않다는 점에 유의해야 합니다. 이러한 지원을 추가할 수 있다면 더 좋을 수도 있습니다.

또 다른 매우 중요한 점은 지금까지 Gui Ge가 이 도구를 출시하지 않았다는 것입니다. 사용해 보고 싶다면 그에게 연락할 수 있습니다.

페이지 속도

Page Speed 는 실제로 Google에서 개발한 Firebug 기반의 Firefox 플러그인으로 웹사이트의 프런트엔드 성능을 분석하는 데 주로 사용됩니다. 하지만 페이지 속도 분석 결과 목록의 CSS 축소 옵션에서 클릭하면 CSS의 압축률을 확인할 수 있으며 나중에 압축 버전이 제공되므로 클릭하여 볼 수 있습니다. 유일한 단점은 압축을 사용자 정의할 수 없다는 것입니다.

웹사이트가 아무리 보기 흉하더라도 GZIP은 다양한 유형의 코드를 압축하는 데 정말 유용한 도구입니다. 가장 간단한 압축 방법이 아닐 수도 있고, 초보자에게는 다소 혼란스러울 수도 있습니다. GZIP을 사용하여 스타일을 압축하는 방법에 대한 자세한 내용은 이 튜토리얼을 확인하세요.

요약

앞서 말했듯이 이러한 방법 중 일부는 과도하거나 무의미해 보일 수 있습니다. 중요한 것은 큰 그림을 보는 것이다. 이러한 기술 중 하나는 거의 무시할 만한 영향을 미칠 수 있지만 이러한 기술 중 일부 또는 전부를 결합하면 CSS 파일 크기에 큰 영향을 미칠 수 있습니다.