The CodeWolf

Part 13 – Finale,

I am finally done with this amazing series. What started as a chore, has turned into a passion. Every end has a beginning and now I intend to branch out and create more blogs and content on not just the technical aspects but also on what does it feel like to be a developer!
But first, without further ado, let us get on with “Learning CSS”.

Transitions and Animations

Transitions and animations are a great way to keep our users engaged with the Website content.

We can use transitions and animations to our advantage to create engaging and rich content.

We will now focus on two important topics:

1. Transitions 
2. Animations

Transitions

Transitions are kind of built-in animations from CSS.

The basic logic of transition is that we need to add the transition property and then choose which attribute of the element needs to be changed/animated accordingly.

We always take into consideration the following:

1. Which properties/attributes do we want to animate?
2. What is the delay?
3. How long should we run the animations?
4. How to time our animations? (fast/slow)

Based on these we can start applying transitions.

Generally, the transformation occurs as follows:

transition: all 200ms ease-out 1s !important;

The property can be broken down as:

1. What attribute do you want to animate? (transform, opacity, all etc.)
2. Duration (200ms)
3. Transition type (ease-in, ease-out etc.)
4. Duration of transition (1s)

CSS Animations

CSS animations can be thought of as enhanced transitions or transitions++.

Transitions might help us to animate certain aspects/attributes of an element, but if we want greater control, CSS animations are what we are looking for.

In CSS animations we define something called “Keyframes” that gives us complete control over an element at a certain point in time.

Animations always start with us defining some keyframes.

In CSS we define keyframes with the @keyframes symbol

We add an identifier after the @keyframes property to tell CSS the name we assign to our animation.
Finally, we specify the actual attribute to animate using “from” and “to” keywords.

From and To can be thought of as the different states of an element.

It would mean simply that we want an element to animate from X state to Y state.

Here is an example of a keyframe.

@keyframes wiggle{     from{       transform:rotateZ(0);     }     to{       transform:rotateZ(10deg);     } }

Now the next step would be to use these animations.

To use the animations, we use the animate property on our selectors.

The animate property can take the following values:

1. Animation name
2. Duration
3. Delay
4. No. of repetitions/iteration count
5. Animation play state
6. Animation fill mode
7. Animation timing function
8. Animation direction

E.g.

.main-nav__item–cta{     animation:wiggle 200ms 3s 8 alternate; }

Here we use the animation name, duration, delay, iteration, and the animation play state to define the animation.

Now obviously animate as it looks is a shorthand for various other properties such as:

1. animation-name
2. animation-duration
3. animation-timing-function
4. animation-delay
5. animation-iteration-count
6. animation-direction
7. animation-fill-mode
8. Animation-play-state

Each of these can be individually applied to suit our needs in the animation sequence.

animation: wiggle 200ms 1s ease-out 8 alternate forwards running;

Can be translated to: “Play the wiggle keyframe set (animation) over a duration of 200ms. Between two keyframes start fast and end slow, also make sure to wait for 1s before you start. Play 8 animations and alternate after each animation. Once you’re done, keep the final value applied to the element. Oh, and you should be playing the animation – not pausing.”

Instead of adding from and to, we can also add Percent values in keyframes to define the various stage of animation.

E.g.

@keyframes wiggle{     0%{       transform:rotateZ(0);     }     50%{       transform:rotateZ(-10deg);     }     100%{       transform:rotateZ(10deg);     } }

This gives us greater control over our animations as we can define as many keyframes as possible to control every aspect of our animation.

We can add our animation listeners to javascript as well to listen to certain animations as shown below:

var ctaButton = document.querySelector(“.main-nav__item–cta”); ctaButton.addEventListener(‘animationstart’,(event)=>{   console.log(“animation started “,event); }) ctaButton.addEventListener(‘animationend’,(event)=>{   console.log(“animation ended “,event); }) ctaButton.addEventListener(‘animationiteration’,(event)=>{   console.log(“animation iteration “,event); })

Here we created a button to add listeners for its animation.

The result is as follows:

We can see above that in the console log, the animation and its definition was clearly displayed for us and can be used to tweak animations through javascript as well.

Summary

The animations and Transitions can be summarised as below:

Modern CSS

CSS is constantly evolving as new modules keep on getting introduced in it.

Here we will explore what modern CSS looks like and how can we write CSS that is future-proof.

CSS is split up into modules.

We have various CSS modules like media queries, selectors, animations, and so on.

