Zwei Border

[Sophie]

Hallo,

ist es möglich zwei Border hintereinander zu vergeben? Ich möchte bestimmte Nachrichten mit verschiedenen Farben anhand

border-right: 5px solid #FF9800
border-right: 5px solid red

kennzeichnen.

[TS]

Hello,

Du kannst für ein Objekt mehrere CSS-Klassen vorbereiten, die dann wahlweise ausgewählt/zugewiesen werden können.

Du könntest auch über den Kontext (die jeweilig benachbarten Objekte) des betroffenen Objektes die Spezifikatoren für die "Spezialklassen" bzw. CSS-Angaben festlegen.

Steht z. B. ein <div> mit einer positiven Nachricht immer hinter einer speziellen Überschrift, und ein <div> mit einer negativen Nachricht hinter einer anderen, dann könntest Du den Style des <div> davon abhängig machen.

Was leistet dein System?

Liebe Grüße
Tom S.

[Auge]

Hallo

ist es möglich zwei Border hintereinander zu vergeben? Ich möchte bestimmte Nachrichten mit verschiedenen Farben anhand

border-right: 5px solid #FF9800
border-right: 5px solid red

Abgesehen vom zumindest in der ersten Zeile fehlenden Semikolon wird die erste regel durch die zweite Regel überschrieben. Also nein, so geht das nicht.

Wenn du unterschiedliche Nachrichten unterschiedlich formatieren willst, musst du sie auch unterscheidbar machen. Da es vermutlich jeweils mehrere Nachrichten gleichen Schemas geben kann, bietet sich hier die Klassifizierung der Nachrichten an. Anhand der Klassennamen kannst du die Formatierung vornehmen.

<article class="international">
 <h2>Weltfrieden!</h2>
 <p>Völlig überraschend ist heute morgen der Weltfrieden ausgebrochen. Am Amtssitz der UNO herrscht Ratlosigkeit.</p>
</article>
<article class="inland">
 <h2>Übler Wind</h2>
 <p>Ein Passant hat in der Buxtehuder Innenstadt mitten auf dem Bürgersteig laut vernehmlich gepfurzt. Zeugen waren zutiefst geschockt. Wegen der notwendigen psychologischen Betreuung der Zeugen wurde das landeseigene Kriseninterventionsteam alarmiert.</p>
</article>
<article class="inland">
 <h2>Deutsche Arbeitsplätze in Gefahr</h2>
 <p>Rüstungskonzerne protestieren gegen den Weltfrieden und fordern staatliche Unterstützung. Andernfalls müsse man über einen großflächigen Arbeitsplatzabbau nachdenken.</p>
</article>

article {
  width: 32em;
  padding: 0.5em;
  /* … */
}
.inland {
  border-right: 5px solid #FF9800;
}
.international {
  border-right: 5px solid red;
}

Tschö, Auge

[Gunnar Bittersmann]

@@Auge

Da es vermutlich jeweils mehrere Nachrichten gleichen Schemas geben kann, bietet sich hier die Klassifizierung der Nachrichten an. Anhand der Klassennamen kannst du die Formatierung vornehmen.

Das ja. Aber wie ich es verstanden habe, soll es auch Nachrichten deben können, die mehreren Klassen angehören können. In deinem Beispiel <article class="international inland"> ^[1]. Das soll das so visualisiert werden, dass beide vertikalen farbigen Linien nebeneinander dargestellt werden.

Da ließe sich mit Gradienten was machen. Ist aber nur praktikabel bei wenigen Klassen/Kombinationen.

Frage an Sophie: Wie viele Klassen sollen’s denn sein?

LLAP 🖖

---

1. Man könnte denken, international und inland würden einander ausschließen. OK, dann eben mit noch einer Klasse sport. ↩︎

[Auge]

Hallo

Man könnte denken, international und inland würden einander ausschließen. OK, dann eben mit noch einer Klasse sport.

So sieht die dazu passende Realität™️ aus.

Tschö, Auge

[TS]

Hello,

So sieht die dazu passende Realität™️ aus.

Gibt's eine Erklärung dazu, oder muss man sich eigene satirische oder sandinische Gedanken dazu machen?

Liebe Grüße
Tom S.

[Auge]

Hallo

So sieht die dazu passende Realität™️ aus.

Gibt's eine Erklärung dazu, oder muss man sich eigene satirische oder sandinische Gedanken dazu machen?

???

Du bist dem Link gefolgt?

Tschö, Auge

[TS]

Hello,

So sieht die dazu passende Realität™️ aus.

Gibt's eine Erklärung dazu, oder muss man sich eigene satirische oder sandinische Gedanken dazu machen? Du bist dem Link gefolgt?

Ja, aber ich oder mein Browser sind zu blöd dazu, erkennen zu können, was Du meinst. :-O

Liebe Grüße
Tom S.

[Tabellenkalk]

Hallo,

Ja, aber ich oder mein Browser sind zu blöd dazu, erkennen zu können, was Du meinst. :-O

Ich habe das folgendermaßen interpretiert: Weil Gunnar? international als gegenteilig zu Inland empfand, hat er noch die Kategorie Sport eingebracht. Und ausgerechnet dort fand sich ein Beispiel, wo dieses Gegentum aufgehoben ist.

Gruß
Kalk

[Tabellenkalk]

Hallo,

Und ausgerechnet dort

achnein, es geht um Fußball...

Gruß
Kalk

[TS]

Hello,

ach, Fußball ist bei mir auf der Sperrliste ;-P

Liebe Grüße
Tom S.

[Auge]

Hallo

Ja, aber ich oder mein Browser sind zu blöd dazu, erkennen zu können, was Du meinst. :-O

@TS Ach so.

Ich habe das folgendermaßen interpretiert: Weil Gunnar? international als gegenteilig zu Inland empfand, …

Nein, er verneint diese Gegenteiligkeit, die ich für mein Beispiel benutzt hatte (da die internationale Nachricht, dort die inländischen). Nicht, dass ich die hätte bewusst herbeiführen wollen.

… hat er noch die Kategorie Sport eingebracht. Und ausgerechnet dort fand sich ein Beispiel, wo dieses Gegentum aufgehoben ist.

Genauer, es fand sich ein (aktuelles) Beispiel, wo alle drei Klassifizierungen zutreffen. Inland und Sport, weil es um eine deutsche Fußballregionalliga geht, international, weil es ebenso um die chinesische U20-Nationalmannschaft im Fußball der Männer/Halbwüchsigen geht.

Tschö, Auge

[Sophie]

Hallo @Gunnar Bittersmann

Aber wie ich es verstanden habe, soll es auch Nachrichten deben können, die mehreren Klassen angehören können. In deinem Beispiel <article class="international inland"> [^1]. Das soll das so visualisiert werden, dass beide vertikalen farbigen Linien nebeneinander dargestellt werden.

genau, es kann für eine Nachricht mehrere Zuordnungen geben. Dient für mich zur besseren Übersicht wenn ich alle auf einer Seite ausgeben lasse

Frage an Sophie: Wie viele Klassen sollen’s denn sein?

Derzeit gehe ich von 2-3 aus. Sonst wird es auch zu unübersichtlich.

[Gunnar Bittersmann]

@@Sophie

genau, es kann für eine Nachricht mehrere Zuordnungen geben. Dient für mich zur besseren Übersicht wenn ich alle auf einer Seite ausgeben lasse

Bei (prinzipiell) beliebig vielen Zuordnungen ist es wohl ratsam, diese als Tags im Markup vorzusehen:

<article>
	<x-tag class="foo">foo</x-tag>
	<x-tag class="bar">bar</x-tag>
	<x-tag class="baz">baz</x-tag>
	<div>
		<h2>heading</h2>
		<p>article copy</p>
	</div>
</article>

und diese als Streifen darzustellen.

LLAP 🖖

[Sophie]

Hallo @Gunnar Bittersmann

also mein Google Chrome zeigt mir leider keine Streifen an. Ist das <x-tag> überhaupt ein gültiges HTML?

[Gunnar Bittersmann]

@@Sophie

