moin,
Durch das mir empfohlene @container style()
klappts einwandfrei 👍…
Ausschnitt:
mb-foo.css
, mb-bar.css
, mb-tok.css
und mb-access.css
sind geladen und im Head-Kontainer enthalten. Aber nicht mb-qux.css
.
<style>/* MB-FOO CSS */
@layer mb-foo {
:root { --mb-id-foo: 'MB__ID_FOO'; }
/* FOO styles */
}
</style>
<style>/* MB-BAR CSS */
@layer mb-access {/* Überschriebung */
.wrapper { container-name: mb-access; }
}
@layer mb-bar {
@media screen {
:root { --mb-id-bar: 'MB__ID_BAR'; }
@container mb-access style( --mb-id-foo: 'MB__ID_FOO' ) {
/* BAR styles */
}
}
}
</style>
<style>
/* MB-QUX CSS nicht geladen*/
</style>
<style>/* MB-TOK CSS */
@layer mb-access {/* Überschriebung */
.wrapper { container-name: mb-access; }
}
@layer mb-tok {
@media screen {
:root { --mb-id-tok: 'MB__ID_TOK'; }
@container mb-access style( --mb-id-qux: 'MB__ID_QUX' ) {
/* keine TOK Styles da QUX fehlt */
}
}
}
</style>
…vielen Dank dafür 😀.
Zusätzliche Frage:
…jedoch nich bei Firefox 😕. Ist es möglich, das dieses konrete Beispiel, so umzubauen, dass diese neue CSS-Code Kontellation der Firefox-Browser versteht und sich genauso verhält wie Chrome?
lgmb
--
Sprachstörung, Verpeilt
Sprachstörung, Verpeilt