add @supports not
#13619
Replies: 1 comment
-
The <div class="supports-[not(container-type:inline-size)]:md:grid-cols-2"></div> @supports not (container-type:inline-size) {
@media (min-width: 768px) {
.supports-\[not\(container-type\:inline-size\)\]\:md\:grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
} Alternatively, you could configure a shortcut for this within your <div class="supports-not-container:md:grid-cols-2"></div> |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Tailwind supports the @supports css query but not with the 'not' operator.
This would be so useful, especially in the age where container queries are not yet supported everywhere. The problem currently is that the fallback for container query are not easily done at the moment. The problem is that if you want to implement fallback query the querys are always active and will overwrite the container querrys. their support-not will provide a solution for this.
My suggestion would be simply to add the support util support-not.
The md Docs:
https://developer.mozilla.org/en-US/docs/Web/CSS/@supports?retiredLocale=de#the_not_operator
Beta Was this translation helpful? Give feedback.
All reactions