Wie mit 'symbols:' innerhalb von @counter-style SVGs einbinden

[MB]

moin,

Meine Absicht:
Ich möchte über dynamisch nummerierte CSS-Elemente durch @counter-style jeweils ein SVG einbinden. Ein Beispiel aus einem Beitrag Wie mit CSS einen teil statisch, verschachtelter DIV-Struktur ansprechen? - Erweiterte Frage (mit anderen Icons) habe ich aufgegriffen und angepasst.

Beispiel:

@counter-style counterStyle {
	system: fixed;
	symbols: url( 'data:image/svg+xml;charset=UTF-8,<svg …>…</svg>' url( '…' ) … );
}

Mein Problem:
In mein Beispiel lässt sich keinerlei SVG mit symbols-Property darstellen 😕. Obwohl es auf W3.org im Artikel css-counter-styles-3 alphabetic-system möglich sein ist…

@counter-style go
 {
  system: alphabetic;
  symbols: url(white.svg) url(black.svg);
  suffix: " ";
}

…bei mir auf jeden Fall nicht 😕.

Neben Bemerkung:
Die SVGs in der url()-Value an sich kann man nicht ändern (habe ich gelesen und ausprobiert), nur über CSS. Fals es diesbezüglich in Kontext meiner Frage eine Lösung gibt, habe ich sie nicht gefunden 😕.
Ich habe die Skalierung und Farbe der jeweiligen SVG Icons mit mask und background-image innerhalb :after leider statisch nicht dynamisch gelöst. Allerdings kann ich dadurch mit diesem Pseudo-Element :after nicht mehr weiter arbeiten. Die dynamische Numerierung habe ich dann mit :before gelöst 😕.

lgmb

[Gunnar Bittersmann]

@@MB

In mein Beispiel

Welches man sich wo ansehen kann?

🖖 Живіть довго і процвітайте

PS: Warum taggst du dein Posting mit „Technik“, wenn wir nicht über die Dampfmaschin o.ä. reden?

[MB]

moin,

In mein Beispiel

Welches man sich wo ansehen kann?

Beispiel:

@counter-style counterStyle {
	system: fixed;
	symbols: url( 'data:image/svg+xml;charset=UTF-8,<svg …>…</svg>' url( '…' ) … );
}

Ich hätte da noch schreiben sollen "Oben in meinem Beispiel".

PS: Warum taggst du dein Posting mit „Technik“, wenn wir nicht über die Dampfmaschin o.ä. reden?

Ich habe Technik getaggt weil CSS eine Technik ist zur Darstellung von HTML genauso wie HTML-Technik, Druck-Technik, Mess-Technik usw. Soll ich stattdessen Programmiertechnik nehmen, damit es deutlicher wird? Wenn ja dann mache ich das gern 👍!

lgmb

[Matthias Scharwies]

guten Abend,

PS: Warum taggst du dein Posting mit „Technik“, wenn wir nicht über die Dampfmaschin o.ä. reden?

Ich habe Technik getaggt weil CSS eine Technik ist zur Darstellung von HTML genauso wie HTML-Technik, Druck-Technik, Mess-Technik usw. Soll ich stattdessen Programmiertechnik nehmen, damit es deutlicher wird? Wenn ja dann mache ich das gern 👍!

mit CSS?

Herzliche Grüße

Matthias Scharwies

--

[Gunnar Bittersmann]

@@MB

In mein Beispiel

Welches man sich wo ansehen kann?

Ich hätte da noch schreiben sollen "Oben in meinem Beispiel".

Da ist auch oben kein Beispiel.

Ich hätte da noch schreiben sollen „Online-Beispiel“.

PS: Warum taggst du dein Posting mit „Technik“, wenn wir nicht über die Dampfmaschin o.ä. reden?

Ich habe Technik getaggt weil CSS eine Technik ist zur Darstellung von HTML genauso wie HTML-Technik, Druck-Technik, Mess-Technik usw. Soll ich stattdessen Programmiertechnik nehmen, damit es deutlicher wird?

Nein, „CSS“ und „SVG“ ist deutlich genug.

🖖 Живіть довго і процвітайте

[MB]

moin,

Da ist auch oben kein Beispiel.

Ich nehme an das du…

@counter-style counterStyle {
	system: fixed;
	symbols: url( 'data:image/svg+xml;charset=UTF-8,<svg …>…</svg>' url( '…' ) … );
}

