계산 된 값 : 눈을 만나는 것 이상

프론트 엔드 개발자는 브라우저 개발자 도구 없이는 할 수 없습니다. 이 기사는 개발자 도구의 컴퓨팅 탭으로 뛰어들 것입니다. 눈에 띄지 않지만 상대 CSS 값이 어떻게 구문 분석되는지와 같은 많은 중요한 정보를 드러 낼 수 있습니다. 또한 브라우저의 스타일 계산 프로세스에서 상속이 어떻게 작동하는지 배웁니다.

컴퓨팅 탭의 컨텐츠는 브라우저가 실제로 웹 사이트를 렌더링하는 데 사용하는 값을 보여주기 때문에 중요합니다. 요소의 스타일이 기대치와 일치하지 않으면 계산 탭이 이유를 이해하는 데 도움이 될 수 있습니다.

Styles 탭 (Firefox에서 규칙이라고 함)을 사용하는 데 익숙한 경우 계산 탭과 어떻게 다른지 궁금 할 것입니다. 그들은 모두 요소에 적용되는 스타일을 보여줍니다. 답은 : 계산 탭은 스타일 시트, 상속 스타일 및 브라우저의 기본 스타일에 선언 된 스타일을 포함하여 알파벳순으로 배열 된 구문 분석 스타일 목록을 표시합니다.

반면에 스타일 탭은 선택한 요소에 대한 규칙 세트를 작성했을 때와 정확히 정확히 표시합니다. 따라서 스타일 탭은 .subhead {font-size: 75%} 와 같은 것을 표시 할 수 있으며 계산 탭에는 실제 글꼴 크기 또는 현재 구문 분석 값의 70%가 표시됩니다. 예를 들어, 위에 표시된 렌더링 된 텍스트의 실제 글꼴 크기는 13.2px입니다.

다음으로, 상속 및 캐스케이드의 개념을 간단히 검토하겠습니다. 이것은 컴퓨팅 탭에서 계산 된 값을 도출하는 데있어 두 가지 중요한 요소입니다.

상속 및 계단식 충돌 코스

CSS는 계단식 스타일 시트를 나타냅니다.“계단식”이라는 단어는 매우 중요합니다. 계단식 행동이 CSS 이해의 열쇠입니다.

MDN

캐스케이드는 CSS의 "C"를 나타 내기 때문에 주목할 가치가 있습니다. 문서 선언 소스 간의 충돌을 해결하는 데 사용되는 메커니즘입니다.

예를 들어 스타일 시트가 div의 너비를 두 번 정의한다고 가정합니다.

 <code>div { width: 65vw; } /* 在后面的某个位置*/ div { width: 85vw; }</code>

이 예에서 두 번째 너비는 끝에 선언되기 때문에 승리합니다. 첫 번째 너비는 여전히 사용될 수 있습니다 !important 승리는하지만 실제로 캐스케이드를 무차별로 파괴하는 것입니다. 핵심은 계단식 알고리즘이 각 요소에 적용되는 스타일을 결정하고 값을 결정하기 위해 미리 정해진 순서로 우선 순위를 지정한다는 것입니다.

계단식은 브라우저, 웹 개발자 또는 사용자가 설정한지에 관계없이 명시 적으로 설정된 속성에 적합합니다. 캐스케이드의 출력이 비어 있으면 상속이 작동합니다. 이 경우 요소의 상위 요소에서 속성의 계산 된 값이 속성 자체 값으로 추출됩니다. 예를 들어, 요소에 대한 색상을 지정하는 경우 자식 요소의 색상을 지정하지 않으면 모든 자식 요소가 해당 색상을 상속합니다.

진행하기 전에 상속과 관련된 4 가지 주요 속성 값에 익숙해야합니다. 우리는 기사 전체에서 그것들을 사용할 것입니다.

초기의

HTML 문서에서 DOM 트리의 최고 수준은 요소, 요소에서 initial 키워드를 사용하면 예를 들어 ...

