Can "Required" style be streamlined?

[DoubleDee]

I am wondering if there is a practical way that I can streamline this code so that I don't need the clunky <span class="required">*</span> portion for each field...

<!-- Create Account Form -->
	<form id="createAccount" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
		<fieldset>
			<legend>Create a Member Account</legend>
			<ul>
				<!-- Required Note -->
				<li id="requiredNote">
					<span class="required">*</span> = Required Field
				</li>

				<!-- First Name -->
				<li>
					<label for="firstName"><span class="required">*</span>First Name:</label>
					<input id="firstName" name="firstName" class="text" type="text" maxlength="20"
							value="<?php if(isset($firstName)){echo htmlspecialchars($firstName, ENT_QUOTES);} ?>" /><!-- Sticky Field -->
					<?php
						if (!empty($errors['firstName'])){
							echo '<span class="error">' . $errors['firstName'] . '</span>';
						}
					?>
				</li>

I was going to use li span{} but that probably isn't specific enough, as there could be lots of places that an <li> would start with a <span> and have nothing to do with a "required" field in a form...

Any ideas?

Thanks,


Debbie

[ralph.m]

What about label span {}, as you probably won't have any other spans in labels except for that.

I read so much on this and then can't remember what is considered best practice. But another option is to add a little image in there instead of the asterisk, and give it an alt of "required" for screen readers (that way they get explicitly told that the field is required rather than just being told "asterisk"). Or there is even an ARIA role for a required field which is worth adding in to the input field:

<input aria-required="true">

Then, with a skilful use of attribute selectors and :before you could possibly add in an asterisk as generated content and locate it next to the label, though that might be too convoluted (if even possible). I'm sure poes will have a better solution.

[DoubleDee]

What about label span {}, as you probably won't have any other spans in labels except for that.

Yes, I was thinking about that too.

Which leads me to another related question...

Is it "good" or "bad" form to show the whole path of your styles like this...

form ul li label.required{
	display: inline;
	font-size: 15px;
	color: #F00;
}

or this...

form ul li label{
	display: inline;
	font-size: 15px;
	color: #F00;
}

(The second one is what you were proposing...)

I read so much on this and then can't remember what is considered best practice. But another option is to add a little image in there instead of the asterisk, and give it an alt of "required" for screen readers (that way they get explicitly told that the field is required rather than just being told "asterisk"). Or there is even an ARIA role for a required field which is worth adding in to the input field:

<input aria-required="true">

Then, with a skilful use of attribute selectors and :before you could possibly add in an asterisk as generated content and locate it next to the label, though that might be too convoluted (if even possible). I'm sure poes will have a better solution.

Wow! That sounds advanced!

Yeah, maybe I'll get lucky and Stomme poes will let up know what she thinks!

Thanks,


Debbie

[ralph.m]

Is it "good" or "bad" form to show the whole path of your styles

Some people have done a lot of testing on which use of CSS works most efficiently (in terms of the amount of work the browser needs to do), but I always forget what the results were. At least I would say use as little as possible. If you don't need to include all the selectors in between, it's more efficient not to ... and may be less work for the browser.

[Stevie D]

I would replace the meaningless <span class="required">*</span> with the meaningful <abbr title="required field">*</abbr>. If you don't have any other abbreviations in your form field labels then you've got a nice easy hook to apply the CSS without any need for a style attribute.

[DoubleDee]

I would replace the meaningless <span class="required">*</span> with the meaningful <abbr title="required field">*</abbr>. If you don't have any other abbreviations in your form field labels then you've got a nice easy hook to apply the CSS without any need for a style attribute.

I have enough to serve as a "hook" with an ID or Class.

Was just hoping to eliminate either to make my HTML more compact.

What does <abbr> do with a screen-reader?

And would it be evil if I could style * by just referencing something like label span{}??


Debbie

[ralph.m]

would it be evil if I could style * by just referencing something like label span{}?

