Log in

View Full Version : Escaping Initial Digit on Class


marain
03-30-2013, 10:12 PM
Hello Folks,

The pertinent part of my css page was...


.18usc3607 { background-image: url("../images/federal0.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top left; }[\CODE]

The css validator didn't like that. Something about a requirement that classnames beginning with a digit be escaped. OK, so I changed it to...

[CODE].\18usc3607 { background-image: url("../images/federal0.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top left; }

That made the css validator happy. Except that looking closer at the validator return, what actually resulted was...


.\000018usc3607 {
background-image : url("../images/federal0.jpg");
background-repeat : no-repeat;
background-attachment : fixed;
background-position : top left;
}

Is there a way to avoid those unwanted leading zeros?

A.

P.S. The Dynamic Drive editor that processes the bracketCODEclosebraket also doesn't seem to like code that begins with a digit.
Beverleyh
03-30-2013, 10:21 PM
I can't find the official documentation for it but its because you shouldn't start ids and classes with numbers - I think IE (or earlier versions of it) will recognise ones with numbers at the starts, but not other browsers. You can use numbers in the middle or at the end, just not right at the beginning, so to be safe, stick to a-z/A-Z characters as the first character of any class or id.
traq
03-31-2013, 01:43 AM
This is the rule (http://www.w3.org/TR/CSS21/grammar.html#grammar):

-?[_a-zA-Z][_a-zA-Z0-9-]*

basically, a class name must:

-- start with a letter (a-z or A-Z) or underscore, or

start with a dash, followed by a letter or underscore, or
an escaped character (what you're doing);

-- be followed by zero or more underscores, letters, numbers (0-9), or dashes.

In practice, starting with a dash is almost never done, except by browser-specific extensions and internal stylesheets. As Beverleyh points out, I would not expect consistent/reliable browser support.

ditto for starting with an "escaped" number, except that it is far easier for things to get messed up. (Your situation, with unexplained leading zeros, is a good example of that.)
I would highly recommend starting with an underscore, followed by your numeric class name.
marain
03-31-2013, 01:37 PM
So be it.

The class name was generated in the first place by PHP code:


<?php
$class = substr($_SERVER['PHP_SELF'], 1, (strlen - 4));
echo '<body class="' . $class . '">';
?>

So you're saying that what I need to do is change the file name. Hey, if I gotta, I gotta. It would not have been my first choice.

In any case, thanks for reviewing this.

Best,

A.
Beverleyh
03-31-2013, 03:59 PM
So you're saying that what I need to do is change the file name.Not necessarily. If it makes things easier for you, how about just editing the code to add a prefix?
<?php
$class = substr($_SERVER['PHP_SELF'], 1, (strlen - 4));
echo '<body class="_' . $class . '">';
?>You might not be able to see at a first glance but look closely and you'll see that I've put an underscore prefix in red, right before the auto-generated class. That should keep things neat and allow you to use the existing file name. Of course, if this is a system that you're using across multiple files/classes, you might need to tweak more selectors in your CSS as they'll now all have an underscore prefix.
marain
03-31-2013, 08:35 PM
Thank you.

A.
marain
04-01-2013, 01:41 AM
Trak, your recommendation works like a charm.
traq
04-01-2013, 04:00 AM
You're welcome! though to be fair, it was Beverleyh's recommendation first :)