[look997]

Znacie @container i @container style - link?
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

[Deykun]

@look997:
Mógłbyś powiedzieć jaki Twoim zdaniem to problem rozwiązuje?

Ja nie jestem w nowym css, bo zanim będę mógł produkcyjnie to trzeba dać jakiś czas, ale @container warunek chyba przyjmuje. To co pokazujesz tutaj chyba rozwiązuje cqw, pozatym da się haknąć paddingiem, i chyba nowoczesnym aspect-ratio.

A tu widzę warunek na szerokość kontenera uzależniony od szerokości kontenera, bardzo zagmatawnie to wygląda, a container chyba właśnie po to powstał żeby

[look997]

@Deykun: Sam @container style jest propozycją opisaną w linku który podałem.

To moje, z tym tworzeniem zmiennej do wykorzystania wewnątrz bloku kodu, to dam inny przykład: Możesz zrobić bajer, że im szerszy kontener, tym kolor elementu bardziej się zmienia w odcieniu szarości albo przeźroczystości. Taki efekt.

Czyli np.:

@container (width as --container-width) {
  .page-header__start {
    background-color: rgba(255, 0, 0,  calc(var(--container-width)/100);
  }
}

A zmienna (czyli szerokość kontenera) --container-width może być od

[Deykun]

@look997:
Możesz chcieć coś dodać do @containera w środku jeśli masz powód i możesz chcieć mieć konwersje px na procenty to trochę osobne tematy.

A jestem czepilwy, bo podesłałem Ci wyżej cqw.

cqw: 1% of a query container's width

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries

Brzmi jak zmienna dla której byś chciał nowy ficzer tworzyć w css - ona już jest.
Technicznie to już jest procent więc ta teoretyczna konwersja łatwiejsza niż pikselami.

Co do

[look997]

Dodatkowo Ty wziąłeś miejsce w którym obecnie w tej propozycji będzie if - warunek i w swoich przykładach wstawiasz tam assignment - przypisanie. Ciężko to co piszesz pozytywnie ocenić nie widać problemu który to jakoś specjalnie rozwiązuje, za to widać zepsucie (zamglenie) składni i trochę niezrozumienie tego jak ona działa(?).

@Deykun: Znaczy ja wiem (może powinienem to zaznaczyć) że to miejsce i sposób jest tak właściwie można powiedzieć pseudokodem, tylko żeby