Zugriff auf Teile eines Attributwerts möglich?

[MudGuard]

Hi,

für eine gegebene und für mich nicht änderbare Seite möchte ich im userContent.css des Browsers etwas einbauen.

In der Seite gibt es code-Elemente mit class-Attribut. Sowas:

<code class="block language-html">

mit

<style>
code { position:relative; }

code::after {
	position:absolute;
	bottom:0em;
	right:0em;
	opacity: 0.5;
	content: attr(class);
	background-color: silver;
	color: black;
}
</style>

bekomme ich rechts unten im code-Element den gesamten class-Attributwert angezeigt.

Ich will aber eigentlich nur das haben, was sich in der language-xxx-Klasse nach language- findet, hier also "html".

Kann man das mit CSS allein hinbekommen?

Ich könnte für jede Sprache eine eigene Regel bauen:

code.language-html::after {
    content: 'html';
}
code.language-css:after {
    content: 'css';
}
[...]

Aber das ist halt doof, weil ich dafür die Liste der Sprachen kennen müßte und bei Erweiterungen der Liste wieder hinlangen müßte.

Schöner wäre es, wenn ich die Sprache aus dem class-Attribut extrahieren könnte.

Gibt's da was? Könnte man da was mit calc machen? Oder sonst irgendwie?

cu,
Andreas a/k/a MudGuard

[dedlfix]

Tach!

für eine gegebene und für mich nicht änderbare Seite möchte ich im userContent.css des Browsers etwas einbauen.

Kann man das mit CSS allein hinbekommen?

Kannst du Extensions installieren wie den GreaseMonkey, mit denen du ähnlich der userContent.css eigenes Javascript auf fremde Seite loslassen kannst? Was sich mit CSS nicht lösen lässt, mache ich damit.

dedlfix.

[MudGuard]

Hi,

Kannst du Extensions installieren wie den GreaseMonkey, mit denen du ähnlich der userContent.css eigenes Javascript auf fremde Seite loslassen kannst? Was sich mit CSS nicht lösen lässt, mache ich damit.

Tampermonkey wär kein Thema - ich wollte aber wissen, ob es eine CSS-only-Lösung gibt.

Evtl. gelingt es mir ja auch, die Betreiber der Seite dazu zu bringen, die Sprache nochmal in einem extra (data-language o.ä.) Attribut zu setzen.

cu,
Andreas a/k/a MudGuard

[dedlfix]

Tach!

Tampermonkey wär kein Thema - ich wollte aber wissen, ob es eine CSS-only-Lösung gibt.

Ich bin kein Fan von Lösungen, die clever aussehen, bei denen aber nicht so einfach zu erkennen ist, was sie tun und/oder warum sie das auf ihre Weise tun. Besonders dann nicht, wenn sie mit der heißen Nadel gestrickt sind und bei der nächsten kleinen Änderung kaputtgehen. Dinge aus dem Sichtfeld zu schieben empfinde ich ungefähr genauso clever wie lediglich einen Deckel auf den Mülleimer zu legen. Man wird nach einer Weile riechen, wie gut die Idee gewesen ist.

dedlfix.

[marctrix]

Hej dedlfix,

Ich bin kein Fan von Lösungen, die clever aussehen, bei denen aber nicht so einfach zu erkennen ist, was sie tun und/oder warum sie das auf ihre Weise tun. Besonders dann nicht, wenn sie mit der heißen Nadel gestrickt sind und bei der nächsten kleinen Änderung kaputtgehen. Dinge aus dem Sichtfeld zu schieben empfinde ich ungefähr genauso clever wie lediglich einen Deckel auf den Mülleimer zu legen. Man wird nach einer Weile riechen, wie gut die Idee gewesen ist.

Immer wenn ich sehe, wie ein Strauß den Kopf in den Sand steckt, frage ich mich, ob ausschließlich Fische anfangen vom Kopf zu stinken…

Marc

[dedlfix]

Tach!

Ich bin kein Fan von Lösungen, die clever aussehen, bei denen aber nicht so einfach zu erkennen ist, was sie tun und/oder warum sie das auf ihre Weise tun. Besonders dann nicht, wenn sie mit der heißen Nadel gestrickt sind und bei der nächsten kleinen Änderung kaputtgehen. Dinge aus dem Sichtfeld zu schieben empfinde ich ungefähr genauso clever wie lediglich einen Deckel auf den Mülleimer zu legen. Man wird nach einer Weile riechen, wie gut die Idee gewesen ist.

Immer wenn ich sehe, wie ein Strauß den Kopf in den Sand steckt, frage ich mich, ob ausschließlich Fische anfangen vom Kopf zu stinken…

