Table of Contents
Have you ever though about the principles of CSS, those factors that control how will browsers render content of the page? Let’s do it today. We will talk about three important topics that influence the way you work.
Cascade
First and most important principle of CSS is cascade. It is so fundamental that it is even in the name itself – CSS means Cascading Style Sheet. This one word also reveals how browsers render all the stuff inside your css files. The direction of is in cascade style – from top to bottom. This is important to know because it also means that if you wrote two different styles or the same element, one that comes later will rewrite the previous. For example, let’s say you have article with nested heading (h1), paragraph of text and a link.
HTML:
<article role=””> <h1>Design</h1> <p>Design is the creation of a plan or convention for the construction of an object or a system (as in architectural blueprints, engineering drawings, business processes, circuit diagrams and sewing patterns).[1] Design has different connotations in different fields (see design disciplines below). In some cases the direct construction of an object (as in pottery, engineering, management, cowboy coding and graphic design) is also considered to be design.</p> <a href=”http://www.wikiwand.com/en/Design”>More information</a> </article>
You want to style the link inside article to be red hue and without underline.
CSS:
a {
text-decoration: none;
color: red;
}
Pretty simple right? Now imagine that you have another article after this one and you want a different styles for link nested in it. Let’s say you want the link in second article to be green. What will happen if you wrote it like this …
CSS:
a {
text-decoration: none;
color: red;
}
….
a {
color: green;
}
You will be happy in the first few seconds because the link is green. However, if you go back to your first article, what the f***?? In short, this link is also green. Why? Principle of cascade. Rule for green link overridden the rule for red link. One of the ways to deal with it is to use more specific hierarchy of selectors (more about CSS hierarchy), id’s (please don’t do that) or classes.
Fallbacks
The cascading rule can be very useful in situations you want to use some newer and more experimental technologies like, for example, svg file for a background. SVG has pretty solid support among browsers, except IE8 (not supported at all). Now, you can do two things. Send IE8 to hell and use svg or use something called fallback. Fallback is something like reserve or backup plan. When this does not work, fallback will be used. To be smart, we can use cascading principle to declare fallback with image in png or jpeg format first and the same image in svg right after it.
CSS:
.img-container {
background: url(../img/background.png) no-repeat; /*fallback*/
background: url(../img/background.svg) no-repeat;
background-size: 100%;
}
In this example, browser will either use svg or png accordingly to support of these formats. If IE8 will render the page it will first see png, which it does support, and right after it will see svg. Since IE8 has no clue what svg is, it will simply skip it. However, the png is still in its memory because it was already loaded so it will be used instead. Browser will not override one rule with another of the later one is not recognized (not supported).
Skipping errors
Thanks to fallbacks we got to handling errors in CSS. Håkon Wium Lie, the author of CSS, must have simplicity in his blood. The way how CSS handles errors is indeed beautiful. It will skip them. When some value, property or selector is not recognized, no problem. It is like it does not exist all. In case of wrong property or value, browsers will skip the pair. If some selector is wrong, whole block of code for that selector will be skipped. So, you better pay attention to typos and dots for classes.
Summary
Thank you for your time, I hope you enjoyed this post and learned something new or at least refreshed your knowledge. Quick note … Tomorrow will be posted new part from JavaScript 101 series.
If you liked this article, please subscribe so you don't miss any future post.
If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂
Become a Patron
