This week, Kevin Powell joins us on a Scrimba Livestream event to discuss new proposed features coming soon to CSS, introduces us to a browser built for developers, and shares how he learns new topics!

About Kevin

Kevin is well known in the web dev community as a "CSS Evangelist," and he is also a teacher at Scrimba!

On Kevin's YouTube channel, his description is, "Helping you learn how to make the web, and make it look good while you're at it. With videos every Tuesday and Thursday, I'll be bringing you How-Tos and Tutorials, as well as simple tips and tricks, with a big focus on helping people see how wonderful CSS is!"

Kevin always encourages us with his excellent catchphrase, "keep on making your corner of the internet just a little bit more awesome!"

New color modes

New color modes are coming to CSS!

Currently, there is a limit to the colors produced when using RGB and HSL. However, the Safari browser supports the new wider color gamut that will soon be available, and so do our modern devices.

For compatibility, the syntax that we are currently using for CSS colors will still be supported.

During the Livestream, Kevin gives us a demonstration of the new syntax. Kevin then brings to our attention that there is an inconsistency in CSS when using commas and that this new syntax is taking us a step closer to uniformity.

Current color CSS syntax

body {
	color: rgba(255, 0, 0, .5);
}

New color CSS syntax

body {
	color: rgba(255  0  0  / .5);
}

Chrome Canary

Kevin introduces a new browser for us to use that is designed for developers called Chrome Canary. Developers use the Chrome Canary browser to try out new features before they are finalized and released.

Google's website for the Chrome Canary browser states, "Get on the bleeding edge of the web!"

Chrome Canary

• Develop websites for the next version of the web
• Test cutting-edge web platform APIs
• Updated nightly

The following two CSS features are currently in production. At the time of writing this article, they are both only available on Chrome Canary. In addition, they are behind flags, so you will have to enable them.

Container Queries

Media queries, which are in use today, look at the size of the screen.

Container queries, which are currently in development, look at the size of the component.

Kevin explains, "In a web component world like we're living in today where your styling components individually, instead of looking at the size of the viewport (with a container query), you're looking at the size of an actual component."

With a container query, Kevin tells us, we can look at the size of an element and change the layout of that element based on how much room it has.

Since the container query is not looking at the viewport size or browser size, it could be a game-changer for designing layouts.

During the Livestream, Kevin states he doesn't think that container queries will replace media queries, but he believes that they will significantly impact them.

here is a detailed video that kevin created on the topic:

Has (pseudo-class)

MDN Web Docs definition: The :has() CSS pseudo-class represents an element if any of the selectors passed as parameters (relative to the :scope of the given element) match at least one element.

/* Selects any <a>, as long as it has an <img> element directly inside it  */
/* Note that this is not supported in any browser yet */
let test = document.querySelector('a:has(> img)');

Kevin explains with enthusiasm how long he has been writing CSS without having a "parent selector," and now, with the newly proposed "has" pseudo-class, we will!

During the Livestream, Kevin elaborates on the "has" pseudo-class, explaining how he could select an individual card and then style it based on if the card had an image in it.

Live Stream with Kevin Powell - What's new in CSS?

How Kevin researches

During the Livestream, Kevin provides us with the resources that he uses to learn and research:

• CSS Tricks
• Log Rocket
• smashing magazine
• MDN

Kevin reveals to us that he uses MDN documentation to research and study topics that he will teach because he wants to make sure that he properly understands them. I believe this is a very wise approach to learning web development and one that we should all adapt!

Here is a link to Kevin's new article, featured on CSS Tricks.com: Equal Columns With Flexbox: It's More Complicated Than You Might Think

Kevin advises us to write all of our HTML first

Kevin teaches us that we should write all of the HTML first and then write the CSS. The reason, Kevin explains, "If you're breaking it down (your site) section by section, you're probably going to end up writing a lot more CSS than you need to."

Kevin explains that it takes time to get good at, but you should visualize the whole site you are creating. Doing so will enable you to write more succinct code and to easier follow the d.r.y. (do not repeat yourself) principle of coding.

Kevin informs us that much of our CSS is reusable, and that's why he writes all of his HTML and all of his global CSS stylings first.

Kevin's choice of a pre-processer

Kevin is a really big fan of SASS, and I am 100% on board!

Here is an informative video created by Kevin on the topic:

To learn more about Kevin, you can read my "Teacher Feature: Kevin Powell" article.

To learn more about Scrimba, you can read my Scrimba articles:

• How Scrimba is helping me and many others to become confident, well-prepared web developers
• Review: Scrimba

Conclusion

During the Scrimba Livestream, Kevin introduced us to Chrome Canary, a web browser made for developers.

Also, he discusses and demonstrates new CSS features that are currently in the works; new color modes, container queries, and the Has pseudo-class.

Kevin, as always, provided us with valuable insight, helping us learn, grow, and become proficient web developers.