attribute references for content and :read-only usage result in error
Hannes Sprafke <[email protected]> Fri, 11 Dec 2015 11:09:57 +0100
| Newsgroups | gmane.org.w3c.validator.css |
|---|---|
| Message-ID | <CAH=c7WOoRbZVquG7xnjsE6S5fP4CoVkvQyqO8Q6Jr6ZYF=KoNQ@mail.gmail.com> |
--001a11c213ccaa1db405269c87ed
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: quoted-printable
Hi,
I recently validated my freshly new written css with your validator on
http://jigsaw.w3.org/css-validator/ with the profile =E2=80=9Ccss level 3=
=E2=80=9D selected.
It showed some errors for my value for the attribute content which
references html attributes with attr(*someHtmlAttribute*).
Because of the description on
http://www.w3schools.com/cssref/pr_gen_content.asp I started some tests,
all resulting in errors:
/* copied from the w3schools page */
a:after {
content: " (" attr(href) ")";
}
/*other stuff from my own css */
..styled label[tooltip]:focus:after, .styled label[tooltip]:hover:after,
..styled label[tooltip]:active:after {
content: attr(tooltip); /* texts with attribute tooltip come from db,
so I have to use this, better would be data-tooltip*/
}
..styled label[tooltip]:focus:after, .styled label[tooltip]:hover:after,
..styled label[tooltip]:active:after {
content: attr(data-tooltip);
}
There is also a problem with the pseudo element :read-only
http://www.w3schools.com/cssref/sel_read-only.asp
input:read-only {
background-color: yellow;
}
The validator says that there=E2=80=99s an unknown pseudo element or pseudo=
class:
:read-only
Best regards
Hannes
--001a11c213ccaa1db405269c87ed
Content-Type: text/html; charset=UTF-8
Content-Transfer-Encoding: quoted-printable
<div dir=3D"ltr"><p class=3D"MsoNormal">Hi,</p>
<p class=3D"MsoNormal">=C2=A0</p>
<p class=3D"MsoNormal"><span lang=3D"EN-US">I recently
validated my freshly new written css with your validator on <a href=3D"http=
://jigsaw.w3.org/css-validator/">http://jigsaw.w3.org/css-validator/</a>
with the profile =E2=80=9Ccss level 3=E2=80=9D selected.</span></p>
<p class=3D"MsoNormal"><span lang=3D"EN-US">It showed
some errors for my value for the attribute content which references html
attributes with attr(<i>someHtmlAttribute</i>).</span></p>
<p class=3D"MsoNormal"><span lang=3D"EN-US">=C2=A0</span></p>
<p class=3D"MsoNormal"><span lang=3D"EN-US">Because of
the description on <a href=3D"http://www.w3schools.com/cssref/pr_gen_conten=
t.asp">http://www.w3schools.com/cssref/pr_gen_content.asp</a>
I started some tests, all resulting in errors:</span></p>
<p class=3D"MsoNormal"><span lang=3D"EN-US" style=3D"font-family:'Couri=
er New'">=C2=A0</span></p>
<p class=3D"MsoNormal"><span lang=3D"EN-US" style=3D"font-family:'Couri=
er New'">/* copied from the w3schools page */</span></p>
<p class=3D"MsoNormal"><span lang=3D"EN-US" style=3D"font-family:'Couri=
er New'">a:after {</span></p>
<p class=3D"MsoNormal"><span lang=3D"EN-US" style=3D"font-family:'Couri=
er New'">=C2=A0=C2=A0=C2=A0 content: " (" attr(href)
")";</span></p>
<p class=3D"MsoNormal"><span lang=3D"EN-US" style=3D"font-family:'Couri=
er New'">}</span></p>
<p class=3D"MsoNormal"><span lang=3D"EN-US" style=3D"font-family:'Couri=
er New'">/*other stuff from my own css */</span></p>
<p class=3D"MsoNormal"><span lang=3D"EN-US" style=3D"font-family:'Couri=
er New'">.styled label[tooltip]:focus:after, .styled
label[tooltip]:hover:after, .styled label[tooltip]:active:after {</span></p=
>
<p class=3D"MsoNormal"><span lang=3D"EN-US" style=3D"font-family:'Couri=
er New'">=C2=A0=C2=A0=C2=A0=C2=A0 content: attr(tooltip); /*
texts with attribute tooltip come from db, so I have to use this, better wo=
uld
be data-tooltip*/</span></p>
<p class=3D"MsoNormal"><span lang=3D"EN-US" style=3D"font-family:'Couri=
er New'">}</span></p>
<p class=3D"MsoNormal"><span lang=3D"EN-US" style=3D"font-family:'Couri=
er New'">.styled label[tooltip]:focus:after, .styled
label[tooltip]:hover:after, .styled label[tooltip]:active:after {</span></p=
>
<p class=3D"MsoNormal"><span lang=3D"EN-US" style=3D"font-family:'Couri=
er New'">=C2=A0=C2=A0=C2=A0=C2=A0 content: attr(data-tooltip);</span></=
p>
<p class=3D"MsoNormal"><span lang=3D"EN-US" style=3D"font-family:'Couri=
er New'">}</span></p>
<p class=3D"MsoNormal"><span lang=3D"EN-US">=C2=A0</span></p>
<p class=3D"MsoNormal"><span lang=3D"EN-US">=C2=A0</span></p>
<p class=3D"MsoNormal"><span lang=3D"EN-US">There is
also a problem with the pseudo element :read-only</span></p>
<p class=3D"MsoNormal"><span lang=3D"EN-US"><a href=3D"http://www.w3schools=
..com/cssref/sel_read-only.asp">http://www.w3schools.com/cssref/sel_read-onl=
y.asp</a></span></p>
<p class=3D"MsoNormal"><span lang=3D"EN-US" style=3D"font-family:'Couri=
er New'">input:read-only { </span></p>
<p class=3D"MsoNormal"><span lang=3D"EN-US" style=3D"font-family:'Couri=
er New'">=C2=A0=C2=A0=C2=A0=C2=A0background-color: yellow;</span></p>
<p class=3D"MsoNormal"><span lang=3D"EN-US" style=3D"font-family:'Couri=
er New'">}</span></p>
<p class=3D"MsoNormal"><span lang=3D"EN-US">The
validator says that there=E2=80=99s an unknown pseudo element or pseudo cla=
ss:
:read-only</span></p>
<p class=3D"MsoNormal"><span lang=3D"EN-US">=C2=A0</span></p>
<p class=3D"MsoNormal"><span lang=3D"EN-US">=C2=A0</span></p>
<span lang=3D"EN-US" style=3D"font-size:11pt;font-family:Calibri,sans-serif=
;color:black">Best regards<br>
<br>
Hannes<br>
</span></div>
--001a11c213ccaa1db405269c87ed--