Validator-Warnung bei doppeltem Attribut-Selektor
0 
molily
0
Validator-Warnung bei doppeltem Attribut-Selektor
Hallo zusammen,
Ich möchte in CSS unterscheiden können zwischen
(1) Submit-Buttons im allgemeinen, z.B.
<input type="submit" name="submit" value="Anmelden" />
oder
<input type="submit" name="submit" value="Passwort senden" />
und
(2) Submit-Buttons mit der Beschriftung "Abmelden".
<input type="submit" name="submit" value="Abmelden" />
Dazu habe ich folgendes CSS (abgekürzt):
/* einfache Definition fuer saemtliche Input-Elemente,
z.B. fuer MS IE 6, der keine Attribut-Selektoren kennt: */
fieldset input { /*... */ }
/* Text-Felder: */
fieldset input[type=text], fieldset input[type=password],
fieldset input#user, fieldset input#pass, fieldset input#tx_felogin_pi1
{ /*... */ }
/* Submit-Buttons allgemein: */
fieldset input[type="submit"]
{ /*... */ }
/* Abmelde-Button speziell: */
fieldset input[type="submit"][value="Abmelden"]
{ margin:0 0 0 0; }
Der CSS-Validator des W3C sagt nun folgendes:
Gratuliere! Keine Fehler gefunden.
Dieses Dokument wurde als CSS level 2.1 validiert!
Warnungen (1)
[type="submit"] und [value="Abmelden"] sind inkompatibel
Nun meine Frage:
Was hat es mit dieser Warnung auf sich?
Im Kapitel 5.8 (Attribute Selectors) der CSS 2.0 und
CSS 2.1 Specification hat es doch auch Beispiele
von solchen Selektoren, z.B.
span[hello="Cleveland"][goodbye="Columbus"] { color: blue; }
Und in HTML kann ein INPUT-Element auf jeden Fall gleichzeitig
ein Type- und ein Value-Attribut haben. So hat es in der
HTML 4.01 Spec. im Kapitel 17 (Forms)
zahlreiche Beispiele mit
<INPUT type="submit" value="Send">
Warum soll dann bitte mein Selektor
fieldset input[type="submit"][value="Abmelden"]
in CSS nicht erlaubt sein?
fieldset input[type="submit"]
ist OK,
fieldset input[value="Abmelden"]
auch, aber die Kombination mag der CSS-Validator nicht.
Es ist mir klar, dass ich andere Selektoren basteln und
somit die Warnung wegmachen könnte. Aber ich möchte
wissen, ob die Warnung berechtigt ist oder ob es sich
um einen Bug des CSS-Validators handelt.
Danke im Voraus für die Aufklärung! ;-)
Freundliche Grüsse
Thomas
P.S. Hintergrund:
Das dazugehörige HTML ist valides XHTML 1.0 Transitional.
Es wird automatisch erzeugt von der "felogin" Komponente
von Typo3 (4.2.1) und betrifft das An- bzw. Abmelden für
einen passwortgeschützten Bereich. Ich habe darauf keinen
Einfluss (es sei denn, ich hacke irgendwo rum, was ich
aber nicht im Sinn habe).
Das HTML sieht (leicht gekürzt) so aus:
<!-- (1a) Formular zum Anmelden: -->
<form action="/" target="_top" method="post" onsubmit="">
<fieldset>
<legend>Anmelden</legend>
<div>
<label for="user">Benutzername:</label>
<input type="text" id="user" name="user" value="" />
</div>
<div>
<label for="pass">Passwort:</label>
<input type="password" id="pass" name="pass" value="" />
</div>
<div>
<input type="submit" name="submit" value="Anmelden" />
</div>
</fieldset>
</form>
<!-- (1b) Formular "Passwort vergessen": -->
<form action="/?tx_felogin_pi1%5Bforgot%5D=1" method="post">
<fieldset>
<legend>Passwort senden</legend>
<div>
<label for="txmail">Ihre Email:</label>
<input type="text" name="txmail" id="txmail" />
</div>
<div>
<input type="submit" name="submit" value="Passwort senden" />
</div>
</fieldset>
</form>
<!-- (2) Formular zum Abmelden: -->
<form action="intern/" target="_top" method="post">
<fieldset>
<legend>Abmelden</legend>
<div>
<label>Benutzername:</label> ***
</div>
<div>
<input type="submit" name="submit" value="Abmelden" />
</div>
</fieldset>
</form>
-
-
-
Ich möchte in CSS unterscheiden können zwischen
(1) Submit-Buttons im allgemeinen, z.B.
<input type="submit" name="submit" value="Anmelden" />oder
<input type="submit" name="submit" value="Passwort senden" />und
(2) Submit-Buttons mit der Beschriftung "Abmelden".<input type="submit" name="submit" value="Abmelden" />Dazu habe ich folgendes CSS (abgekürzt):
fieldset input[type=text], fieldset input[type=password] {...}Dazu habe ich keinen Einwand.
/* Abmelde-Button speziell: */
fieldset input[type="submit"][value="Abmelden"] { margin:0 0 0 0; }Aber hier kommen meine Bedenken.
Die Bedenken sind nicht technischer Art (wie verlässlich können Browser diese Syntax verstehen), sondern pragmatischer.Das Attribut "value" beinhaltet typischer Weise variablen Inhalt.
Denke daran, dass du diesen Wert später mal änderst. Danach wunderst du dich betreffs der Ursache, warum es sich nicht richtig formatieren lässt.Meiner Meinung verstrickst du dich damit auch in die Gewichtung für Selektoren.
Persönlich würde ich ein individuelles ID Attribut vorziehen. Falls ich später ein mehrsprachiges Formular benötige, habe ich mir mit dem CSS nicht in den eigenen Fuss geschossen.
mfg Beat
--
/|
<°)))o>< / | /|
---- _|___/ | ><o(((°>
OvVVvO __ | ><o(((°>
<°)))o>< /v v\/ |
<°)))o>< ^ ^/_/_ ><o(((°>
^^^^/___/
><o(((°> ---- ><o(((°>
<°)))o>< ><o(((°>o-
Hallo Beat,
Danke auch Dir für die Antwort.
/* Abmelde-Button speziell: */
fieldset input[type="submit"][value="Abmelden"] { margin:0 0 0 0; }Aber hier kommen meine Bedenken. [...]
Das Attribut "value" beinhaltet typischer Weise variablen Inhalt. [...]
Persönlich würde ich ein individuelles ID Attribut vorziehen.Deine Bedenken und Anregungen sind natürlich grundsätzlich richtig. ;-)
Wie ich im P.S. schrieb, handelt es sich um ein Formular, das vom
Content Management System Typo3 so erzeugt wird und auf dessen
Quelltext ich keinen Einfluss habe. Ich kann also keine ID setzen.
Kommt dazu: Der Abmelde-Button wird immer so heissen (d.h. das
value-Attribut bleibt konstant).
Und Mehrsprachigkeit ist kein Thema. Es ist eine kleine, einfache
Website, die mittelfristig unverändert bleibt (abgesehen vom Inhalt,
den der Kunde selbst aktualisieren wird, aber keine zusätzlichen
Formulare u.s.w.)Freundliche Grüsse
Thomas
-