사용자 정의 속성을 가진 색상을위한 문맥 유틸리티 클래스

CSS의 currentColor 속성은 매우 실용적이지만 불행히도 우리는 유사한 currentBackgroundColor 속성이 없으며 color-mod() 함수는 아직 널리 지원되지 않습니다.

따라서 많은 개발자들은 컨텍스트에 따라 링크를 스타일링하고 호버링하거나 초점을 맞출 때 색상을 뒤집기를 원합니다. CSS 사용자 정의 속성과 일부 간단한 유틸리티 클래스를 사용하면 스타일의 계단식 기능을 사용하여 강력한 효과를 얻을 수 있습니다.

이를 위해서는 텍스트와 배경색을 지정하기 위해 유틸리티 클래스 (사용자 지정 속성 포함)를 사용 하여이 클래스를 사용하여 밑줄이 그어진 색상을 정의하고 호버링시 전체 배경으로 확장해야합니다.

먼저 HTML 구조를 살펴 보겠습니다.

<p>
    Lorem ipsum dolor sit amet, consectetur apiscing elit, <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">sed do eiusmod tempidiDunt</a> Ut Labore et dolore magna aliqua. Aliquam Sem Fringilla Ut Morbi Tincidunt. Maecenas accumsan lacus vel pacilisis. posuere sollicitudin aliquam 초 Ultrices sagittis orci sclerisque purus semper.
  </p>

이 코드에는 단락과 링크가 포함되어 있습니다. 다음으로 유틸리티 클래스를 설정했습니다. 컬러 헌트에서 4 가지 색상을 정의하여 색상 속성 클래스와 배경색 속성 클래스를 생성합니다. 각각은 값 (각각 --c 및 --bg )을 할당하는 변수를 포함합니다. 예를 들어, 해당 녹색 클래스는 다음과 같습니다.

 .u-color-- 녹색 {
  ---C : https://www.php.cn/link/93ac0c50dddc7b88e5fe05c70e15b08ffc8;
  색상 : https://www.php.cn/link/93ac0c50dddc7b88e5fe05c70e15b08ffc8;
}

.u-bg--green {
  ---bg : https://www.php.cn/link/93ac0c50dddc7b88e5fe05c70e15b08ffc8;
  배경색 : https://www.php.cn/link/93ac0c50dddc7b88e5fe05c70e15b08ffc8;
}

SASS 사용자는 매핑 및 루프를 사용하여 자동으로 색상 및 배경 클래스를 생성 할 수 있습니다. 이것은 필요하지 않으며 많은 색상 관련 유틸리티 클래스를 자동으로 생성하는 한 가지 방법 만 있습니다. 이것은 매우 유용하지만 사용량을 추적하고 사용하지 않은 클래스를 만드는 것을 피하십시오. 다음은 이러한 클래스를 생성하는 SASS 코드입니다.

 $ colors : (// 색상 목록 정의 '녹색': https://www.php.cn/link/93ac0c50dddc7b88e5fe05c70e15b08ffc8,
  'light': https://www.php.cn/link/93ac0c50dddc7b88e5fe05c70e15bffff7f7,
  '그레이': https://www.php.cn/link/93ac0c50dddc7b88e5fe05c70e15bdadada,
  '다크': https://www.php.cn/link/93ac0c50dddc7b88e5fe05c70e15b204969
);

@each $ n, $ c in $ colours {// $ n은 키입니다. $ c는 값입니다.
    ---C : https://www.php.cn/link/93ac0c50dddc7b88e5fe05c70e15b {$c};
    색상 : https://www.php.cn/link/93ac0c50dddc7b88e5fe05c70e15b {$c};
  }

  .u-bg--https : //www.php.cn/link/93ac0c50dddc7b88e5fe05c70e15b {$ n} {
    ---bg : https://www.php.cn/link/93ac0c50dddc7b88e5fe05c70e15b {$c};
    배경색 : https://www.php.cn/link/93ac0c50dddc7b88e5fe05c70e15b {$c};
  }
}

html에서 유틸리티 클래스를 적용하는 것을 잊어 버린 경우 --c 변수는 currentColor 를 사용하며 --bg ! 이를 피하기 위해 최상위 기본값을 정의합니다.

 html {
  ---C : https://www.php.cn/link/93ac0c50dddc7b88e5fe05c70e15b000000;
  ---bg : https://www.php.cn/link/93ac0c50ddc7b88e5fe05c70e15bffffff;
}

이제 링크를 스타일링하십시오. 이 기사에서 우리는 모두 스타일을 지정할 것입니다<a></a> 요소이지만 .fancy-link 와 같은 클래스를 추가하기 쉽습니다.

링크의 스타일은 "사랑의 증오"순서를 따라야합니다 : :link , :visited , :hover (및 :focus !) 및 :active . 우리는 사용할 수 있지만 :any-link 이지만 브라우저 지원은 CSS 사용자 정의 속성만큼 좋지 않습니다.