Versteh ich nicht, kann ich nicht einordnen. Was möchtest du eigentlich aussagen?

dedlfix.

[marctrix]

Hej dedlfix,

Ich bin kein Fan von Lösungen, die clever aussehen, bei denen aber nicht so einfach zu erkennen ist, was sie tun und/oder warum sie das auf ihre Weise tun. Besonders dann nicht, wenn sie mit der heißen Nadel gestrickt sind und bei der nächsten kleinen Änderung kaputtgehen. Dinge aus dem Sichtfeld zu schieben empfinde ich ungefähr genauso clever wie lediglich einen Deckel auf den Mülleimer zu legen. Man wird nach einer Weile riechen, wie gut die Idee gewesen ist.

Immer wenn ich sehe, wie ein Strauß den Kopf in den Sand steckt, frage ich mich, ob ausschließlich Fische anfangen vom Kopf zu stinken…

Versteh ich nicht, kann ich nicht einordnen. Was möchtest du eigentlich aussagen?

Leg ich mich aus, so leg ich mich herein; ich kann nicht selbst mein Interprete sein. Friedrich Nietzsche

Marc

[Gunnar Bittersmann]

@@MudGuard

In der Seite gibt es code-Elemente mit class-Attribut. Sowas:

<code class="block language-html">

Die Dinger sind hoffentlich immer gleich aufgebaut und nicht gelegentlich auch mal in anderer Reihenfolge <code class="language-html block"> oder mit unterschiedlich viel Whitespace innerhalb des Attributwerts? Dann hättest du schlechte Karten.

Wenn es darum geht, block language- (die ersten 15 Zeichen) auszublenden: Deren Breite kennst du ja; bei (hier offenbar verwendeter) dicktengleicher Schrift: 15ch. Ansonsten wärst du hier mit einer für dich passenden magic number gut dran; das muss ja in dem Fall nicht allgemein passen, sondern nur auf deinem System.

text-indent: -15ch; overflow: hidden fürs Pseudoelement und call it a day.

LLAP 🖖

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Die Dinger sind hoffentlich immer gleich aufgebaut und nicht gelegentlich auch mal in anderer Reihenfolge <code class="language-html block"> oder mit unterschiedlich viel Whitespace innerhalb des Attributwerts? Dann hättest du schlechte Karten.

Ach was!

code[class^="block language-"]::after
{
	text-indent: -15ch;
	overflow: hidden;	
}

code[class^="language-"][class$=" block"]::after
{
	text-indent: -9ch;
	overflow: hidden;
	right: -6ch;
}

Außer diesen beiden Klassen haben die Dinger nicht noch andere (sowas wie good und bad bei den hiesigen Codeblöcken)?

LLAP 🖖

[MudGuard]

Hi,

Die Dinger sind hoffentlich immer gleich aufgebaut und nicht gelegentlich auch mal in anderer Reihenfolge

ich glaub, das wär schon der Fall.

code[class^="block language-"]::after
{
	text-indent: -15ch;
	overflow: hidden;	
}

code[class^="language-"][class$=" block"]::after
{
	text-indent: -9ch;
	overflow: hidden;
	right: -6ch;
}

interessanter Ansatz.

Außer diesen beiden Klassen haben die Dinger nicht noch andere (sowas wie good und bad bei den hiesigen Codeblöcken)?

doch, stimmt. Solche Klassen good und bad gibt's. Daran hab ich nicht gedacht.

cu,
Andreas a/k/a MudGuard

[Martl]

Hallo MudGuard,

Gedankenspiel, ungetestet:

<code class="block language-html">

Zugriff mit [class^='block language-']:after und den resultierenden Ausgabeteil block language- in geeigneter Weise soweit verstecken, daß nur noch der Sprachteil - im Beispiel also "html" - sichtbar ist.

Grüße, Martl

[Gunnar Bittersmann]

@@MudGuard

Ich könnte für jede Sprache eine eigene Regel bauen:

code.language-html::after {
    content: 'html';
}
code.language-css:after {
    content: 'css';
}
[...]

Aber das ist halt doof, weil ich dafür die Liste der Sprachen kennen müßte und bei Erweiterungen der Liste wieder hinlangen müßte.

Ein CSS-Präprozessor würde zweiteres vereinfachen. Bspw. Sass (gemeistert):

$languages: (html, css, php);

@each $language in $languages
{
  code.language-#{$language}::after
  {
    content: quote($language);
  }
}

Bliebe aber immer noch ersteres: die Liste zu pflegen.

LLAP 🖖

PS: Kaputte Syntax-Highlighter sind kaputt.