…nicht als Beispiel wertes.

Ich hätte da noch schreiben sollen Online-Beispiel.

Ok habe ich ja gemacht…

Obwohl es auf W3.org im Artikel css-counter-styles-3 alphabetic-system möglich sein ist…

@counter-style go
 {
  system: alphabetic;
  symbols: url(white.svg) url(black.svg);
  suffix: " ";
}

…ich hoffe es ist besser aufschlussreicher!

Nachtrag: symbols()

Nein, „CSS“ und „SVG“ ist deutlich genug.

Gut, dann streiche ich Technik. Danke.

lgmb

[Robert B.]

Moin,

PS: Warum taggst du dein Posting mit „Technik“, wenn wir nicht über die Dampfmaschin o.ä. reden?

„Nun, wat is a Dampfmaschin? Da stellen wa uns ma janz dumm: Da kommt vorne Dampf rein und hinten wieder raus.“

Viele Grüße
Robert

[Rolf B]

Hallo MB,

das stünde gern bei uns im Wiki... steht es aber noch nicht.

Was Du willst, ist ein Symbols-Deskriptor mit Image-Werten.

Guckst Du hier oder hier - das fehlt in Chromia und Fuchsia noch.

MDN meint, Safari 17 könnte es. Caniuse meint, Safari hätte partiellen Support, aber ohne zu sagen, warum.

Angeblich könnte es der UC Browser auch. Ich glaub's aber nicht, denn UC basiert auf Blink (a.k.a. Chromium) und wieso sollte ein China-Klon, dem eh die User weglaufen (bzw. weggelaufen werden, seit Indien ihn verboten hat) etwas können, was das Hauptprojekt nicht kann?!

Anyroad - tl;dr: geht noch nicht.

Rolf

[Robert B.]

Moin,

@counter-style counterStyle {
	system: fixed;
	symbols: url( 'data:image/svg+xml;charset=UTF-8,<svg …>…</svg>' url( '…' ) … );
}

Meines Wissens muss das SVG innerhalb des url auch entsprechend maskiert sein, also %3Csvg…%3E…%3C%2Fsvg%3E.

Neben Bemerkung:
Die SVGs in der url()-Value an sich kann man nicht ändern (habe ich gelesen und ausprobiert), nur über CSS. Fals es diesbezüglich in Kontext meiner Frage eine Lösung gibt, habe ich sie nicht gefunden 😕.

Was heißt denn in dem Kontext ändern?

Viele Grüße
Robert

[MB]

moin,

Meines Wissens muss das SVG innerhalb des url auch entsprechend maskiert sein, also %3Csvg…%3E…%3C%2Fsvg%3E.

Das klappt auch ohne 😀 👍. Man muss nur escapen. Natürlich weis ich nicht, ob es bei anderen aktuellen Browsern auch klappt.

Neben Bemerkung:
Die SVGs in der url()-Value an sich kann man nicht ändern (habe ich gelesen und ausprobiert), nur über CSS. Fals es diesbezüglich in Kontext meiner Frage eine Lösung gibt, habe ich sie nicht gefunden 😕.

Was heißt denn in dem Kontext ändern?

Als Laihe gesprochen, nehme ich an, dass all das, was durch url() importiert wurde, unveränderbar ist. So gesehen, ist es nicht möglich, Die importierten SVGs weiter zu stylen (habe ich versucht).
Innerhalb von @counter-style sind ja mit der symbols-Property über diese url()s SVGs enthalten - wenn es funktioniert.
Deshalb drängte sich mir die Frage auf, ob in diesem Zusammenhang von symbols und url()s es eine möglichkeit gäbe, über url importierte SVGs doch zu stylen.
Sry, wenn ich mich nicht eloquent genug ausgedrückt habe 😕.

lgmb

[Rolf B]

Hallo MB,

Als Laihe gesprochen, nehme ich an, dass all das, was durch url() importiert wurde, unveränderbar ist. So gesehen, ist es nicht möglich, Die importierten SVGs weiter zu stylen (habe ich versucht).

