You might be aware that each language in web development has a very specific purpose, i.e HTML is used to structure the web page and also have other metadata, while CSS is used to design the web page and creating a responsive layout, and JavaScript is usually used to add interactivity, functionality and much more. As a web developer, it’s advisable to keep these distinctions in mind while coding the web page. It’s irrespective of what, or how much knowledge you have about a particular language. Though JavaScript has so many applications and I really love it, over the past years, CSS has received added functionalities that have strengthened the HTML-CSS bond even more. There are features that could replace a few of the dependencies on JavaScript. We may mistake them as crossing the “distinct purpose” line of each language, but it's not the case. CSS Animations above: Beautiful CSS Animation by Akhil Sai Ram You could find many such examples of developers creating beautiful animations for the web which are written in pure CSS. Technically, it works by declaring key-frames with a given name and passing the name in the animation property of the given selector. Users have basic control over the animation like speed, delay and the end state of the animation. These CSS animations can also be interactive. @ slidein { { : (0%);
  } { : (100%);
  }
} keyframes from transform translateX to transform translateX SVG animations are a great addition as well(which is a whole other topic). The use of CSS animations makes sense if you have a . small or perhaps less complex animations :pseudo-classes As a beginner, I was introduced to a few such classes like , , , etc. Most if not all of them add interactivity to the web page. They are one of the most used classes in the industry. With the introduction of CSS Selectors level 4, we also get Time Dimensional, Grid-structural, and Video state pseudo-classes and CSS could be the go-to language for even more functionalities. :hover :focus :active While similar results could be achieved using JavaScript, it’s okay to use pseudo-classes to get the same results and perhaps better performance. Checkbox as basic onClick() Did you know that there is a unique and simple way of using a checkbox as an onClick event and performing a given task? This can be achieved by disguising the checkbox as a button or any other clickable component while hiding the actual checkbox. Since we are using CSS, the only way we can create this functionality is if the function has to be performed on its children or siblings. You can find one of the examples for this . here Feature queries If you have been using Modernizr, there is a feature that works in almost all browsers called which lets the code run only when the user agent/browser supports the code. As of today, Flexbox has compared to CSS Grids which has . Feature queries 98.7% global coverage 93.81% Global coverage @ (display: grid) {
} supports Every potential client must have a similar experience utilizing the website. Hence it's crucial to know about features like “supports”. prefers-color-scheme This is a new addition to CSS with global browser compatibility of . This cool new feature allows the website to seek the user preferred color scheme from the system. 76.69% @ (prefers-color-scheme: dark) { { : ; : white; } { : black; : ; }
}

@ (prefers-color-scheme: light) { { : white; : ; } { : ; : black; }
} media .day .dark-scheme background #333 color .night .dark-scheme background color #ddd media .day .light-scheme background color #555 .night .light-scheme background #eee color The above is a by Mozilla Developer web docs, that shows us how to implement this feature in case you would want to manipulate the website to fit user needs. sample case Conclusion Note: This article addresses the minimal tricks and features of CSS. There's much more out there :) You don't necessarily have to break the standards to use CSS functionality as a replacement. Of course, these features shine bright when a given user has disabled JavaScript, but they also have performance differences irrespective of the situation. One major drawback of using advanced and fairly new CSS functionality is browser support, for which you could use “feature queries” to handle things differently. But the rest of the functionalities mentioned have complete or most browser support, so it shouldn’t be an issue. Some of the developers find CSS to be difficult. In which case I would encourage them to try pair programming. It helps you with concentration and you'll have a partner along the journey. I would highly recommend Bootcamps like for this. has helped me grow and acquire tremendous coding skills through this means. I found it more useful than self-study. Microverse Microverse Happy Coding! - Feature image : Photo by JOSHUA COLEMAN on Unsplash Hey, my name's . I have loved working with CSS ever since I started my web development journey. Through the means of this article, I wanted to highlight a few features or tricks that CSS has to offer. I hope you liked the article. Do leave your comments or suggestions about this topic. Moin

Mozilla

My GitHub Profile

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

HTML5 And CSS3: Tidbits Galore

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

6 Awesome Tips To Help You With CSS Selectors

Avoid Headaches by Understanding CSS Specificity

CSS Block Element Modifier

Don't Go Crazy Because Of CSS Styles Conflicts

Generating Dependable Locators for Web Testing, Data Scrapy

6 Awesome Tips To Help You With CSS Selectors

Avoid Headaches by Understanding CSS Specificity

CSS Block Element Modifier

Don't Go Crazy Because Of CSS Styles Conflicts

Generating Dependable Locators for Web Testing, Data Scrapy

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps