[CSS3] Validatie-error: onbekende pseudo-element of -class

[mrtnptrs]

Ik ben samen met iemand een site aan het maken voor een evenement voor een goed doel (Tighten your Belt) bij ons op school. Dit als opdracht voor Informatica en omdat ik gewoon hier al twee jaar aan mee heb gedaan en het zelfs al die tijd al mee heb helpen organiseren. Dit is de url van de site: *niet relevant*

Alles werkt naar behoren, ook de formulieren. Maar wanneer ik de CSS van onze site probeer te valideren krijg ik verschillende errors:

• Onbekend pseudo-element of pseudo-class :invalid
• Onbekend pseudo-element of pseudo-class :required
• Onbekend pseudo-element of pseudo-class :optional
• Onbekend pseudo-element of pseudo-class :valid

Zie hier eventueel voor het validatierapport: http://jigsaw.w3.org/css-...%2F%2F5v-tyb.ecb-if.nl%2F

Het heeft overduidelijk iets te maken met de pseudo-elements/selectors die horen bij de CSS die gebruikt wordt in de formulieren op onze site. Ze worden wel correct herkend, maar de validator geeft van die errors.

Het gaat dus specifiek over dit stuk CSS:

Cascading Stylesheet:

 
article > form > .input > input:invalid:required, article > form > .input > textarea:invalid:required, article > form > .input > select:invalid:required{
    border: 1px solid red;
}
article > form > .input > input:valid:required, article > form > .input > textarea:valid:required, article > form > .input > select:valid:required{
    border: 1px solid #33CC33;
}
article > form > .input > input:focus, article > form > .input > textarea:focus, article > form > .input > select:focus{
    border: 1px solid transparent;
    border-radius:0px;
    background-color: white;
}
article > form > .input > input:optional, article > form > .input > textarea:optional, article > form > .input > select:optional{
    border: 1px solid #297ACC;
}

De gehele bijbehorende CSS kun je eventueel hier vinden: http://5v-tyb.ecb-if.nl/css/stylesheet.css

Ik heb alles al afgezocht op Google en die andere persoon ook, maar we kunnen maar niet goed vinden wat nou precies de fout is en vooral niet hoe we het kunnen verhelpen. Wie kan ons verder helpen en misschien aanwijzen waar het probleem ligt en hoe het op te lossen? We komen er zelf gewoon niet uit....

[ Voor 0% gewijzigd door NMe op 20-01-2015 02:12 ]

[Spinal]

Dat komt omdat die pseudo-classes nog niet officieel worden ondersteund, dit zit in CSS Selectors level 4. De browsers ondersteunen het zoals je gemerkt hebt al wel, dus gebruik het gewoon maar houd er rekening mee dat het mogelijk in de toekomst gaat veranderen.

[mrtnptrs]

Spinal schreef op maandag 19 januari 2015 @ 16:51:
Dat komt omdat die pseudo-classes nog niet officieel worden ondersteund, dit zit in CSS Selectors level 4. De browsers ondersteunen het zoals je gemerkt hebt al wel, dus gebruik het gewoon maar houd er rekening mee dat het mogelijk in de toekomst gaat veranderen.

Ik snap wat je bedoelt, maar het probleem is dat de leraar heeft gezegd dat de validator geen errors mag geven. Is er geen oplossing om deze errors te omzeilen/fixen?

[R4gnax]

mrtnptrs schreef op maandag 19 januari 2015 @ 17:02:
[...]

Ik snap wat je bedoelt, maar het probleem is dat de leraar heeft gezegd dat de validator geen errors mag geven.

Als je leraar tot die conclusie komt, dan heeft hij op z'n zachtst gezegd geen kaas gegeten van hoe het moderne browser landschap en de ratificatie van web-standaarden er uit ziet vis a vis het hopeloos achtergestelde onderhoud aan de officiële validatie tools.

Als hij op z'n strepen gaat staan, dan zou je terug moeten naar een website uit het jaar 2000. Je kunt het cross-browser werkend krijgen van zaken zoals CSS3 transforms, transities en animaties dan compleet op je buik schrijven want er zijn nog steeds courante (vooral mobile) browsers die deze eigenschappen enkel met vendor prefixes ondersteunen en die worden officieel ook niet door de validatie tools herkend.


