CSS에서 조건부 스타일을 어떻게 달성할 수 있습니까?

CSS의 조건부 스타일링: 대안 탐색

일반적으로 CSS에서는 if/else 조건이 기본적으로 지원되지 않습니다. 그러나 조건부 스타일링을 달성하는 데는 다양한 접근 방식이 있습니다.

CSS 클래스

한 가지 방법은 CSS 클래스를 사용하여 다양한 조건에 대해 다양한 스타일을 정의하는 것입니다. 예를 들어,

<p class="normal">Text</p>
<p class="active">Text</p>

CSS 파일에서

p.normal {
  background-position: 150px 8px;
}
p.active {
  background-position: 4px 8px;
}

두 개의 클래스를 생성할 수 있습니다. 이 접근 방식은 널리 지원되며 조건의 런타임 평가를 허용합니다.

CSS 전처리기

Sass와 같은 CSS 전처리기는 코드를 작성할 수 있는 조건문을 제공합니다. 예:

$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}

이것은 더 큰 유연성을 제공하지만 사전 처리가 필요하므로 성능에 영향을 미칠 수 있습니다.

사용자 정의 속성(CSS 변수)

사용자 정의 속성, 지원됨 최신 브라우저에서는 런타임 조건 평가가 가능합니다. 다음과 같은 사용자 정의 속성을 정의할 수 있습니다.

:root {
  --main-bg-color: brown;
}

그런 다음 CSS에서 이를 사용할 수 있습니다.

.one {
  background-color: var(--main-bg-color);
}
.two {
  background-color: black;
}

서버측 전처리

서버측 전처리기는 다음을 생성할 수 있습니다. 동적 값을 기반으로 하는 조건부 CSS입니다. 예를 들어 다음과 같은 코드를 작성할 수 있습니다.

p {
  background-position: <?php echo (@$_GET['foo'] == 'bar')? "150" : "4"; ?>px 8px;
}

그러나 이 접근 방식은 서버 측 렌더링의 필요성으로 인해 성능에 영향을 미칠 수 있습니다.

순수한 CSS 기술

마지막으로 Ahmad Shadeed의 기사에서는 외부 메커니즘에 의존하지 않고 조건부 UI 시나리오를 처리하기 위한 다양한 순수 CSS 기술을 보여줍니다.

위 내용은 CSS에서 조건부 스타일을 어떻게 달성할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!