CSS의 진화를 목격하면서, 우리는 CSS 역사상 가장 흥미로운 혁신시기 중 하나 인 것 같습니다. 모든 브라우저가 Flexbox를 지원 한 다음 곧 그리드를 지원할 때 정말 흥미로 웠습니다. 그들은 CSS를 완전히 변화시켜 더 이상 어색한 트릭 모음이 아니라 시대의 추세에 더 합리적이고 더 많은 것을 만들었습니다.
이 느낌은 점점 강해지고 있습니다. 최근에 다음과 같은 일이 일어났습니다.
⚠️? "마침내 출시 된 삭스는 다음 코드 스 니펫과 약간 다를 수 있습니다. ? ⚠️
네이티브 중첩은 최초의 공개 작업 초안이되었으며, 이는 그 어느 때보 다 현실이 될 것입니다. 많은 사람들이 둥지의 편의를 위해 전처리기를 사용합니다. 이는이를 피하기 위해 건축 도구를 단순화하려는 사람들에게 도움이 될 것입니다.
나는 특히 조건부 규칙을 중첩하는 방법을 좋아합니다.
<code>.card { & .title { } & .body { } @media (min-inline-size > 1000px) { & { } } @nest body.dark & { } }</code>이 실행 가능한 솔루션에 대한 소문을 들었습니다.이 솔루션은 간단한 선택기의 필요성을 피하고 @nest를 완전히 피합니다.
<code>.card {{ .title { } .body { } body.dark & { } }}</code>컨테이너 쿼리는 현재 편집기 초안 (CSS Confilment Module Level 3)이지만 이미 크롬에서 구현되었습니다 (플래그를 활성화해야 함). 그들은 우리가 컨테이너 자체의 크기를 기반으로 스타일 결정을 내릴 수 있기 때문에 많은 의미가 있습니다. 이것은 오늘날의 구성 요소 중심 세계에서 매우 좋은 아이디어입니다.
查看一个简单示例站点的代码（如果您在Chrome 中没有启用标志，它可能看起来很奇怪）。
<code>/* 在您要查询的父元素上设置containment */ .card-container { /* 目前两者都有效，不确定哪个是正确的*/ contain: style layout inline-size; container: inline-size; } .card { display: flex; } @container (max-width: 500px) { /* 必须设置子元素的样式，而不是容器*/ .card { flex-direction: column; } }</code>컨테이너 장치에는 또한 컨테이너 쿼리의 실용성을 거의 두 배로 늘리는 초안 사양이 있습니다. 아이디어는 컨테이너 크기 (너비, 높이 또는 "인라인 크기"/"블록 크기")를 기반으로 한 장치가 있다는 것입니다. Qi 유닛이 가장 유용하다고 생각합니다.
곧, 우리는 자체 크기를 기반으로 스타일의 컨테이너 전체 CSS를 작성하고 다른 내부 속성에서 사용하기 위해 해당 크기를 전달할 수 있습니다. 글꼴 크기의 특성은 간단한 실용적인 예 (컨테이너 스케일 크기에 따른 글꼴)이지만 컨테이너 장치는 GAP, 패딩 및 기타 여러 목적과 같은 다양한 목적으로 사용될 것이라고 생각합니다.
<code>/* 在您要查询的父元素上设置containment */ .card-container { /* 目前两者都有效，不确定哪个是正确的*/ contain: style layout inline-size; container: inline-size; } .card h2 { font-size: 1.5rem; /* 备用*/ } @container type(inline-size) { .card h2 { font-size: clamp(14px, 1rem 2qi, 56px) } }</code>캐스케이드 레이어 (작업 초안 사양에서)는 캐스케이드에서 CSS 선택기의 우승자를 결정하기위한 완전히 새로운 패러다임을 도입합니다. 현재는 주로 특정 경쟁입니다. 특이성이 가장 높은 선택기는 승리하며, 중요한 조항이있는 인라인 스타일과 특정 규칙만이이를 능가 할 수 있습니다. 그러나 레이어를 사용하면 더 높은 계층의 일치하는 선택기가 승리합니다.
<code>@layer base; @layer theme; @layer utilities; /* 没有层的重置样式（超低）*/ * { box-sizing: border-box; } @layer theme { .card { background: var(--card-bg); } } @layer base { /* 大多数样式？*/ } @layer utilities { .no-margin { margin: 0; } }</code>CSS 탭 Atkins가 제안한/else 규칙이 허용되면 @Media 및 @Supports 쿼리를 표현하는 방법이며 다른 조건을보다 쉽게 표현할 수 있습니다. 미디어 쿼리에는 이미 몇 가지 논리적 기능이 있지만 상호 배타적 인 쿼리를 표현하는 것이 오랫동안 어려워서 매우 간단합니다.
<code>@when media(width >= 400px) and media(pointer: fine) and supports(display: flex) { /* A */ } @else supports(caret-color: pink) and supports(background: double-rainbow()) { /* B */ } @else { /* C */ }</code>스코프 스타일 (초안 편집기)의 아이디어는 선택기 블록 및 내부에만 적용되는 스타일을 작성하는 구문을 제공하지만 스코프를 중지 할 수 있으므로 스코프 루프를 생성한다는 것입니다.
내가 가장 좋아하는 것은 "근접성"강도입니다. Miriam은 다음과 같은 방식으로 설명합니다.
<code>.light-theme a { color: purple; } .dark-theme a { color: plum; }</code><code><div>
<a href="//m.sbmmt.com/link/93ac0c50dd620dc7b88e5fe05c70e15b">자두</a>
<div>
<a href="//m.sbmmt.com/link/93ac0c50dd620dc7b88e5fe05c70e15b">어쩌면 매실일까요? ? ?</a>
</div>
</div></code>오른쪽? ! 링크가 .Light-TheM에서 승리하기를 원하는지 표현하는 좋은 방법은 없습니다. 현재 두 주제의 특이성은 동일하지만 .Dark -Theme은 뒤쳐져 있으므로 승리합니다. 바라건대 스코프 스타일 이이 문제를 해결할 수 있기를 바랍니다.
<code>@scope (.card) to (.content) { :scope { display: grid; grid-template-columns: 50px 1fr; } img { filter: grayscale(100%); border-radius: 50%; } .content { ... } }</code> <code>/* 邻近性帮助！*/ @scope (.light-theme) { a { color: purple; } } @scope (.dark-theme) { a { color: plum; } }</code>현재 프로덕션 웹 사이트 에서이 목록에서 아무것도 사용할 수 없습니다. 수년간 이런 종류의 일을 따르려고 한 후에도, 나는 아직도 이것이 어떻게 끝나는 지 모른다. 사양을 먼저 완료하고 합의해야한다고 생각합니다. 그런 다음 브라우저는 둘 이상을 기대하면서 선택합니다. 일단 그들이 가지고 있으면 사양을 마무리 할 수 있다고 생각합니까?
나는 모른다. 어쩌면 그들 중 일부는 사라질 것입니다. 어쩌면 그들 중 일부는 매우 빨리 일어날 것이고 다른 일부는 매우 느리게 발생할 것입니다. 아마도 그들 중 일부는 일부 브라우저에 나타나고 다른 브라우저에는 나타날 것입니다. 이봐, 적어도 우리는 지금 상록수 브라우저를 가지고 있으므로 일이 일어나면 매우 빨리 발생합니다. 나는 우리가 지금 가장 크고 최고의 CSS 기능이 모든 브라우저에서 지원되는 단계에 있다고 생각하지만,이 모든 것이 다가 오면 최신 기술에 대한보다 단편적인 지원 단계에있을 것입니다.
위 내용은 CSS는 어리석은 돼지 와일드를 가고 있습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
