CSS Navigation Matching의 초기 단계

여기서 의도는 정말 마음에 듭니다. 특정 페이지에서 다른 페이지로 이동할 때 스타일을 적용하는 것입니다. 이 아이디어는 문서 간의 보기 전환(view transitions) 소스를 JavaScript에서 관리하는 대신 CSS에서 선언적으로 만들 수 있게 할 것이라는 점입니다.

이 기능이 구체화되면서 Bramus가 가상의 예시를 보여주었습니다:

• @location을 정의합니다. 즉, 전환에 관련된 URL들입니다. Bramus는 @route를 사용했지만, 이는 그들의 게시물 이후로 변경된 것 같습니다. - 경로(routes) 사이의 @navigation을 쿼리합니다. - 각 경로에서 전환되는 대상을 선택합니다.

따라서:

/* 위치 정의 */
@location --contact-page {
pathname: ("/contact");
...

이것은 우리가 이동하는 시작 페이지와 끝 페이지를 정확히 알고 있을 때의 방식입니다. 모르는 경우에는 URL 패턴 매칭도 있습니다:

@location --article {
pattern: url-pattern ("/article/:id");
}
...

pathname과 url-pattern 디스크립터 외에도 @location을 정의하는 추가적인 방법들이 있습니다. 예를 들어, 해시(#)가 붙은 URL을 매칭하려고 하거나, 특정 포트(port)나 호스트 이름(hostname)을 매칭할 수도 있습니다. 또한 protocol과 search도 있는 것 같은데, 솔직히 저는 다른 디스크립터 중 무엇을 사용할지 이해하려면 예시와 사용 사례를 봐야 할 것 같습니다.

좋습니다. 그러면 @location에 등록된 사용자 정의 식별자를 사용하여 위치 사이의 @navigation을 쿼리하는 방법이 생깁니다. 만약 네비게이션이 두 이동 지점을 모두 충족하면, 성공입니다.

/* 이 두 페이지 사이를 탐색할 때 전환 실행 */
@navigation (from: --contact) and (to: --contact-confirmation) {
/* 전환 적용 */
...

여기서 and 키워드로 연결된 깔끔한 from과 to 조건들이 있습니다.

좀 더 간결하게 작성하는 또 다른 방법도 있습니다:

/* 이 두 페이지 사이를 탐색할 때 전환 실행 */
@navigation (between: --contact and --contact-confirmation) {
/* 전환 적용 */
...

아니면, 일치하지 않을 때(not a match)도 이걸 실행할 수 있습니다:

아니면, 이 두 페이지 사이를 이동할 때가 아닐 경우(not a match)에도 이것을 실행할 수 있습니다:

/* 전환 적용 (transition을 발생시키지만, 이 두 페이지 사이에서 탐색하는 경우에는 제외)
@navigation not (between: --contact and --contact-confirmation) {
/* 전환 적용 */
...

또한 위치를 연결하는 at 키워드도 있습니다. 현재 사양 초안(spec draft)은 이 부분에 대해 모호하지만, Bramus가 다음과 같이 시연했습니다:

@navigation (between: --home and --detail) {
@navigation (at: --home) {
/* 클릭된 링크의 이미지를 대상으로 합니다 */
...

저는 이것을 이해하려고 애쓰고 있습니다. 제가 이해한 바로는, *“--home과 --detail 사이를 탐색하는 중이고 ‘at’이 --home에서 시작될 때, 이 요소를 선택하고 이 뷰 전환 이름(view transition name)을 부여합니다.”*라는 의미인 것 같습니다. 다시 말해, 진행되는 시점이 아니라 페이지 간 탐색의 아주 아주 초반(아니면 끝일까요?)에 발생하는 것입니다. 제가 맞는지 확인해 주시면 좋겠습니다.

그리고 :nav-source 가상 클래스(pseudo)는 어떻습니까? (이것은 :navigation-source로 이름이 변경될 수도 있습니다.) 또다시 모든 것을 이해하려고 애쓰고 있습니다. 하지만 만약 제가 제대로 이해하고 있다면, 이것은 전환을 유발하는 특정 요소를 일치시키는 것입니다. 링크, 이미지, div 또는 어떤 요소든 탐색의 원천(source)입니다. 저는 반대편 요소를 일치시키는 대응되는 가상 클래스에 대한 사양 초안에서 아무것도 보지 못했습니다. 예를 들어, :target 같은 것 말이죠? 하지만 아마도 명확한 사용 사례가 없을 수도 있습니다.

가상 클래스 이야기가 나와서 말인데, 사양은 특정 위치를 목표로 하는 링크된 요소(linked element)에 스타일을 적용하는 :link-to()라는 또 다른 것을 정의합니다. 사양에서 바로 가져왔습니다:

@location --homepage {
pattern: url-pattern("/");
}
...

이것은 HTML의 다음과 같은 요소와 일치한다고 상상합니다:

<a href="/">홈으로 돌아가기</a>

...즉, 링크를 그 목표 목적지(targeted destination)에 따라 스타일링하는 것과 많이 비슷한데? 어쩌면 이미 선언된 위치가 있을 때 개발자 경험(DX) 편의성이 더 큰 걸까요?

몇 가지 참고 사항

제가 이미 마음에 들지 않는 점은, 이러한 기능들이 CSS-Tricks처럼 플랫한 URL 구조를 가진 사이트에는 작동하지 않을 것 같다는 것입니다. 저희 URL의 대부분은 단일 레벨 깊이입니다. 따라서 특정 페이지(/about)와 모든 아티클(/article-url) 간에 매칭하고 싶어도 그 경로를 구분할 방법이 없습니다. 하지만 어쩌면 이것은 여기에서 URL이 설계된 방식과 관련이 있으며, 더 많은 구조가 필요하다는 것을 의미할 수도 있습니다. 물론 이건 사소한 변화는 아닙니다.

제 친구 Lee Meyer는 URL에 ?blog와 같은 매개변수를 추가하면 URL 패턴 매칭의 초능력을 얻을 수 있을 것이라고 제안합니다.

아, 그리고 생각하는 김에, 특정 페이지에서 다른 페이지로 이동할 때 특정 스타일을 적용하고 싶은 사용 사례가 떠올랐습니다. 예를 들어, 홈페이지와 소개 페이지 사이를 탐색하면서 도착지 페이지의 요소를 어디서 왔는지에 기반하여 스타일링하고 싶을 수 있습니다. Bramus의 이전 예시를 바탕으로 하자면:

@navigation (between: --home and --article) {
@navigation (at: --article) {
/* .article-header 요소 타겟팅 */
...

글쎄요. 보안 문제가 있을 것 같지 않나요?

그리고 Preethi가 CSS-Tricks Slack 채널에서 통찰력 있는 피드백을 남겼는데, 제가 생각하기에 다음과 같습니다:

모든 데이터 인프라를 위한 at-rule이 있었으면 좋았을 텐데, 모든 속성-값 쌍(property-value pairs)에 대해 @property와 유사하게, 타입별로 유효한 구성을 가질 수 있는 것이요. 우리는 그것을 사용해서 @color-profile, @position-try, 그리고 이제는 @location 대신 사용할 수 있었을 것입니다.

오늘날 배워야 할 새로운 규칙이 너무 많기 때문에 정말 맞는 말입니다. 학습 곡선을 낮춰주는 것은 확실히 고려해 볼 가치가 있습니다.

더 많은 내용들이 있습니다

탐색 '유형'(예: back, forward, reload) 및 탐색 '단계'(예: loading, ready, committed)를 기반으로 하는 것과 같은 세부 사항을 깊이 파고들려면 스펙 초안(spec draft)을 직접 살펴보셔야 합니다.

흡수해야 할 정보가 많습니다. 하지만 뷰 전환(view transitions) 전체도 마찬가지입니다.