CODEWITHSUNDEEP
htmlcss
nitansh bareja
nitansh bareja

Reputation: 302

how to handle spanish character for classname in CSS file?

In my html page I have a class name méxico for a HTML tag. I am applying the CSS using the same class name appending it with (.) operator and the CSS is working fine. Is this the right approach or in CSS it is handled in the some other way.

HTML CODE

<p class="méxico"> Some text</p>

CSS CODE

.méxico{ /*some CSS code*/}

Upvotes: 3

Views: 444

Answers (3)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201738

It is a correct approach.

According to the CSS 2.1 specification, section 4.1.3 Characters and case, identifiers – including class names – can contain “the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_)” (and escaped characters). The character “é” is U+00E9, i.e. above U+00A0, so it qualifiers. The specification imposes restrictions to ASCII characters, since many ASCII characters have special rôle in CSS syntax; but e.g. any accented letter like “é” is OK.

However, you need to ensure that the file containing the CSS code is saved in a suitable encoding and that encoding is properly declared. See the W3C page Character encodings. A simple way to ensure this is to write the CSS code in a stylesheet file (.css) that you save, in your editor, as UTF-8 with BOM (often labeled just as “UTF-8” as opposite to UTF-8 without BOM). The BOM, Byte Order Mark, makes browsers recognize the file as UTF-8 encoded.

If, for some strange reason, it were impossible to deal with the character encoding issue, you could escape the “é” by the CSS escape method described in the specification. You would then write e.g.

.m\e9xico { display: block; }

Note: The W3C CSS Validator does not process “é” or other non-ASCII data properly in “Direct Input” method but incorrectly issues a messy error message. (It handles it OK in “File Input” and in “Validate by URI”, though.) A bug report on this has been submitted.

Upvotes: 3

Mohammed Ashiq
Mohammed Ashiq

Reputation: 468

The CSS should work fine. But it is not recommended.

http://www.w3.org/TR/CSS21/grammar.html#scanner

will give you a detailed information about what are the recommended characters that a class name should have in CSS.

The CSS lexical scanner will still consider it as a warning. See

http://www.w3.org/TR/CSS21/syndata.html#syntax

section 4.1.3 point number 2. This will give you the list of acceptable characters.

The CSS work just because their ASCII values of the DOM selector and the CSS class name matches.

Hope this helps.

As pointed out by Pat, there is no use of putting a spanish character into the webpage. (No semantic benefit or SEO benefit).. so why force using it?

Upvotes: 2

Pat Dobson
Pat Dobson

Reputation: 3299

The class name and the way that it's handled is correct.

However, there's no benefit from having language based tags in CSS (no SEO or semantic benefit) so, for the sake of simplicity, why not simply remove the accent and call the class 'mexico' ?

Upvotes: 1

Related Questions