also mein Google Chrome zeigt mir leider keine Streifen an.

Hm, meiner tut’s.

Ist das <x-tag> überhaupt ein gültiges HTML?

Yep. ☞ Custom elements

LLAP 🖖

[Sophie]

Hallo @Gunnar Bittersmann

Hm, meiner tut’s.

meiner unter Windows 10 leider nicht

[Rolf b]

Dieser Screenshot ist noch kein Beleg. Er zeigt gefühlt die linke Hälfte deines Bildschirms. Die Streifen sind - wenn vorhanden - ganz rechts am Bildschirmrand.

Du musst entweder den Kopf etwas drehen oder den article per width in der Breite beschränken :)

Rolf

[Sophie]

Hallo @Rolf b

Oh mein Gott, du hast recht, ich muss mein Kopf sehr weite nach rechts drehen um die Streifen zu sehen ;) Jetzt sehe ich sie auch.

[MrMurphy1]

Hallo

Das kannst du mit linear-gradient erreichen. Die Werte musst du natürlich noch anpassen, aber als Beispiel:

border-left: 5px solid #FF9800;
background-image: linear-gradient(90deg, red 0px, red 5px, transparent 5px);

Dadurch, dass red und transparent jeweils mit 5px angegeben werden ergibt sich ein harter Übergang.

Gruss

MrMurphy

[Gunnar Bittersmann]

@@MrMurphy1

Die Werte musst du natürlich noch anpassen

Besonders den Winkel.

border-left: 5px solid #FF9800;
background-image: linear-gradient(90deg, red 0px, red 5px, transparent 5px);

Du meinst -90deg. Besser – weil besser lesbar - ist aber linear-gradient(to left, …)

Die Lösung taugt aber nur für 2 Klassen.

LLAP 🖖

[TS]

Hello
@Gunnar Bittersmann, @mrmurphy,

könntet Ihr beiden dazu bitte mal ein Beispiel geben, damit auch Unbedarfte (so wie z. B. ich) noch mitkommen können)?

Danke!

Liebe Grüße
Tom S.

[Gunnar Bittersmann]

@@TS

könntet Ihr beiden dazu bitte mal ein Beispiel geben, damit auch Unbedarfte (so wie z. B. ich) noch mitkommen können)?

https://codepen.io/gunnarbittersmann/pen/JJJOqK

LLAP 🖖

[TS]

Hello,

Danke. Du bleibst mein Held ;-P

Liebe Grüße
Tom S.

[Sophie]

@Gunnar Bittersmann

vielen Dank für dein Beispiel.

[MrMurphy1]

Hallo

Ich habe auf die Frage von Sophie geantwortet, nicht auf das was Andere in die Frage hineininterpretieren. In der Frage geht es nur um Ränder mit zwei Farben.

Und ich habe ein ausdrücklich als Beispiel benanntes Beispiel erstellt. Dabei habe ich die "Ränder" links gesetzt. Damit ist mein Beispiel korrekt. Ich habe auch darauf hingewiesen dass die Werte noch angepasst werden müssen. Also auch, wo die Ränder erscheinen sollen.

Ein praktisches Beispiel

Beispiel für einen zweifarbigen "Rand"

Gruss

MrMurphy

[Gunnar Bittersmann]

@@MrMurphy1

Ich habe auf die Frage von Sophie geantwortet, nicht auf das was Andere in die Frage hineininterpretieren. In der Frage geht es nur um Ränder mit zwei Farben.

Von Beschränkung der Nachrichten auf zwei Klassen ist nichts in Sophies Posting zu lesen.

Und ich habe ein ausdrücklich als Beispiel benanntes Beispiel erstellt. Dabei habe ich die "Ränder" links gesetzt.

Dass du border-right in border-left abgewandelt und damit unnötig verwirrt hast, war mir entgangen.

Ein praktisches Beispiel

Beispiel für einen zweifarbigen "Rand"

Eher nicht:

LLAP 🖖

[Sophie]

Hallo @Gunnar Bittersmann

Eher nicht:

also ich sehe zwei Border 😉

[MrMurphy1]

Hallo

Eher nicht:

Doch. Irgendwelche exotischen oder veralteten Browser finden sich immer um unsachliche Falschangaben zu erstellen. Welchen Browser in welcher Version unter welchem Betriebssystem verwendest du denn überhaupt?

Can I use - css-gradients

Gruss

MrMurphy

[Gunnar Bittersmann]

@@MrMurphy1

Eher nicht:

Doch. Irgendwelche exotischen oder veralteten Browser finden sich immer um unsachliche Falschangaben zu erstellen. Welchen Browser in welcher Version unter welchem Betriebssystem verwendest du denn überhaupt?

Firefox. Und wenn ich sage Firefox, dann meine ich natürlich den aktuellen (54.0). Unter macOS (was sonst? 😉).

Das ist nun weder ein „exotischer“ noch ein „veralteter“ Browser.

Aber wohl an dieser Steller ein fehlerhafter. Es setzt background-origin nicht richtig um: egal was angegeben wird (bei keiner Angabe sollte der Defaultwert padding-box gelten), Firefox 54.0 verhält sich bei Gradienten so als gelte border-box.

Bei Bildern url() zeigt er dieses falsche Verhalten nicht. Im 55er (DeveloperEdition) ist der Fehler gefixt.

LLAP 🖖

[Sophie]

Hallo @MrMurphy1

auch dir vielen lieben Dank für dein Beispiel. Was ist wenn ich bei einer Nachricht auch mal drei Rahmen benötige? Ich gehe davon aus, dass es mehr als drei nie geben wird, da es sonst zu unübersichtlich wird.

[Matthias Apsel]

Hallo Sophie,

Was ist wenn ich bei einer Nachricht auch mal drei Rahmen benötige?

https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Hintergrundfarben_und_-bilder/linear-gradient()

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

Nicht praktikabel. (Oder willst du für alle Kombinationen von bis zu 3 Klassen aus Kategorie 1, Kategorie 2, Kategorie 3, …, Kategorie n jeweils einen Gradienten im Stylesheet festlegen?)

LLAP 🖖

[Matthias Apsel]

Hallo Gunnar Bittersmann,

Nicht praktikabel.

So richtig nicht.

(Oder willst du für alle Kombinationen von bis zu 3 Klassen aus Kategorie 1, Kategorie 2, Kategorie 3, …, Kategorie n jeweils einen Gradienten im Stylesheet festlegen?)

Wird man wohl müssen.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

Nicht praktikabel.

So richtig nicht.

Das sind ja bei 7 Kategorien auch nur läppische 63 Kombinationen. Bei 10 Kategorien wäre wir schon bei 175. (Wenn ich mich nicht verrechnet habe.)

(Oder willst du für alle Kombinationen von bis zu 3 Klassen aus Kategorie 1, Kategorie 2, Kategorie 3, …, Kategorie n jeweils einen Gradienten im Stylesheet festlegen?)

Wird man wohl müssen.

Nein.

LLAP 🖖

[JürgenB]

Hallo,

ein Vorschlag für „beliebig viele“ Kategorien:

• Jeder Container erhält in Abhängigkeit seiner Kategorie eine eigene Farbe für den rechten Rand.

• Die Container werden unterschiedlich breit angelegt (padding?), so dass die Rahmen nebeneinander liegen.

Mit einer Lücke muss man allerdings leben.

Vielleicht eine Option.

Gruß
Jürgen

[Gunnar Bittersmann]

@@JürgenB

ein Vorschlag für „beliebig viele“ Kategorien:

• Jeder Container erhält in Abhängigkeit seiner Kategorie eine eigene Farbe für den rechten Rand.

Es gibt nicht „seiner Kategorie“, sondern: „seiner Kategorien“.

• Die Container werden unterschiedlich breit angelegt (padding?)

Das ist jetzt ein Treppenwitz, oder? 😆

LLAP 🖖

[TS]

Hello,

Es gibt nicht „seiner Kategorie“, sondern: „seiner Kategorien“.

Verstehe ich nicht. Erklär das bitte.

Liebe Grüße
Tom S.

