Fault Tolerance Mechanism of css2.1

Source: Internet
Author: User

Css2.1 is a commonly used CSS version. If you write CSS normally, you may not find any problem. The problem is: If you want to save it, press Ctrl + S.
When I leave another S in the CSS file, the problem begins to get caught up. Or I accidentally write a semicolon out of the braces of the rule ...... The error is strange, and the frequency may be high for new users.
Some. When such a problem occurs, you may feel inexplicable during debugging. You need to understand the Fault Tolerance Mechanism of css2.1.

The Fault Tolerance Method of css2.1 is generally: for some invalid attributes, attribute values, @-keywords, and so on, it will ignore these style statements or the whole rule declaration. Invalid
The style declaration is ignored for attributes and attribute names. If keywords in @-keywords are invalid, the style declaration contained in @-keywords is ignored.

Since css2.1 has this fault tolerance mechanism, there are other style failures caused by errors that are easy to ignore at ordinary times. The following example shows some examples, basic knowledge about CSS parser parsing CSSCode.

  1. Do not insert invalid characters except spaces or comments that do not conform to the CSS syntax between each CSS rule. Otherwise, the first rule after the invalid character is invalid. For example:

    Body {color: green ;}. /* accidentally add a dot to the cup */P. ten {color: red; Background-color: green;}/* this rule is invalid */P. one {color: red;}/* this is valid */

    There is a special case. When invalid characters are included in braces ("{}"), the following rules are applied normally, because the browser CSS parser treats it as a rule. For example:

    Body {color: Green ;}{.} p. Ten {color: red; Background-color: green;}/* It can work */
  2. If the style contains invalid characters or comments that do not conform to the CSS syntax, the first style after the invalid characters is invalid. For example:
    P. One {border-style: solid;. Color: # 00c; font-weight: bold;}/* The color is invalid */

    However, there is a special case, that is, when there is a semicolon ";", there is no effect on the front with invalid characters. The browser CSS parser may use semicolons to split style rules into arrays. The style before each semicolon does not affect the next style, for example:

    P. One {border-style: solid; ..; color: # 00c; font-weight: bold;}/* color valid */

    Therefore, a problem can be raised here: when no Semicolon is added at the end of every style, the next style of the current style will be invalid, because the browser parses it into a whole attribute: owner
    (If there is only one style, or the last style does not contain a semicolon, there is no impact. Based on the split principle of the array, it is recommended that the last style has no extra points, so as to reduce an empty
    ), Such:

    /* The following is the cup */P. one {border-style: solid font-weight: bold}/* This is not bad */P. one {border-style: solid; font-weight: bold}
  3. Do not add double quotation marks to the color value (English or hexadecimal). Otherwise, the style rule is invalid. For example:
    Body {color: "red"; Background-color: "green ";}
  4. When border is set for an element, if border-color is not set, the font color is used instead. If border-width is not set, the default value is medium. For example:
    P. One {border-style: solid; color: # 00c ;}
  5. In some writing CSS rules, if the rule declaration of one element is incorrect, the entire rule is invalid. For example:
    P. One, EM @, strong {border-style: solid; color: # 00c;}/* Here, EM @ is incorrect, causing the entire rule to fail */
  6. If a style is repeatedly defined in a rule, if one of the style values is invalid (or empty), the style does not overwrite the valid value, because the browser will ignore the style declaration of invalid values, such:

    P. Ten {color: red; Background-color: green; color: SS;}/* color or red */
  7. Rule declaration cannot be nested: P. Ten {color: # 00c; p. Ten {color: # f00}; Background: #0c0}
  8. In terms of the particularity of the rule, when declaring a style for an element, the style is defined on itself and the priority difference defined on its parent element: the style is defined on the child element, even rules using the label type
    It has a higher priority than that of the parent element such as ID, class, and important. For example, if span is a child element of the P element, P has the ID attribute ten.

    SPAN {color: red;}/* text color style or red */body P # Ten {color: Green! Important ;}
  9. For invalid attributes or attribute values, the CSS parser directly ignores these attributes or attribute values, which invalidates the style declaration. For example:
    IMG {float: Left}/* correct CSS 2.1 */IMG {float: Left here}/* "here" is not a value of 'float' */IMG {Background: "Red"}/* keywords cannot be quoted */IMG {border-width: 3}/* A unit must be specified for length values * // * after parsing, it is: */IMG {float: Left} IMG {}
  10. The double quotation marks and single quotation marks in the attribute values must be closed. Otherwise, the result is very tragic. For example:
    P {color: green; font-family: 'courier new times color: red; color: green;} after resolution, it becomes: P {color: green ;}

We usually write CSS code too well. For some style failures caused by careless mistakes, the browser does not have a good function to prompt CSS errors, therefore, only
Check whether the style is effective to test the CSS code. In fact, when you do not follow the CSS syntax to write, you will find that more CSS parsing failures, maybe this is CSS.
The source of the hack attack ......

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.