Reaktion von fehlgeschlagenem Import möglich (nur mit CSS)?
MB
Reaktion von fehlgeschlagenem Import möglich (nur mit CSS)?
MB
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
--
Sprachstörung, Verpeilter, Begriffs-Verwechseler
Sprachstörung, Verpeilter, Begriffs-Verwechseler
akzeptierte Antworten
Reaktion von fehlgeschlagenem Import möglich (nur mit CSS)?
Gunnar Bittersmann
Bewertung: +1, 1 Stimme
Reaktion von fehlgeschlagenem Import möglich (nur mit CSS)? Spezielleres Beispiel
Rolf B
Bewertung: +2, 2 Stimmen
-
@@MB
ist es möglich, das sich ein CSS-Code
bar.cssanders verhält, wenn der Import von einem anderen CSS-Codefoo.cssfehlschlä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
@importist sicher deinem sehr speziellen Anwendungsfall zuzuschreiben. Generell ist davon abzuraten.🖖 Живіть довго і процвітайте
--
Ad astra per aspera-
moin,
ist es möglich, das sich ein CSS-Code
bar.cssanders verhält, wenn der Import von einem anderen CSS-Codefoo.cssfehlschlä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.cssetc.)foo.css, in eine andere CSS-Dateien importieren (hierbar.css), um dann mit den importierten CSS-Dateien in dieser CSS-Dateibar.cssarbeiten 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
@importist 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@importauß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.cssund die restlichen CSS-Snippets, mit ausnahme vontok.css, ein. Das CSS vonbar.cssprüft ob alle CSS-Snippets eingebunden sind. Das geladene CSS vonbar.cssverhält sich anders, weil der ID-Schlüssel innerhalb vontok.cssCSS-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
--
Sprachstörung, Verpeilter, Begriffs-Verwechseler-
@@MB
Ein praktische Lösung. Ich möchte das mehrere CSS-Dateien (z.B.
qux.css,tok.cssetc.)foo.css, in eine andere CSS-Dateien importieren (hierbar.css), um dann mit den importierten CSS-Dateien in dieser CSS-Dateibar.cssarbeiten 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
@importist 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.🖖 Живіть довго і процвітайте
--
Ad astra per aspera-
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-foogemacht habe.Die Verwendung von
@importist 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
--
Sprachstörung, Verpeilter, Begriffs-Verwechseler
-
-
-
-
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-Dateifoo.cssis geladen mit ihren ID--mb-id-foound ihre styles.fuz.css
Die CSS-Dateifuz.cssist auch geladen mit einer Abhängigkeit vonfoo.css.fuz.cssprüft ob die ID vonfoo.cssnämlich--mb-id-fooexistiert. Fals ja existiertfoo.cssundfuz.cssstellt ihre styles zur Verfügung.bar.css
Die CSS-Dateibar.cssist nicht geladen mit ihrer ID--mb-id-barund ihren styles.buz.css
Die geladene CSS-Dateibuz.cssist abhängig vonbar.css. Sie prüft ob die ID vonbar.cssnämlich--mb-id-barexistiert. Dem ist nicht so und so existiertbar.cssauch nicht undbuz.cssstellt ihre styles auch nicht zur Verfügung.foo-bar.css
Genausowenig die geladene CSS-Dateifoo-bar.cssdie beide IDs--mb-id-foound--mb-id-barprü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@supportseine definierte CSS-Variable prüfen kann, nur Features.
Dennoch habe ich@supportin 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
--
Sprachstörung, Verpeilter, Begriffs-Verwechseler-
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
--
sumpsi - posui - obstruxi-
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
--
Sprachstörung, Verpeilter, Begriffs-Verwechseler-
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
--
sumpsi - posui - obstruxi
-
-
-
-
moin,
Durch das mir empfohlene
@container style()klappts einwandfrei 👍…Ausschnitt:
mb-foo.css,mb-bar.css,mb-tok.cssundmb-access.csssind geladen und im Head-Kontainer enthalten. Aber nichtmb-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-
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
--
sumpsi - posui - obstruxi-
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
--
Sprachstörung, Verpeilter, Begriffs-Verwechseler
-
-