Description

Given that the support for :has pseudo class and container queries is becoming main stream with the release of chrome 105 (safari 15.4 already has support for :has and Safari 16 will have support for container queries).

Is there any plan to support them?

Aug 12 '22 05:08 bhvngt

@bhvngt MasterCSS is an new CSS language so you can use all native CSS features.

`:has()`

You can now use :has():

<form class="outline:5:has(:focus)">
    <input/>
    ...
</form>

Related container properties

For unsupported CSS properties you can first use the group/property syntax {}

<sidebar class="{container-type:inline-size}">

We haven't yet designed a syntax for @container, we have to make sure that it is suitable to be defined by class, like @keyframes We don't support it, because we prefer you to define it directly through the traditional way.

.sidebar {
  container-type: inline-size;
  container-name: sidebar;
}

@container sidebar (min-width: 400px){
  .card {
    display: grid;
    grid-template-columns: 2fr 1fr;
  }
}

https://caniuse.com/css-container-queries

Aug 13 '22 11:08 1aron

Thanks @1Aron. Great to hear that :has is already supported. Helps to know that I can use container-type.

Since the use case for @container especially in its current form is similar to that of media-queries, can it leverage the media query syntax that is supported by @master. Current media query syntax helps to reduce quiet a lot of boiler plate code and going by the buzz container query may very well become highly used css feature.

Aug 13 '22 16:08 bhvngt

Tbh, we'd love to support this new feature, but allow me to put it on the todo list, as I'd like to implement it after a thorough consideration and design for this part. This is definitely a new feature not to be missed. 🙌🏼

Aug 13 '22 17:08 1aron

Thanks @1Aron . Make sense. Will be looking forward to the implementation. Thank you for building this super project. So far I have been thoroughly enjoying the @master experience. 🥇

Aug 13 '22 18:08 bhvngt

:tada: This issue has been resolved in version 2.0.0-rc.22 :tada:

The release is available on:

Your semantic-release bot :package::rocket:

Mar 01 '24 06:03 github-actions[bot]

✨ Support for container query/units and :has pseudo class

Description

:has()

Related container properties

`:has()`