먼저 링크 스타일을 선언하고 이전 브라우저에 허용되는 경험을 제공 한 다음 사용자 정의 속성 지원을 확인할 수 있습니다.

 /* 오래된 브라우저의 스타일*/
A {
  색상 : 상속;
  텍스트 결정 : 밑줄;
}

A : 호버,
A : 초점,
A : Active {
  텍스트 결정 : 없음;
  개요 : .0625EM Solid CurrentColor;
  개요-오프셋 : .0625EM;
}

A : Active {
  개요 width : .125EM;
}

@supports (--a : b) { /* 지원을 위해 CSS 변수를 확인하십시오* /
  /* 기본 변수 값*/
  html {
    ---C : https://www.php.cn/link/93ac0c50dddc7b88e5fe05c70e15b000000;
    ---bg : https://www.php.cn/link/93ac0c50ddc7b88e5fe05c70e15bffffff;
  }

  A {
    /* 기본 링크 스타일*/
  }
}

다음으로 기본 링크 스타일을 만듭니다. 맞춤 속성을 사용하여 스타일을 최대한 건조하게 만듭니다.

먼저 변수를 설정해야합니다. 다양한 속성에 대한 --space 변수를 정의하고 텍스트 주위에 공간을 추가하려고합니다. 링크 색상은 또한 --link-color 변수로 정의되어 currentColor 로 기본값이됩니다. 가짜 밑줄은 배경 이미지를 사용하여 생성되며, 그 크기는 --bg-size 변수를 사용하여 상태에 따라 조정되며, 이는 --space 값으로 기본값을 얻습니다. 마지막으로, 더 많은 재미를 위해, 우리는 링크가 :active 있을 때 테두리 --shadow-size 시뮬레이션 할 것입니다. 이것은 우리에게 제공합니다 :

 -공간 : .125EM;
-링크 색상 : CurrentColor;
-BG 사이즈 : var (-공간);
-쉐도우 크기 : 0;

먼저, 우리는 폴백 스타일을 조정해야합니다. 사용자 정의 속성을 사용하도록 색상을 설정하고 기본 밑줄을 제거합니다.

 색상 : var (-link-color);
텍스트 결정 : 없음;

다음으로 가짜 밑줄을 만듭니다. 이미지는 두 개의 동일한 시작과 끝점의 선형 구배가됩니다 : 텍스트 색상 --c . 우리는 그것이 background-repeat: repeat-x; 요소 background-position: 0 100%; . 마지막으로, 우리는 크기, 수평 100% 및 수직 --bg-size 값을 제공합니다. 마침내 :

 배경 이미지 : 선형 그레이드 (var (-c, currentColor), var (-C, currentColor));
배경 반복 : 반복 -X;
배경 위치 : 0 100%;
배경 크기 : 100% var (-BG 사이즈);

for :active State, 우리는 또한 존재하지 않을 것이지만 변수를 사용하면 다음과 같이 적용 할 수 있습니다 : box-shadow box-shadow: 0 0 0 var(--shadow-size, 0) var(--c);

이것은 대부분의 기본 스타일입니다. 이제 링크 상태를 기반으로 변수에 새 값을 할당해야합니다.

:link 및 :visited 링크가 "유휴 상태"에있을 때 사용자가 보는 것입니다. 우리가 모든 것을 설정 했으므로 이것은 짧은 규칙 세트입니다. --link-color 의 초기 할당에서 --c 변수를 선언 할 수 있지만, 나는 우리의 스타일의 모든 단계를 명확하게하기 위해 여기에 할당하고 있습니다.

 A : 링크,
A : 방문 {
  -링크 색상 : var (-c);
}

링크는 이제 멋져 보이지만, 우리가 상호 작용하면 아무 일도 일어나지 않을 것입니다 ... 다음은 이러한 스타일을 만듭니다. 두 가지 일이 필요합니다. 배경은 사용 가능한 모든 높이 (즉, 100%)를 차지해야하며 텍스트 색상은 텍스트 색상 (혼란스럽고 오른쪽)이므로 텍스트 색상을 배경 색상으로 변경해야합니다. 첫 번째는 간단합니다 : --bg-size: 100%; . 텍스트 색상의 경우 --bg 변수를 다음과 같이 할당합니다. --link-color: var(--bg); . 의사 클래스 선택기와 함께 다음과 같이 끝납니다.

 A : 호버,
A : 초점,
A : Active {
    -BG 크기 : 100%;
    -link-color : var (-bg);
}

밑에서, 밑줄은 호버링하거나 집중할 때 완전한 배경이됩니다! 보너스로, 우리는 --shadow-size 추가하여 링크를 클릭 할 때 모의 경계를 추가 할 수 있으며, --space 변수는 다시 유용합니다.

 A : Active {
  -Shadow-size : var (-공간);
}