[Gunnar Bittersmann]

@@TS

Es gibt nicht „seiner Kategorie“, sondern: „seiner Kategorien“.

Verstehe ich nicht. Erklär das bitte.

Siehe Auge. No pun intended.

LLAP 🖖

[TS]

Hello,

Es gibt nicht „seiner Kategorie“, sondern: „seiner Kategorien“.

Verstehe ich nicht. Erklär das bitte.

Siehe Auge. No pun intended.

Es tut mir leid, ich kann mit den fremdsprachlichen Hinweisen nicht immer gleich etwas anfangen und angesichts der Kürze der Antworten, würde ich mir einen deutschen Hinweis wünschen.

Der kann dann gerne fremdsprachlich untermauert werden. Ich bin immer bereit, mich mit anderen Sprachen und den dazugehörigen Kulturen und besonders den dazugehörigen Menschen zu beschäftigen. Ich möchte nur gerne vorher in meiner Muttersprache verstanden haben, worum es eigentlich geht!

Liebe Grüße
Tom S.

[Auge]

Hallo

nicht „seiner Kategorie“, sondern: „seiner Kategorien“.

Verstehe ich nicht. Erklär das bitte.

Es tut mir leid, ich kann mit den fremdsprachlichen Hinweisen nicht immer gleich etwas anfangen und angesichts der Kürze der Antworten, würde ich mir einen deutschen Hinweis wünschen.

Ist dir das Wort „Kategorie“ und sein Plural … ähh, seine Mehrzahl „Kategorien“ noch nicht lange genug in der deutschen Sprache vorhanden?

Ich möchte nur gerne vorher in meiner Muttersprache verstanden haben, worum es eigentlich geht!

Es geht nach wie vor darum, dass ein Artikel in mehreren Kategorien beheimatet ist, also auch Mitglied mehrerer Klassen sein kann.

Tschö, Auge

[TS]

Hello,

nee, entschuldige bitte. Da ist etwas verrutscht im Thread.
Warum, weiß ich nicht.

Allerdings springt meine Darstellung schon bei kleinsten Fehltastendrücken so wild in der Gegend herum, dass ich manchmal nicht mehr weiß, warum und wo ich dann lande...

Ich habe die "Accept-Keys" jetzt noch nicht näher untersucht.

Aber ich finde das zugehörige Posting jetzt auch nicht.

Liebe Grüße
Tom S.

[Christian Kruse]

Hallo TS,

Allerdings springt meine Darstellung schon bei kleinsten Fehltastendrücken so wild in der Gegend herum, dass ich manchmal nicht mehr weiß, warum und wo ich dann lande...

auf Tasten reagiere ich gar nicht. Prüf lieber deinen Browser 😉

LG,
CK

[JürgenB]

Hallo

auf Tasten reagiere ich gar nicht. Prüf lieber deinen Browser 😉

du nicht, aber Toms Rechner 😉

Gruß
Jürgen

[JürgenB]

Hallo

• Jeder Container erhält in Abhängigkeit seiner Kategorie eine eigene Farbe für den rechten Rand.

Es gibt nicht „seiner Kategorie“, sondern: „seiner Kategorien“.

ich glaube, ich hatte da einen Denkfehler 😟. Ein ☕️ zwischen 🤔 und ✉️ wäre hier ganz 👍 gewesen.

• Die Container werden unterschiedlich breit angelegt (padding?)

Das ist jetzt ein Treppenwitz, oder? 😆

vor allem wg dem Denkfehler.

Gruß
Jürgen

[Rolf b]

Also da finde ich Gunnars Lösung besser. Sie hat den Vorteil, dass die Streifen sich ordentlich rechtsbündig an den Rand stapeln und keine russischen Container-Püppchen erzeugen. Ich hatte diese Idee auch schon, war aber unsicher, ob das im Sinne der Separation Of Concerns ist und habe sie nicht weiter verfolgt. Eine stapelfähige reine CSS Lösung habe ich nicht gefunden.

In der praktischen Umsetzung kann man (bei meinem Probieren in Chrome zumindest) auf Gunnars float:right verzichten, das macht schon der display:flex richtig, und als Fallback für unFlexible Browser reicht der float nicht (hat zumindest bei mir nicht funktioniert). Mit float und variabler Höhe habe ich es nicht hinbekommen.

Ob man nun Class-Namen an das article Element schraubt oder pro Streifen eine x-tag Zeile einfügt, sollte relativ egal sein. Wenn man es unbedingt mit Klassen im article steuern will oder muss, na gut, dann hängt man halt pro Streifenfarbe ein x-tag konstant in das Artikel-Template, styled es auf display:none oder width:0 und aktiviert es mit article.inland x-tag als CSS Selektor. Ist nur eine Menge Overhead...

Rolf

[Gunnar Bittersmann]

@@Rolf b

In der praktischen Umsetzung kann man (bei meinem Probieren in Chrome zumindest) auf Gunnars float:right verzichten

Ist jetzt weg. Das sollte eigentlich gar nicht dagewesen sein; war ein Überbleibsel meines ersten Versuchs.

Mit Flexbox braucht man wohl dieses div um den Inhalt herum, meh. Ich wollte eine Lösung finden, die ohne das auskommt.

LLAP 🖖

[JürgenB]

Hallo

Also da finde ich Gunnars Lösung besser.

ich inzwischen auch.

Gruß
Jürgen

[Gunnar Bittersmann]

@@Matthias Apsel

Nicht praktikabel.

So richtig nicht.

(Oder willst du für alle Kombinationen von bis zu 3 Klassen aus Kategorie 1, Kategorie 2, Kategorie 3, …, Kategorie n jeweils einen Gradienten im Stylesheet festlegen?)

Wird man wohl müssen.

Na wenn man denn muss … dann halt mit JavaScript

LLAP 🖖

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Na wenn man denn muss … dann halt mit JavaScript

Hatte ich schon erwähnt, dass, wann immer man JavaScript zum Stylen verwendet, dies auf mangelnde CSS-Kenntnisse zurückzuführen ist?

Bei der morgentlichen Lektüre von Una Kravets’ Artikel Locally Scoped CSS Variables: What, How, and Why dachte ich mir: Da geht doch was‽

Zumindest wenn die Streifen sich nicht rechts (für MrMurphy1 auch gern links 😉) ausrichten sollen, sondern jeder an seiner Stelle entweder erscheint oder nicht, hab ich was ohne JavaScript.

LLAP 🖖

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Na wenn man denn muss … dann halt mit JavaScript

Hatte ich schon erwähnt, dass, wann immer man JavaScript zum Stylen verwendet, dies auf mangelnde CSS-Kenntnisse zurückzuführen ist?

Bei der morgentlichen Lektüre von Una Kravets’ Artikel Locally Scoped CSS Variables: What, How, and Why dachte ich mir: Da geht doch was‽

Zumindest wenn die Streifen sich nicht rechts (für MrMurphy1 auch gern links 😉) ausrichten sollen, sondern jeder an seiner Stelle entweder erscheint oder nicht, hab ich was ohne JavaScript.

Und ich dachte mir immer noch: Da geht doch was‽

Streifen rechts ausgerichtet. Look Ma, no JavaScript!

LLAP 🖖

[Rolf b]

Attaboy 😂

Bei 3 Kategorien ist es noch übersichtlich. Wenn man 10 Kategorien hat (selbst wenn nur max. 2 oder 3 davon gleichzeitig kommen sollen), wird aus dem Gradienten eher eine Gradastrophe. In einem größeren CMS dürften 10 Kategorien nicht ungewöhnlich sein.

Deswegen: Faszinierende intellektuelle Übung, aber für die Praxis halte ich die Lösung mit JS-Styleberechnung oder den flex-Streifen für besser.

Rolf

[Gunnar Bittersmann]

@@Rolf b

Bei 3 Kategorien ist es noch übersichtlich. Wenn man 10 Kategorien hat (selbst wenn nur max. 2 oder 3 davon gleichzeitig kommen sollen), wird aus dem Gradienten eher eine Gradastrophe. In einem größeren CMS dürften 10 Kategorien nicht ungewöhnlich sein.

