CSS는 마지막 CSSWG 회의 후에 흥분됩니다

2024 년 6 월 11 일부터 13 일까지 CSSS 실무 그룹 (CSSWG)은 스페인 크루냐에서 올해의 두 번째 대면 회의를 개최했으며, 많은 새로운 기능과 CSS 언어의 개선을 다루고 있습니다. 2023 년에 중첩, 컨테이너 쿼리 및 스타일 쿼리 및

선택기와 같은 놀라운 발전에 이어 2024 년에 더 많은 획기적인 업데이트가 수신 될 것입니다. 인라인 조건 진술과 같은 새로운 기능이 막 시작되었는지 또는 장기 프로젝트가 끝날지 여부, 2024 년은 이미 흥미 진진한 발전으로 가득 차 있습니다. 우리는 7 월에 들어갑니다!

이 기사는이 회의에서 논의 된 CSS의 가장 흥미롭고 중요한 새로운 기능을 공유 할 것입니다. 이것은 회의에 대한 토론의 정확한 기록이 아니라 회의에 중점을 둔 주요 CSS 주제에 대한 개요라는 점에 유의해야합니다. 실제로, 이러한 특징들은 수년간 양조되어 왔으며, 토론은 회의에서이를 달성하는 것이 불가능한 특정 사례와 새로운 향상에 중점을 둡니다. has: CSSWG 회의의 의제에 대해 논의 된 특정 문제를 볼 수 있습니다.

기능 1 :

함수의 전망 CSS 사용자 정의 속성은 2016 년경 견고한 지원을 얻었으므로 JavaScript에 의존하지 않고 사용자 정의 속성 값을 기반으로 특정 스타일을 적용하는 여러 가지 방법이 시도되었습니다. 최초의 조건부 스타일 솔루션 중 하나는 2016 년 "CSS 변수에 대한 조건"에서 Roman Komarov가 제안했습니다. 그 이후로, 많은 다른 "기술"은 CSS의 조건부 선언에 대해 문서화되었습니다 (CSS- 트릭에서 Ana Tudor가 제안한 매우 영리한 접근법 포함). 실제로, CSSWG 회원 인 Lea Verou는 최근 기사 인“CSS의 인라인 조건부 진술, 지금?”에서 이러한 솔루션에 대한 전체 토론과 비교 목록을 제공합니다.

확실히, 커뮤니티는 항상 사용자 정의 속성을 사용하여 스타일을 적용하는 조건부 방법을 갈망했습니다. 요즘에는이 작업을 수행 할 수있는 스타일 쿼리 사양이 있지만 브라우저 지원과 관련이없는 몇 가지 제한 사항이 있습니다. 가장 큰 제한은 무엇입니까? 우리는 쿼리 컨테이너를 직접 스타일링 할 수 없으므로 HTML의 컨테이너 주위에 일종의 랩핑 요소를 추가해야합니다.

<code><div style="--variant: info"> <p>Here is some good <strong>news</strong></p> </div></code>

함수가 어떻게 생겼을 지 if() CSSWG의 관점에서

기능의 추가는 2018 년에 논의되었습니다. 올해 6 월 13 일 - 6 년 후 - CSSWG는 CSS의

기능 개발을 시작하기로 결정했습니다. 좋아 보이지만, 최소 2 년 동안 브라우저에서 볼 수있을 것으로 기대하지 마십시오 if()! (이것은 Lea의 비공식 추정치입니다.) 생산에서 안정적으로 사용할 수있는 충분한 브라우저 지원을 얻기 위해 더 오래 기다려야 할 수도 있습니다. 초안 사양이 막 시작되었으며 많은 것들이 먼저 테스트되어야합니다. 참고로 CSS 변수 작업 초안은 2012 년에 시작되었으며 2016 년까지 광범위한 브라우저 지원을받지 못했습니다. if() 구문의 관점에서 는 JavaScript 및 기타 프로그래밍 언어로부터 3 원 운영자를 빌릴 수 있으며 구조는 다음과 같습니다. if() 가 사용됩니다.

if()

<code>.news-container {
  container-name: news-container;
}

@container news-container style(--variant: info) {
  p {
    color: blue;
    border: 1px solid blue;
  }
}</code>

가 CSS에서 사용되지 않고 다른 곳에서 다른 의미를 갖는 경우 에도이 구문은 대부분의 사람들에게 가장 친숙하다고 생각합니다.

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>

if()

