[css-variables-1][editorial] Add note calling out how things don't resolve in variables until they're subbed, talking about URLs explicitly. #757

Author: tabatkins

css-variables-1/Overview.bs

@@ -311,6 +311,24 @@ Custom Property Value Syntax</h3>
 	which user agents can take advantage of by "canonicalizing" them into a single casing,
 	but that isn't allowed for custom properties.)
 
+	<div class=note>
+		Because custom properties can contain <em>anything</em>,
+		there is no general way to know how to interpret what's inside of them
+		(until they're substituted into a known property with ''var()'').
+		Rather than have them <em>partially</em> resolve in some cases but not others,
+		they're left completely unresolved;
+		they're a bare stream of [[css-syntax#tokenization|CSS tokens]] interspersed with ''var()'' functions.
+
+		This has some knock-on implications.
+		For example, relative URLs in CSS
+		are resolved against the base URL of the stylesheet the value appears in.
+		However, if a custom property like ''--my-image: url(foo.jpg);'' shows up in an <code>"/a/style.css"</code> stylesheet,
+		it will not resolve into an absolute URL immediately;
+		if that variable is later used in a <em>different</em> <code>"/b/style.css"</code> stylesheet
+		like ''background: var(--my-image);'',
+		it will resolve <em>at that point</em> to <code>"/b/foo.jpg"</code>.
+	</div>
+
 <h3 id='guaranteed-invalid'>
 Guaranteed-Invalid Values</h3>