Das ist eine Frage der Anwendung.

Deswegen: Faszinierende intellektuelle Übung, aber für die Praxis halte ich die Lösung mit JS-Styleberechnung oder den flex-Streifen für besser.

Das ist eine Frage der technischen Umsetzung.

Und deinen Einwand verstehe ich nicht. Die verschiedenen technischen Umsetzungen tun exakt dasselbe auf andere Art – mal mit zusätzlichem Markup, mal mit JavaScript, mal mit reinem CSS.

LLAP 🖖

[Rolf b]

Anwendung und technische Umsetzung sind durchaus im Zusammenhang zu sehen. Es geht mir um das Laufzeitverhalten der technischen Umsetzung, wenn die Anwendung umfangreicher wird.

Die zuletzt von Dir gezeigte CSS Lösung muss so gebaut werden, dass man im CSS einen Gradienten aufbaut, in dem jede mögliche Streifenfarbe schon vorgesehen ist. Sie generiert also bei X Kategorien immer X Streifen. 10 Kategorien? 10 Streifen... (und 20 Gradientenpunkte).

Wir hatten bei uns im Haus ein SPA-Projekt, wo intensiv CSS eingesetzt wurde. Gottlob war ich bei denen, die einen Orden bekamen als die Projektphase "Auszeichnung der Unbeteiligten" erreicht war. Denn: dummerweise waren die Clients nicht zum Hardware-Rendering fähig (Terminal Server Infrastruktur), und im PROD-Einsatz konnte ein 10-Kern Server nur noch genau 10 User behandeln, statt wie sonst 100, weil der Browser nur noch am Layouten war und jede Browser-Instanz schon bei Mausbewegungen einen ganzen Kern auslastete.

Die JS-Lösungen bauen die Farbübergänge bzw. die x-tag Zeilen nur für die wirklich genutzten Zeilen ein und produzieren damit Layout-Aufwand im Umfang der pro Artikel verwendeten Kategorien. Und sie produzieren den Haupt-Brocken davon nur einmal, nämlich beim Aufbau des DOM.

Möglicherweise mache ich mir einen Kopf um unnötige Dinge. Aber ich war beim oben genannten Projekt zwar nicht dabei, aber am Fliegenfänger was den Zeitplan anging. Und wenn man mal erlebt hat, wie ein wichtiger Rollout um ein halbes Jahr verschoben werden musste, weil kurz vor Fertigstellung eine teure Projektsanierung fällig war, dann wird man vorsichtig :)

Rolf

[Gunnar Bittersmann]

@@Rolf b

Anwendung und technische Umsetzung sind durchaus im Zusammenhang zu sehen. Es geht mir um das Laufzeitverhalten der technischen Umsetzung, wenn die Anwendung umfangreicher wird.

Die zuletzt von Dir gezeigte CSS Lösung muss so gebaut werden, dass man im CSS einen Gradienten aufbaut, in dem jede mögliche Streifenfarbe schon vorgesehen ist. Sie generiert also bei X Kategorien immer X Streifen. 10 Kategorien? 10 Streifen... (und 20 Gradientenpunkte). […]

Möglicherweise mache ich mir einen Kopf um unnötige Dinge.

Nein, machst du nicht. Bei meinen CSS-Flaggen, die ausschließlich aus Gradienten aufgebaut sind^[1], hab ich schon gemerkt, dass das Scrollen der Seite rucklich wird, wenn viele davon auf einer Seite sind. (Deshalb jetzt nur eine per Auswahlmenü.) Das sollte man auf jeden Fall im Auge haben.

Wie Marc völlig zurecht anmerkte, sollte die Information über die Kategorisierung im Inhalt vorhanden sein und die Farbkennzeichnung zusätzlich dazu erfolgen. (Was bei meinen Beispielen der Fall ist.) Dann kann man das im Markup auch gleich so auszeichnen, dass man’s per CSS nutzen kann.

LLAP 🖖

---

1. Weil’s geht. Weder für den produktiven Einsatz gedacht noch geeignet. ↩︎

[marctrix]

Hej Gunnar,

@@Rolf b

Wie Marc völlig zurecht anmerkte, sollte die Information über die Kategorisierung im Inhalt vorhanden sein und die Farbkennzeichnung zusätzlich dazu erfolgen. (Was bei meinen Beispielen der Fall ist.)

Mir sind da noch ein paar Dinge nicht klar:

1.) Ich kann die Werte (foo, bar, baz) nicht sehen — sie mögen Blinden mit Screenreader zugänglich sein, allen anderen (Farbenblinden, Menschen mit Vergrößerungssoftware, für die die Streifen außerhalb des sichtbaren Bereiches liegen, Menschen mit Konzentrationsschwäche, ADHS, schlechtem Kurzzeitgedächtnis usw) ist die Bedeutung der Farben nicht zugänglich. 2.) Meiner Meinung wird gegen das UX-Prinzip "Don't make me think" verstoßen 3.) Warum Custom-Tags? — Es handelt sich um eine Liste von Schlagworten/Kategorien, für die ul/li verwendet werden sollte (sinnvollerweise sind dies Links zu einer Auflistung aller Artikel aus der entsprechenden Kategorie/mit demselben Schlagwort)

Ich habe mich zunächst mit solchen „Pingeligkeiten“ zurückgehalten, weil es erst mal um die interessante Frage ging, ob so etwas überhaupt machbar ist.

Aber nach durchlesen des gesamten Threads und der Behauptung von @Gunnar Bittersmann , dass seine Lösung die Farben nur zusätzlich ausgibt (im Sinne einer Mehrfachkennzeichnung) und ich diese nicht sehe, muss ich meine Bedenken denn doch mal loswerden. - Vielleicht übersehe ich auch nur etwas…?

Marc

[TS]

Hello,

Ich habe mich zunächst mit solchen „Pingeligkeiten“ zurückgehalten, weil es erst mal um die interessante Frage ging, ob so etwas überhaupt machbar ist.

Aber nach durchlesen des gesamten Threads und der Behauptung von @Gunnar Bittersmann , dass seine Lösung die Farben nur zusätzlich ausgibt (im Sinne einer Mehrfachkennzeichnung) und ich diese nicht sehe, muss ich meine Bedenken denn doch mal loswerden. - Vielleicht übersehe ich auch nur etwas…?

Das war auch der Grund, warum ich schon ganz am Anfang vorgeschlagen hatte, die farbliche Darstellung z. B. von Überschriften o. ä. Informationen abhängig zu machen.

Selbst einem Sehenden dürfte die Kennzeichnung sonst nicht klar sein.

Das würde aber bedeuten, dass die Kennzeichnung vom umgebenden Content abhängig ist und da ist mir leider nicht ganz klar, wie man das machen müsste. Aber ich vermute, dass das mit CSS-3 geht.

Liebe Grüße
Tom S.

[Gunnar Bittersmann]

@@marctrix

1.) Ich kann die Werte (foo, bar, baz) nicht sehen

Hm …

… wirklich nicht?

3.) Warum Custom-Tags? — Es handelt sich um eine Liste von Schlagworten/Kategorien, für die ul/li verwendet werden sollte

Ja, auch gut.

Sematische Auszeichnung könnte dann vielleicht(?) so aussehen: [EDIT: Nein, so nicht. Sondern so.]

<article vocab="http://schema.org/" typeof="Article">
  <ul>
    <li property="keywords">foo</li>
    <li property="keywords">bar</li>
  </ul>
  <div property="text">
    ⋮
  </div>
</article>

Aber vielleicht sollten die keywords doch besser bei einem property-Attribut stehen:

<article vocab="http://schema.org/" typeof="Article">
  <meta property="keywords" content="foo, bar"/>
  <ul>
    <li>foo</li>
    <li>bar</li>
  </ul>
  <div property="text">
    ⋮
  </div>
</article>

LLAP 🖖

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Aber vielleicht sollten die keywords doch besser bei einem property-Attribut stehen:

Ja, und zwar so:

<article vocab="http://schema.org/" typeof="Article">
  <ul property="keywords">
    <li>foo</li>
    <li>bar</li>
  </ul>
  <div property="text">
    ⋮
  </div>
</article>

Auf das Naheliegendste kommt man immer erst zum Schluss.

LLAP 🖖

[TS]

Hello Gunnar,

Aber vielleicht sollten die keywords doch besser bei einem property-Attribut stehen:

Ja, und zwar so:

<article vocab="http://schema.org/" typeof="Article">
  <ul property="keywords">
    <li>foo</li>
    <li>bar</li>
  </ul>
  <div property="text">
    ⋮
  </div>
</article>

Mir ist jetzt aber immer noch nicht klar, wie man dann auf die Property-Texte (Keywords) mittels CSS zugreifen kann, um die Styles festzulegen.

Liebe Grüße
Tom S.

[marctrix]

Hej TS,

Aber vielleicht sollten die keywords doch besser bei einem property-Attribut stehen:

Mir ist jetzt aber immer noch nicht klar, wie man dann auf die Property-Texte (Keywords) mittels CSS zugreifen kann, um die Styles festzulegen.

Per Attribut-Selektor:

[property="foo"]

Wobei Attribut-Selektoren noch viel mehr können - siehe Wiki-Artikel Attribut Selektor

Marc

[TS]

Hello,

Aber vielleicht sollten die keywords doch besser bei einem property-Attribut stehen:

Mir ist jetzt aber immer noch nicht klar, wie man dann auf die Property-Texte (Keywords) mittels CSS zugreifen kann, um die Styles festzulegen.

Per Attribut-Selektor:

[property="foo"]

Wobei Attribut-Selektoren noch viel mehr können - siehe Wiki-Artikel Attribut Selektor

Dann müsste das im Markup also so stehen:

<article vocab="http://schema.org/" typeof="Article">
  <ul property="keywords">
    <li property="foo">foo</li>
    <li property="bar">bar</li>
  </ul>
  <div property="text">
    ⋮
  </div>
</article>

?

Liebe Grüße
Tom S.

[Gunnar Bittersmann]

@@TS

Dann müsste das im Markup also so stehen:

Das wäre aber Unsinn.

LLAP 🖖

[TS]

Hello,

Dann müsste das im Markup also so stehen:

Das wäre aber Unsinn.

Ich bitte höflichst um eine Begründung für diese Aussage.

Liebe Grüße
Tom S.

[Gunnar Bittersmann]

@@TS

Das wäre aber Unsinn.

Ich bitte höflichst um eine Begründung für diese Aussage.