Da hast Du recht. Auch als Laie. Ein Inline-Image über url(#id) anzusprechen ist nach allem, was man so findet, nicht möglich. Und das Image-Dokument, das den Hintergrund eines Elements bildet, kann man nicht per CSS erreichen.

Um ein Inline-Image zum Hintergrund zu machen, gibt es zwei Kandidatentechniken. Eine ist die Spezifikation für "Media Fragment URL", aber diese Technik ist wohl vor allem dazu gedacht, aus einem Video eine bestimmte Zeitstrecke zu laden oder aus einem Bild einen bestimmten Ausschnitt zu wählen. Und nicht, um aus dem DOM ein Bild mit einer bestimmten ID herauszulutschen.

Die andere Technik ist CSS Images Level 4 mit der element()-Funktion. Die hat aber nur der Firefox implementiert, und zwar als -moz-element(). Damit verwendest Du tatsächlich ein HTML Fragment als Hintergrundbild, und zwar live. Maggelst Du am referenzierten Element, wird der Hintergrund sofort aktualisiert. Das geht sogar so weit, dass Du da ein input-Element reinsetzen kannst und während du tippst, wird der Hintergrund aktualisiert. Damit kann man lustige Dinge tun

Rolf

[Rolf B]

Hallo MB,

Das klappt auch ohne 😀 👍. Man muss nur escapen.

Man kommt mit den meisten Zeichen durch. Dringend escaped werden muss der Zeilenumbruch, das # Zeichen und das / in </style>.

Rolf

[Robert B.]

Moin MB,

Meines Wissens muss das SVG innerhalb des url auch entsprechend maskiert sein, also %3Csvg…%3E…%3C%2Fsvg%3E.

Das klappt auch ohne 😀 👍. Man muss nur escapen.

Was ist jetzt der Unterschied zwischen maskieren und escapen? Aus dem URL-Kontext kommst du ja nicht heraus.

Als Laihe gesprochen, nehme ich an, dass all das, was durch url() importiert wurde, unveränderbar ist. So gesehen, ist es nicht möglich, Die importierten SVGs weiter zu stylen (habe ich versucht).

Das ist korrekt. Auf deine Weise eingebundene SVG haben gewisse Einschränkungen.

Innerhalb von @counter-style sind ja mit der symbols-Property über diese url()s SVGs enthalten - wenn es funktioniert.
Deshalb drängte sich mir die Frage auf, ob in diesem Zusammenhang von symbols und url()s es eine möglichkeit gäbe, über url importierte SVGs doch zu stylen.
Sry, wenn ich mich nicht eloquent genug ausgedrückt habe 😕.

Das glaube ich zwar nicht, aber du könntest schauen, ob eine Icon-Font dir hier weiterhilft.

Viele Grüße
Robert

[MB]

moin,

Was ist jetzt der Unterschied zwischen maskieren und escapen? Aus dem URL-Kontext kommst du ja nicht heraus.

Sry ich meine damit \', \" usw.!

content: "\"Hallo, Fremder! Wie geht's\" - Ein Eremit"

oder

content: '"Hallo, Fremder! Wie geht\'s" - Ein Eremit'

< und > brauch man in meinem Fall nicht zu machen.

[…], dass all das, was durch url() importiert wurde, unveränderbar ist. […]

Das ist korrekt. […]

👍

Deshalb drängte sich mir die Frage auf, ob […] über url importierte SVGs doch zu stylen. […]

Das glaube ich zwar nicht, aber du könntest schauen, ob eine Icon-Font dir hier weiterhilft.

Du meinst z.B. fontawesome.com ein SVG vorab zu stylen 🤨??? Wenn ich deine AWs richtig deute versteht sich, dann kann ich natürlich in der url() die SVGs vor dem Import nach belieben verändern. Aber das will ich ja nicht! Ich will ja ein url() importierte SVG in verschiedener Form z.B. größe und Farbe darstellen. Wie gesagt, fals ich dich richtig verstanden habe 😉.

symbols: url('…') url('…') … ); habe ich ausprobiert und geht leeeider nicht 😭. Wäre zuuu schön gewesen. Da hat @Gunnar Bittersmann ein extrem GUTE Lösung gefunden so das man ein bisschen Dynamik in meinen Code einbauten kann 😀👍!!! So muss ich halt die Icons und Nummerierung leider so es lösen 😕…

