#CSS has really come a long way since I started out :mumble, mumble: years ago.

In continuing my CSS news series, the latest update that has me and other front end devs buzzing is the new :has() pseudo-class.

It looks something like this if you’re looking to target a parent/child combo: .parent:has(.child){}

or if you’re looking to target a sibling using the sibling combinator:
h1:has(+ h2){}

Lots of us, myself included, are calling it a “parent selector”, which we’ve been asking for for years.

But this is selling it a bit short. Based on MDN docs,”this pseudo-class presents a way of selecting a parent element or a previous sibling element with respect to a reference element by taking a relative selector list as an argument.” So it’s more of a relational selector, not just a parent selector. (https://lnkd.in/gP79APH5)

This week, I just so happened to use this new feature to target a child/parent combo and it worked flawlessly in Chrome… but failed in Firefox, a browser MDN currently flags as a browser that doesn’t support this pseudo-class.

I was running an older version of Firefox, updated it, and :has() worked just fine.

Perhaps this might be concerning but my older version of Firefox was v115, 2.21% of global usage.

Caniuse.com indicates it has over 90% support so I think it’s safe to use in modern browsers. (https://lnkd.in/gFt_E4_R)

What do you think? Would you use this new pseudo class in production?

What new css features have you played with recently?

A few days ago, I felt like a full 12 months went by and I had nothing to show for it, I’m a huge failure, I’d have to start my career over.

So I decided to hold down the couch watching hours of Degrassi.

There were a lot of “shoulds” rolling around in my head and if I’ve learned anything from therapy, ‘should’ is a 4 letter word.

“I’m almost 40, I should be more stable in my career.”

“I should be more financially stable.”

“I should not have tried to take on everything and burn myself out.”

But I do have something to show for the last 6 months.

I learned a ton, I met some amazing people on LinkedIn, I came up with a lot of ideas for things I want to build, I had multiple interviews, including Amazon, I found a passion for design with Canva, and I started freelancing.

I learned my life isn’t over because I was let go. It’s full of possibilities.

I have plans in place to keep learning, focusing on React, Next, headless WordPress, modern JS architecture and DSA. And I will only be taking on projects that I’m interested in.

But first… to re-write my resume for the 4th time in 6 months.

I don’t know what next year will look like but we can always course correct, learn from our mistakes, and know there’s nothing wrong with starting over.

So let’s bid adieu to this absolute dumpster fire of a year a la John Oliver.

Happy New Year! Here’s to 2024! May it be better than this one!

(Psst… 2024 is a Presidential election year)

Aw, fuuuu….

:: cue ‘Curb Your Enthusiasm’ theme ::

(Image courtesy of Adobe Firefly, prompt was ‘John Oliver explodes the year 2023 in Death Valley’)

Come with me down a rabbit hole of css clamp().

Buckle up because we’re about to cover 4 years worth of material in this short post.

I used the function for a project recently with a requirement for a large header font for desktop and a smaller header font for mobile devices. (Normally I’d just use media queries but I’m trying to challenge myself by incorporating new methods, functions, and concepts at every opportunity.)

I did some digging and found some great resources that go into the use cases and pitfalls of clamp(). Adrian Bece wrote up a piece about it on Smashing Magazine and Kevin Powell recorded a YouTube video on it called “The problem with viewport units”

So what is this clamp function and why should you care?

In one css declaration, you can set three parameters: minimum, preferred, and maximum values.

It clamps the current value between the min and max values. The preferred value determines how the typography scales and how fast it scales in between the min and max values. Since the preferred value depends on the size of the viewport, the vw unit is commonly used.

Ideally, you want to use rem for your min and max values. This will ensure the font size adapts according to user’s preferences. And for the preferred value, you can use vw plus an rem value (You don’t need calc(), clamp can handle this calculation). You’ll get something looking like this:

For the preferred value, there is no magic number and you can’t use the same value in all cases. It depends on your min and max values.

According to Adrian Bece’s article, you’ll need to assess when to use this function. You’re better off using this for display header text. Keep in mind this isn’t a replacement for responsive typography (where font sizes are explicitly defined based on a breakpoint). It’s more supplemental than anything else and it has its problems.

At the time of the article (about 2 years ago), fluid typography was limiting user zoom capabilities, causing accessibility concerns. Adrian Roselli (an accessibility whiz) voices the caveat to this seemingly wonderful function where text can fail the WCAG Success Criterion 1.4.4, which states that text should scale up to at least 200% when the user’s browser reaches its 500% maximum zoom level.

Maxwell Barvian wrote a follow up to Bece’s article on this topic, which came out a month ago, citing all of those who spoke up on the accessibility issues of fluid typography and using vh, including Roselli.

Barvian did the math, shared his results, and provided a guideline for devs. The TLDR is to follow this rule of thumb when using clamp():

The text will always pass WCAG Success Criterion 1.4.4 in modern browsers, if the max font size is less than or equal to 2.5 times the min font size.

So there you have it. 4 years in a nutshell.

Have you gone down any rabbit holes lately?

References:

Adrian Bece’s Smashing Magazine article: https://www.smashingmagazine.com/2022/01/modern-fluid-typography-css-clamp/

MDN Clamp details: https://developer.mozilla.org/en-US/docs/Web/CSS/clamp

Adrian Bece’s fluid typography calculator https://modern-fluid-typography.vercel.app/

Maxwell Barvian’s article: https://www.smashingmagazine.com/2023/11/addressing-accessibility-concerns-fluid-type/

Barvian’s calculator allows you to see combinations that pass WCAG SC 1.4.4: https://fluid.style/

Adrian Roselli’s accessibility concerns with fluid typography https://adrianroselli.com/2019/12/responsive-type-and-zoom.html