...이 요소의 텍스트 색상은 검은 색입니다. 요소는 녹색으로 설정됩니다.<code><div> 선택기의 특이성이 높지만 <code>initial 검은 색으로 변환되는 이유에 관심이 있습니다.

간단히 말해서,이 키워드는 정의 테이블 (CSS 사양)을 기반으로 속성의 기본값을 설정합니다. 이 경우 Black은 브라우저가 초기 색상 값을 구현하는 것입니다.

기사 끝에서 MDN의 페이지를 보면서 속성이 기본적으로 상속되는지 확인할 수 있다고 언급했습니다. 이러한 방식으로 속성의 초기 값을 찾을 수도 있습니다.

상속

상속되지 않은 속성의 경우이 키워드는 상속을 시행합니다. 다음 예에서<p> 요소는 단단한 빨간색 테두리를 가지고 있습니다. <code>border 속성은 기본적으로 상속되지 않지만 border 속성에서 inherit 키워드를 사용하여 알려줄 수 있습니다.<div> 상속<code><p> 요소에 대해 동일한 빨간색 테두리가 선언되었습니다.</p> <h4 id="세트가-없다"> 세트가 없다</h4> <p> 속성이 상속되면 <code>unset 상속 된 값으로 해결됩니다. 그렇지 않으면 초기 값이 사용됩니다. 이는 기본적으로 속성이 상속되는지 여부에 따라 unset 가 속성을 재설정 함을 의미합니다. 다음은 스위치 unset 다른 수준의 특이성을 가진 요소에 미치는 영향을 보여주지 않도록하는 데모입니다.

돌아가는 것

CSS 속성이 요소에 설정되지 않은 경우 스타일이 발생합니까? 틀림없이. 브라우저의 기본 스타일을 사용합니다.

예를 들어,<span></span> 요소의 display 속성의 초기 값은 inline 이지만 스타일 시트의 block 으로 지정할 수 있습니다. 다음 데모에서 버튼을 사용하십시오<span></span> 요소의 display 및 color 특성을 revert 합니다.

<span></span> 인라인 요소로 올바르게 되돌아 보지만 기다리십시오! 눈치 채 셨나요?<span></span> 색상의 색상은 브라우저의 기본 검은 색 값 대신 녹색으로 변경됩니까? 이는 revert 상속을 허용하기 때문입니다. 색상을 설정하기 위해 브라우저의 기본값으로 거슬러 올라가지 만 우리가<p> 녹색은 요소에 명시 적으로 설정되므로 상속하는 것입니다.</p> <h3 id="개발자-도구에서-계산-된-값을-찾으십시오"> 개발자 도구에서 계산 된 값을 찾으십시오</h3> <p> 이곳에서 개발자 도구의 값 계산에 대해 이야기하기 시작합니다. CSS 속성의 기본값과 마찬가지로 CSS 속성의 계산 된 값은 CSS 사양의 속성의 정의 테이블에 의해 결정됩니다. <code>height 속성의 모양은 다음과 같습니다.

CSS에서 10EM 또는 70% 또는 5VW와 같은 상대 길이를 사용한다고 가정 해 봅시다. 이것들은 글꼴 크기 또는 뷰포트와 관련이 있기 때문에 픽셀 절대 값으로 해결해야합니다. 예를 들어, 뷰포트 너비가 1000px 인 경우 너비가 10% 인 요소는 100px로 계산 될 수 있지만 뷰포트 너비가 변경되면 다른 숫자로 계산됩니다.

이 값은 DOM이 수정 될 때 계산 스타일 계산 이라는 프로세스 중에 계산됩니다. 이를 통해 브라우저는 각 페이지 요소에 적용 할 스타일을 알 수 있습니다.

스타일 계산에는 여러 값과 관련된 여러 단계가 포함됩니다. 이들은 CSS 계단식 및 상속 레벨 4 사양에 문서화되어 있으며 컴퓨팅 탭에서 볼 수있는 최종 값에 영향을 미칩니다. 다음에 이것을 살펴 보겠습니다.

가치와 처리 방법