우리는 지금 거의 끝났습니다! 그러나 너무 일반적인 것처럼 보이므로 전환, 일부 패딩 및 둥근 모서리를 추가하고 링크가 여러 행에 걸쳐 있으면 멋지게 보이도록하겠습니다!

전환을 위해서는 애니메이션 색상, 배경 크기 및 box-shadow 만 있으면됩니다. 지속 시간은 당신에게 달려 있지만 링크의 높이가 약 20 픽셀이라는 점을 감안할 때 더 짧은 기간을 설정할 수 있습니다. 마지막으로, 매끄럽게 보이도록 ease-in-out 합시다. 이것은 다음과 같이 요약됩니다.

 전환 프로퍼티 : 색상, 배경 크기, 박스 쉐이도;
전환 기간 : 150ms;
전환 타이밍 기능 : 편의-아웃;
Will Change : 색상, 배경 크기, Box-Shadow; /* 브라우저에 어떤 속성이 작동할지 알려주십시오. */

다음으로 --space 변수를 padding 및 border-radius 에 할당하지만 전자에 대해 걱정하지 않습니다. 인라인 블록으로 정의하지 않기 때문에 padding 텍스트 블록의 수직 리듬을 망치지 않습니다. (그냥 가치를 테스트하십시오)

 패딩 : var (-공간);
Border-Radius : var (-공간);

마지막으로, 스타일이 여러 줄에 올바르게 적용되도록하기 위해서는 box-decoration-break: clone; (그리고 당신이 선호하는 경우 접두사), 그게 다야.

완료되면 다음 스타일이 있어야합니다.

 /* 오래된 브라우저의 스타일*/
A {
  색상 : 상속;
  텍스트 결정 : 밑줄;
}

A : 호버,
A : 초점,
A : Active {
  텍스트 결정 : 없음;
  개요 : .0625EM Solid CurrentColor;
  개요-오프셋 : .0625EM;
}

A : Active {
  개요 width : .125EM;
}

/* 최신 브라우저의 기본 링크 스타일*/
@Supports (-a : b) {
  /* 기본 변수 값*/
  html {
    ---C : https://www.php.cn/link/93ac0c50dddc7b88e5fe05c70e15b000000;
    ---bg : https://www.php.cn/link/93ac0c50ddc7b88e5fe05c70e15bffffff;
  }

  A {
    /* 변수*/
    -공간 : .125EM;
    -링크 색상 : CurrentColor;
    -BG 사이즈 : var (-공간);
    -쉐도우 크기 : 0;

    /* 레이아웃*/
    패딩 : var (-공간); /* 인라인 요소는 수직 리듬에 영향을 미치지 않으므로 각 방향을 지정할 필요가 없습니다*/

    /* 텍스트 스타일*/
    색상 : var (-link-color); /* 변수로 색상 설정*/
    텍스트 결정 : 없음; /* 기본 밑줄을 삭제*/

    /* 박스 스타일*/
    Border-Radius : var (-공간); / * 더 아름답게 만드십시오 more */
    배경 이미지 : 선형 그레이드 (var (-c, currentColor), var (-C, currentColor));
    배경 반복 : 반복 -X;
    배경 위치 : 0 100%;
    배경 크기 : 100% var (-BG 사이즈);
    Box-Shadow : 0 0 0 var (-shadow-size, 0) var (-c, currentColor); /* 사용 : 활성 상태*/
    박스-디코레이션 브레이크 : 클론; /* 여러 줄에 걸친 링크에서 스타일이 반복되는지 확인*/

    /* 전환 명세서*/
    전환 프로퍼티 : 색상, 배경 크기, 박스 쉐이도;
    전환 기간 : 150ms;
    전환 타이밍 기능 : 편의-아웃;
    Will Change : 색상, 배경 크기, Box-Shadow;
  }

  /* 유휴 상태*/
  A : 링크,
  A : 방문 {
    -link-color : var (-c, currentColor); / * --C를 사용하거나 CurrentColor로 돌아갑니다 */
  }

  /* 상호 작용 상태*/
  A : 호버,
  A : 초점,
  A : Active {
    -BG 크기 : 100%;
    -link-color : var (-bg);
  }

  /* 활동*/
  A : Active {
    -Shadow-size : var (-공간); /* 박스 샤도 크기 정의*/
  }
}

물론 밑줄을 사용하는 것보다 조금 더 복잡하지만 항상 텍스트와 배경 색상에 액세스 할 수있는 유틸리티 클래스와 함께 매우 진보적 인 향상입니다.

세 가지 변수로이를 향상시킬 수 있으며, 각 색상은 RGB 또는 HSL 형식을 사용하여 불투명도를 조정합니다. 텍스트 그림자를 추가하여 text-decoration-skip-ink 시뮬레이션 할 수도 있습니다!

위 내용은 사용자 정의 속성을 가진 색상을위한 문맥 유틸리티 클래스의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!