How CSS works behind the scenes: an overview

What happens to the CSS code when we load up a webpage in the browser?

Process that happens behind the scenes:

• The browser starts to load the HTML file.
• It takes the loaded HTML file and parses it, which means it decodes the code line by line, – From this process, the browser builds the so called Document Object Model (DOM).
  DOM basically describes the entire web document like a family tree, with parent, children and sibling elements. So this document object model is where the entire decoded HTML code is stored.

As the browser parses the HTML file, it also finds the stylesheet included in the HTML head. Therefore, it starts to load it as well.
Just like the HTML, CSS is also parsed, but the parsing of the CSS is much more complex.

During the CSS parsing phase, there are two main steps.

• First: Conflicting CSS declarations are resolved through a process known as the cascade.
• Second: Process final CSS values.
  Such as converting a margin defined in percentage unit to pixel. Imagine we define a left margin as 50%, but that 50% on a smart phone is different from a 50% in a large screen. That’s why this percentage and other relative units can only be calculated on an user device in the parsing phase.

After all of this is done, the final CSS is also stored in a tree-like structure called CSS Object Model (CSSOM), similar to the DOM.

Now that we have HTML as well as CSS parsed and stored, these together form the so-called Render tree.

With that, we finally have everything needed to render the page.

In order to actually render the page, the browser uses something called the visual formatting model.

This algorithm calculates and uses a bunch of stuff that we already know, such as the box model, floats, and positioning.

After the visual formatting model has done its work, the webiste is finally rendered on the screen, and the process is fininshed.

Browser -> load HTML -> Parse HTML -> Document Object Model (DOM)

When parsing HTML -> Find CSS -> Load CSS -> Parse CSS (resolve conflicting CSS declarations (cascade) and process final CSS values) -> CSS Object Model (CSSOM)

DOM & CSSOM together form the Render three -> Website rendering: the visual formatting model -> Final rendered website

Three pillars of writing good HTML and CSS

There are three important and fundamental principles that we should constantly keep in mind.

• Responsive design
• Write maintainable and scalable code
• Care about web performance

---

Responsive Web Design (RWD)

Which means to build websites that work beautifully across multiple devices.

Maintainable and scalable code

It’s important to write clean, easy-to-understand and reusable code that supports future growth, not only beneficial to yourself but also some other developers who might work with you. Thus should think about the architecture of the css, which is the way to organize the files, how to name classes and how to structure HTML.

Web performance

Means to make the website faster, and to make it smaller in size, so the user has to download less data. There are many factors affect performance, such as making less HTTP requests (meaning should include less files in our HTML document), write less code, compress code, use a CSS processor, and reduce the number of images (since they are by far the biggest in size) as well as compress images.

CSS Animations – @keyframes and the animation property

There are generally two types of animations in CSS.

The easiest one is the transition property.

This post illustrates a more advanced method that is a bit more complex – @keyframes.

For the browser performance, it’s best to only ever animate two different properties.

One is opacity, which is the one that we’re using here, and the other one is the transform property.

That’s what the browsers are optimized for, for these two properties.
But with transform, we can do a whole lot.

---

Steps:

@keyframes

Give it a name.

 @keyframes moveInLeft {  }

Specify what we want to happen at every moment during the animation.

We start from 0%, which is before the animation even starts. We also call it the start which is the initial state. What do we want the element to look like before it starts to move in.

@keyframes moveInLeft {  
   0% {    
      //invisible    
     opacity: 0;     
   }
}

Remember the element comes in from the left. So we want it to be more in the left at the begining, so we can use transform, and then translateX(). X is because we want it to animate in the X (horizontal from left to right) direction. (y axis goes from the top to the bottom).
Therefore, it will be a negative value since the direction goes from the left to right.

A positive value means it goes to the right, and negative value means it goes to the left.

And then 100% is the end,  the final state, which is when the animation finishes.

@keyframes moveInLeft {  
     0% {  
     }  

     100% {    
        //visible    
        opacity: 1;  
      }
}

