Znacie `@container` i `@container style`? - link https://ishadeed.com/article/css-container-style-queries/?)
Mam pomysł na rozwinięcie...
Tak wygląda `@container style`:
```
.page-header {
display: flex;
}
@container style(display: flex) {
.page-header__start {
flex: 1;
display: flex;
align-items: center;
border-right: 1px solid lightgrey;
}
}
```
Mój pomysł: Dodanie możliwości tworzenia zmiennej, na bazie właściwości kontenera, np. szerokość kontenera jako --container-width` i można jej użyć jak zwykłej zmiennej, tylko jest dynamiczna (zmienia się w zależności od rozmiaru kontenera):
```
@container (width as --container-width) {
height: calc(var( --container-width) - 10px);
```
Co sądzicie?
Chyba czegoś podobnego nie ma jeszcze w planach, a fajnie by uzupełniało te nowe standardy, nie?
#css #html #programowanie #webdev #frontend
Mam pomysł na rozwinięcie...
Tak wygląda `@container style`:
```
.page-header {
display: flex;
}
@container style(display: flex) {
.page-header__start {
flex: 1;
display: flex;
align-items: center;
border-right: 1px solid lightgrey;
}
}
```
Mój pomysł: Dodanie możliwości tworzenia zmiennej, na bazie właściwości kontenera, np. szerokość kontenera jako --container-width` i można jej użyć jak zwykłej zmiennej, tylko jest dynamiczna (zmienia się w zależności od rozmiaru kontenera):
```
@container (width as --container-width) {
height: calc(var( --container-width) - 10px);
```
Co sądzicie?
Chyba czegoś podobnego nie ma jeszcze w planach, a fajnie by uzupełniało te nowe standardy, nie?
#css #html #programowanie #webdev #frontend
Zaloguj się aby komentować