Kevin Powell - Community•2mo ago

How Supported Is Supported Enough?

This is a two part question. 1) What % on 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.

14 Replies

ἔρως•2mo ago

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

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: - @container support - @container support with a style that comes from a @property declaration

Jochem•2mo ago

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+% 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

ἔρως•2mo ago

i couldn't put it better myself

Lord_TCG#9068OP•2mo ago

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?

ἔρως•2mo ago

it means exactly what i said but let me expand a bit more https://developer.mozilla.org/en-US/docs/Web/CSS/@container#syntax <-- as you see here, there's this example:

@container (width > 400px) {
  h2 {
    font-size: 1.5em;
  }
}

/* with an optional <container-name> */
@container tall (height > 30rem) {
  h2 {
    line-height: 1.6;
  }
}

/* multiple queries in a single condition */
@container (width > 400px) and style(--responsive: true) {
  h2 {
    font-size: 1.5em;
  }
}

/* condition list */
@container card (width > 400px), style(--responsive: true) {
  h2 {
    font-size: 1.5em;
  }
}

@container (width > 400px) {
  h2 {
    font-size: 1.5em;
  }
}

/* with an optional <container-name> */
@container tall (height > 30rem) {
  h2 {
    line-height: 1.6;
  }
}

/* multiple queries in a single condition */
@container (width > 400px) and style(--responsive: true) {
  h2 {
    font-size: 1.5em;
  }
}

/* condition list */
@container card (width > 400px), style(--responsive: true) {
  h2 {
    font-size: 1.5em;
  }
}

you see the style part? those are "custom properies" https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties the support for the custom properties is different

snxxwyy•2mo ago

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

ἔρως•2mo ago

no, it doesnt exist for media queries the media queries work on information about how the device displays the website container queries work on information of how an element is rendered

Lord_TCG#9068OP•2mo ago

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

ἔρως•2mo ago

you're welcome the support for it is still eh, because of firefox

snxxwyy•2mo ago

so it's only for container queries?

Jochem•2mo ago

it only makes sense for container queries 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

ἔρως•2mo ago

you can't apply styles to devices: you can't tell the screen to be 250x250px also, a "device" can be anything, including a printer hell, i bet there's braile printers for websites too well, the correct term is the media where the website is being presented in

snxxwyy•2mo ago

right right that makes sense

ἔρως•2mo ago

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

Gaming

Programming

How Supported Is Supported Enough?