klaus_b
Themenersteller
Er ernährt mich ;-)
Content Meister (328 Beiträge)
Validator-Warnungen bei bedingten rel-Selektoren
Hallo zusammen,
ich habe da ein kleines Problem mit dem W3-Validator und meinem CSS.
Ich verwende in meinem Blog die XFN-Tags und ein entsprechendes CSS zum anzeigen einer Grafik der jeweiligen XFN-Relation. Die Ausgabe kann man z.B. in diesem Artikel meines Blog bei den Namen Tim Fischer, Nico Franze und Jan Welker betrachten.
Wenn ich das CSS im W3-Validator validieren lasse, erhalte ich 9 Warnungen wegen Inkompatibilität von Kombinationen der Werte im rel-Attribut.
Hier der relevante Teil aus meinem CSS:
[css]
/*----------------------- XFN tags -----------------------*/
div.postcontent a[rel="me"]
{
background: url('../../pics/xfn/me.gif') right center no-repeat;
padding-right: 11px;
}
/*-------- [ These should cascade to pick the correct icon for the contact ]--*/
/*-------- [ Normal contacts ]--*/
div.postcontent a[rel~="contact"], div.postcontent a[rel~="acquaintance"], div.postcontent a[rel~="friend"]
{
background: url('../../pics/xfn/contact.gif') right center no-repeat;
padding-right: 11px;
}
/*-------- [ Normal contacts youve met ]--*/
div.postcontent a[rel~="contact"][rel~="met"], div.postcontent a[rel~="acquaintance"][rel~="met"], div.postcontent a[rel~="friend"][rel~="met"]
{
background: url('../../pics/xfn/contactMet.gif') right center no-repeat;
padding-right: 11px;
}
/*-------- [ Colleague and co worker icon more important than contact ]--*/
div.postcontent a[rel~="colleague"], div.postcontent a[rel~="co-worker"]
{
background: url('../../pics/xfn/colleague.gif') right center no-repeat;
padding-right: 11px;
}
/*-------- [ Colleague and co worker icon when met ]--*/
div.postcontent a[rel~="colleague"][rel~="met"], div.postcontent a[rel~="co-worker"][rel~="met"]
{
background: url('../../pics/xfn/colleagueMet.gif') right center no-repeat;
padding-right: 11px;
}
/*-------- [ Sweethearts are more important than work!!! ]--*/
div.postcontent a[rel~="muse"], div.postcontent a[rel~="crush"], div.postcontent a[rel~="date"], a[rel~="sweetheart"]
{
background: url('../../pics/xfn/sweet.gif') right center no-repeat;
padding-right: 11px;
}
/*-------- [ ...and if youve met them thats even better ]--*/
div.postcontent a[rel~="muse"][rel~="met"], div.postcontent a[rel~="crush"][rel~="met"], div.postcontent a[rel~="date"][rel~="met"], div.postcontent a[rel~="sweetheart"][rel~="met"]
{
background: url('../../pics/xfn/sweetMet.gif') right center no-repeat;
padding-right: 11px;
}
[/css]
Prinzipiell funktioniert die Interpretation des CSS in den gängigen Browsern und wird auch korrekt angezeigt. Mich stört eigentlich nur die Ausgabe der Warnungen des W3-Validator.
Da ich in Sachen Frontend und UI nicht sonderlich bewandert bin, währe es riesig nett, wenn jemand hier im Forum mal einen Blick darauf werfen könnte und vielleicht der ein oder andere Verbesserungsvorschlag dabei heraus kommt.
Danke schon mal für's lesen.
Servus,
Klaus
klaus_b@.NET über alles was an .NET und C# Spass macht.
gerard
Content Gott (1271 Beiträge)
Lass dein css mal gegen css3 validieren und gut ist\'s.
Gérard
http://bretagne-virtuell.de
klaus_b
Er ernährt mich ;-)
Content Meister (328 Beiträge)
Hallo Gérard,
gerard schrieb:
Lass dein css mal gegen css3 validieren und gut ist\'s.
ich validiere gegen CSS3 siehe Parameter profile=css3 in der URL:
jigsaw.w3.org/css-validator/validator
Der Validator meldet zwar:
Ergebnisse des CSS-Validators blog.klaus-b.net/default.aspx (CSS level 3)
Gratuliere! Keine Fehler gefunden.
Aber denoch werden 9 Warnungen ausgegeben. Genau um diese 9 Warnungen geht es mir.
Servus,
Klaus
klaus_b@.NET über alles was an .NET und C# Spass macht.
gerard
Content Gott (1271 Beiträge)
klaus_b schrieb:
Der Validator meldet zwar:
Ergebnisse des CSS-Validators blog.klaus-b.net/default.aspx (CSS level 3)
Gratuliere! Keine Fehler gefunden.
Aber dennoch werden 9 Warnungen ausgegeben. Genau um diese 9 Warnungen geht es mir.
Mein Test ergab noch mehr Warnungen:
jigsaw.w3.org/css-validator/validator
aber da muss ich auch erst mal genauer hinsehen ...
Nachtrag:
Setze mal ein + zwischen a[rel~="colleague"] und [rel~="met"], also a[rel~="colleague"]+[rel~="met"]
Ich hab noch keine wirkliche Ahnung ob das richtig ist, aber zumindest ist der Validator jetzt zufrieden.
Gérard
http://bretagne-virtuell.de
klaus_b
Er ernährt mich ;-)
Content Meister (328 Beiträge)
gerard schrieb:
Mein Test ergab noch mehr Warnungen:
jigsaw.w3.org/css-validator/validator
aber da muss ich auch erst mal genauer hinsehen ...
Die meisten Warnungen beziehen sich auf die Vorder- und Hintergrund Farben. Diese Warnungen sind für mich verständlich und nachvollziehbar. Ich werde sie nach und nach aufarbeiten.
Womit ich aber überhaupt nichts anfangen kann, sind die Warnungen wie etwa:
[rel~="colleague"] und [rel~="met"] sind inkompatibel
Danke für\'s hinsehen und Servus,
Klaus
klaus_b@.NET über alles was an .NET und C# Spass macht.
gerard
Content Gott (1271 Beiträge)
2. Nachtrag:
Ein Leerzeichen tut es auch; statt:
a[rel~="colleague"][rel~="met"]
also
a[rel~="colleague"] [rel~="met"]
Zum Technischen wirst du hier fündig:
www.w3.org/TR/css3-selectors/
Gérard
http://bretagne-virtuell.de
klaus_b
Er ernährt mich ;-)
Content Meister (328 Beiträge)
Hallo Gérard,
gerard schrieb:
2. Nachtrag:
Ein Leerzeichen tut es auch; statt:
a[rel~="colleague"][rel~="met"]
also
a[rel~="colleague"] [rel~="met"]
Zum Technischen wirst du hier fündig:
www.w3.org/TR/css3-selectors/
Super! Das war\'s. Der Validator ist glücklich und die Darstellung im Browser klappt auch.
Vielen Dank für deine Hilfe.
Den Link zu den CSS3-Selektoren werde ich durcharbeiten. Da hat sich gegenüber CSS2.1 ja einiges getan.
Danke nochmal und Servus,
Klaus
klaus_b@.NET über alles was an .NET und C# Spass macht.
joerg
Fachinformatiker Anwendungsentwicklung
Content Gott (1941 Beiträge)
gerard
Content Gott (1271 Beiträge)
joerg schrieb:
Warum es mit Leerzeichen funktioniert erschließt sich mir nicht in diesem Fall.
Mir auch noch nicht wirklich. Vielleicht weiß ich es, wenn ich die Spezifikation mal ganz verstanden habe. Aber vermutlich stand das schon bei css 2 oder gar bei css 1. Was mich besonders verwundert hat, war, dass der Validator auch bei einem +Zeichen nicht meckert.
Nachtrag:
www.w3.org/TR/CSS1/
Contextual selectors consist of several simple selectors separated by whitespace ...
Gérard
http://bretagne-virtuell.de
joerg
Fachinformatiker Anwendungsentwicklung
Content Gott (1941 Beiträge)
Hallo Gerard
Das ist klar warum er bei einem + Zeichen nicht meckert! Nur ich dachte bisher das es nur für Elemente verwendet werden konnte.
Also nachdem ersten Attribut befindet man sich in dem einem Element. Mit dem zweiten Attribut kann man in der Hierachie nicht viel weiter runter gehen!
@klaus Könntest du mal testweise es auch mit dem Pluszeichen ausprobieren ob das dann auch funktioniert? Ich würde jetzt vermuten das es funktioniert.
Es dürfte nicht mehr funktionieren wenn die beiden Attribute in anderer Reihenfolge im HTML Code stehen.
Gruß
Jörg
Zufällige Umleitung zu der Startseite einer meiner Domains
Meine ungewöhnlichen Tools
gerard
Content Gott (1271 Beiträge)
joerg schrieb:
@klaus Könntest du mal testweise es auch mit dem Pluszeichen ausprobieren ob das dann auch funktioniert? Ich würde jetzt vermuten das es funktioniert.
Es dürfte hier nicht funktioniert haben - aber warten wir auf die Antwort von Klaus - er hat es probiert, das weiß ich. Ansonsten siehe hier:
www.w3.org/TR/CSS21/selector.html
Gérard
http://bretagne-virtuell.de
Das Seitenreport Forum hat aktuell 5275 Themen und 36110 Beiträge.
Insgesamt sind 48360 Mitglieder registriert.
Beitrag erstellen
EinloggenKostenlos registrieren