우리는 'border'와 같은 콤팩트 CSS를 사용하거나 'border-color', 'border-width'와 같이 확장해야합니까?

Question

이 같은 테두리의 스타일을 작성할 수 있습니다

border: 2px solid #DDDDDD; 

또는 같은를 :

-moz-border-bottom-colors: none; 
-moz-border-left-colors: none; 
-moz-border-right-colors: none; 
-moz-border-top-colors: none; 
border-bottom-color: #dddddd; 
border-bottom-left-radius: 6px; 
border-bottom-right-radius: 6px; 
border-bottom-style: solid; 
border-bottom-width: 2px; 
border-image-outset: 0 0 0 0; 
border-image-repeat: stretch stretch; 
border-image-slice: 100% 100% 100% 100%; 
border-image-source: none; 
border-image-width: 1 1 1 1; 
border-left-color-ltr-source: physical; 
border-left-color-rtl-source: physical; 
border-left-color-value: #dddddd; 
border-left-style-ltr-source: physical; 
border-left-style-rtl-source: physical; 
border-left-style-value: solid; 
border-left-width-ltr-source: physical; 
border-left-width-rtl-source: physical; 
border-left-width-value: 2px; 
border-right-color-ltr-source: physical; 
border-right-color-rtl-source: physical; 
border-right-color-value: #dddddd; 
border-right-style-ltr-source: physical; 
border-right-style-rtl-source: physical; 
border-right-style-value: solid; 
border-right-width-ltr-source: physical; 
border-right-width-rtl-source: physical; 
border-right-width-value: 2px; 
border-top-color: #dddddd; 
border-top-left-radius: 6px; 
border-top-right-radius: 6px; 
border-top-style: solid; 
border-top-width: 2px; 

가장 선호하는 방법은 무엇입니까? 내가 이것을 묻는 이유는 Firebug를 사용할 때 아래에 보여준 것과 같은 규칙을 항상 확장한다는 것입니다.

만약 당신이 알고 계신다면 이걸 방화범에 끄는 법을 알려주세요.

Answer 1

Firebug가 확장하는 이유는 브라우저 이 속칭에 지정된대로의 스타일을 계산하는 방식을 볼 수 있기 때문입니다. 긴 길이를 재정의하는 것과 같은 계단식 충돌을 피하려면 긴 속성을 사용할 수 있지만 적용 가능한 속성과 그렇지 않은 속성을 조사해야합니다.

예제의 값은 대부분 구현에 따라 다르므로 다른 브라우저에서는 볼 수 없습니다. border 속기 속성은 border-width, border-style 및 border-color과 같은 모든 특정 측면뿐만 아니라 각 측면 (각면이 인 경우 각의 너비/스타일/색상)과 같은 CSS 표준의 몇 가지 특정 길이에 해당합니다. 자신의 속기에 속하는 일부 표준 길이 (border-top-left-radius)는 입력 CSS에 실제로 표시되지 않습니다. 나머지는 (*-ltr/rtl-source) are for internal use only입니다.