When the animation is done, we want to the h1 to be at the center, so it’s translate(0), because 0 means it gonna looks exactly the way it looks right now.

 Put other steps in the middle:

@keyframes moveInLeft {  
     0% {    
        opacity: 0;    
        transform: translateX(-100px);  
     }  
     80% {    
        transform: translateX(20px); 
     } 
     100% {    
        opacity: 1;    
        transform: translate(0);  
     }
}

So now, it’s a bit more to the right at 80% of the total duration of the animation and at the end it will back to the center.

Then we need to apply the animation.
For the animation to work, there’re only two properties we have to specify:

• animation name
• animation duration

.heading-primary-main {  
   display: block;  
   font-size: 60px;  
   font-weight: 600;  
   letter-spacing: 35px;  
   animation-name: moveInLeft;  
   animation-duration: 5s;
}

These are the properties that are required for an animation to work.

---

Other properties to make animation works.

.heading-primary-main {  animation-delay: 3s; }

Now for the animation to work, it will first wait 3s.

animation-iteration-count: 3;

This property will repeat the animation for 3 times.

The most important one is the

animation-timing-function: ;

This is the function that defines how fast/slow the animation will proceed

For instance,

animation-timing-function: ease-in;

Animation will start slower and accelerate over time.

Opposite direction: 

@keyframes moveInRight {  
   0% {    
     opacity: 0;   
     transform: translateX(100px);  
   }  
   80% {    
     transform: translateX(-10px);  
   }  
   100% {    
     opacity: 1;    
     transform: translate(0);  
    }
}

Now the element will move in from right to the left. Since mentioned early, if it’s a positive value, it will move the element to the right as it goes forward in the x direction (from left to right).
At 80%, we want it to move a little bit to the left before it goes back to its original position which is 0.

Note:

Instead of typing out all the animation-related properties separately, we can use a shorthand.

animation: moveInRight 1s ease-out;
// same as
animation-name: moveInRight;
animation-duration: 1s;
animation-timing-function: ease-out;

Finally, there is often time where animation will be a bit shakey at the end, no one actually has an answer to it as why this happends, however, we can fix it by declaring backface-visibility property and set it to hidden.

.heading-primary {  
   color: #fff;  
   text-transform: uppercase; 
   backface-visibility: hidden;
}

So now the entire heading primary element will not be shaking at the end.

One last note, if we want the animation to happen only when we hover over the logo, how can that be accomplished?

.logo:hover {  
   animation: moveInRight 1s ease-out;
}

We can simply define the animation once and apply it to many different places.

Time for More Advanced CSS and Sass Techniques.

[unsplash by Andy Kirby]

Eventually, I am taking time to dive deeper into the front-end world after my delight indulgent with Laravel for roughly six months.

Don’t get me wrong, it’s still a pleasure to use Laravel and I’m still using it 🙂

---

Now it’s time to keep updating my notes along my journey with advanced CSS, Sass, animations, advanced RWD, flexbox, grid layouts, NPM,CSS architectures and  a lot more !

I’ve been wanting to learn more complex, modern CSS techniques so as to update my CSS skills to a more modern level, and of course, to expand my toolset, but most importantly,

developing beautiful and well-designed projects have always been a joy to me, that’s exactly the reason I WANT to learn advanced CSS techniques so badly.

 

This is the course I’m taking, and I ABSOLUTELY LOVE it, every Jonas’ course is TRULY AMAZING, either one of his courses on Udemy is thoroughly recommended.

After watching two chapters of  his JavaScript courses, I realized why Jonas is identified as one of Udemy’s Top Instructors.

Each section he gives you a new perspective and helps you think of solutions in a completely different manner.

Hope he will keep up the good work as this guy seriously knows how to teach and design challenges.

 

So basically, my study notes are the takeaways from this course that I found practical, useful and important, they serve as a reference for myself as well as to document what I’ve learned, you may use it to refresh your memories.

 

Enjoy !