다른 CSS 기능에서 조건부 명세서를 사용하십시오. 향후 초안에서, 우리는

또는 함수에있는 경우 에 래핑하지 않고 다른 기능으로 3 배 연산자를 사용할 수 있습니다. if()없이 계산을 수행 할 수 있습니다.

기능 2 : 문서보기 를 가로 지르는 전환 작년에 View Transition API를 통해 웹 페이지와 상태를 탐색하는 사이에 원활한 전환을 만들 수있었습니다. 구성 요소 나 프레임 워크, 애니메이션 라이브러리가 필요하지 않습니다. 소량의 JavaScript 및 일반 HTML 및 CSS 만 사용하십시오. View Transition의 첫 번째 구현은 오래 전에 브라우저에 통합되었지만 Chrome에 의해 정의 된 실험 기능을 기반으로하며 다른 페이지 (즉, 다중 페이지 뷰 전환) 간의 전환을 지원하지 않고 두 상태 (단일 페이지보기 전환) 사이의 전환으로 제한됩니다. 이는 대부분의 개발자가 원하는 것입니다. 기본 응용 프로그램 동작을 모방 할 가능성은 흥미 롭습니다!
• 이것이 CSS View Transition Module 레벨 2가 매우 위대한 이유 이며이 기사에 설명 된 모든 CSS 새로운 기능 중 가장 인기있는 이유입니다. 그렇습니다.이 기능은 페이지를 가로 질러 기본적으로 원활한 전환을 가져 오지만 실제로 중요한 것은이 기능을 구현하는 프레임 워크에 대한 의존성을 제거한다는 것입니다. 우리는 일부 라우팅 라이브러리와 같은 라이브러리를 사용하는 대신 순수한 CSS 및 JavaScript로 돌아갈 수 있습니다.

  물론, View Transition API는 약간의 복잡성에 도달 할 수 있지만 프레임 워크를 도입하는 성능 비용을 부담하지 않고 페이지 전환을 만들고자하는 무수한 상황에서는 탁월합니다.

  전환을 볼 수 있습니다 동일한 소스에서 두 페이지 사이까지 탐색하면보기 전환이 트리거됩니다. 이 경우 탐색은 링크를 클릭하거나 양식을 제출하거나 브라우저 버튼을 사용하여 앞뒤로 이동하는 것일 수 있습니다. 대조적으로, 동일한 소스 페이지 사이에 검색 표를 사용하면 페이지 전환이 트리거되지 않습니다.

  두 페이지-우리가 떠나고 싶은 페이지와 탐색하려는 페이지는

  at-rule을 사용하고

  속성을 ​​

  로 설정하여 전환을 선택해야합니다.

  두 페이지 모두 전환에 가입하기로 선택하면 브라우저는 두 페이지를 "스냅 샷"하고 "이전"페이지를 "후"페이지로 부드럽게 페이드합니다.

  "스냅 샷" 사이의 전환 이 비디오에서는 전환 중에 지속되고 CSS 애니메이션을 사용하여 효과를 생성하는 새로운 의사 요소 세트 덕분에 이전 페이지가 새 페이지로 어떻게 사라지는 지 확인할 수 있습니다. 브라우저는 우리가 참조 할 수있는 전환에 고유 식별자를 설정하는 고유 한

  속성을 ​​사용하여 요소의 스냅 샷을 그룹화하고 그 식별자는 페이지에 모든 전환을 포함하는 @view-transition pseudo element에 캡처됩니다. navigation auto를 모든 페이지 전환의

  요소로 생각할 수 있으며, 이는 동일한 기본 애니메이션의 모든 페이지 전환 부분을 결합합니다.

  <code><div style="--variant: info">
    <p>Here is some good <strong>news</strong></p>
  </div></code>

  각 전환은 a

  에 있고, 그룹에는

  가 포함되어 있으며, 쌍에는 "구"와 "새"페이지 스냅 샷이 모두 포함되어 있습니다. 우리는 우리가 원하는만큼 많은 그룹을 추가 할 수 있으며, 모두 두 개의 스냅 샷이있는 이미지 쌍이 포함되어 있습니다.

  Quick 예 : "root"를 매개 변수로 사용하여 페이지의 모든 전환을 선택하고 기존 스냅 샷과 새 스냅 샷 사이에 슬라이딩 애니메이션을 만듭니다.

  view-transition-name 페이지를 탐색하면 전체 기존 페이지가 왼쪽으로 미끄러 져 새 페이지가 오른쪽에서 미끄러집니다. 그러나 우리는 페이지의 특정 요소가 페이지간에 지속되기 때문에 전환에 참여하는 것을 방지하는 반면, 다른 모든 것은 "오래된"스냅 샷에서 "새"스냅 샷으로 이동합니다. ::view-transition 이것은 특정 요소를 스냅하고 다른 모든 것과 분리하여 별도로 처리 할 수 ​​있기 때문에

  속성의 핵심입니다. view-transition-name ::view-transition-group Github에서 라이브 데모를 찾을 수 있습니다. 쓰기 시점에서 브라우저 지원은 크롬 브라우저 (예 : 크롬, 에지, 오페라)로 제한됩니다.

  우리는 문서보기에서 전환 할 때 기대할 것이 많습니다. 예를 들어, 다른 가 다른 여러 요소가있는 경우, 공유

  <code><div style="--variant: info">
    <p>Here is some good <strong>news</strong></p>
  </div></code>

  를 한 곳에서 스타일링하기 위해 공유

  를 제공하고 JavaScript를 사용하여 뷰 전환을 추가로 사용자 정의하여 페이지가 전환되는 URL을 확인하고 그에 따라 애니메이션을 확인할 수도 있습니다.

  기능 3 : 앵커 위치 CSS의 다른 요소에 비해 요소를 찾는 것은 산들 바람처럼 보이지만 실제로 올바른 결과를 얻으려면 일련의 마법 숫자를 기반으로 마진 속성 (상단, 하단, 왼쪽, 오른쪽)을 혼합해야합니다. 예를 들어, 호버 동안 요소의 왼쪽에 팝업이 튀어 나오는 위젯 프롬프트는 html에서 다음과 같이 보일 수 있습니다.

  view-transition-name 요소의 위치 및 마진 값을 변경하는 것은 세계의 끝이 아니지만 더 쉬운 방법이 있어야한다고 생각합니다. 또한 마지막 예제의 툴팁은 화면이 너무 작거나 요소가 너무 남아 있으면 툴팁이 화면 가장자리를 숨기거나 오버플로합니다. view-transition-class CSSS 앵커 포지셔닝은 CSSWG 회의에서 논의 된 또 다른 새로운 기능이며 그러한 것들을 훨씬 쉽게 만들기를 희망합니다.

  앵커 포인트를 만듭니다 기본 아이디어는 우리가 두 가지 요소를 구축한다는 것입니다.

  하나는 앵커 역할을합니다 "대상 "요소에 고정되어 있습니다.

  이런 식으로, 우리는 요소를 연관시키고 앵커 요소와 관련하여 그것을 위치시키는보다 선언적인 방법이 있습니다.

  먼저, 우리는 <code>.news-container { container-name: news-container; } @container news-container style(--variant: info) { p { color: blue; border: 1px solid blue; } }</code> 요소를 새로운 속성으로 만들어야합니다.

  마크를 약간 바꾸십시오 :

  우리는 그 값으로 고유 한 점선 압입을 (맞춤 속성과 마찬가지로) 지정합니다.

  <code>if(a ? b : c)</code>

  그런 다음 또는 위치를 사용하여 를 연결합니다.

  는 현재 위에 있지만이를 방지하기 위해 다른 위치로 옮겨야합니다. 움직이는 가장 쉬운 방법은 속성을 ​​사용하는 것입니다. 가 3 × 3 그리드의 중간에 있다고 가정하고, 행과 열을 할당하여 그리드에서 툴팁을 찾을 수 있습니다.

  속성은 inset-area입니다. 특정 행과 열의 위치에서 두 값을 가져옵니다. 물리적 값 (예 : 왼쪽, 오른쪽, 상단 및 하단)과 사용자의 쓰기 패턴 및 공유 센터 값의 논리적 값 (예 : 시작 및 끝)을 사용하여 계산됩니다. 또한 X- 시작 및 y-end와 같은 X 및 Y 좌표를 참조하는 값을 허용합니다. 이러한 모든 값 유형은 3 × 3 그리드의 공간을 나타내는 방법입니다. .tooltip 예를 들어, 앵커 포인트의 오른쪽 상단에 상대적으로

  가 배치되기를 원한다면 다음과 같은

  속성을 ​​설정할 수 있습니다. .tooltip 마지막으로, 툴팁이 그리드의 두 영역에 걸쳐 있으면 inset-area 접두사를 사용할 수 있습니다. 예를 들어,

  는 그리드의 상단과 중앙 영역에 <code><div style="--variant: info"> <p>Here is some good <strong>news</strong></p> </div></code>를 배치합니다. 전체 방향에 걸쳐 있으려면

  값을 사용할 수 있습니다. span- 앵커 포인트가없는 예 중 하나는 툴팁이 화면을 넘칠 수 있다는 것입니다. 우리는 새로운 기능과 결합 된 또 다른 새로운 속성 (이번에는 라고 함)을 사용 하여이 문제를 해결할 수 있습니다. span-top (예, 속성과 함수가 있습니다. 이것은 우리가 기억해야 할 것입니다!) .tooltip. span-all 속성은

  가 화면을 넘칠 때 쉼표로 분리 된 폴백 위치 목록을 허용합니다. 우리는

  속성과 동일한 속성 값을 포함하는 일련의 position-try-options 함수를 제공 할 수 있습니다. 이제 툴팁이 화면에서 벗어날 때마다 다음 선언 된 위치는 "시도"이며 해당 위치가 오버플로 발생하면 다음 선언 된 위치가 시도됩니다. inset-area()

  이것은 매우 새로운 개념이며 이해하는 데 시간이 걸립니다. CSSWG 회원 인 Miriam Suzanne은 James Stuckey Weber와 함께 앉아 매우 가치있는 비디오에서 앵커 포지셔닝을 논의하고 시도했습니다.

  당신이 tl; dw를 찾고 있다면, Geoff Graham은 비디오에 대한 메모를 받았습니다. inset-area 단순화를 위해, 앵커 포지셔닝의 많은 측면은 여기에 소개되지 않습니다. 함수는 앵커 에지의 계산 된 위치를 반환하여 툴팁 마진 속성을보다 제어 할 수 있습니다. at-rule은 inset-area() 속성을 ​​설정하기 위해 사용자 정의 위치를 ​​정의하는 데 사용됩니다.

  내 직관은 대부분의 사용 사례의 경우

  를 사용하는 것이 충분히 강력하다는 것입니다. position-try-options CSSWG는 집단적 노력입니다 .tooltip 나는이 기사가 CSSWG 회의에서 실시 된 토론을 정확하게 요약하지 않을 것이라고 앞서 말했다. 그러나 CSS의 새로운 사양에 대한 광범위한 소개 일 뿐이며,이 회의는 참신으로 인해이 회의에 출연해야한다. 이 리뷰에서 검토 할 시간이없는 몇 가지 기능도 있습니다. inset-area() 확실한 것 중 하나는 사양이 진공 환경에서 회의에서 한두 번 공식화되지 않았다는 것입니다. CSS 작업에서 매일 사용하는 것을 언급하지 않기 위해 수십 명의 위대한 저자, 개발자 및 사용자 에이전트의 공동 노력이 필요합니다.

  나는 또한 CSSWG의 위대한 개발자들과 이야기 할 기회를 가졌으며 회의에서 얻은 가장 많은 것을 발견했습니다. 소셜 미디어에서 논의되는 것이기 때문에

  가 목록의 최상위에있을 것으로 기대할 수 있습니다. 그러나 CSSWG 멤버 인 Emilio Cobos는 예를 들어

  속성에 본질적으로 결함이 있으며, if()의 현재 정의와 브라우저에서 어떻게 사용되는지와 일치하는 문제를 해결하기위한 간단한 솔루션이 없다고 말합니다. 여기에는 정상 속성을 약식 특성으로 변환하는 것이 코드 기반에 위험 할 수 있다는 사실이 포함됩니다. letter-spacing 우리는 인터넷과 인터넷에 대한 사랑으로 이익을 얻기 위해 무의미한 모든 세부 사항이 신중하게 분석 될 것이라고 생각할 수 있습니다. 앞서 언급했듯이 이러한 일은 폐쇄 된 진공 환경에서 발생하지 않습니다. CSS의 미래에 관심이있는 경우 (CSS를 유지하든 적극적으로 참여하든) 다음 리소스를 고려하십시오. letter-spacing

  CSSWG 홈 페이지 CSSWG 블로그 CSSWG 드래프트 (GitHub) CSSWG 뉴스 RSS 피드 (ATOM) CSS 사양 테이블 공개 검토 발표 메일 링리스트 및 아카이브 (및 RSS 피드)

위 내용은 CSS는 마지막 CSSWG 회의 후에 흥분됩니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!