En trouwens; als jij op je strepen zou gaan staan, dan zou je kunnen claimen dat het nog steeds volledig correct werkende CSS is. In de CSS standaard is namelijk opgenomen op exact wat voor wijze een browser (of validatie tool) hoort te falen als een bepaalde CSS eigenschap of syntax niet herkend (en dus ook: nog niet ondersteund) wordt. Dit is een essentieel onderdeel van het forward compatible karakter van CSS.

In het geval van de hier niet ondersteunde pseudo-classes en -elements komt dat neer op 'negeer deze CSS ruleset'. En laat dat nou precies het gewenste gedrag zijn: jouw browser ondersteunt :valid/:required/etc. niet? Dan 'verdwijnen' die styles ook automatisch uit het beeld dat de browser van jouw CSS file heeft.

[ Voor 10% gewijzigd door R4gnax op 19-01-2015 23:40 ]

[NMe]

R4gnax schreef op maandag 19 januari 2015 @ 23:34:
[...]

Als je leraar tot die conclusie komt, dan heeft hij op z'n zachtst gezegd geen kaas gegeten van hoe het moderne browser landschap

Een leraar (of ieder ander) die validatie als doel ziet in plaats van als middel is inderdaad niet serieus te nemen. Aan de andere kant: de topicstarter wil waarschijnlijk gewoon een (goed) punt krijgen voor de opdracht en het is niet alsof je voor inputvalidatie per se bleeding edge-features nodig hebt.

Als hij op z'n strepen gaat staan, dan zou je terug moeten naar een website uit het jaar 2000.

Onzin. Transforms en transitions werken inmiddels zonder prefix (behalve in webkit) en dat geldt volgens mij ook gewoon voor de validators. En zelfs als dat niet zo is zijn er best simpele alternatieven zowel binnen CSS als binnen javascript voorhanden voor dit soort simpele opdrachten.

[mrtnptrs]

Dankje iedereen voor jullie reacties! Ik vind die validatie-errors ook niet zo erg en ondanks die errors werkt alles. Ik zal de leraar inderdaad zeggen hoe het zit en hopelijk is hij het daarmee eens. Oftewel: het mag gewoon, werkt goed, alleen de validator klaagt erover.

[NMe]

Heb in dat geval aan de hand van bijvoorbeeld caniuse.com wel een goed verhaal over browsersupport.

[Martinspire]

Mja alternatief is inderdaad om het met andere CSS of Javascript op te lossen. Dat je bijvoorbeeld een css class toevoegt via de server voor de validatie. Of Javascript gebruiken (je gebruikt immers al jQuery) om dit te doen. Punt is alleen: dit is niet echt netjes en met moderne browsers niet nodig.

Toch denk ik wel dat je deze oplossing beter wel kunt maken, ik heb zo'n vermoeden dat je docent het anders niet gaat accepteren. Of je moet het hem eerst even voorleggen natuurlijk.

Je hebt niet echt veel verteld over je opdracht, maar je zou er ook nog voor kunnen kiezen om het gewoon weg te laten

[Zoefff]

De crux, zoals je leraar hopelijk ook zal opmerken, ligt 'm niet in het gebruik van deze pseudo-classes an sich, maar in het feit dat je nu bepaalde styling mist in browsers die deze pseudo-classes niet ondersteunen.

Dat de validator hier waarschuwingen voor geeft is, zoals hierboven ook beredeneerd, niet zo'n probleem. Het ontbreken van belangrijke visuele feedback over invoerfouten is natuurlijk wél een probleem, want de bruikbaarheid van de pagina gaat er meetbaar op achteruit.

Het hangt er van af hoe de opdracht precies geformuleerd is en of daarin ook een minimale browser ondersteuning is beschreven. Gezien het feit dat de site ook echt gebruikt moet gaan worden raad ik je aan om alsnog te grijpen naar b.v. een jQuery validate plugin om de validatie voor je af te handelen. De HTML5 validatie is in theorie uitstekend en heb je goed uitgewerkt, maar in de praktijk is dit nog niet breed genoeg ondersteund om daadwerkelijk te kunnen gebruiken (zonder fallback).