스타일 계산 프로세스에 대해 정의 된 값에는 선언 된 값 , 지정된 값 , 계단식 값 , 계산 된 값 , 중고 값 및 실제 값이 포함됩니다. 누가 너무 많다는 것을 누가 알 겠어요?

가치를 선언하십시오

선언 값은 요소에 적용되는 속성 선언입니다. 브라우저는 다음을 포함한 일부 조건을 기반으로 이러한 진술을 인식합니다.

• 선언은 현재 문서에 적용되는 스타일 시트에 있습니다.
• 스타일 선언에는 일치하는 선택기가 있습니다
• 스타일 선언에는 유효한 구문이 포함되어 있습니다 (즉, 유효한 속성 이름 및 값)

다음 HTML :

<code><main>
<p>거부가 아닙니다. 나는 내가 받아들이는 현실에 대해 단지 선택적입니다.</p>
</main></code>

다음은 텍스트 글꼴 크기에 적용되는 선언 된 값입니다.

 <code>main { font-size: 1.2em; /* 如果段落元素没有被专门定位，这将适用，即使那样，作为继承值，而不是“声明值” */ } main > p { font-size: 1.5em; /* 声明值*/ }</code>

계단식 값

요소에 적용되는 모든 선언 된 값은 단일 값을 반환하는 데 우선 순위가 결정됩니다.

• 진술의 출처 (브라우저, 개발자 또는 기타 소스에서 나옵니다?)
• 선언이 " !important "로 표시되어 있는지 여부
• 규칙의 특이성 (예 : span {} 및 section span {} )
• 외관 순서 (예 : 여러 선언이 적용되는 경우 마지막 선언을 사용하십시오)

다시 말해, 계단식 값 은 "승리"라는 진술입니다. 캐스케이드가 승리 선언 된 가치를 생성하지 않으면 캐스케이드 가치가 없습니다.

 <code>main > p { font-size: 1.2em; } main > .product-description { /* 上一个规则中定位的相同段落*/ font-size: 1.2em; /* 基于特异性和文档顺序的级联值，忽略所有其他考虑因素，例如来源*/ }</code>

값을 지정합니다

앞에서 언급했듯이 계단식 출력이 비어있을 수 있습니다. 그러나 여전히 다른 방식으로 가치를 찾아야 할 필요가 있습니다.

이제 요소의 특정 속성에 대한 값이 아니라 부모 요소에 대한 값을 선언한다고 가정하십시오. 여러 위치에서 동일한 값을 설정할 필요가 없기 때문에 이것은 우리가 종종 의도적으로하는 일입니다. 이 경우 상부 요소의 상속 값이 사용됩니다. 이것을 지정된 값 이라고합니다.

대부분의 경우 계단식 값도 지정된 값입니다. 그러나 계단식 값이없고 관심있는 속성이 상속 된 경우 (기본적으로 상속 받거나 inherit 키워드를 사용하든) 상속 된 값이 될 수 있습니다. 속성이 상속되지 않으면 지정된 값은 이전에 언급했듯이 속성의 초기 값이며 initial 키워드를 사용하여 명시 적으로 설정할 수도 있습니다.

대체로, 지정된 값은 해당 요소에 명시 적으로 선언되는지 여부에 관계없이 요소에 사용하려는 값입니다. 스타일 시트에 선언이 없으면 브라우저의 기본값도 지정된 값이 될 수 있기 때문에 이것은 약간 흐릿합니다.

 <code>/* 浏览器默认值= 16px */ main > p { /* 没有为段落元素及其所有祖先声明字体大小的值*/ }</code>

값을 계산하십시오

우리는 상대적 값을 절대 픽셀 동등한 값으로 어떻게 구문 분석 해야하는지 간단히 논의했습니다. 앞에서 언급 했듯이이 프로세스는 미리 정해져 있습니다. 예를 들어, 속성 정의 테이블에는 지정된 값이 일반적으로 구문 분석되는 방법을 자세히 설명하는 계산 된 값 필드가 있습니다.

다음 예에서는 상대 단위 인 EM을 사용합니다. 여기서, 속성이 적용되는 요소를 렌더링 할 때 사용되는 최종 값은 선언 된 값으로 표시되는 고정 숫자가 아니라 일부 요소에 따라 계산 해야하는 값입니다.

 <code>main { font-size: 1.2em; } main > p { font-size: 1.5em; /* 声明值*/ }</code>

단락 요소의 글꼴 크기는 1.5EM으로 설정되며, 이는 main 요소의 글꼴 크기에 비해 1.2EM입니다. main 이라면 요소의 직접 자식 요소 및 예를 들어 :root 선택기를 사용하여 추가 글꼴 크기 선언이 작성되지 않습니다. 단락 글꼴 크기의 계산이 다음의 일반적인 프로세스를 따를 것이라고 가정 할 수 있습니다.

 <code>Browser_Default_FontSize = 16px; Calculated_FontSize_For_Main = 1.2 * Browser_Default_FontSize; // 19.2px Calculated_FontSize_For_Paragraph = 1.5 * Calculated_FontSize_For_Main; // 28.8px</code>

28.8px는 계산 된 값 입니다. 다음은 데모입니다.

개발자 도구를 열고 계산 탭에서 계산 된 글꼴 크기를 봅니다.

REM 장치를 사용하고 있다고 가정합니다.

 <code>html { font-size: 1.2em; } main { font-size: 1.5rem; } div { font-size: 1.7rem; }</code>

REM 장치의 계산 된 값은 루트 HTML 요소의 글꼴 크기를 기반으로하므로 계산은 약간 다릅니다. 이 경우 HTML 요소에서 상대 장치를 사용하므로 브라우저의 기본 글꼴 크기 값을 사용하여 모든 REM 값을 구문 분석하는 데 사용할 기본 글꼴 크기를 계산합니다.

 <code>Browser_Default_FontSize = 16px Root_FontSize = 1.2 * Browser_Default_FontSize; // 19.2px Calculated_FontSize_For_Main = 1.5 * Root_FontSize; // 28.8px Calculated_FontSize_For_Div = 1.7 * Root_FontSize; // 32.64px</code>

이 데모를위한 개발자 도구를 다시 엽니 다.

Browser_Default_FontSize 의 값은 일반적으로 브라우저에서 사용되지만 브라우저마다 다를 수 있습니다. 현재 기본값을 보려면 개발자 도구에서 요소를 선택하고 표시된 글꼴 크기를보십시오. 예제와 같은 루트 요소의 값을 명시 적으로 설정하면 규칙 탭에서 값을 닫아야 할 수도 있습니다. 다음으로 계산 탭에서 모든 또는 브라우저 스타일 (Firefox) 확인란을 전환하여 기본값을 볼 수 있습니다.

상속 중에 계산 된 값은 부모 요소에서 자식 요소로 전달됩니다. 이 계산 프로세스는 이전에 본 4 가지 상속 제어 키워드를 고려합니다. 일반적으로 상대 값은 절대가됩니다 (즉, 1REM은 16px가됩니다). 이것은 상대 URL이 절대 경로가되는 곳이며, bolder 키워드 ( font-weight 특성의 값)가 구문 분석되는 곳입니다. 문서에서 더 많은 예를 볼 수 있습니다.

사용 가치

값의 사용은 계산 된 값에 대해 모든 계산이 완료된 후 최종 결과입니다. 여기서 모든 상대 값은 절대 값이됩니다. 이 사용 값은 페이지 레이아웃에 (일시적으로) 적용됩니다. 왜 추가 계산이 필요한지 궁금 할 것입니다. 이 모든 것이 지정된 값을 처리하여 값을 계산할 때 이미 이전 단계에서 처리되지 않았습니까?

문제는 이것입니다. 일부 상대 값은 여기에서 픽셀 절대 값으로 만 해결 될 수 있습니다. 예를 들어, 백분율로 지정된 너비는 페이지 레이아웃을 구문 분석해야 할 수 있습니다. 그러나 대부분의 경우 계산 된 값은 또한 사용 된 값이됩니다.

