CSS calc mit Erben
Möchte ich inherit
mit calc()
wie diese:
#foo {
animation-duration: 10s;
}
#foo > .bar {
animation-duration: calc(inherit + 2s); /* =12s */
}
Aber es scheint nicht zu arbeiten.
Ist es Browser-bug oder specs?
- Funktioniert das nicht so ......
- Scheint, Sie sind aus Glück heraus. Getestet habe ich wenn Sie schreiben, könnte
calc(100% + 2s)
aber auf die Dauer die Eigenschaften nicht nehmen Prozentsätze. (Nur120%
selbst nicht funktioniert.) Sorry. Gute Frage aber! - Wenn Weniger ist eine option, die Sie tun können
@duration:10s; #foo {animation-duration:@duration;} #foo > .bar {animation-duration:@duration + 2s; }
. Das ist natürlich nicht genau das gleiche. Es gibt auch CSS-Variablen, aber das ist science-fiction für heute. - Hi, hast du einen workaround finden?
- nothink in reinem css
- Sekunden werden nun unterstützt in calc da Firefox Quantum update (neue Stylo CSS-engine)
Du musst angemeldet sein, um einen Kommentar abzugeben.
Den
inherit
- Schlüsselwort kann nur existieren allein als Wert einer property-Deklaration. Es kann nicht verwendet werden, mit alles andere als einen Wert, weil es ein Wert an sich ist. Dies bedeutet, es kann nicht verwendet werden, mit Funktionen wiecalc()
entweder. Sehen CSS2.1 und css3-Kaskade.Darüber hinaus die
calc()
Funktion selbst dauert nur Literale numerische Werte wie zahlen, Maße und Prozentangaben.Also um es einfach zu sagen, die spec nicht erlaubt, mit
inherit
so.