TIL — 맞춤 속성이 url() CSS 함수와 함께 작동하지 않는 이유

사용자 정의 속성 및 CSS 구문 분석은 !important behaving slightly differently 또는 properties being "invalid at computed value time" 과 같은 놀라움에 항상 좋습니다.

오늘 저는 또 다른 놀라운 사실을 발견했습니다. 사용자 지정 속성은 url() 함수와 함께 작동하지 않습니다. 😲

.something {
  /* this doesn't work */
  --image: https://jo.com/image.jpg;
  background: url(var(--image));
}

Roman Dvornov describes the details quite well in a GitHub issue , 하지만 요약 설명을 드리겠습니다.

url()의 두 가지 모드

url() 포함 CSS는 url() 사용 방법에 따라 다르게 구문 분석됩니다. 이전 방식과 새로운 방식이 있습니다.

이전: url(https://jo.com/image.jpg)

최신: url('https://jo.com/image.jpg') 또는 url("https://jo.com/image.jpg")

레거시 url() 토큰의 문제

이전 방식의 이러한 누락된 인용문은 작은 세부 사항처럼 보일 수 있지만 CSS가 구문 분석되는 방식에 영향을 미칩니다.

따옴표가 없으면 url() 구문이 CSS 함수처럼 보이지만 실제로는 그렇지 않습니다. CSS 파서는 소위 url-token 와 같이 이를 단일 토큰으로 취급합니다.

.something {
  background: url(https://ja.com/image.jpg);
  //          \---------------------------/
  //            without quotes this ☝️ is
  //               a single CSS token
}

그리고 url(에서 닫기)까지의 이 전체 토큰은 괄호, 공백 문자, 작은따옴표(') 및 큰따옴표(")가 백슬래시로 이스케이프되도록 합니다.
url() 따옴표 문자열이 있는 반면에 부분적으로 구문 분석되고 예상대로 작동하는 일반적이고 유연한 CSS 함수 표기법입니다.

하지만 이제 사용자 지정 속성을 url()와 함께 사용하려는 경우 어떤 일이 발생하는지 추측해 보십시오.

.something {
  /* this doesn't work */
  --image: https://jo.com/image.jpg;
  background: url(var(--image));
//                ☝️ "No quotes? Cool, that's a url-token!"
//                😢 "Too bad though, `(` isn't allowed in here..."
//                ❌ "I'll throw everything away!"
}

따옴표가 없기 때문에 이 선언은 url-token 로 구문 분석됩니다. 불행하게도 (의 var(--image)는 이스케이프되지 않으므로 파서는 오류를 발생시키고 전체 CSS 선언을 무효화합니다.

그리고 이 레거시url-token 구문 분석으로 인해 url() 내에서 사용자 정의 변수를 사용할 수 없습니다.

레거시 url()을 해결하는 솔루션

오래된 웹 레거시에 문제가 있을 때 일반적인 해결책은 무엇입니까? 그것은 우리가 웹을 파괴할 수 없고 그저 무언가를 바꿀 수 없기 때문에 새로운 것을 발명하는 것입니다.
url()에서 사용자 지정 속성을 활성화하기 위해 town에 새 별칭이 있습니다. src() 표기법은 url()와 같은 방식으로 작동하지만 이 이상한 레거시url-token 논리가 없습니다.

.something {
  /* this works! (theoretically) */
  --image: https://jo.com/image.jpg;
  background: src(var(--image));
}

문제 해결됨! 그러나 아직 지원하는 브라우저가 없으므로src()(브라우저 지원 정보를 찾을 수 없었지만 현재 Chrome, Safari 및 Firefox를 테스트했습니다) 이제 기다려야 합니다. 🤷‍♂️

CSS 구문 분석 및 사용자 지정 속성 — 항상 놀라운 결과를 가져옵니다!


이 주제에 대해 자세히 알아보려면 다음 리소스를 참조하세요.

Roman Dvornov's stellar explanation of this topic

The spec defining src() and url()

The spec change adding the src() alias