Auszug:

    /* ...comment headers */

    .mb-snippet-header {     
      
      & h1:nth-of-type(1),
      .HyperMD-header-1:nth-child(1 of .HyperMD-header-1) > .cm-header-1 {
        &::after {
          -webkit-mask-image: var( --mb-icon-name );
          mask-image: var( --mb-icon-name );
        }
        &::before {
          content: "";
        }
      }
    }

    /* 1. Description */
    & h2[data-heading="Description"],
    .HyperMD-header-2:nth-child(1 of .HyperMD-header-2) > .cm-header-2 {
      &::after {
        -webkit-mask-image: var( --mb-icon-description );
        mask-image: var( --mb-icon-description );
      }
      &::before {
        content: "1. ";
      }
    }
 
    /* 1.1. Overview */
    & h3[data-heading="Overview"],
    .HyperMD-header-3:nth-child(1 of .HyperMD-header-3) > .cm-header-3 {
      &::after {
        -webkit-mask-image: var( --mb-icon-overview );
        mask-image: var( --mb-icon-overview );
      }
      &::before {
        content: "1.1. ";
      }
    }
    /* Weitere Einträge 44 */

…seeehr statisch. Passt mir absolut nicht, aber was soll man in meinem Fall anders machen 🤷.

lgmb

[Robert B.]

Moin,

Was ist jetzt der Unterschied zwischen maskieren und escapen? Aus dem URL-Kontext kommst du ja nicht heraus.

Sry ich meine damit \', \" usw.!

content: "\"Hallo, Fremder! Wie geht's\" - Ein Eremit"

oder

content: '"Hallo, Fremder! Wie geht\'s" - Ein Eremit'

Du maskierst oder escapest damit die Anführungszeichen 😉

< und > brauch man in meinem Fall nicht zu machen.

Das kann gutgehen, muss es aber nicht. Ich bin ein Freund korrekter Kontextwechsel.

Deshalb drängte sich mir die Frage auf, ob […] über url importierte SVGs doch zu stylen. […]

Das glaube ich zwar nicht, aber du könntest schauen, ob eine Icon-Font dir hier weiterhilft.

Du meinst z.B. fontawesome.com ein SVG vorab zu stylen 🤨???

Nein, mein Vorschlag ist es, eine Icon-Font anstatt von SVGs zu verwenden. Der Counter ist doch letztlich auch nur eine Zahl in einer bestimmten Schriftart und diese Schriftart kannst du vorgeben. Für einen Counter braucht deine Schriftart auch gar nicht so viele Zeichen zu haben.

[…] in verschiedener Form z.B. größe und Farbe darstellen.

Das geht mit Schriftzeichen natürlich auch sehr komfortabel.

Viele Grüße
Robert

[MB]

moin,

Du maskierst oder escapest damit die Anführungszeichen 😉

🤣

< und > brauch man in meinem Fall nicht zu machen.

Das kann gutgehen, muss es aber nicht. Ich bin ein Freund korrekter Kontextwechsel.

ganz meine Meinung 👍👍👍! Nur in CSS kenn ich mich nicht sooo gut aus, daher meine Rumprobiererei bis was funzt. Dabei gehen gute Konzepte durch die Bastelarbeit baden 🤷.

Nein, mein Vorschlag ist es, eine Icon-Font anstatt von SVGs zu verwenden. […]

Verstehe. Jedoch verwendet die App nunmal SVGs und ich will sie aufgreifen um damit weiter zu arbeiten und nich noch eine weitere Third-Party Quelle heransziehen 🙄.

[…] in verschiedener Form z.B. größe und Farbe darstellen.

Das geht mit Schriftzeichen natürlich auch sehr komfortabel.

Klar.

lgmb

[Rolf B]

Hallo MB,

Nur in CSS kenn ich mich nicht sooo gut aus, daher meine Rumprobiererei bis was funzt.

Ja, und im konkreten Fall kennt sich auch der Browser nicht sooo gut mit CSS aus und implementiert die Spezifikation nur unvollständig.

    symbols: url(...);

steht nämlich durchaus in der Spec – wird aber von den Herstellern verschmäht.

Rolf

[MB]

moin,

[…] kennt sich auch der Browser nicht sooo gut mit CSS aus […]
[…]
steht nämlich durchaus in der Spec – wird aber von den Herstellern verschmäht.

😕 scheint mir so. Und wann wird z.B. der Pseudo-Selektor :has() und die url() in symbols innerhalb @counter-style vollständig implementiert? Weist du das zuuufälligerweise was 🙏???

lgmb

[Rolf B]

Hallo MB,

sorry, meine Glaskugel ist in Reparatur. Irgendwer hatte sie sandgestrahlt 😟

Rolf