How Supported Is Supported Enough?

This is a two part question.
1) What % on

can i use

can i use

is enough for you to use something in a production project?
2) What is the difference here? One is 70 and one is 90% but I'm not sure on the distinction.

Ἔ

ἔρως•10/5/24, 2:07 PM

1) What % on can i use is enough for you to use something in a production project?

that depends on how far back you're willing to support with your build tools
and how cutting-edge do you want to be too

Ἔ

ἔρως•10/5/24, 2:08 PM

2) What is the difference here? One is 70 and one is 90% but I'm not sure on the distinction.

the difference is in the name:

support
support with a style that comes from a declaration

Jochem•10/5/24, 3:28 PM

also depends on the feature. Something that's purely a little bit of visual flair that makes your site look that little bit better? 40% is plenty. Something that, if it's not supported, breaks your entire layout? 95+%

Jochem•10/5/24, 3:30 PM

also really depends on your target audience. If you're making something that is likely to be mainly used by silicon valley tech bros, you can go for whatever the latest iphone and safari support. If you're making a website for an insurance agency in a developing nation, you'll want to err on the side of potentially even still supporting IE

Ἔ

ἔρως•10/5/24, 3:34 PM

i couldn't put it better myself

Lord_TCG#9068OP•10/5/24, 4:53 PM

Thank you two. The first point is well and truly covered. I'll hold out on using container queries until it gets closer to 100.

Just for my own education on the second question, I can see it's different because of the name... But what does the name mean?

Ἔ

ἔρως•10/5/24, 5:00 PM

it means exactly what i said

Ἔ

ἔρως•10/5/24, 5:00 PM

but let me expand a bit more

Ἔ

ἔρως•10/5/24, 5:02 PM

https://developer.mozilla.org/en-US/docs/Web/CSS/@container#syntax <-- as you see here, there's this example:

Ἔ

ἔρως•10/5/24, 5:02 PM

you see the part?

Ἔ

ἔρως•10/5/24, 5:02 PM

those are "custom properies"
https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties

Ἔ

ἔρως•10/5/24, 5:03 PM

the support for the custom properties is different

Ἔἔρως <https://developer.mozilla.org/en-US/docs/Web/CSS/@container#syntax> <-- as you ...

snxxwyy•10/5/24, 5:06 PM

apologies for jumping in. is the custom property syntax something that exists for media queries too?

Ἔ

ἔρως•10/5/24, 5:07 PM

no, it doesnt exist for media queries

Ἔ

ἔρως•10/5/24, 5:08 PM

the media queries work on information about how the device displays the website

Ἔ

ἔρως•10/5/24, 5:08 PM

container queries work on information of how an element is rendered

Lord_TCG#9068OP•10/5/24, 5:22 PM

Ohhhhh that's cool!! Thanks for taking the time to break it down for me. I didn't even know the custom properties thing existed

Ἔ

ἔρως•10/5/24, 5:25 PM

you're welcome

Ἔ

ἔρως•10/5/24, 5:25 PM

the support for it is still eh, because of firefox

Ἔἔρως no, it doesnt exist for media queries

snxxwyy•10/5/24, 5:40 PM

so it's only for container queries?

Jochem•10/5/24, 5:42 PM

it only makes sense for container queries

Jochem•10/5/24, 5:43 PM

it checks if a custom property is set on the container. There's nowhere to set a custom property on a media query because it only looks at the viewport

Ἔ

ἔρως•10/5/24, 5:43 PM

you can't apply styles to devices: you can't tell the screen to be 250x250px

Ἔ

ἔρως•10/5/24, 5:44 PM

also, a "device" can be anything, including a printer

Ἔ

ἔρως•10/5/24, 5:44 PM

hell, i bet there's braile printers for websites too

Ἔ

ἔρως•10/5/24, 5:45 PM

well, the correct term is the media where the website is being presented in

snxxwyy•10/5/24, 5:45 PM

right right that makes sense

Ἔ

ἔρως•10/5/24, 5:48 PM

and that's why you can't query for styles in a media query