Ins property-Attribut gehört der Bezeichner eines Prädikats (wie’s bei RDF heißt; Schema.org spricht von property (Eigenschaft)). Für ein Subjekt vom Typ Article (genauer gesagt: http://schema.org/Article) wären das bspw. keywords und text, aber auch author, datePublished usw.

LLAP 🖖

[TS]

Hello,

Das wäre aber Unsinn.

Ich bitte höflichst um eine Begründung für diese Aussage.

Ins property-Attribut gehört der Bezeichner eines Prädikats (wie’s bei RDF heißt; Schema.org spricht von property (Eigenschaft)). Für ein Subjekt vom Typ Article (genauer gesagt: http://schema.org/Article) wären das bspw. keywords und text, aber auch author, datePublished usw.

Nun lass mich doch bitte nicht blöd sterben. Dauert vielleicht nicht mehr lange...
Wohin gehört denn nun der Wert der Klassifizierung? Welche Attribute darf/soll ich benutzen dafür?

Liebe Grüße
Tom S.

[Gunnar Bittersmann]

@@TS

Nun lass mich doch bitte nicht blöd sterben. Dauert vielleicht nicht mehr lange...
Wohin gehört denn nun der Wert der Klassifizierung? Welche Attribute darf/soll ich benutzen dafür?

property="keywords" zeigt an, dass es sich um Keywords (was Tags wohl auch sind) handelt.

Die Keywords selber stehen da, was in RDFs als Objekt der Relation Subjekt–Prädikat–Objekt angesehen wird: im Elementinhalt oder einem anderen Attribut dieses Elements.

Beispiel fürs erste war:

<ul property="keywords">
  <li>foo</li>
  <li>bar</li>
</ul>

Beispiel fürs zweite war:

<meta property="keywords" content="foo, bar"/>

---

Und zur Verwirrung noch ein Beispiel für beides:

<a property="url name" href="https://example.com">Example dot com</a>

worin https://example.com der Wert für url und Example dot com der Wert für name ist.

LLAP 🖖

[TS]

Hello,

Wohin gehört denn nun der Wert der Klassifizierung? Welche Attribute darf/soll ich benutzen dafür?

property="keywords" zeigt an, dass es sich um Keywords (was Tags wohl auch sind) handelt.

Die Keywords selber stehen da, was in RDFs als Objekt der Relation Subjekt–Prädikat–Objekt angesehen wird: im Elementinhalt oder einem anderen Attribut dieses Elements.

Beispiel fürs erste war:

<ul property="keywords">
  <li>foo</li>
  <li>bar</li>
</ul>

Beispiel fürs zweite war:

<meta property="keywords" content="foo, bar"/>

Ich habe versucht, das zu verstehen und irgendwie für mich (mein CMS) nutzbar zu machen, aber ich bin wohl zu blöd dafür.

Wenn ich so Sachen mache, wie:

<!-- snipp --> 
	<ul>
		<li keyword="Auto">Car</li>
		<li keyword="Bahn">Train</li>
		<li keyword="Rad">Bike</li>
	</ul>
<!-- snapp -->  

	<style>
		li {
			background-color: #303030;
			padding: 2px;
			font-size: 12pt;
			font-weight: bolder;
		}
	
		li[keyword="Auto"] {
			color: #FF8080;
		}

		li[keyword="Bahn"] {
			color: #FFFF80;
		}

		li[keyword="Rad"] {
			color: #80FF80;
		}
	
	</style>

dann funktioniert es. Aber das ist ja wohl (eigentlich) nicht erlaubt.
Wenn ich es so anstelle, wie Du es gezeigt hast, geht leider nichts.

Liebe Grüße
Tom S.

[Gunnar Bittersmann]

@@TS

<li keyword="Auto"> Aber das ist ja wohl (eigentlich) nicht erlaubt.

Nö, isses nicht. Erlaubt sind aber data-Attribute: <li data-keyword="Auto">

Wenn ich es so anstelle, wie Du es gezeigt hast, geht leider nichts.

Dass „geht nicht“ nicht geht, weißt du‽

LLAP 🖖

[Gunnar Bittersmann]

@@marctrix

Per Attribut-Selektor:

[property="foo"]

Nein. "foo" ist kein sinnvoller Wert fürs property-Attribut.

LLAP 🖖

[marctrix]

Hej Gunnar,

@@marctrix

Per Attribut-Selektor:

[property="foo"]

Nein. "foo" ist kein sinnvoller Wert fürs property-Attribut.

foo ist auch niemals ein sinnvoller Wert für eine Klasse (nicht mal ein Beispiel), sondern immer ein Platzhalter.

Marc

[Gunnar Bittersmann]

@@marctrix

[property="foo"]

Nein. "foo" ist kein sinnvoller Wert fürs property-Attribut.

foo ist auch niemals ein sinnvoller Wert für eine Klasse (nicht mal ein Beispiel), sondern immer ein Platzhalter.

Grmpf, ich wollte erst sowas in der Art dazuschreiben. Das stimmt schon, tut aber hier nichts zur Sache.

Auch [property="wetter"] wäre unsinnig, weil "wetter" kein sinnvoller Wert fürs property-Attribut ist.

LLAP 🖖

[marctrix]

Hej Gunnar,

@@marctrix

[property="foo"]

Nein. "foo" ist kein sinnvoller Wert fürs property-Attribut.

foo ist auch niemals ein sinnvoller Wert für eine Klasse (nicht mal ein Beispiel), sondern immer ein Platzhalter.

Auch [property="wetter"] wäre unsinnig, weil "wetter" kein sinnvoller Wert fürs property-Attribut ist.

Yo, dat stimmt. Hatte ich nicht verstanden. An der Stelle wird man dann um zusätzliche Klassen oder data- nicht herumkommen - je nachdem was dort mehr Sinn macht. Mitunter sind ja auch aria-labelledby oder andere Attribute bereits vorhanden, die sich nutzen lassen - mir ging es bei der Frage von @TS erst mal nur um die Verwendung des Attribut-Selektors…

Marc

[Gunnar Bittersmann]

@@TS

<article vocab="http://schema.org/" typeof="Article">
  <ul property="keywords">
    <li>foo</li>
    <li>bar</li>
  </ul>
  <div property="text">
    ⋮
  </div>
</article>

Mir ist jetzt aber immer noch nicht klar, wie man dann auf die Property-Texte (Keywords) mittels CSS zugreifen kann, um die Styles festzulegen.

Na mit einem Selektor, der sich den Elementinhalt ansieht … Äh – gibt’s nicht.

Dann brächte man sowas wie <li class="foo">foo</li> oder <li data-tag="foo">foo</li>

Bei <meta property="keywords" content="foo, bar"/> sollte es aber auch mit
[property="keywords"][content*="foo"] gehen.

Besser wäre die Tag-Liste ohne Kommas, dann ginge
[property="keywords"][content~="foo"].

LLAP 🖖

[TS]

Hello,

<article vocab="http://schema.org/" typeof="Article">
  <ul property="keywords">
    <li>foo</li>
    <li>bar</li>
  </ul>
  <div property="text">
    ⋮
  </div>
</article>

Mir ist jetzt aber immer noch nicht klar, wie man dann auf die Property-Texte (Keywords) mittels CSS zugreifen kann, um die Styles festzulegen.

Na mit einem Selektor, der sich den Elementinhalt ansieht … Äh – gibt’s nicht.

Dann brächte man sowas wie <li class="foo">foo</li> oder <li data-tag="foo">foo</li>

Bei <meta property="keywords" content="foo, bar"/> sollte es aber auch mit
[property="keywords"][content*="foo"] gehen.

Besser wäre die Tag-Liste ohne Kommas, dann ginge
[property="keywords"][content~="foo"].

Das würde im Aufbau von CMS aber zu einer zweigleisigen Sprachabhängigkeit führen. Da wäre es sicherlich geschickter, den Attributbezeichner und seinen Attributwert in "Neutralsprache" im Starttag des Elementes zu halten, damit bei Umschaltung der Sprache nur der Text-Content des Elementes gewechselt werden muss und nicht auch das CSS verändert werden muss.

Liebe Grüße
Tom S.

[marctrix]

Hej TS,

Das würde im Aufbau von CMS aber zu einer zweigleisigen Sprachabhängigkeit führen. Da wäre es sicherlich geschickter, den Attributbezeichner und seinen Attributwert in "Neutralsprache" im Starttag des Elementes zu halten, damit bei Umschaltung der Sprache nur der Text-Content des Elementes gewechselt werden muss und nicht auch das CSS verändert werden muss.

Ich denke, Sophies Idee ist nicht sinnvoll umsetzbar…

Jedenfalls wenn es um mehr als zwei oder drei Farben aus maximal 5 geht - und da wäre ich als Nutzer schon mit überfordert. Würde ich jetzt "zugestehen" als progressive enhancement für Leute mit mehr Gehirnschmalz als in meinem Kopf vorhanden…

Marc

[Gunnar Bittersmann]

@@marctrix

Ich denke, Sophies Idee ist nicht sinnvoll umsetzbar…

Warum sollte die zusätzliche Kennzeichnung von Kategorien durch Farben nicht sinnvoll sein?

LLAP 🖖

[marctrix]

Hej Gunnar,

@@marctrix

Ich denke, Sophies Idee ist nicht sinnvoll umsetzbar…

Warum sollte die zusätzliche Kennzeichnung von Kategorien durch Farben nicht sinnvoll sein?

Weil unverständliche Elemente die Konzentration von der Informations-Aufnahme und -Verarbeitung ablenken. Man überlegt ggfs, was das soll, anstatt sich auf den Text zu konzentrieren.

Oder ich glaube zu wissen, was die meinen, bin damit aber völlig auf dem Holzweg. Ich bin Amanda!

Marc

PS: Ich habe ja schon das „ Zugeständnis“ gemacht, das drin zu lassen für Leute, die die Logik dahinter begreifen. Keine Ahnung, wer anhand von 7 farbigen Streifen aus 30 möglichen Kategorien in der Lage ist, sowohl die feinen Farbuntershciede zu erkennen, als auch sämtliche Kategorien im Kopf zu haben - von einer Seite, die er vorher vielleicht noch nie besucht hat. Ich finde es inzwischen Unsinn - zumindest wenn man sich nicht auf ganz wenige Kategorien (2 bis 4) festlegt, was das System wieder ganz schnell an ungewollte Grenzen bringt.

PPS: Diese 2-4 Kategorien sollten auch inklusive Farbkodierung und Beschriftung in unmittelbarer Nähe, mindestens sichtbar im Viewport sein, um den Bezug herzustellen - z.B. in einer Leiste mit den 2-4 Menüeinträgen einer Hauptnavigation (also farbige Einträge in der ersten Ebene der Hauptnavigation mit Text, der den Bezug zwischen Kategorie und Farbe herstellt - ich meine aber, man müsste schizophren sein, wenn man dann noch Artikel in mehrere Kategorien einordnet.) Für mich ist dieser Konflikt nicht lösbar…

[Gunnar Bittersmann]

@@marctrix

PS: Ich habe ja schon das „ Zugeständnis“ gemacht, das drin zu lassen für Leute, die die Logik dahinter begreifen. Keine Ahnung, wer anhand von 7 farbigen Streifen aus 30 möglichen Kategorien in der Lage ist, sowohl die feinen Farbuntershciede zu erkennen, als auch sämtliche Kategorien im Kopf zu haben - von einer Seite, die er vorher vielleicht noch nie besucht hat. Ich finde es inzwischen Unsinn - zumindest wenn man sich nicht auf ganz wenige Kategorien (2 bis 4) festlegt, was das System wieder ganz schnell an ungewollte Grenzen bringt.

Ja, die Farbcodierung ist sicher nicht für viele Kategorien wirklich sinnvoll.

Und ein inhaltlicher Bezug ist auch hilfreich: Astronomie – dunkelblau; Biologie – grün; Medizin – rot …

LLAP 🖖

[Tabellenkalk]

Hallo,

Und ein inhaltlicher Bezug ist auch hilfreich: Astronomie – dunkelblau; Biologie – grün; Medizin – rot …

weil die Sonne gelb, mein Zebra schwarz-weiß und die Pillen, die ich schlucken muss, blau sind...

Gruß
Kalk

[Gunnar Bittersmann]

@@Tabellenkalk

weil die Sonne gelb, mein Zebra schwarz-weiß und die Pillen, die ich schlucken muss, blau sind...

Ähem, bei den blauen Pillen ist es wohl eher „wollen“ als „müssen“. 🔷

LLAP 🖖

[Tabellenkalk]

Hallo,

Ähem, bei den blauen Pillen ist es wohl eher „wollen“ als „müssen“. 🔷

egal, jedenfalls handelt es sich um eine medizinische Problemlösung… ⤴️

Gruß
Kalk

[Matthias Apsel]

Hallo Gunnar Bittersmann,

Ähem, bei den blauen Pillen ist es wohl eher „wollen“ als „müssen“. 🔷

Deine Freundin wird es ggf. anders sehen.

Bis demnächst
Matthias

[Tabellenkalk]

Hallo,

Deine Freundin wird es ggf. anders sehen.

Wieso? Ist sie farbenblind?

Gruß
Kalk

[Gunnar Bittersmann]

@@Tabellenkalk

Und ein inhaltlicher Bezug ist auch hilfreich: Astronomie – dunkelblau; Biologie – grün; Medizin – rot … weil die Sonne gelb, mein Zebra schwarz-weiß und die Pillen, die ich schlucken muss, blau sind... Ähem, bei den blauen Pillen ist es wohl eher „wollen“ als „müssen“. 🔷 Deine Freundin wird es ggf. anders sehen. Wieso? Ist sie farbenblind?

💙

LLAP 🖖

[TS]

Hello,

Keine Ahnung, wer anhand von 7 farbigen Streifen aus 30 möglichen Kategorien in der Lage ist, sowohl die feinen Farbuntershciede zu erkennen, als auch sämtliche Kategorien im Kopf zu haben

Das wäre eine feine Aufgabe für Elektrotechniker. Die mussten zumindest früher die Farben vom Widerstandscode auswendig wissen ;-P

Liebe Grüße
Tom S.

[Gunnar Bittersmann]

@@TS

Das wäre eine feine Aufgabe für Elektrotechniker. Die mussten zumindest früher die Farben vom Widerstandscode auswendig wissen ;-P

An die hatte ich im Laufe diese Threads auch schon mal gedacht.

LLAP 🖖

[Matthias Apsel]

Hallo marctrix,

Ich denke, Sophies Idee ist nicht sinnvoll umsetzbar…

Dem schließe ich mich vollumfänglich an.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

Ich denke, Sophies Idee ist nicht sinnvoll umsetzbar…

Dem schließe ich mich vollumfänglich an.

Und der Grund dafür wäre welcher?

Zur Erinnerung:

„Frage an Sophie: Wie viele Klassen sollen’s denn sein?“

„Derzeit gehe ich von 2-3 aus. Sonst wird es auch zu unübersichtlich.“ —Sophie

LLAP 🖖

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Bei <meta property="keywords" content="foo, bar"/> sollte es aber auch mit
[property="keywords"][content*="foo"] gehen.

Mit der äußerst unschönen Nebenwirkung, dass eine Kategorie „football“ neben ihrer eigenen Farbe auch noch als „foo“ gekennzeichent werden würde, weil der String „foo“ nun mal im String „football“ enthalten ist.

Besser wäre die Tag-Liste ohne Kommas, dann ginge
[property="keywords"][content~="foo"].

Ich weiß nicht, ob das konform wäre. Schema.org hält sich da recht vage: “Multiple entries in a keywords list are typically delimited by commas.”

Wäre zu prüfen, was RDFa-Prozessoren daraus machen – ob sie <meta property="keywords" content="foo bar"/> als ein Keyword "foo bar" werten oder als getrennte Keywords "foo" und "bar".

LLAP 🖖

[marctrix]

Hej Gunnar,

@@Gunnar Bittersmann

Bei <meta property="keywords" content="foo, bar"/> sollte es aber auch mit
[property="keywords"][content*="foo"] gehen.

Mit der äußerst unschönen Nebenwirkung, dass eine Kategorie „football“ neben ihrer eigenen Farbe auch noch als „foo“ gekennzeichent werden würde, weil der String „foo“ nun mal im String „football“ enthalten ist.

Daher überprüfen ich so auch immer nur, ob etwas mit foo beginnt (z.B. cat-)oder auf bar endet (z.B. .doc oder .docx)

Überprüfe damit also auch, ob ich mich an meine eigenen Coding-Richtlinien gehalten habe, Kategorien immer ein cat- voranzustellen 😉

Marc

[Gunnar Bittersmann]

@@marctrix

Überprüfe damit also auch, ob ich mich an meine eigenen Coding-Richtlinien gehalten habe, Kategorien immer ein cat- voranzustellen 😉

Das kann man sowas wie Klassenbezeichnern tun, nicht aber bei Kategoriebezeichnern (Keywords).

Eine Kategorie wäre „Wetter“, nicht „cat-Wetter“ (um von dem „foo“ mal wegzukommen).

LLAP 🖖

[marctrix]

Hej Gunnar,

@@marctrix

Überprüfe damit also auch, ob ich mich an meine eigenen Coding-Richtlinien gehalten habe, Kategorien immer ein cat- voranzustellen 😉

Das kann man sowas wie Klassenbezeichnern tun, nicht aber bei Kategoriebezeichnern (Keywords).

Eine Kategorie wäre „Wetter“, nicht „cat-Wetter“ (um von dem „foo“ mal wegzukommen).

Ja, so handhabe ich das auch - Wenn die Kategorie Wetter (weather, temps, tiempo, pogoda, погода...) heißt, heißt meine Klasse cat-weather.

Einfach weil ich es praktisch finde…

Marc

[Gunnar Bittersmann]

@@marctrix

Ja, so handhabe ich das Wenn die Kategorie Wetter (weather, temps, tiempo, pogoda, погода...) heißt, heißt meine Klasse cat-weather.

Wann immer man seine Klassenbezeichner präfixt, sollte man sich fragen, ob man nicht besser data-Attribute verwendet.

class="cat-weather" → data-cat="weather"

LLAP 🖖

[marctrix]

Hej Gunnar,

@@marctrix

Ja, so handhabe ich das Wenn die Kategorie Wetter (weather, temps, tiempo, pogoda, погода...) heißt, heißt meine Klasse cat-weather.

Wann immer man seine Klassenbezeichner präfixt, sollte man sich fragen, ob man nicht besser data-Attribute verwendet.

class="cat-weather" → data-cat="weather"

Hmm… — ich sehe da zwar einen Vorteil, weil man mit dem Attribut-Selektor prinzipiell mehr Möglichkeiten hat, als mit dem Klassen-Selektor, allerdings spielen die in der Regel keine Rolle. Und wenn ich die mal brauche geht auch so was wie [class$="cat-weather"].

Mir hilft das präfixen einiger weniger Klassen beim späteren Lesen des Codes.

Auf Anhieb sind Kategorien erst mal das einzige, wofür ich so was mache, was mir einfällt. Wenn ich eine Gruppe zusammengehöriger Klassen hätte, würde ich die wohl wieder so zusammenfassen.

Für die Gestaltung hat data-cat aber keinen Vorteil und bedeutet erst mal erheblich höheren Schreibaufwand.

Mag sein, dass das bei der Auswertung Vorteile hätte. Wenn sich ein Programmierer mit entsprechendem Bedarf an mich wendet, stelle ich das gerne bereit. Aber für meine Aufgabe, Design-Vorgaben in responsive, zugängliche Layouts umzuwandeln, sehe ich hier erst mal die Nachteile überwiegen. Unter anderem unterstützt mich mein Editor bei der Wiederverwendung von Klassen, bei data- dagegen nicht. Was zu einer höheren Fehleranfälligkeit führt.

Marc

[Gunnar Bittersmann]

@@Gunnar Bittersmann

… → data-cat="weather"

Und das auch nur, wenn es sich (wie bei Webanwendungen üblich) um Katzen dreht.

Ansonsten: data-category="weather"

LLAP 🖖

[Gunnar Bittersmann]

@@marctrix

Wetter (weather, temps, tiempo, pogoda, погода...)

Kommt Zeit, kommt Wetter?

War mir noch nicht bewusst, dass in romanischen Sprachen Wetter und Zeit dasselbe ist.

LLAP 🖖

[marctrix]

Hej Gunnar,

@@marctrix

Wetter (weather, temps, tiempo, pogoda, погода...)

Kommt Zeit, kommt Wetter?

War mir noch nicht bewusst, dass in romanischen Sprachen Wetter und Zeit dasselbe ist.

Keine Ahnung, Tante Google behauptet das. Ist es falsch?

Was ist nur aus uns geworden?

O tempores, o mores…

Marc

[Matthias Apsel]

Hallo marctrix,

War mir noch nicht bewusst, dass in romanischen Sprachen Wetter und Zeit dasselbe ist.

Keine Ahnung, Tante Google behauptet das. Ist es falsch?

Nein, es bildet den Zusammenhang zwischen Jahreszeit und Wetter ab.

Bis demnächst
Matthias

[marctrix]

Hej Matthias,

Hallo marctrix,

War mir noch nicht bewusst, dass in romanischen Sprachen Wetter und Zeit dasselbe ist.

Keine Ahnung, Tante Google behauptet das. Ist es falsch?

Nein, es bildet den Zusammenhang zwischen Jahreszeit und Wetter ab.

Das war meine (umüberprüfte) Annahme, als ich das Übersetzungsergebnis ohne weiteres übernommen habe…

Also stimmt die Übersetzung? - Da hat @Gunnar Bittersmann mich aber aufs Glatteis geschickt…

Marc

[Gunnar Bittersmann]

@@marctrix

Wetter (weather, temps, tiempo, pogoda, погода...)

Kommt Zeit, kommt Wetter?

War mir noch nicht bewusst, dass in romanischen Sprachen Wetter und Zeit dasselbe ist.

Keine Ahnung, Tante Google behauptet das. Ist es falsch?

Leo.org sagt das auch. Auch für Italienisch.

Wird wohl so sein.

Ich hab von romanischen Sprachen außer einem Grundkurs Spanisch^[1] (auch schon wieder Ewigkeiten her) keine Ahnung.

Was ist nur aus uns geworden?

O tempores, o mores…

Keine Lateinkundige jedenfalls. 😏

LLAP 🖖

---

1. oder sollte man sagen: Kastilisch? ↩︎

[Rolf b]

Für Latein kann man Cäsar befragen, und der sagt, dass die ollen RömerInnen mehrere Worte für Wetter hatten, und auch für Zeit. Gemeinsamer Nenner ist tempestas (was wir von Shakespeare als Sturm kennen) und auch einen Zeitabschnitt (lt. en.wiktionary auch 'season') bedeutet. Da Wetter und Jahreszeiten gewisse Zusammenhänge haben, könnte so auch der Wortzusammenhang entstanden sein.

Tempus (temporis, n.) hat jedenfalls nicht die Nebenbedeutung Wetter.

Rolf

[TS]

Hello,

Bei <meta property="keywords" content="foo, bar"/> sollte es aber auch mit
[property="keywords"][content*="foo"] gehen.

Mit der äußerst unschönen Nebenwirkung, dass eine Kategorie „football“ neben ihrer eigenen Farbe auch noch als „foo“ gekennzeichent werden würde

Dann ist sie doch richtig™️ gekennzeichnet ;-P

Liebe Grüße
Tom S.

[marctrix]

Hej Gunnar,

@@Gunnar Bittersmann

Auf das Naheliegendste kommt man immer erst zum Schluss.

Das hat Nachdenken so an sich - auch wenn es praktisch wäre, wenn man die beste Idee immer zuerst hätte. 😉

Marc

[marctrix]

Hej Gunnar,

@@marctrix

1.) Ich kann die Werte (foo, bar, baz) nicht sehen

Hm …

… wirklich nicht?

Ich war auf diesem Pen hier - inzwischen schwirren hier viele links auf unterschiedliche Stände rum - mach doch mal einen abschließenden Beitrag mit einemLink zur endgültigen Version, wenn du noch Lust und Zeit hast - für die Nachwelt…

Und immerwährenden Ruhm

😉

Marc

[Gunnar Bittersmann]

@@marctrix

1.) Ich kann die Werte (foo, bar, baz) nicht sehen Ich war auf diesem Pen hier

