HTML5 And CSS3: Tidbits Galore

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. 

@keyframes slidein {
  from {
    transform: translateX(0%);
  }

  to {
    transform: translateX(100%);
  }
}

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 :hover, :focus, :active, 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.

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 Feature queries which lets the code run only when the user agent/browser supports the code. As of today, Flexbox has 98.7% global coverage compared to CSS Grids which has 93.81% Global coverage.

@supports (display: grid) {
}

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 76.69%. This cool new feature allows the website to seek the user preferred color scheme from the system.

@media (prefers-color-scheme: dark) {
  .day.dark-scheme   { background:  #333; color: white; }
  .night.dark-scheme { background: black; color:  #ddd; }
}

@media (prefers-color-scheme: light) {
  .day.light-scheme   { background: white; color:  #555; }
  .night.light-scheme { background:  #eee; color: black; }
}

The above is a sample case 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.

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 Microverse for this. Microverse has helped me grow and acquire tremendous coding skills through this means. I found it more useful than self-study.

Happy Coding!

- Feature image : Photo by JOSHUA COLEMAN on Unsplash

Hey, my name's Moin. 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.