Functions

Editing

env(<environment-variable>[, <declaration-value>])

유저 에이전트(user agent)의 환경 변수의 값을 CSS에서 사용 하고자 할 때 제공되는 함수이다.

설명

똑같이 값을 읽는 var() 함수와의 차이점은 작성자가 정의한 것이 아닌 유저 에이전트(user agent)가 정의한 값을 읽는다는 것이다. 그리고 전역적이기 때문에 작성자가 선언한 위치에 영향을 받는 var() 함수와 차이점을 갖는다.

환경 변수

NameType
safe-area-inset-top<length>
safe-area-inset-right<length>
safe-area-inset-bottom<length>
safe-area-inset-left<length>
viewport-segment-width<length>
viewport-segment-height<length>
viewport-segment-top<length>
viewport-segment-left<length>
viewport-segment-bottom<length>
viewport-segment-right<length>
다른 CSS 속성과 달리 대소문자를 구분하므로 주의한다.

매개 변수

환경 변수의 이름 또는 배열 형식의 환경 변수인 경우 인덱스를 함께 지정할 수 있는 타입을 나타낸다. 인덱스를 지정하는 경우에는 환경 변수 명 뒤에 인덱스에 해당하는 정수를 지정한다.

  • CSS Environment Variables Module Level 1
    <custom-ident> <integer [0,∞]>*
Details

포함된 타입

  • <custom-ident>

    임의의 사용자 정의 문자열을 나타낸다.

    Details

    동일한 타입을 사용하는 관련 속성

    모든 속성을 표시하지 않을 수도 있다.

    • animation-name

      애니메이션으로 사용할 미리 정의된 키프레임 셋의 이름을 설정한다.

    • grid-column-end

      그리드 항목이 몇 개의 열(column)로 확장되는지 또는 항목이 끝나는 열(column)의 줄의 위치를 정의한다.

    • grid-column-start

      그리드 항목이 시작되는 열(column)의 줄의 위치를 정의한다.

    • grid-row-end

      그리드 항목이 몇 개의 행(row)으로 확장되는지 또는 그리드 항목이 끝나는 행(row)의 위치를 정의한다.

    • grid-row-start

      그리드 항목이 시작될 행(row)의 위치를 정의한다.

    • counter-increment

      하나 이상의 CSS 카운터 값을 늘리거나 줄인다.

    • counter-reset

      하나 이상의 CSS 카운터를 만들거나 재설정한다.

    • list-style-type

      목록의 마커의 모양을 설정한다.

  • <integer>

    <number-token> 유형 플래그가 'integer'인 소숫점이 없는 정수를 표현한다.

    • [HYPHEN-MINUS]?[0-9]

      0에서 9까지의 숫자로 구성된다. 선택적으로 음수 기호(U+002D HYPHEN-MINUS)가 앞에 올 수 있다.

    Details

    포함된 타입

    • <number-token>

      Number Token Railroad Diagrams

      + - digit . digit digit . digit e E + - digit

<declaration-value> 타입은 시퀀스에 허용되지 않는 토큰이 포함되지 않는 한 하나 이상의 토큰 시퀀스와 일치한다. 유효한 선언이 값으로 가질 수 있는 전체를 나타낸다.

환경 변수가 존재하지 않을 경우 사용되는 폴백(fallback) 값이다.

  • CSS Custom Properties for Cascading Variables Module Level 1
    <declaration-value>?

구문

padding: env(safe-area-inset-top, 50px) env(safe-area-inset-right, 50px) env(safe-area-inset-bottom, 50px) env(SAFE-AREA-INSET-LEFT, 50px);
CSS Environment Variables Module Level 1
Example

버전 명세

Modules
Module NameStatusSummary
CSS Environment Variables Module Level 1

Last review date: 2023-2-16

지원 웹브라우저