Escaping Initial Digit on Class

**marain** · 03-30-2013, 10:12 PM

Hello Folks,

The pertinent part of my css page was...

[CODE].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...

Code:

.\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:

Code:

-?[_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:

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?

Code:

<?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

Thread: Escaping Initial Digit on Class

Thread Tools

Search Thread

Escaping Initial Digit on Class

The Following User Says Thank You to traq For This Useful Post:

The Following User Says Thank You to Beverleyh For This Useful Post:

Similar Threads

testing equality for the last digit in a string

PHP Not Loading TXT File That Has A Single Digit Number

Resolved escaping quotes before reinsertion into database

Universal Countdown : 2-digit minimum?

JOptionPane input names into array and give 4 digit random ID

Bookmarks

Bookmarks

Posting Permissions