Jhey Tompkins | State of the Browser

Jhey is a Developer Relations Engineer at Google and he makes awesome things for awesome people! He loves helping people level up with creative coding on the web platform. He’s known for whimsical creations but also his ability to deliver innovative solutions to complex problems. He creates hundreds(not exaggerated) of demos over on CodePen. He’s an author for publications such as CSS Tricks && Smashing Magazine. As of recently, He is also now an international speaker speaking at events such as "All Day Hey!" and "Smashing Conf San Francisco". In the past, He has worked with and for names such as Nike, Uber, Monzo, and NearForm. If you want to get in touch, come and find him on one of the many social platforms! Stay awesome! ʕ•ᴥ•ʔ

#Development #Techniques
Solved by modern CSS: feature image · Feature image with container queries and :has() https://ilo.im/161bsv

_____
#ModernCSS #Image #ContainerQueries #CssHas #Viewport #Browser #WebDev #Frontend #HTML. #CSS

Solved By Modern CSS: Feature Image

Using container queries and CSS :has() to build a feature image.

#Development #Approaches
Making content-aware components · A technique using CSS :has(), grid, and quantity queries https://ilo.im/160lmc

_____
#Layout #Content #DesignSystem #UiDesign #WebDev #Frontend #CSS #CssHas #CssGrid #QuantityQuery

Making content-aware components using CSS :has(), grid, and quantity queries

Eric Bailey teaches us how to make a hyper-resilient component that responds not only to the container, but other languages too.

Piccalilli

#Development #Guides
CSS Grid areas · A great way to have a visual of the grid layout in CSS https://ilo.im/15zkbm

_____
#Layout #Grid #Visualization #WebDev #Frontend #CSS #CssGrid #CssHas

CSS Grid Areas

A fresh look at the CSS grid template areas and how to take advantage of its full potential today.

Some little ways I’m using CSS :has() in the real world

Piccalilli

#css #csshas The following is some handy CSS I found out today:

`&:has(:active)`

I use it on a "card" class with a button and linked image inside of it, but it can be useful at so many places.

#Development #Techniques
Going beyond constants with custom properties · CSS variables make your life as a front-end developer much easier https://ilo.im/13xj1y

_____
#CSS #CustomProperties #CssVariables #WebDevelopment #WebDev #Frontend #JavaScript #GridSystem #ProgressiveEnhancement #Buttons #ContainerQueries #CssHas

Going beyond constants with custom properties - iO tech_hub

If you love CSS, you’ve probably heard of custom properties (a.k.a. CSS variables) before. Still, a lot of people seem to use them as constants for their CSS. In this article, I will try to give you some more insights on how you can use these custom properties to create some smart systems or even use them as booleans in CSS and create easy progressive enhancements.

iO tech_hub