The coding language that serves as the foundation for all web development? In CSS, the selector is written to the left of the first curly bracket. The information between curly brackets is called a declaration, and it contains properties and values that are applied to the selector.
Properties are things like font size, color, and margins, while values are the settings for those properties. The full bracketed set of. These same basic principles can be applied to change font sizes, background colors, margin indentations, and more.
For instance. CSS code or Style Sheets can be external, internal, or inline. External style sheets are saved as. When a user prints a web page, you might provide different style information that makes the printed page easy to read.
There are exceptions to this rule, of course, and HTML also provides some ways to specify style. Save the file and load it in a browser. Now you have a sample document linked to a separate style sheet, you are ready to learn more about how your browser combines them when it displays the document. See the other tutorials in this section for more information. Portions of this content copyright Mozilla Contributors. This might be frustrating for you and your users if such a mistake slips through to production code, but at least it means the whole site doesn't come crashing down because of one error, and if used cleverly you can use it to your advantage.
Note: You can also see this example running live on GitHub as button-with-fallback. The button has a number of declarations that style, but the two we are most interested in are as follows:.
Here we are providing an RGBA background-color that changes opacity on hover to give the user a hint that the button is interactive, and some semi-transparent inset box-shadow shades to give the button a bit of texture and depth.
The trouble is that RGBA colors and box shadows don't work in IE versions older than 9 — in older versions the background just wouldn't show up at all so the text would be unreadable, no good at all! To sort this out, we have added a second background-color declaration, which just specifies a hex color — this is supported way back in really old browsers, and acts as a fallback if the modern shiny features don't work.
What happens is a browser visiting this page first applies the first background-color value; when it gets to the second background-color declaration, it will override the initial value with this value if it supports RGBA colors. If not, it will just ignore the entire declaration and move on.
Note: The same is true for other CSS features like media queries , font-face and supports blocks — if they are not supported, the browser just ignores them. This has proven to be a very effective mechanism for fixing cross browser bugs. The syntax looks like this:. As you can see, this is especially useful for applying code fixes to old versions of IE. The use case we mentioned earlier making modern semantic elements stylable in old versions of IE can be achieved easily using conditional comments, for example you could put something like this in your IE stylesheet:.
It isn't that simple, however — you also need to create a copy of each element you want to style in the DOM via JavaScript, for them to be stylable; this is a strange quirk, and we won't bore you with the details here.
For example:. This sounds like a pain to deal with, but fortunately there is a polyfill available that does the necessary fixes for you, and more besides — see HTML5Shiv for all the details see manual installation for the simplest usage. Of course, no CSS features will apply at all if you don't use the right selectors to select the element you want to style! If you just write a selector incorrectly so the styling isn't as expected in any browser, you'll just need to troubleshoot and work out what is wrong with your selector.
We find that it is helpful to inspect the element you are trying to style using your browser's dev tools, then look at the DOM tree breadcrumb trail that DOM inspectors tend to provide to see if your selector makes sense compared to it.
For example, in the Firefox dev tools, you get this kind of output at the bottom of the DOM inspector:. If for example you were trying to use this selector, you'd be able to see that it wouldn't select the input element as desired:. However, another issue that appears in versions of IE older than 9 is that none of the newer selectors mainly pseudo-classes and pseudo-elements like :nth-of-type , :not , ::selection , etc.
Another set of problems comes with CSS prefixes — these are a mechanism originally used to allow browser vendors to implement their own version of a CSS or JavaScript feature while the technology is in an experimental state, so they can play with it and get it right without conflicting with other browser's implementations, or the final unprefixed implementations. So for example:. The first line shows a transform property with a -webkit- prefix — this was needed to make transforms work in Chrome, etc.
The last three lines show three different versions of the linear-gradient function, which is used to generate a linear gradient in the background of an element:.
Prefixed features were never supposed to be used in production websites — they are subject to change or removal without warning, and cause cross browser issues. This is particularly a problem when developers decide to only use say, the -webkit- version of a property — meaning that the site won't work in other browsers. This actually happens so much that other browsers have started to implement -webkit- prefixed versions of various CSS properties, so they will work with such code.
Usage of prefixes by browser vendors has declined recently precisely because of these types of problems, but there are still some that need attention.
If you insist on using prefixed features, make sure you use the right ones. You can look up what browsers require prefixes on MDN reference pages, and sites like caniuse. If you are unsure, you can also find out by doing some testing directly in browsers. As you start to type the property name representation after the second dot note that in JavaScript, CSS property names are written in lower camel case, not hyphenated , the JavaScript console should begin to autocomplete the names of the properties that exist in the browser and match what you've written so far.
This is useful for finding out what versions of the property are implemented in that browser. At the time of writing, both Firefox and Chrome implemented -webkit- prefixed and non-prefixed versions of transform! Once you've found out which prefixes you need to support, you should write them all out in your CSS, for example:.
This ensures that all browsers that support any of the above forms of the property can make the feature work. It is worth putting the non-prefixed version last, because that will be the most up-to-date version, which you'll want browsers to use if possible.
If for example a browser implements both the -webkit- version and the non-prefixed version, it will first apply the -webkit- version, then override it with the non-prefixed version.
You want it to happen this way round, not the other way round. Of course, doing this for lots of different CSS rules can get really tedious. It is better to use an automation tool to do it for you. And such tools exist:. The prefix-free JavaScript library can be attached to a page, and will automatically detect what capabilities are possessed by browsers viewing the page and add prefixes as appropriate.
It is really easy and convenient to use, although it does have some downsides see the link above for details , and it is arguable that parsing every stylesheet in your site and add prefixes at run time can be a drain on the computer's processing power for a large site.
Another solution is to add prefixes automatically during development, and this and other things besides can be done using tools like Autoprefixer and PostCSS.
0コメント