Ah … Ich hab’s da auch mal ergänzt. In einem footer-Element, was für diese Information sicher geeigneter ist als p.

LLAP 🖖

[TS]

Hello,

eigentlich sollen die Farben ja auch eine relevante Information übermitteln (Ich hatte hier erst Bein halten stehen :-P) )

Diese Informationen würden also irgendwie auch ins Markup gehören und nicht ins CSS. Geschachtelte Container wären da mMn die richtigere™️ Lösung. Wie man die dann styled, ist dann erst der nächste Schritt. Oder?

Liebe Grüße
Tom S.

[marctrix]

Hej TS,

eigentlich sollen die Farben ja auch eine relevante Information übermitteln

Diese Informationen würden also irgendwie auch ins Markup gehören und nicht ins CSS.

Unbedingt, Tom - ich würde hier mit Schlagworten, bzw. Kategorien arbeiten, die sich im Artikel-Header befinden. Die würde ich dann auch wie Etiketten o.ä. gestalten und zusätzlich zur Wortmarke einen Farbcode verpassen - siehe auch mein anderes Posting (mehr dazu: WCAG: Use of Color:Understanding SC 1.4.1)

Marc

[marctrix]

Hej Sophie,

ist es möglich zwei Border hintereinander zu vergeben?

Bitte dran denken, niemals Farbe allein für den Transport von Informationen verwenden. 10%(!) aller Männer leiden an einer Farbfehlsichtigkeit!

