oreolek/phanpy
1
0
Fork 0
Code Activity

First attempt of CSS container query

Browse source
This commit is contained in:
Lim Chee Aun 2023-09-03 18:10:47 +08:00
parent 6cbbd0aa1b
commit 8cc85ecb1a
1 changed files with 13 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/app.css
View file

@ -747,6 +747,7 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
transparent 150%
);
position: relative;
container-type: inline-size;
}
.status-carousel:after {
content: '';
@ -806,7 +807,18 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
.status-carousel > ul > li:is(:empty, :has(> a:empty)) {
display: none;
}
@media (hover: hover) or (pointer: fine) or (min-width: 40em) {
/*
Assume that browsers that do support inline-size property also support container queries.
https://www.smashingmagazine.com/2021/05/css-container-queries-use-cases-migration-strategies/#progressive-enhancement-polyfills
*/
@supports not (contain: inline-size) {
@media (hover: hover) or (pointer: fine) or (min-width: 40em) {
.status-carousel > ul {
scroll-snap-type: none;
}
}
}
@container (min-width: 640px) {
.status-carousel > ul {
scroll-snap-type: none;
}