맞춤 속성이있는 큰 gotcha

최근에 나는 CSS 사용자 정의 속성 의이 기능에 의해 많은 사람들 (나 자신을 포함한)이 혼란스러워한다는 것을 알았으므로 그것을 기록하기로 결정했습니다.

CSS에 몇 가지 사용자 정의 속성을 추가해 봅시다.

 html {
  -Color-1 : 빨간색;
  -Color-2 : 파란색;
}

우리는 즉시 배경 구배를 만듭니다.

 html {
  -Color-1 : 빨간색;
  -Color-2 : 파란색;

  -BG : Linear-Gradient (오른쪽으로, var (-color-1), var (-color-2));
}

이제 페이지에 두 개의 div가 있다고 가정합니다.

<div></div>
<div></div>

그들을 스타일로 만들자 :

 div {
  배경 : var (-bg);
}

이것은 완전히 작동합니다! 기이!

이제 스타일을 수정합시다. 나는 그것이 빨간색 에서 파란색으로 바뀌는 것을 원하지 않습니다. 나는 그것이 녹색 에서 파란색으로 바뀌기를 원합니다. 매우 간단합니다. 빨간색을 녹색으로 업데이트했습니다.

 html {
  -Color-1 : 빨간색;
  -Color-2 : 파란색;

  -BG : Linear-Gradient (오른쪽으로, var (-color-1), var (-color-2));
}
div {
  배경 : var (-bg);
}
.variation {
  -Color-1 : 녹색;
}

유효하지 않은! (사이렌은 시끄럽고 뿔은 시끄럽고 가축은 어디에나 숨어 있습니다).

친구, 이것은 작동하지 않습니다.

내가 이해하는 한, 문제는 --bg 어떤 DIV에서도 선언 된 적이 없다는 것입니다. --bg 더 높은 수준으로 선언되기 때문에 사용할 수 있지만 사용하면 그 값이 잠겼습니다. --bg 선언에 따라 사용 된 다른 속성을 변경했다고해서 속성이 종속성으로 사용되는 모든 위치를 찾아서 사용하는 모든 것을 업데이트한다는 것을 의미하지는 않습니다.

아아,이 설명은 옳지 않습니다. 그러나 이것은 내가 생각할 수있는 최고의 설명입니다.

해결책? 글쎄, 몇 가지가 있습니다.

솔루션 1 : 가변 범위를 사용되는 위치로 제한하십시오.

당신은 이것을 할 수 있습니다 :

 html {
  -Color-1 : 빨간색;
  -Color-2 : 파란색;
}

div {
  -BG : Linear-Gradient (오른쪽으로, var (-color-1), var (-color-2));
  배경 : var (-bg);
}
.variation {
  -Color-1 : 녹색;
}

이제 --bg 두 DIV에 대해 선언되며 --color-1 의존성 변경이 작동합니다.

솔루션 2 : 쉼표가 분리 된 대부분의 변수에 대한 선택기를 설정합니다.

:root 에서 많은 변수를 설정하는 일반적인 작업을했다고 가정 해 봅시다. 그런 다음이 문제를 해결합니다. 메인 선언에 추가 선택기를 추가하여 올바른 범위에 도달 할 수 있습니다.

 html,
div {
  -Color-1 : 빨간색;
  -Color-2 : 파란색;

  -BG : Linear-Gradient (오른쪽으로, var (-color-1), var (-color-2));
}
div {
  배경 : var (-bg);
}
.variation {
  -Color-1 : 녹색;
}

너무 멀리 가져 오지 않을 수있는 다른 예에서는 다음과 같습니다.

 :뿌리, 
.단추,
. what everation-is-a-bandaid {
  -패딩 인라인 : 1REM;
  -패딩 블록 : 1rem;
  -패딩 : var (-Padding-Block) var (-Padding-inline);
}

.Button {
  패딩 : var (-Padding);
}
.button.wide {
  -패딩 인라인 : 0.5rem;
}

해결책 3 : 포괄적 인 모드

그의 사방에 변수를 넣으십시오.

 * {
  -액세스 : 나;
  -어디서나 : 당신;
  -want : to;

  -hogwild : var (-Access) var (-어디서나);
}

이것은 좋은 해결책이 아닙니다. 페이지 렌더링으로 인해 중간 크기의 사이트 중 하나가 500ms로 지연된 채팅을 최근에 들었습니다. 페이지의 모든 그리기에는 모든 속성을 계산해야하기 때문입니다. "작동"하지만 이것은 선택기를 통해 합법적 인 성과 문제를 일으킬 수있는 몇 가지 예 중 하나입니다.

솔루션 4 : 새로운 "기본"속성 및 폴백을 소개합니다

여기의 모든 크레딧은 스티븐 쇼 (Stephen Shaw)에게 인정을 받았습니다. 스티븐 쇼 (Stephen Shaw).

우리가 처음 으로이 질문을 시연 한 곳으로 돌아가 봅시다.

 html {
  -Color-1 : 빨간색;
  -Color-2 : 파란색;

  -BG : Linear-Gradient (오른쪽으로, var (-color-1), var (-color-2));
}

우리가해야 할 일은 두 가지를주는 것입니다.

1. 전체 배경을 다루는 방법
2. 그라디언트 배경의 일부를 다루는 방법

그래서 우리는 이것을해야합니다.

 html {
  -Color-1 : 빨간색;
  -Color-2 : 파란색;
}
div {
  -BG-DEFAULT : 선형 별 (오른쪽으로, var (-color-1), var (-color-2));
  배경 : var (-bg, var (-bg-default));
}

우리는 --bg 전혀 선언하지 않습니다. 그것은 단지 값을 기다리고 있는데, 값을 얻는다면 그것은 "승리"의 가치입니다. 그러나 그렇지 않다면, 그것은 우리의 --bg-default 로 돌아갑니다. 지금……

1. --color-1 또는 --color-2 를 설정하면 예상대로 그라디언트의 일부를 대체합니다 (DIV 중 하나에 닿는 선택기 에서이 작업을 수행하는 한).
2. 또는 전체 배경을 내가 원하는대로 재설정하도록 --bg 설정할 수 있습니다.

그것을 다루는 좋은 방법처럼 느껴집니다.

때로는 CSS 사용자 정의 속성에 오류가 발생합니다. 그러나 그것은 그들 중 하나가 아닙니다. 나에게 버그 와 비슷하더라도 분명히 그렇지 않습니다. 당신이 알아야 할 것들 중 하나입니다.

위 내용은 맞춤 속성이있는 큰 gotcha의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!