Auch ältere Menschen mit abnehmender Leistung des Kurzzeitgedächtnis können damit nichts anfangen, weil sie sich u.U. die Bedeutung der Farben nicht merken können. Von Menschen mit echten kognitiven Einschränkungen will ich gar nicht erst anfangen…

Marc

[Gunnar Bittersmann]

@@marctrix

Bitte dran denken, niemals Farbe allein für den Transport von Informationen verwenden.

Ja!

10%(!) aller Männer leiden an einer Farbfehlsichtigkeit!

“False.” —Jared Smith, Rethinking Color and Contrast Video ab 10:14

mehr Myth busting Video ab 9:13

TL;DW:

(https://twitter.com/g16n/status/873211875093348352)

LLAP 🖖

[marctrix]

Hej Gunnar,

@@marctrix

Bitte dran denken, niemals Farbe allein für den Transport von Informationen verwenden.

Ja!

10%(!) aller Männer leiden an einer Farbfehlsichtigkeit!

Ja, muss mir wieder angewöhnen das „der deutschen“ Männer konsequent zu benutzen.

Marc

[marctrix]

Hej Sophie,

ist es möglich zwei Border hintereinander zu vergeben? Ich möchte bestimmte Nachrichten mit verschiedenen Farben anhand

border-right: 5px solid #FF9800
border-right: 5px solid red

kennzeichnen.

Wenn es tatsächlich nur um zwei Farben geht, würde ich eine Kombination von border und outline benutzen. Wenn es um mehr als zwei geht, halte ich eine Umsetzung, die Nutzern intuitiv verständlich ist, für nicht machbar. Dann wäre eine andere Darstellung für die Nutzer leichter verständlich - auch wenn mir Deine Idee zunächst gefallen hat! Aber ein häufen farbiger Balken an einer Seite der Überschrift würde wohl fast jeden überfordern. Daher haben sich andere Darstellungen auch durchgesetzt. - Zu diesem Ergebnis kommt man leider oft, wenn man eine Idee hat, die man so auf anderen Seiten noch nicht gesehen hat. Verständlicher dürfte so was sein, wie in meinem Codepen "Artikel mit Kategorisierung und Meta-Informationen (inklusive Farbleitsystem)" - wobei die Farbkodierung gern noch an weiteren Stellen und häufiger auftreten darf, wenn das gewünscht ist - aber auch hier ist klar, dass man einen Button oder andere Elemente nicht mehrfarbig erstellen kann - auch hier würde der Nutzer nur anhand der Farben nicht erkennen, wozu das gut ist.

Konzeptionell muss man hier vielleicht in Kategorien und Schlagworten denken - und sich selber dazu Disziplinieren Artikel immer fest einer Kategorie zuzuordnen, aber u.U. mehrere Schlagworte zu vergeben. Nicht eindeutige Farbleitsysteme scheinen mir nach Lektüre dieses Threads nicht sinnvoll zu sein — wie Gunnar schon sagte: auf das naheliegende kommt man erst am Schluss…

Marc

[at]

Hallo marctrix,

Wenn es tatsächlich nur um zwei Farben geht, würde ich eine Kombination von border und outline benutzen.

„Angaben für einzelne Seiten des Elements sind nicht möglich.“ (outline)

MfG, at

[at]

Hallo Sophie,

ist es möglich zwei Border hintereinander zu vergeben?

Das kommt darauf an, welchen Einfluss du auf die Farben haben möchtest. border-style: groove; und border-style: ridge; existieren.

MfG, at