CSS non-ASCII character best practices

Source: Internet
Author: User

  Zhanhailiang Date: 2014-10-30
Problem Scenario

The property values for non-ASCII characters are often required for writing styles, such as the following:

. Hot_list . Sign_discount: Before{    content: "Full minus";    padding: 0 8px;    Margin-right: 7px;    font-size: 12px;    Line-height: 14px;    Color: #fff;    text-align: Center;    Background-color: #f13993;    Border-radius: 11px;}

However, there are some times when the chrome display is garbled:


In addition to content, font fonts are also values that are often required for non-ASCII characters. such as font-family: "Microsoft Ya Black"

Best practices

To avoid this type of coding problem, CSS recommends that you use backslash escaping when dealing with non-ASCII characters to avoid coding problems:

Backslash escapes allow authors to refer to characters they cannot easily put in a document. In this case, the backslash are followed by at most six hexadecimal digits (0..9A). F), which stand for the ISO 10646 ([ISO10646]) character with that number, which must is zero. (It is undefined in CSS 2.1 What happens if a style sheet does contain a character with Unicode Codepoint Zero.) If a character in the range [0-9a-fa-f] follows the hexadecimal number, the end of the number needs to is made clear.

For details, see: Http://www.w3.org/TR/CSS2/syndata.html#escaped-characters

So the above example can be changed to:

. Hot_list . Sign_discount: Before{    content: "\6ee1\51cf";    padding: 0 8px;    Margin-right: 7px;    font-size: 12px;    Line-height: 14px;    Color: #fff;    text-align: Center;    Background-color: #f13993;    Border-radius: 11px;}

CSS non-ASCII character best practices

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.