[css-variables-1] Additional example w3c#7131

Author: svgeesus

css-variables-1/Overview.bs

@@ -182,6 +182,33 @@ Defining Custom Properties: the '--*' family of properties</h2>
 	to ensure that similar appearing sequences are identical.
 	See Section 2.3 in [[CHARMOD-NORM]] for examples.
 
+	<div class="example">
+		Developers maintaining the following CSS
+		might be confused why the test patch is red:
+
+		<pre>
+		--fijord: red;
+		--fijord: green;
+		--fijord: blue;
+
+		.test {
+			background-color: var(--fijord);
+		}
+
+		The reason is that the first custom property
+		uses the character sequence
+		LATIN SMALL LETTER F + LATIN SMALL LETTER I + LATIN SMALL LETTER J;
+		the second, identical-looking one
+		uses the character sequence
+		LATIN SMALL LETTER F + LATIN SMALL LIGATURE IJ
+		while the third
+		uses the character sequence
+		LATIN SMALL LIGATURE FI + LATIN SMALL LETTER J.
+
+		So the CSS contains three distinct custom properties,
+		two of which are unused.
+	</div>
+
 	Custom properties are <strong>not</strong> reset by the 'all' property.
 	<span class='note'>We may define a property in the future that resets all variables.</span>