CSS에서 6 자리 색상 코드 대신 3 자리 색상 코드를 사용하는 방법은 무엇입니까?
최근에 CSS 파일을 살펴보고 모든 6 자리 16 진수 코드를 간단한 3 자리 코드로 전환했습니다 (예 :으로 #FDFEFF단축 됨 #FFF). 이전과 거의 똑같은 색상으로 렌더링되며 중간 부분이 상당히 쓸모없고 제거하면 CSS 파일에서 전체 300 바이트가 절약되는 것 같습니다.
사용하는 버전이 중요합니까? 저는 3 자리 코드 만 사용하는 웹 사이트를 거의 실행하지 않습니다 (또는 그런 코드를 사용하는 웹 사이트는 절대 실행하지 않는 것 같습니다). 6 자리 코드보다 3 자리 코드를 사용하는 것이 여전히 완벽하게 유효합니까, 아니면 전체 6 자리 코드를 사용해야합니까?
3 자리 코드 속기이다 #123동일하다 #112233. 귀하가 제공하는 예에서 (효과적으로)로 바꿨 #FDFEFF습니다 #FFFFFF. 이는 원래 색상에 가깝지만 분명히 정확하지는 않습니다.
따라서 어떤 버전을 사용하는지는 "중요"하지 않지만 3 자리 색상 코드는 음영 선택의 폭이 적다는 것을 의미합니다. 300 바이트를 절약하는 것이 그만한 가치가 있다고 생각한다면 계속해서 3 자리 코드를 사용하십시오.하지만 저 대역폭 상황을 위해 설계하지 않는 한 300 바이트는 실제로 그다지 절약 할 수 없습니다.
속기 짜증! 그것을 사용하지 마십시오. 예를 들어 색상 값을 검색하고 교체 할 때 ( "아, 이제 고려해야 #FFFFFF하고 white및 #FFF") 와 같이 불필요한 변형을 유지하고 생성하는 것이 더 어렵습니다 .
크기로 절약 한 것은 유지 관리 측면에서 잃은 가치가 없습니다. 최소화 및 압축을 사용하여 대역폭을 절약하십시오.
바이트를 절약하려면 CSS 축소 기술을 사용하는 것이 좋습니다.
- http://en.wikipedia.org/wiki/Minification_ (프로그래밍)
- http://developer.yahoo.com/yui/compressor/
- http://www.minifycss.com/
IE 7 8 또는 9의 표에서 이것을 사용하는 경우 (안타깝게도이 응답 날짜와 관련이 있습니다)
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_tables
6 자리 코드는 정상적으로 작동하지만 3 자리 코드는 검은 색으로 렌더링됩니다.
<table border="1" bgcolor="#ff0000"> vs. <table border="1" bgcolor="#ff0">
"3 자리"버전이 필요한 색상을 생성하면 원하는만큼 사용할 수 있습니다. 확실히 잘못이 아닙니다.
나는 항상 속기를 사용합니다. 가장 큰 장점은 코드를 쉽게 기억할 수 있다는 것입니다.
선택할 수있는 색상 은 16 3 = 4,096 개로 충분합니다.
그러나 속기 색상 코드로 300 바이트를 저장하면 CSS에서 100 개의 색상이 삭제되었음을 의미합니다. 귀하의 페이지가 매우 다양하거나 모든 무지개와 꽃이 아니라면 많이 보입니다. 체계적인 CSS에 능숙 할 수 있지만 종종 불필요한 CSS 규칙을 보게됩니다. 예 : 조부모 및 하나의 예외 요소에 규칙을 설정하는 것으로 대체 될 수있는 많은 하위 요소에 동일한 규칙을 설정하는 경우.
사실이지만이 변환은 일반적이지 않습니다.
#FFF == #FFFFFF
#CCC == #CCCCCC
그래서 그것이하는 것은 각 16 진수 숫자를 "두 배"로 만드는 것입니다. 그래서 같은 색이 아닙니다. 그러나 차이가 미세하기 때문에 동일하게 보일 수 있습니다. 이 경우 보정 된 색상 워크 플로가 도움이 될 수 있습니다.
속기 또는 일반 16 진수 색상을 사용하는지 여부는 중요하지 않으므로 원하는 경우 변환하십시오.
그것들을 제거하면 CSS 파일에 300 바이트가 저장되었습니다.
와, 전체 300 바이트입니다! : D, 풍자 ftw
문제는 모든 css, javascript 등을 축소, 압축 및 결합하지 않는 한 300 바이트, 특히 평균 인터넷 속도가 증가함에 따라 거의 귀찮게 할 가치가 없다는 것입니다.
즐기세요!
'IT TIP' 카테고리의 다른 글
| 다중 조인을 만들 때 tmp 테이블에 대한 MySQL 잘못된 키 파일 (0) | 2020.12.14 |
|---|---|
| jQuery에서 사용자 정의 함수 호출 (0) | 2020.12.14 |
| 속성에 대한 고유 한 유효성 검사 규칙이있는 Laravel 업데이트 모델 (0) | 2020.12.13 |
| 지금부터 5 초 후 Java로 어떻게 말합니까? (0) | 2020.12.13 |
| Python에서 JSON 출력 정렬 (0) | 2020.12.13 |