HTML and CSS Reference
In-Depth Information
display: table; /* 2 */
Here again we've inserted some random characters, but with one difference: we've added a
pair of curly braces after the characters. In this example, the random characters will have no
effect because the browser will ignore only what's inside the first set of curly braces (the
empty ones). This is because the browser thinks the random characters are a CSS selector, so
it reads the curly braces in that context.
Let's try something similar inside of a valid set of curly braces further down in our stylesheet.
We'll remove the random characters at the top and this time we'll add a random group of
characters inside the .center-global declaration block:
.center-global {
max-width: 1020px;
margin: 0 auto;
No prizes for guessing that this will cause only the max-width declaration to be disabled.
As there's no semicolon at the end of the line of random characters, the browser views it as
part of the second line, making it produce an internal error and ignoring the max-width de-
claration. But the rest of the CSS works just fine, because it appears after a valid semicolon
at the end of the disabled line.
So what do we take from this? The basic principle to keep in mind is that the browser will
ignore any CSS it fails to understand but will continue to try to read the rest .
Of course, there is a possibility, depending on which random characters are included, that
they could disable the whole stylesheet. For example, a single opening curly brace at the top
of the stylesheet would nullify the whole thing. The key is to understand that the browser is
trying to read what's in between the curly braces (for declaration blocks), what's before each
curly brace (for selectors) and what's before and after the colons and semicolons (for proper-
ties and values).
Search WWH ::

Custom Search