Re: [css-d] What are these weird classifiers?
Multiple classes are not only allowed, they are awesome and powerful. -- Marc Luzietti Flagship Project Bayview Financial, L.P. (305) 341-5624 Reese [EMAIL PROTECTED] Sent by: [EMAIL PROTECTED] 04/20/2006 04:37 PM To: css-d@lists.css-discuss.org cc: Subject:[css-d] What are these weird classifiers? Earlier today, while reviewing the Web site of a potential client, I saw in the HTML source code several classifier names that looked wrong to me. div class=headerLogo pink div class=pseudoH1 white div class=menuItem pseudoH2A div class=float-wrap div class=wide bottom clear Spaces. Is that allowed? Reese __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] What are these weird classifiers?
Reese wrote: Earlier today, while reviewing the Web site of a potential client, I saw in the HTML source code several classifier names that looked wrong to me. These are copied from the potential client's HTML page: div class=headerLogo pink div class=pseudoH1 white div class=menuItem pseudoH2A div class=float-wrap div class=wide bottom clear Those are all valid class names. wide bottom clear refers to three separate classes, named wide, bottom and clear respectively. From the W3C CSS 2 spec [0]: In CSS2, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [A-Za-z0-9] and ISO 10646 characters 161 and higher, plus the hyphen (-); they cannot start with a hyphen or a digit. They can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier BW? may be written as B\W\? or B\26 W\3F. Regards, Ron [0] http://www.w3.org/TR/REC-CSS2/syndata.html [section 4.1.3 Characters and Case] __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] What are these weird classifiers?
well, i can give it a shot at least!
On 4/20/06, Reese [EMAIL PROTECTED] wrote:
Earlier today, while reviewing the Web site of a potential client, I
saw in the HTML source code several classifier names that looked wrong
to me. These are copied from the potential client's HTML page:
div class=headerLogo pink
they probably define .headerLogo properties somewhere, and it also
gets the rules of the .pink class.
div class=pseudoH1 white
odds are instead of using a proper h2 tag, they stuck this div in
there instead. this is a guess, but i'd say a better way to do this
is h2 class=white, noting that having a class of white isn't
good itself. oh yes, so this has a class of .pseudoH1 where it
probably gives this div all the rules of a header. it also has a
class of .white.
div class=menuItem pseudoH2A
same thing as before, but i take it this is a menu item since you also
left the a there, and of course i could probably guess from the
class name. O:-) i assume they are using a div for every menu
item, when better coding would be to make each of these a list item,
like so:
li class=menuItema href=menu text/a/li
div class=float-wrap
no idea what they're doing here, unless they think they need to put
every float in a container div.
div class=wide bottom clear
i assume they're clearing a float. they probably specify a .wide
class with width: 100%; somewhere, and .bottom is probably something
like position: absolute; bottom: 0; somewhere. clear probably has
clear: both;. yes you can have all three classes. :)
Spaces. Is that allowed? That would mean multiple classifiers are
being called into play, since div.headerLogo and pink both exist
but div.headerLogo pink does not exist on the CSS sheet?
headerLogo is not a parent of pink. if you want to have them both
specifying a style, you'd need .headerLogo.pink with no spaces. you
could separate all .headerLogo styles from all .pink styles, and when
the two merge on one element, have styles for that too, such as:
.headerLogo {font-size: 1.4em;}
.pink {color: pink;}
.headerLogo.pink {border-bottom: 1px solid black;} /* this is only
picked up by elements that have both headerLogo and pink as their
class */
Odd use of pseudo-classes (float, wrap, clear?). How well will stuff
like this degrade for older browsers? Will it degrade at all?
the names of the classes have nothing to do with whether they degrade
well. at least, they shouldn't unless i missed something (in which
case someone else will let you know, because they won't let that
slide). :)
hth!
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] What are these weird classifiers?
From the W3C CSS 2 spec [0]: In CSS2, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [A-Za-z0-9] and ISO 10646 characters 161 and higher, plus the hyphen (-); they cannot start with a hyphen or a digit. They can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier BW? may be written as B\W\? or B\26 W\3F. And from W3C CSS2.1 spec [1] (which should be preferred, despite confusing status): CSS 2.1, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [A-Za-z0-9] and ISO 10646 characters U+00A1 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, or a hyphen followed by a digit. Only properties, values, units, pseudo-classes, pseudo-elements, and at-rules may start with a hyphen (-); other identifiers (e.g. element names, classes, or IDs) may not. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier BW? may be written as B\W\? or B\26 W\3F. Notably, underscore is allowed too. [1]http://www.w3.org/TR/CSS21/syndata.html Regards, Rimantas -- http://rimantas.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] What are these weird classifiers?
At 16:45 20-04-06, [EMAIL PROTECTED] wrote: Multiple classes are not only allowed, they are awesome and powerful. Okay. I didn't know they were allowed, I can envision how powerful they can be. At 16:50 20-04-06, Pringle, Ron wrote: div class=wide bottom clear Those are all valid class names. wide bottom clear refers to three separate classes, named wide, bottom and clear respectively. As an example of the above multiple classes, right. First time I've seen this, if it's been talked about on this list I missed it. I did not find anything with a quick Google search before posting my query, either. Searched with the wrong terms, probably. At 16:52 20-04-06, cj wrote: well, i can give it a shot at least! ;) You confirmed what I was concluding, so thanks one all! Reese -- Ink Works http://www.inkworkswell.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
