2024 년 6 월 11 일부터 13 일까지 CSSS 실무 그룹 (CSSWG)은 스페인 크루냐에서 올해의 두 번째 대면 회의를 개최했으며, 많은 새로운 기능과 CSS 언어의 개선을 다루고 있습니다. 2023 년에 중첩, 컨테이너 쿼리 및 스타일 쿼리 및
이 기사는이 회의에서 논의 된 CSS의 가장 흥미롭고 중요한 새로운 기능을 공유 할 것입니다. 이것은 회의에 대한 토론의 정확한 기록이 아니라 회의에 중점을 둔 주요 CSS 주제에 대한 개요라는 점에 유의해야합니다. 실제로, 이러한 특징들은 수년간 양조되어 왔으며, 토론은 회의에서이를 달성하는 것이 불가능한 특정 사례와 새로운 향상에 중점을 둡니다. has:
함수의 전망
CSS 사용자 정의 속성은 2016 년경 견고한 지원을 얻었으므로 JavaScript에 의존하지 않고 사용자 정의 속성 값을 기반으로 특정 스타일을 적용하는 여러 가지 방법이 시도되었습니다. 최초의 조건부 스타일 솔루션 중 하나는 2016 년 "CSS 변수에 대한 조건"에서 Roman Komarov가 제안했습니다. 그 이후로, 많은 다른 "기술"은 CSS의 조건부 선언에 대해 문서화되었습니다 (CSS- 트릭에서 Ana Tudor가 제안한 매우 영리한 접근법 포함). 실제로, CSSWG 회원 인 Lea Verou는 최근 기사 인“CSS의 인라인 조건부 진술, 지금?”에서 이러한 솔루션에 대한 전체 토론과 비교 목록을 제공합니다.
if()
CSSWG의 관점에서 기능 개발을 시작하기로 결정했습니다. 좋아 보이지만, 최소 2 년 동안 브라우저에서 볼 수있을 것으로 기대하지 마십시오
또는 함수에있는 경우 에 래핑하지 않고 다른 기능으로 3 배 연산자를 사용할 수 있습니다.
물론, View Transition API는 약간의 복잡성에 도달 할 수 있지만 프레임 워크를 도입하는 성능 비용을 부담하지 않고 페이지 전환을 만들고자하는 무수한 상황에서는 탁월합니다.
속성을 사용하여 요소의 스냅 샷을 그룹화하고 그 식별자는 페이지에 모든 전환을 포함하는
속성의 핵심입니다. 를 제공하고 JavaScript를 사용하여 뷰 전환을 추가로 사용자 정의하여 페이지가 전환되는 URL을 확인하고 그에 따라 애니메이션을 확인할 수도 있습니다.
는 현재 위에 있지만이를 방지하기 위해 다른 위치로 옮겨야합니다. 움직이는 가장 쉬운 방법은 속성을 사용하는 것입니다. 가 3 × 3 그리드의 중간에 있다고 가정하고, 행과 열을 할당하여 그리드에서 툴팁을 찾을 수 있습니다. 속성은 속성을 설정할 수 있습니다.
값을 사용할 수 있습니다. 속성과 동일한 속성 값을 포함하는 일련의
를 사용하는 것이 충분히 강력하다는 것입니다.
속성에 본질적으로 결함이 있으며, if()! (이것은 Lea의 비공식 추정치입니다.) 생산에서 안정적으로 사용할 수있는 충분한 브라우저 지원을 얻기 위해 더 오래 기다려야 할 수도 있습니다. 초안 사양이 막 시작되었으며 많은 것들이 먼저 테스트되어야합니다. 참고로 CSS 변수 작업 초안은 2012 년에 시작되었으며 2016 년까지 광범위한 브라우저 지원을받지 못했습니다. if()
if()
if()
<code>.news-container {
container-name: news-container;
}
@container news-container style(--variant: info) {
p {
color: blue;
border: 1px solid blue;
}
}</code>style(--my-property: value)
<code>if(a ? b : c)</code>
? 는 다른 인라인 조건부 명세서를 뒷받침합니다. : 쿼리를 사용하여 사용자 정의 속성을 확인해야하지만 인라인 <code>.forecast {
background-color: if(style(--weather: clouds) ? var(--clouds-color): var(--default-color));
}</code>
다른 CSS 기능에서 조건부 명세서를 사용하십시오. if()
if()없이 계산을 수행 할 수 있습니다.
속성을
로 설정하여 전환을 선택해야합니다.
@view-transition pseudo element에 캡처됩니다. navigation
auto를 모든 페이지 전환의 <code><div style="--variant: info">
<p>Here is some good <strong>news</strong></p>
</div></code>
가 포함되어 있으며, 쌍에는 "구"와 "새"페이지 스냅 샷이 모두 포함되어 있습니다. 우리는 우리가 원하는만큼 많은 그룹을 추가 할 수 있으며, 모두 두 개의 스냅 샷이있는 이미지 쌍이 포함되어 있습니다.
view-transition-name
::view-transitionview-transition-name
::view-transition-group
Github에서 라이브 데모를 찾을 수 있습니다. 쓰기 시점에서 브라우저 지원은 크롬 브라우저 (예 : 크롬, 에지, 오페라)로 제한됩니다. <code><div style="--variant: info">
<p>Here is some good <strong>news</strong></p>
</div></code>
view-transition-name
view-transition-class
CSSS 앵커 포지셔닝은 CSSWG 회의에서 논의 된 또 다른 새로운 기능이며 그러한 것들을 훨씬 쉽게 만들기를 희망합니다.
<code>if(a ? b : c)</code>
inset-area입니다. 특정 행과 열의 위치에서 두 값을 가져옵니다. 물리적 값 (예 : 왼쪽, 오른쪽, 상단 및 하단)과 사용자의 쓰기 패턴 및 공유 센터 값의 논리적 값 (예 : 시작 및 끝)을 사용하여 계산됩니다. 또한 X- 시작 및 y-end와 같은 X 및 Y 좌표를 참조하는 값을 허용합니다. 이러한 모든 값 유형은 3 × 3 그리드의 공간을 나타내는 방법입니다. .tooltip
예를 들어, .tooltip
inset-area 접두사를 사용할 수 있습니다. 예를 들어, span-
span-top
.tooltip.
span-all 속성은 position-try-options 함수를 제공 할 수 있습니다. 이제 툴팁이 화면에서 벗어날 때마다 다음 선언 된 위치는 "시도"이며 해당 위치가 오버플로 발생하면 다음 선언 된 위치가 시도됩니다. inset-area()
inset-area
단순화를 위해, 앵커 포지셔닝의 많은 측면은 여기에 소개되지 않습니다. 함수는 앵커 에지의 계산 된 위치를 반환하여 툴팁 마진 속성을보다 제어 할 수 있습니다. inset-area() 속성을 설정하기 위해 사용자 정의 위치를 정의하는 데 사용됩니다. position-try-options
CSSWG는 집단적 노력입니다 .tooltip
inset-area()if()의 현재 정의와 브라우저에서 어떻게 사용되는지와 일치하는 문제를 해결하기위한 간단한 솔루션이 없다고 말합니다. 여기에는 정상 속성을 약식 특성으로 변환하는 것이 코드 기반에 위험 할 수 있다는 사실이 포함됩니다. letter-spacing
letter-spacing
위 내용은 CSS는 마지막 CSSWG 회의 후에 흥분됩니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