경우에 따라 사용 값이 존재하지 않을 수 있습니다. CSS 계단식 및 상속 레벨 4 사양에 따르면 :

... 속성이 요소에 적용되지 않으면 값을 사용하지 않습니다. 예를 들어, flex 속성은 유연한 항목이 아닌 요소의 값을 사용하지 않습니다.

실제 가치

때로는 브라우저가 사용 값을 즉시 적용 할 수 없으며 조정해야합니다. 이 조정 값을 실제 값 이라고합니다. 사용 가능한 글꼴에 따라 글꼴 크기를 조정 해야하는 상황을 고려하거나 브라우저가 렌더링 중에 정수 값 만 사용할 수 있고 비 integer 값을 근사 해야하는 경우를 고려하십시오.

브라우저 스타일 계산의 상속

요약하면, 상속은 명시 적으로 설정되지 않은 요소의 값을 제어합니다. 상속 된 속성의 경우,이 값은 상위 요소에서 계산 된 값과 비 상승성 속성의 경우 속성의 초기 값 ( initial 키워드가 지정 될 때 사용되는 값)에서 가져옵니다.

우리는 이전에 "계산 된 값"의 존재에 대해 간략하게 논의했지만 무언가를 명확히해야합니다. 우리는 스타일 구문 분석 프로세스에 참여하는 값 유형으로 계산 된 값을 논의하지만 "계산 된 값"은 페이지 스타일에 대해 브라우저에서 계산 된 값의 일반적인 용어입니다. 일반적으로 주변 컨텍스트를 통해 우리가 언급하는 유형을 이해할 수 있습니다.

