4의 몇 가지 새로운 기능 CSS

DDD
풀어 주다: 2024-10-30 17:01:02
원래의
859명이 탐색했습니다.

이 기사에서는 2024년에 도입될 몇 가지 새로운 CSS 기능을 살펴보겠습니다.

제 글이 마음에 드셨다면 커피 한잔 사주시면 됩니다 :)
Some new features CSS in 4

1. CSS 컨테이너 쿼리

컨테이너 쿼리를 사용하면 항목 컨테이너의 크기에 따라 항목에 스타일을 적용할 수 있습니다. 컨테이너 쿼리는 미디어 쿼리처럼 작동합니다.

컨테이너 쿼리 사용

컨테이너 쿼리를 사용하면 크기에 따라 상위 요소 내의 하위 요소 스타일을 동적으로 조정할 수 있습니다.

이를 위해서는 먼저 상위 요소에 대한 컨테이너 컨텍스트를 정의해야 합니다. 이를 컨테이너 유형 속성으로 지정합니다.

  • 컨테이너 유형: 크기; 로 설정하면 너비와 높이 값을 모두 사용하여 쿼리할 수 있습니다.

  • 컨테이너 유형: 인라인 크기; 로 설정하면 너비(가로 차원)에 대해서만 쿼리가 수행됩니다.

이 기능 덕분에 상위 요소의 크기에 따라 하위 요소의 스타일 속성이 변경될 수 있습니다.

:

 <div class="post">
        <div class="card">
          <h2>Card title</h2>
          <p>Card content</p>
        </div>
  </div>

로그인 후 복사
로그인 후 복사
.post {
    container-type: size;
  }

  .card h2 {
    font-size: 1em;
    color: blue;
  }

  @container (min-width: 700px) {
    .card h2 {
      font-size: 5em;
      color: purple;
    }
  }
로그인 후 복사
로그인 후 복사

출력 :

Some new features CSS in 4


2. CSS 중첩

CSS 중첩을 사용하면 하나의 규칙을 다른 규칙 안에 배치할 수 있습니다. 이는 상황에 따라 달라지는 스타일을 관리하는 데 특히 유용합니다. 예를 들어 .container 클래스가 있고 해당 클래스의 .item 요소에 스타일을 지정하려는 경우 .container 규칙 내부에 .item 규칙을 직접 작성할 수 있습니다. CSS Nesting은 브라우저에서 직접 구문 분석됩니다. 즉, 중첩된 규칙을 컴파일하는 데 전처리기가 필요하지 않습니다. 기본적으로 브라우저에서 작동합니다.

:

<form>
        <label for="name">Name:
          <input type="text" id="name" />
        </label>
        <label for="surname">Surname:</label>
        <input type="text" id="surname" />
      </form>
로그인 후 복사
로그인 후 복사
 input {

    border: red 2px solid;
  }
  label {
    font-family: system-ui;
    font-size: 1.25rem;
    & input {

      border: purple 2px solid;
    }
  }

로그인 후 복사
로그인 후 복사

출력 :

Some new features CSS in 4


3. :scope 의사 클래스

범위 선택기는 CSS에서 스타일의 범위를 정의하는 데 사용됩니다.

사용방법 :

  • :scope가 CSS의 루트 수준에 있는 경우 :root
  • 와 동일합니다.

:

<html></html>
로그인 후 복사
로그인 후 복사
:scope {
  background-color: orange;
}
로그인 후 복사

출력 :

Some new features CSS in 4


  • @scope 블록 내에서:scope를 사용하면 클래스 이름으로 정의된 컨텍스트를 기반으로 명확하고 타겟이 명확한 스타일을 지정할 수 있습니다.

:

 <div class="post">
        <div class="card">
          <h2>Card title</h2>
          <p>Card content</p>
        </div>
  </div>

로그인 후 복사
로그인 후 복사
.post {
    container-type: size;
  }

  .card h2 {
    font-size: 1em;
    color: blue;
  }

  @container (min-width: 700px) {
    .card h2 {
      font-size: 5em;
      color: purple;
    }
  }
로그인 후 복사
로그인 후 복사

출력 :

Some new features CSS in 4


4. :has() 의사 클래스

CSS의 :has() 선택기를 사용하면 상위 요소에 특정 하위 요소가 포함된 경우 해당 요소의 스타일을 지정할 수 있습니다.

:

<form>
        <label for="name">Name:
          <input type="text" id="name" />
        </label>
        <label for="surname">Surname:</label>
        <input type="text" id="surname" />
      </form>
로그인 후 복사
로그인 후 복사
 input {

    border: red 2px solid;
  }
  label {
    font-family: system-ui;
    font-size: 1.25rem;
    & input {

      border: purple 2px solid;
    }
  }

로그인 후 복사
로그인 후 복사

출력 :

Some new features CSS in 4


5. 색상 기능

color-mix() 및 color-contrast()와 같은 새로운 색상 기능을 사용하면 색상

의 톤과 대비를 훨씬 더 효과적으로 제어할 수 있습니다.

:

<html></html>
로그인 후 복사
로그인 후 복사

6. 앵커 위치 지정

CSS 앵커 위치 지정 모듈은 요소를 함께 묶을 수 있는 기능을 정의합니다. 특정 요소는 앵커 요소로 정의됩니다. 앵커 위치 요소는 바인딩된 앵커 요소의 크기와 위치에 따라 크기와 위치를 설정할 수 있습니다.


결론

이 기사에서는 2024년 CSS의 새로운 기능에 대해 살펴보았습니다. 이 기능을 앱에서 사용할 수 있습니다.

위 내용은 4의 몇 가지 새로운 기능 CSS의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:dev.to
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!