Reaktion von fehlgeschlagenem Import möglich (nur mit CSS)?
![](/uploads/default_avatar/thumb/missing.png)
- css
moin,
ist es möglich, das sich ein CSS-Code bar.css
anders verhält, wenn der Import von einem anderen CSS-Code foo.css
fehlschlägt (z.B. mit CSS-Hacks)?
foo.css
:root {
--import-flag-foo: FLAG
}
bar.css
@import url( './foo.css' );
@media (--import-flag-foo==FALG) {
/* Erfolg */
}
@media not (--import-flag-foo=FLAG) {
body {
display: none !important;
}
}
Wäre es in dieser Form möglich?
Ich weis das es mit Präprozessoren von CSS möglich ist
lgmb
@@MB
ist es möglich, das sich ein CSS-Code
bar.css
anders verhält, wenn der Import von einem anderen CSS-Codefoo.css
fehlschlägt (z.B. mit CSS-Hacks)?
foo.css:
body { display: revert !important }
bar.css:
@import url( './foo.css' );
body { display: none }
(Um mal bei deinem Beispiel zu bleiben, was gewiss kein gutes ist.)
Die Verwendung von @import
ist sicher deinem sehr speziellen Anwendungsfall zuzuschreiben. Generell ist davon abzuraten.
🖖 Живіть довго і процвітайте
moin,
ist es möglich, das sich ein CSS-Code
bar.css
anders verhält, wenn der Import von einem anderen CSS-Codefoo.css
fehlschlägt (z.B. mit CSS-Hacks)?[…]
(Um mal bei deinem Beispiel zu bleiben, was gewiss kein gutes ist.)
Ein praktische Lösung. Ich möchte das mehrere CSS-Dateien (z.B. qux.css
, tok.css
etc.) foo.css
, in eine andere CSS-Dateien importieren (hier bar.css
), um dann mit den importierten CSS-Dateien in dieser CSS-Datei bar.css
arbeiten zu können. Da erschien mir eine ID der jeweiligen CSS, die importiert werden soll, sinnvoll. Sry, habe ich nicht im Beispiel erwähnt 😕.
Die Verwendung von
@import
ist sicher deinem sehr speziellen Anwendungsfall zuzuschreiben. […]
Die App läd all das, was an CSS-Dateien in dem Unterordner snippets/
ist, ins <head>
im Editor hoch umschlossen von <style>
. Dabei wird @import
außeracht gelasse. Sry, habe ich nicht erwähnt 😕. Das ist mir erst im nachhinein aufgefallen, wärend ich an den CSS-Snippets für die App arbeitete.
Auf Jeden Fall möchte ich erreichen, dass ein individueller Identifikations-Schlüssel der jeweiligen CSS-Snippets da ist, um ihre existents der von einer anderen geladenen CSS-Snippet zu prüfen.
Beispiel:
<html>
<head>
<style>
/* foo CSS */
</style>
<style>
/* qux CSS */
</style>
<style>
/* bar CSS*/
</style>
</head>
</html>
Im Beispiel bindet die App bar.css
und die restlichen CSS-Snippets, mit ausnahme von tok.css
, ein. Das CSS von bar.css
prüft ob alle CSS-Snippets eingebunden sind. Das geladene CSS von bar.css
verhält sich anders, weil der ID-Schlüssel innerhalb von tok.css
CSS-Snippet, welches nicht von der App geladen wurde, fehlt.
Ich hoffe das Beispiel ist für dich besser zu verstehen, als das in der Eigangsfrage 😕. Nochmal sorry.
[…] Generell ist davon abzuraten.
Ah, danke für den Rat 👍. Was würdes du stattdessen empfehlen, was sinnvoll für Importe von CSS-Dateien in einen andere CSS Datei ist, abseits von @import
?
lgmb
@@MB
Ein praktische Lösung. Ich möchte das mehrere CSS-Dateien (z.B.
qux.css
,tok.css
etc.)foo.css
, in eine andere CSS-Dateien importieren (hierbar.css
), um dann mit den importierten CSS-Dateien in dieser CSS-Dateibar.css
arbeiten zu können. Da erschien mir eine ID der jeweiligen CSS, die importiert werden soll, sinnvoll.
Und schon wieder denkst du in Lösungen, anstatt dein Problem zu beschreiben, was du zu lösen gedenkst.
Die Verwendung von
@import
ist sicher deinem sehr speziellen Anwendungsfall zuzuschreiben. […]Die App läd all das, was an CSS-Dateien in dem Unterordner
snippets/
ist, ins<head>
im Editor hoch umschlossen von<style>
.
Wozu brauchst du dann @import
?
Auf Jeden Fall möchte ich erreichen, dass ein individueller Identifikations-Schlüssel der jeweiligen CSS-Snippets da ist, um ihre existents der von einer anderen geladenen CSS-Snippet zu prüfen.
Um welches Problem zu lösen?
Was würdes du stattdessen empfehlen, was sinnvoll für Importe von CSS-Dateien in einen andere CSS Datei ist, abseits von
@import
?
Alle Stylesheets per <link>
einbinden.
🖖 Живіть довго і процвітайте
moin,
Ein praktische Lösung. […]
Das war zu deiner Lösung gemeint, sry.
[…] Ich möchte das mehrere CSS-Dateien […] importieren. […]
Und schon wieder denkst du in Lösungen, anstatt dein Problem zu beschreiben, was du zu lösen gedenkst.
Das ist doch das Problem beschreiben?
[…] Da erschien mir eine ID der jeweiligen CSS, die importiert werden soll, sinnvoll.
Da wollte ich den "ID-Schlüssel" als möglichen Lösungsansatz in den Vordergrung rücken, was ich ja in der Eingsfrage mit --import-flag-foo
gemacht habe.
Die Verwendung von
@import
ist sicher deinem sehr speziellen Anwendungsfall zuzuschreiben. […]Die App läd all das, was an CSS-Dateien in dem Unterordner
snippets/
ist, ins<head>
im Editor hoch umschlossen von<style>
.Wozu brauchst du dann
@import
?
Garnicht. Ich hab nicht weit genug gedacht bei der wahl des Beispieles. Sehr peinlich für mich 😕.
Auf Jeden Fall möchte ich erreichen, dass ein individueller Identifikations-Schlüssel der jeweiligen CSS-Snippets da ist, um ihre existents der von einer anderen geladenen CSS-Snippet zu prüfen.
Um welches Problem zu lösen?
ob CSS-Snippets von der App schon geladen ist oder nicht, druch Prüfung von einer anderen CSS-Snippet die bereits von der selbigen App schon geladen wurde.
Was würdes du stattdessen empfehlen, was sinnvoll für Importe von CSS-Dateien in einen andere CSS Datei ist, abseits von
@import
?Alle Stylesheets per
<link>
einbinden.
Ok Dankeschön
lgmb
moin,
Pseudo CSS-Code Beispiel:
ein besseres Beispiel (so hoffe ich) welches leider nicht funktioniert aber es macht besser deutlich (so hoffe ich) was ich möchte.
Ausschnitt innerhalb des <head>
Elementes einer HTML-Datei
<style>/* foo.css loaded */
:root {
--mb-id-foo: 'foo'; /* foo.css ID */
}
/* do stuff */
</style>
<style>/* fuz.css loaded */
@supports (--mb-id-foo) {
:root {
--mb-id-fuz: 'fuz'; /* fuz.css ID */
}
/* provides styles after condition */
}
</style>
<style>
/* bar.css is not loaded */
</style>
<style>/* buz.css loaded */
@supports (--mb-id-bar) {
:root { /* buz.css ID */
--mb-id-buz: 'buz';
}
/* provides styles after condition */
}
</style>
<style>/* foo-bar.css loaded */
@supports (--mb-id-foo) and (--mb-id-bar) {
:root {
--mb-id-foo-bar: 'foo-bar'; /* foo-bar.css ID */
}
/* provides styles after condition */
}
</style>
Zur Erleuterung meines Pseudo Codes:
foo.css
Die CSS-Datei foo.css
is geladen mit ihren ID --mb-id-foo
und ihre styles.
fuz.css
Die CSS-Datei fuz.css
ist auch geladen mit einer Abhängigkeit von foo.css
. fuz.css
prüft ob die ID von foo.css
nämlich --mb-id-foo
existiert. Fals ja existiert foo.css
und fuz.css
stellt ihre styles zur Verfügung.
bar.css
Die CSS-Datei bar.css
ist nicht geladen mit ihrer ID --mb-id-bar
und ihren styles.
buz.css
Die geladene CSS-Datei buz.css
ist abhängig von bar.css
. Sie prüft ob die ID von bar.css
nämlich --mb-id-bar
existiert. Dem ist nicht so und so existiert bar.css
auch nicht und buz.css
stellt ihre styles auch nicht zur Verfügung.
foo-bar.css
Genausowenig die geladene CSS-Datei foo-bar.css
die beide IDs --mb-id-foo
und --mb-id-bar
prüft.
Mein Problem warum es Pseudo-CSS-Code heißt:
@support (--mb-id-foo){ }
funktioniert in dieser Konstellation nicht. Und ich glaube auch nicht, das @supports
eine definierte CSS-Variable prüfen kann, nur Features.
Dennoch habe ich @support
in mein pseudo Beispiel mit reingenommen, weil hoffe, dass es die Situation besser verdeutlicht)
Zur Frage:
Wie kann man (mit CSS, innerhalb einer ins HTML hochgeladenen CSS-Datei) prüfen, ob eine bestimmte CSS-Variable a (z.B. --mb-id-foo
) in einer anderen CSS-Datei A (z.B. foo.css
) existiert, so dass man bestätigen kann, dass diese CSS-Datei A (z.B. foo.css
) auch ins HTML geladen wurde oder nicht?
Ich hoffe inständig, das meine Beispiel verdeutlichen kann, was ich möchte und was meine Frage eigentlich ist.
@Gunnar Bittersmann hat meine Eingangsfrage ja bestens beantwortet, welche ich unwissentlich sehr sehr falsch gestellt habe. Das ist mir im nachhinein aufgefallen.
lgmb
Hallo MB,
Und ich glaube auch nicht, das @supports eine definierte CSS-Variable prüfen kann
Nein, aber
@container style(--mb-foo: 'foo') {
...
}
kann das. Leider noch nicht im Firefox, soweit ich weiß.
Stichwort: container style query
Rolf
moin,
Und ich glaube auch nicht, das @supports eine definierte CSS-Variable prüfen kann
Nein, aber […] kann das. Leider noch nicht im Firefox, soweit ich weiß.
Vielen Dank!!! Die Synax habe ich beim durchforsten des Internets auf der Suche nach Lösungen auch schon mal gesehen, aber leider nich weiter beachtet. Aber durch dich auf den Gedanken gebracht, bin ich fündig geworden. Soweit ich den Artikel Developer Chrome | Querying Direct Parents und W3 | CSS Containment Module Level 3 | Container Type überflogen verstanden habne, ist die Syntax bei Chrom schon vorhanden und einsetzbar, aber noch in der Entwicklung und bei Firfox Can I Use | CSS Container Style Queries noch garnicht.
lgmb
Hallo MB,
Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=1795622
Safari: Keine Ahnung, ob und wo es ein Info-Repository zur Entwicklung gibt
Chrome: style()-Queries nur gegen custom properties, und derzeit auch nur gegen Identität von Strings, d.h. sowas wie @container style(--foo > 10)
geht nicht. Ist bei den Valar des CSS (Tab Atkins, Miriam Suzanne, Una Kravetz) in Diskussion für CSS Containers Level 4.
Rolf
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
Hallo MB,
wie ich schon schrub: style() kennt der FF (noch) nicht. Du bräuchtest einen JavaScript basierenden Polyfill - sofern es den gibt. Keine Ahnung. Und wie Du schon mehrfach schriebst: JS unter Obsidian geht für Dich nicht.
Wenn Du also unbedingt den FF unterstützen musst, versuche, ohne die Imports auszukommen. Oder nimm es hin, wenn der Import nicht klappt. Irgendwo muss man es auch mal gut sein lassen können. Das ist doch eh eine Anwendung "nur für Dich", oder?
Rolf
moin,
[…] Und wie Du schon mehrfach schriebst: JS unter Obsidian geht für Dich nicht.
Jo leider und gottseidank
Wenn Du also unbedingt den FF unterstützen musst, versuche, ohne die Imports auszukommen. Oder nimm es hin, wenn der Import nicht klappt.Irgendwo muss man es auch mal gut sein lassen können. […]
weiser Rat!! 👍
[…] Das ist doch eh eine Anwendung "nur für Dich", oder?
Erst ma ja. Aber ich möchte das in der Zukunft gerne Teile, für Leute aus der Community die genau solche Probleme haben wie ich 👍. Wie erwähnt bin kein CSS-Profil.
lgmb