계산 된 값 만 상속 된 속성에 액세스 할 수 있습니다. 픽셀 절대 값 (예 : 477px), 숫자 (예 : 3) 또는 값 (예 : left (예 : text-align: left )은 상속 프로세스에 대한 준비가되어 있습니다. 85%와 같은 백분율 값은 85%와 같은 비율이 아닙니다. 속성에 대한 상대 값을 지정할 때 (즉, "사용"값은 계산되어야합니다. 크기) 또는 값 (예 : 장치 뷰포트의 너비). 따라서 속성의 최종 값은 선언 된 값 일 수 있으며 추가 처리가 필요할 수 있습니다.

브라우저의 계산 탭에 표시된 값이 이전에 논의한 계산 된 값 (예 : 계산 된 값 대 지정된 값 또는 사용 값)이 아니라는 것을 알 수 있습니다. 대신 표시된 값은 getComputedStyle() 함수에 의해 리턴 된 값과 동일합니다. 이 함수는 속성에 의존하는 값을 반환하며 계산 된 값 또는 중고 값입니다.

이제 몇 가지 예를 살펴 보겠습니다.

색상 상속

 <code>main { color: blue; } /* 颜色无论如何都会继承，但我们也可以明确说明： */ main > p { color: inherit; }</code>

main 요소의 color 속성은 파란색으로 계산됩니다. 기본적으로 색상 상속이 있으므로 실제로 color: inherit 는 없습니다. 결국 파란색이됩니다. 그러나 이것은 이것을 설명하는 데 도움이됩니다.

색상 값은 자체 구문 분석 프로세스를 통해 사용 가치가됩니다.

글꼴 크기 상속

 <code>main { font-size: 1.2em; } main > p { /* 未指定样式*/ }</code>

값과 처리 방법에 대한 섹션에서 볼 수 있듯이 글꼴 크기 상대 값은 절대 값으로 계산 된 다음 단락 요소에 의해 상속됩니다. 비록 우리가 명시 적으로 선언하지 않더라도 (기본적으로 글꼴 크기가 상속됨). 글로벌 단락 요소 선택기를 통해 이전에 스타일을 유지 한 경우, 단락은 캐스케이드로 인해 추가 스타일을 얻을 수 있습니다. 가능한 상속 값이 상속되며 값을 생성하지 않는 일부 속성은 초기 값으로 설정됩니다.

지정된 글꼴 크기 상속 백분율

 <code>body { font-size: 18px; } main { font-size: 80%; } main > p { /* 未指定样式*/ }</code>

이전 예와 유사하며<main></main> 요소의 글꼴 크기는 상속을 준비하기 전에 절대적이며 단락은 신체의 18px 값의 80%, 즉 14.4px의 글꼴 크기를 상속합니다.

강제 상속 및 층 후 계산

계산 된 값은 일반적으로 레이아웃없이 가능한 많은 지정된 값을 구문 분석하지만 앞에서 언급했듯이 일부 값은 지정된 폭 값과 같은 레이아웃 후에 만 ​​구문 분석 할 수 있습니다. width 상속 속성이 아니지만 상속이 전 및 후 레이아웃 스타일 구문 분석을 설명하도록 강요 할 수 있습니다.

이것은 인공적인 예이지만, 우리가 한 일은 display 속성을 none 으로 설정하여 페이지 레이아웃에서 요소를 제거하는 것입니다. 태그의 두 개의 div는 부모 요소의 폭의 50%를 상속합니다. 개발자 도구 "계산"탭에서 첫 번째 DIV의 계산 너비는 절대적이며 픽셀 값 (243.75px)으로 해결되었습니다. 반면, display: none 사용하여 레이아웃에서 제거 된 두 번째 div의 너비는 여전히 50%입니다.

부모 요소의 지정되고 계산 된 값은 계산 탭에 표시된 값을 사용하여 50% (레이아웃 전)라고 가정합니다. 레이아웃 후 487.5px입니다. 이 값 Quilt Div는 2 개로 나뉩니다 (블록의 50% 포함).

이 값은 브라우저 뷰포트의 너비가 변경 될 때마다 계산해야합니다. 따라서 백분율로 지정된 값은 계산 된 백분율이되어 픽셀 사용 값이됩니다.

기본 상속 속성

기본적으로 속성이 상속되어 있는지 어떻게 알 수 있습니까? MDN 문서의 각 CSS 속성에 대해 속성이 상속되는지 여부를 포함하여 추가 세부 정보를 제공하는 사양 섹션이 있습니다. 다음은 color 속성의 모양입니다.

기본적으로 상속되고 속성이없는 속성은 상식에 크게 의존합니다.

MDN

또 다른 참조 옵션은 W3C 사양의 속성 섹션입니다. 다른 하나는이 stackoverflow 스레드이며, 글을 쓰는 시점에는 철저하지 않을 수 있습니다.

기본 상속 속성 예제는 다음과 같습니다.

• color
• direction
• font-family
• font-size
• font
• letter-spacing
• line-height
• list-style-type
• tab-size
• text-align
• text-justify
• text-transform
• visibility
• word-wrap

상속되지 않은 속성의 예 (그러나 inherit 키워드를 사용하여 상속을 강요 할 수 있음) :

• box-shadow
• border
• content
• height
• margin
• object-fit
• opacity
• padding
• position
• transform
• transition
• width
• z-index

바라건대 이것은 브라우저가 스타일을 계산하는 방법과 개발자 도구에서이를 참조하는 방법에 대한 명확한 이해를 제공합니다. 보시다시피, 무대 뒤에는 많은 가치가 있습니다. 이러한 맥락을 갖는 것은 작업 문제 해결을 돕고 우리가 알고있는 훌륭한 언어 CS에 대해 더 많이 배우는 데 매우 도움이됩니다.

추가 독서

• quirksmode.org inherit , initial 및 unset 값
• Asha Laxmi의 CSS 상속 : 소개
• Heydon Pickering의 CSS 상속, 계단식 및 글로벌 범위 : 새롭고 오래된, 나쁜 가장 친한 친구
• 캐스케이드, 상속 및 특이성 취급에 대한 Ollie Williams의 최신 접근 방식
• MDN의 계단식 및 상속
• MDN 상속
• MDN의 캐스케이드
• CSS 캐스케이드 및 상속 레벨 4 (W3C 사양)
• Ilya Grigorik의 렌더 트리 구조, 레이아웃 및 드로잉
• MDN의 Window.getComputedStyle()
• Aaron Gustafson의 대화식 URL