Many of these modules might not have relevance today but as we shift towards a more responsive and re-usable approach to designing CSS, we are bound to get closer to these someday.

One such module we can explore is CSS Variables.

CSS Variables

Consider the following use case:

You need to apply the same color to different elements.

Now you would ideally start off by creating a selector for all the elements and then adding the property “color” to each one of them with the same value, e.g #fa923f.

We can use CSS variables here to make sure such repetition can be handled through a variable.

The syntax to create a CSS variable is:

:root{ –variable-name: value; }

Let’s understand the usage of variables with the following example:

The main advantage of a CSS variable is that if you intend to change the value of the CSS variable, you only have to do it once in your entire webpage.

Vendor Prefixes

Different browsers may implement new features differently and at different speeds.

Once a feature reaches the recommendation stage, all browsers would generally support it equally, but until then, each browser may have a different implementation of these.

To solve this problem, we use vendor prefixes to notify the browsers of the feature and its implementation.

An example could be the flexbox, which until a few years ago was not supported at all.

In the above example, we can see that certain prefixes like –webkit-box (older versions of Safari), –ms-flexbox (internet explorer), etc. are being used to define a flex display.

These prefixes are the browser’s own versions of the implementation and unless generalized for all, each feature will have such an implementation for different browsers.

These are called Vendor Prefixes.

Support Queries

Sometimes some features might not be implemented at all in some browsers yet.

This means that the Vendor prefixes might not work for such browsers and it would mean that we wouldn’t be able to use these with the same Vendor prefix method we used earlier.

We can then check the support of these features before executing the code using support queries:

E.g 

In the example, we can see that the @supports tag will check that whether the browser will support the following code. If the browser does not support the feature it will simply not execute it and make sure that the code is omitted.

Polyfills

A Polyfill is a JavaScript Package that enables certain CSS features in Browsers that would not support it otherwise.

Now polyfills might not support the feature completely but they can replicate parts of it for your CSS to work.

Now Polyfills come with a cost. The Javascript has to be loaded and parsed into the HTML file.

The users will have to download and parse it before enabling the CSS features on their browsers which obviously comes at a cost of performance.

Here we have to consider if implementing a fallback would be a solution.

Polyfills are a great tool but they should be used rarely.

Eliminating Cross-Browser inconsistencies

There are inconsistencies that might occur across browsers.
These could be something very simple like different padding defaults, or different margins.

Browsers set their own defaults and thus it is really tricky sometimes to make sure that a website behaves similarly across such different browsers.

To do these, we can use Reset Libraries, like Normalize.css, or Reset everything manually using custom code.

Do’s and Don’ts of Naming class

Following are the most common Dos and Don’ts of naming a CSS class:

“Vanilla CSS” vs CSS Frameworks

Vanillas CSS is the CSS where we don’t have any pre-built components and where we define all our styles and layouts on our own.

Component Frameworks are pre-built CSS styles where we can choose from a rich suite of pre-styled components and utility features/classes to build our CSS code.

E.g. Bootstrap 4

Utility Frameworks are CSS frameworks that allow us to build our own styles and layouts with the help of utility features and classes.

E.g Tailwind CSS

Some advantages and Disadvantages of these frameworks are as follows:

We can choose whatever suits us the best and according to our use case.

Generally, it is preferred to use vanilla CSS if we are more concerned with the performance of the website as it would give us complete control over the code.

Component frameworks are preferred for rapid development where we want to quickly get to the end product and are not concerned about the website’s performance.

Utility Frameworks are a hybrid solution where performance and reaching the end product matter equally so there it can be a viable solution.

Summary

We can summarise the Modern CSS as follows:

---

The end of an era!
The defining series of the Codewolf platform has finally come to an end! But, the learning never stops!

Now that we are through with CSS, the goal is now to see how CSS can transform your projects into a true work of art!

There is a ton of new content coming up! Also pretty soon I am going to launch Codewolf’s own slack-like community platform that I built from scratch!

A sneak peek at the weekend blog:

Omit,

What you can’t commit, omit

A nobody developer’s mistakes and learnings

Discover more in the next blog!!

I keep on coding something cool, visit ankush.tech to see what all I am doing!

If you wish to read about my work, here is a book that I published recently – “CSS Bullets, a comprehensive guide to all the CSS you need!“

Interested in React? Learn react from scratch with my book, “REACT Bullets“.

Thanks for sticking around!

Till next time, keep howling, hustling, and learning!