크롬 133 장

크롬 팀의 작업은 흥미로울 것입니다! 최신 브라우저 버전을 직접 받고 새로운 기능을 과시하기 위해 멋진 데모를 만드는 것은 기분이 좋을 것입니다. 물론, 나는 그것을 전혀 부러워하지 않습니다! (왜 그런지 묻습니까?)

요점으로 돌아가서 Chrome 133의 릴리스 노트를 보셨습니까? 현재 베타 버전이지만 Chrome 팀은 무시하기 어려운 일련의 훌륭한 새로운 기사와 인상적인 데모를 발표했습니다. 나는 그것들을 합치기로 결정했다.

널리 사용되는 기능!

우리는 한동안 CSS에서 HTML 속성을 사용할 수 있었지만

속성 및 구문 분석 오직 문자열로 제한됩니다.

attr()

브라 머스는 사용자 정의 속성을 포함하여 모든 CSS 속성에 대해 Chrome 133에서 사용하는 방법을 보여줍니다. 예를 들어, 속성의 값을 얻고 요소의

속성에 사용할 수 있습니다. content 물론 이것은 간단한 예입니다. 그러나 여기에는 세 가지 구성 요소가 있음을 보여줍니다.

속성 (데이터 콜로) 유형 (type (

<h1 data-color="orange">Some text</h1>

)) 중재 값 (https://www.php.cn/link/93ac0c50dddddc7b88e5fe05c70e15bffff)

h1::before {
  content: ' (Color: ' attr(data-color) ') ';
}

속성은 스스로 정의됩니다. 와일드 카드를 태그에 삽입하여 스타일 설정에 사용하는 것이 매우 편리합니다. 는 CSS가 처리중인 값 유형을 식별하는 데 도움이되는 새로운 기능입니다. 숫자 값을 사용하는 경우보다 간결한 쓰기 방법을 사용할 수 있습니다. 예를 들어, 속성을 사용하여 요소의 글꼴 크기를 설정한다고 가정합니다. color 이제 우리는

속성 (px의 단위)을 설정할 수 있습니다.

h1 {
  color: attr(data-color type(<color>), https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bfff)
}</color>

차익 거래 값은 선택 사항이며 사용 사례에 따라 필요하지 않을 수 있습니다.

컨테이너 쿼리의 스크롤 상태!

이것은 놀랍습니다! "끈적 끈적한"상태 일 때 끈적 끈적한 요소를 스타일링하는 방법을 원한다면 그러한 기능을 갖는 것이 얼마나 멋진 지 알게 될 것입니다. Adam Argyle은 알파벳순 목록의 고전적인 패턴을 사용하고 뷰포트의 상단에 붙여질 때 문자 제목에 스타일을 적용합니다. 스냅 요소를 스크롤하고 컨테이너 요소를 스크롤하는 것도 마찬가지입니다.

다시 말해, 요소가 "스틱", "스냅"및 "스크롤 가능"인 경우 스타일을 지정할 수 있습니다.
1. 크롬 브라우저에서 열어야하는 작은 예 : 전반적인 아이디어 (지금은 너무 많이 알고 있습니다)는 컨테이너를 등록한다는 것입니다 ... 쿼리 할 수 ​​있습니다. 우리는 컨테이너에 대해 a
를 설정하는데, 이는 우리가 사용하는 스크롤 유형입니다. 이 경우 요소가 페이지 상단에 "붙여 넣기"인 끈적 끈적한 위치를 사용합니다.

2. <h1 data-color="orange">Some text</h1>

   컨테이너는 자체적으로 쿼리 할 수 ​​없으므로 기본적으로 붙여 넣을 요소의 래퍼 여야합니다. 우리는

   요소가 있기 때문에 메뉴는 약간 특별합니다.이 요소는 일반적으로 변수되지 않은 링크 목록으로 채워집니다. 따라서 는 쿼리 용 컨테이너로 사용될 수 있습니다. 왜냐하면 우리는 실제로 반대되지 않은 목록을 페이지 상단에 붙여 넣고 있기 때문입니다. <nav></nav> <nav></nav> 우리는 실제로 붙여 넣은 내용이 포함되어 있기 때문에 끈적 끈적한 논리를

   에 직접 넣을 수 있습니다 : .

   h1::before {
     content: ' (Color: ' attr(data-color) ') ';
   }

   메뉴 대신 끈적 끈적한 바닥 글을 사용하는 경우

   를 사용할 수 있습니다. 그러나 요점은 일단 <nav></nav> 요소가 상단에 붙여지면 다음과 같이

   블록에 스타일을 적용 할 수 있다는 것입니다.

   h1 {
     color: attr(data-color type(<color>), https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bfff)
   }</color>

   다른 선택기를 중첩하는 것도 작동하는 것 같습니다. 예를 들어, 내비게이션이 끈적 끈적하면 메뉴에서 링크를 변경할 수 있습니다.

   <.> 그렇습니다. 내가 말했듯이, Chrome Development 팀의 일원이기 때문에 이러한 기능을 시작하는 것은 시원해야합니다. Bramus와 Adam에게 새로운 기능과 훌륭한 데모를 만들기위한 많은 노력을 소개해 주신 Bramus와 Adam에게 대단히 감사합니다. stuck: bottom

위 내용은 크롬 133 장의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!