15 Right Ways to Break Your CSS
- Transfer
Freelance article 15 surefire ways to break your CSS . Posted by Rob Glazebrook. Italics are my additions.
Missing semicolon
CSS rules consist of pairs of descriptions - property-value, separated by a semicolon. According to the CSS specification, the last description may not end with a semicolon, because a brace already separates the whole rule from the rest like a wall. For example: The only problem is that if you decide to add another description to the rule, you can easily forget to put a semicolon in the last description: As a result, the font-family description will never work, because the parser will consider the "font-family" part of the value of the color property.
Я проставляю последнюю точку с запятой всегда — это как-то добавляет организованности в код. А несколько лишних байт в размере css-файла не играют большой роли, особенно при включенном кешировании браузера.
Missed colon
Typically, this error occurs if people train in typing speed on the keyboard, and not in writing CSS code. This error is very difficult to see, because it is in the middle of the line. Compare these two lines: The curly bracket {curly brackets} around the CSS rule is missing — it's like a life cycle — constant, natural, and expected. And if you skip the brace (usually closing, for any reason) - it's like you have a mummy that refuses to die (yes, the author I watch a jester and a merry fellow) - you will get chaos. When an unsuspecting browser reaches the parsing of this pair of rules:
he just chokes. Two opening braces and only one closing: everything from #wrap (in this example) will be ignored. As you can see, the code highlighting parser also failed to complete the task.
It is very easy to fix such an error - just make sure that each closing rule has a closing brace. As already noted, they mostly forget to put it down.
Typos in the name of the css property
Generally speaking, I am a competent person. However, when I am “in the process” I type as fast as my fingers handle this task, and of course sometimes I am mistaken. In normal communication, mistakes are not very important - people can almost always determine what exactly I wanted to say. Unfortunately, the computer is more whimsical.
The easiest way to track such errors is in editors who know how to highlight the code (awesome opening and advice :)) . For example Notepad ++ or Adobe Dreamweaver. If the property is not highlighted, then it means a syntax error.
Typos in values
Typos are not only found in property names. Sometimes they happen when writing values and it can be harder to catch them: As you can see, a typo in the dimension - pz is used instead of px. Because of this, the whole rule does not work. Typos in class names or IDs It doesn’t matter how often I create a div with the ID “navigation” - I still find these rules in my code: This annoying error is very difficult to catch because even code highlighting in editors will not help here.
To avoid such errors - I very rarely type in class names or identifiers when editing css files manually. Ctrl + c from html and ctrl + v in css.
Wrong order of values
Some CSS properties are complex, i.e. You can write the values of several properties separated by spaces in one line. Unfortunately, most of these properties are very demanding on the order of value: The first rule is correct and the text of all divs will get a specific style and size. The second rule is incorrect, because the order of the properties is not followed. You can read about the correct order of values in such properties in the CSS specification . By the way, I always confuse this order, so I usually write such properties with copy-paste, i.e. copying from somewhere
Dimensional quantities without indicating a unit of measurement
All measured properties must have values, indicating a unit of measurement: Three of what? Ems? Inches? Pixels? About units of measure can also be found in the CSS specification. Duplicate rules In large css files, there are completely rules for the same elements. The last one always works - then do not be surprised why the indentation is not 2em, but 10px; Competing rules A similar problem can arise when you do not expect it at all. For example, if there is the following XHTML: You can reference this element by class name or by id. The problem arises if both class and id are referenced:
The last applicable rule works, as in the previous paragraph.
We turn to the class as an ID (or vice versa)
This is perhaps my most common mistake - each time I confuse - put a dot or a grid :) : And nothing happens, because the element has id = navigation, not a class. Using nonexistent properties Not all CSS properties are named intuitively. For example: The problem is that although the property seems to belong to text properties, font-size is used. Here, of course, code editors with the option of highlighting should again help. Using nonexistent values An error similar to the previous one: To avoid such errors, we carefully study the specification.
Improper match of property and value
This CSS definition may seem correct even for the trained eye: However, we see that the correct value is incorrectly assigned to the correct value. Not a closed comment One thing that css dislikes is the lack of one-line comments. Can you find the differences in these two descriptions? The only difference is that in the second rule the closing comment characters are: / * instead of * /. Accordingly, the entire second rule will be commented out. I’ll add from myself: There are still errors related to a misunderstanding of the short writing of the complex properties of margin, padding. Here are examples of the correct spelling: So - the general format of the values of this property is as follows:
margin: [top] [right] [bottom] [left];
if not all values are indicated, then the following rules apply
those. the previous example is identical. To indicate the unit of measurement is optional, it is logical - isn’t it all equal to zero units of what? Thanks for attention. Read the documentation :) Cross-post from my site (see profile)
Missing semicolon
CSS rules consist of pairs of descriptions - property-value, separated by a semicolon. According to the CSS specification, the last description may not end with a semicolon, because a brace already separates the whole rule from the rest like a wall. For example: The only problem is that if you decide to add another description to the rule, you can easily forget to put a semicolon in the last description: As a result, the font-family description will never work, because the parser will consider the "font-family" part of the value of the color property.
body {
background-color: #444;
color: #eee
}
body {
background-color: #444;
color: #eee
font-family: Helvetica, Arial, sans-serif
}
Я проставляю последнюю точку с запятой всегда — это как-то добавляет организованности в код. А несколько лишних байт в размере css-файла не играют большой роли, особенно при включенном кешировании браузера.
Missed colon
Typically, this error occurs if people train in typing speed on the keyboard, and not in writing CSS code. This error is very difficult to see, because it is in the middle of the line. Compare these two lines: The curly bracket {curly brackets} around the CSS rule is missing — it's like a life cycle — constant, natural, and expected. And if you skip the brace (usually closing, for any reason) - it's like you have a mummy that refuses to die (yes, the author I watch a jester and a merry fellow) - you will get chaos. When an unsuspecting browser reaches the parsing of this pair of rules:
body { font-family Helvetica, Arial, sans-serif; }
body { font-family: Helvetica, Arial, sans-serif; }
body {
font-family: Helvetica, Arial, sans-serif;
#wrap {
width: 960px; }
he just chokes. Two opening braces and only one closing: everything from #wrap (in this example) will be ignored. As you can see, the code highlighting parser also failed to complete the task.
It is very easy to fix such an error - just make sure that each closing rule has a closing brace. As already noted, they mostly forget to put it down.
Typos in the name of the css property
Generally speaking, I am a competent person. However, when I am “in the process” I type as fast as my fingers handle this task, and of course sometimes I am mistaken. In normal communication, mistakes are not very important - people can almost always determine what exactly I wanted to say. Unfortunately, the computer is more whimsical.
div { border-bototm: 5px; }
The easiest way to track such errors is in editors who know how to highlight the code (awesome opening and advice :)) . For example Notepad ++ or Adobe Dreamweaver. If the property is not highlighted, then it means a syntax error.
Typos in values
Typos are not only found in property names. Sometimes they happen when writing values and it can be harder to catch them: As you can see, a typo in the dimension - pz is used instead of px. Because of this, the whole rule does not work. Typos in class names or IDs It doesn’t matter how often I create a div with the ID “navigation” - I still find these rules in my code: This annoying error is very difficult to catch because even code highlighting in editors will not help here.
#wrap { padding: 10px 20pz 25px 20px; }
#navigaiton { float: left; }
To avoid such errors - I very rarely type in class names or identifiers when editing css files manually. Ctrl + c from html and ctrl + v in css.
Wrong order of values
Some CSS properties are complex, i.e. You can write the values of several properties separated by spaces in one line. Unfortunately, most of these properties are very demanding on the order of value: The first rule is correct and the text of all divs will get a specific style and size. The second rule is incorrect, because the order of the properties is not followed. You can read about the correct order of values in such properties in the CSS specification . By the way, I always confuse this order, so I usually write such properties with copy-paste, i.e. copying from somewhere
div { font: 2em Helvetica, Arial, sans-serif; }
a { font: "Times New Roman", serif 1.5em; }
Dimensional quantities without indicating a unit of measurement
All measured properties must have values, indicating a unit of measurement: Three of what? Ems? Inches? Pixels? About units of measure can also be found in the CSS specification. Duplicate rules In large css files, there are completely rules for the same elements. The last one always works - then do not be surprised why the indentation is not 2em, but 10px; Competing rules A similar problem can arise when you do not expect it at all. For example, if there is the following XHTML: You can reference this element by class name or by id. The problem arises if both class and id are referenced:
#wrap { margin: 3; }
ul li { margin: 0 2em;
... много кода ...
ul li { margin: 0; padding: 10px; }
<div id="navigation" class="nav">...</div>
.nav { width: 50%; }
... много кода ...
#navigation { width: 500px; }
The last applicable rule works, as in the previous paragraph.
We turn to the class as an ID (or vice versa)
This is perhaps my most common mistake - each time I confuse - put a dot or a grid :) : And nothing happens, because the element has id = navigation, not a class. Using nonexistent properties Not all CSS properties are named intuitively. For example: The problem is that although the property seems to belong to text properties, font-size is used. Here, of course, code editors with the option of highlighting should again help. Using nonexistent values An error similar to the previous one: To avoid such errors, we carefully study the specification.
.navigation {
float: left;
width: 100%;
height: 4em; }
body { text-size: 3em; }
td { vertical-align: center; }
Improper match of property and value
This CSS definition may seem correct even for the trained eye: However, we see that the correct value is incorrectly assigned to the correct value. Not a closed comment One thing that css dislikes is the lack of one-line comments. Can you find the differences in these two descriptions? The only difference is that in the second rule the closing comment characters are: / * instead of * /. Accordingly, the entire second rule will be commented out. I’ll add from myself: There are still errors related to a misunderstanding of the short writing of the complex properties of margin, padding. Here are examples of the correct spelling: So - the general format of the values of this property is as follows:
a { text-transform: italic; }
/* Navigation goes here. */
#nav {
float: left;
width: 100%;
height: 3em; }
/* Navigation goes here. /*
#nav {
float: left;
width: 100%;
height: 3em; }
div#mark {
margin: 0;
margin: 0 10px;
margin: 0 10px 6px;
margin: 8px 12px 10px 8px;
}
margin: [top] [right] [bottom] [left];
if not all values are indicated, then the following rules apply
margin: [top] = margin: [top] [top] [top] [top]; margin: [top] [right] = margin: [top] [right] [top] [right]; margin: [top] [right] [bottom] = margin: [top] [right] [bottom] [right];
those. the previous example is identical. To indicate the unit of measurement is optional, it is logical - isn’t it all equal to zero units of what? Thanks for attention. Read the documentation :) Cross-post from my site (see profile)
div#mark {
margin: 0 0 0 0;
margin: 0 10px 0 10px;
margin: 0 10px 6px 10px;
margin: 8px 12px 10px 8px;
}