Not at all. (You callin' me evil?! )

[xhtmlcoder]

The ABBR is for abbreviations and I don't really consider an standalone asterisk one. But if the text were marked up as ABBR it would possibly pronounce it differently, e.g. GIF it might try to say it as a spoken word; or spell it out a G-I-F hence usually why the TITLE attribute is associated for obvious reasons.

[Paul O'B]

These days I would do something like this:

<li id="requiredNote"><b>*</b> = Required Field</li>

You don't need a title as you are already telling everyone it is a required field in the very next piece of text. The b has no semantic meaning and just makes the asterisk bold as required. (If you wanted the asterisk to have meaning then strong or em could be used).

Using the b allows you to target all the asterisks in the form assuming you haven't used b anywhere else - which is unlikely. Some people frown on using the b element but I think its perfect in this case.

Regarding the length of the selector paths then long paths are bad (for maintenance and speed of operation) and should be avoided. They should only be as long as they need to be and no longer.

Why do this:

form ul li label.required{
display: inline;
font-size: 15px;
color: #F00;
}

When this is all you need:

label.required{
	display: inline;
	font-size: 15px;
	color: #F00;
}

Don't add more weight to a rule for no reason. If you add to the rule for readability and maintenance then that's a choice you make and that is fine if it helps you. You obviously have to take into account specificity of the rules to work out which will win out but that's much easier with shorter rules than long ones.

Also remember that ids are unique or you end up with the browser taking this approach.

So in general keep rules as short as possible but if it helps you now and then to qualify the rule for ease of maintenance than that's no big deal either.

[DoubleDee]

Paul,

Here is a larger snippet of my code. Looks like you are saying the same thing on your first point...

<!-- Create Account Form -->
<form id="createAccount" action="" method="post">
	<fieldset>
		<legend>Create a Member Account</legend>
		<ul>
			<!-- Required Note -->
			<li id="requiredNote">
				<span class="required">*</span> = Required Field
			</li>

			<!-- First Name -->
			<li>
				<label for="firstName"><span class="required">*</span>First Name:</label>
				<input id="firstName" name="firstName" class="text" type="text" maxlength="20"
						value="" />
			</li>

These days I would do something like this:

<li id="requiredNote"><b>*</b> = Required Field</li>

You don't need a title as you are already telling everyone it is a required field in the very next piece of text. The b has no semantic meaning and just makes the asterisk bold as required. (If you wanted the asterisk to have meaning then strong or em could be used).

Using the b allows you to target all the asterisks in the form assuming you haven't used b anywhere else - which is unlikely. Some people frown on using the b element but I think its perfect in this case.

What about using:

li label span{}

That would be specific enough to catch my asterisks, and make my HTML cleaner (as DeathShadow encouraged me).

(Of course for the note which is what you were specifically commenting on, you could use <label> and so using your code would be needed.)

Regarding the length of the selector paths then long paths are bad (for maintenance and speed of operation) and should be avoided. They should only be as long as they need to be and no longer.

This is what I took away from that article...

Super-speed, Zero-practicality

So we know that ID's are the most efficient selectors. If you wanted to make the most efficiently rendering page possible, you would literally give every single element on the page a unique ID, then apply styling with single ID selectors. That would be super fast, and also super ridiculous. It would probably be extremely non-semantic and extremely difficult to maintain. You don't see this approach even on hardcore performance based sites. I think the lesson here is not to sacrifice semantics or maintainability for efficient CSS.

I'm more about writing clear, concise, maintainable code. (Damn the browsers and the users!!!!)

Why do this:

When this is all you need:

label.required{
	display: inline;
	font-size: 15px;
	color: #F00;
}

Don't add more weight to a rule for no reason. If you add to the rule for readability and maintenance then that's a choice you make and that is fine if it helps you.

BINGO!!! (Of course I am sure there is a "middle-ground" on this topic.)

Also remember that ids are unique or you end up with the browser taking this approach.

So in general keep rules as short as possible but if it helps you now and then to qualify the rule for ease of maintenance than that's no big deal either.

Okay, thanks!



Debbie

[Paul O'B]

[QUOTE=DoubleDee;5020653]

What about using:

li label span{}

Yes that's fine as long as you don't use any other spans in that area which is unlikely sitewide as you have not confined the context. My "b" approach is less likely to see conflicts and is 6 characters smaller in total The "b" element is pretty neutral and the chances are that you will be displaying the asterisk in bold anyway but without added emphasis so it is a semantic choice in this case.

#requiredNote b{}