Thomas: HTML Data-Attribut

Hallo,

ist es möglich mit jQuery oder CSS auf HTML Data-Attribute zuzureifen um eine Übersicht zu verfeinern?

Ich habe folgendes:

<article data-article="Lehrer"></article>
<article data-article="Schueler"></article>
<article data-article="Artikel"></article>
<article data-article="Artikel"></article>

Meine Vorstellung war, es gibt drei Ckeckboxen die der User anklicken kann und je nachdem was er gewählt hat, werden Artikel ein bzw. ausgeblendet.

Geht das?

  1. ist es möglich mit jQuery oder CSS auf HTML Data-Attribute zuzureifen um eine Übersicht zu verfeinern?

    https://www.w3.org/TR/REC-CSS2/selector.html#attribute-selectors

    1. Hallo,

      https://www.w3.org/TR/REC-CSS2/selector.html#attribute-selectors

      Oder auch hier im Wiki.

      Gruß
      Kalk

  2. Hi there,

    ist es möglich mit jQuery oder CSS auf HTML Data-Attribute zuzureifen um eine Übersicht zu verfeinern?

    Ich rate jetzt einmal, was Du mit Übersicht verfeinern meinst, aber prinzipiell sind diese Attribute da, um darauf zugreifen zu können. Wozu sonst sollte man sie verwenden?

    Ich habe folgendes:

    <article data-article="Lehrer"></article>
    <article data-article="Schueler"></article>
    <article data-article="Artikel"></article>
    <article data-article="Artikel"></article>
    

    Meine Vorstellung war, es gibt drei Ckeckboxen die der User anklicken kann und je nachdem was er gewählt hat, werden Artikel ein bzw. ausgeblendet.

    Geht das?

    Ja, aber dazu brauchst Du keine Data-Attribute (im übrigen auch kein jQuery, dafür reicht ein schlichtes Javascripterl), die Du hier wie ID-Attribute verwendest (vom doppelten "Artikel" einmal abgesehen). Wenn Du sonst keine article-Elemente im Dokument hast, genügt es, in einer Schleife, die alle arcticle-Elemente absucht, alle jene auszublenden, die nicht gewählt wurden...

    1. Ja, aber dazu brauchst Du keine Data-Attribute (im übrigen auch kein jQuery, dafür reicht ein schlichtes Javascripterl), die Du hier wie ID-Attribute verwendest (vom doppelten "Artikel" einmal abgesehen). Wenn Du sonst keine article-Elemente im Dokument hast, genügt es, in einer Schleife, die alle arcticle-Elemente absucht, alle jene auszublenden, die nicht gewählt wurden...

      Die Data-Attribute sind aber da also warum soll ich diese nicht verwenden? Außerdem habe ich gesagt dass jQuery zur Verfügung steht also komm nicht mit einer Antwort, dafür brauchst du kein jQuery dafür reicht ein schlichtes Javascripterl.

      1. Hi there,

        Ja, aber dazu brauchst Du keine Data-Attribute (im übrigen auch kein jQuery, dafür reicht ein schlichtes Javascripterl), die Du hier wie ID-Attribute verwendest (vom doppelten "Artikel" einmal abgesehen). Wenn Du sonst keine article-Elemente im Dokument hast, genügt es, in einer Schleife, die alle arcticle-Elemente absucht, alle jene auszublenden, die nicht gewählt wurden...

        Die Data-Attribute sind aber da also warum soll ich diese nicht verwenden? Außerdem habe ich gesagt dass jQuery zur Verfügung steht also komm nicht mit einer Antwort, dafür brauchst du kein jQuery dafür reicht ein schlichtes Javascripterl.

        Das müssen wir schon mir überlassen, mit welcher Antwort ich "Dir komme". Ausserdem habe ich nicht geschrieben, daß Du Sie nicht verwenden sollst, ebensowenig wie Du erwähnt hast, daß diese Attribute einfach "da" seien. Das ist ja nicht der Normalfall, daß irgendwelche Attribute da sind, genausowenig wie jQuery einfach da ist, das eine muß man setzen, daß andere einbinden. Im übrigen und zu guter letzt wirst Du bei Deiner geplanten Herangehensweise ohnehin ein Problem bekommen, wenn Dein Beispiel, in dem ein Attributwert gleich zweimal "da" ist, der Realität entspricht. Dann hättest Du nämlich schon einen Grund gefunden, warum Du die Data-Attribute nicht verwenden "sollst"...

        1. Das müssen wir schon mir überlassen, mit welcher Antwort ich "Dir komme". Ausserdem habe ich nicht geschrieben, daß Du Sie nicht verwenden sollst, ebensowenig wie Du erwähnt hast, daß diese Attribute einfach "da" seien. Das ist ja nicht der Normalfall, daß irgendwelche Attribute da sind, genausowenig wie jQuery einfach da ist, das eine muß man setzen, daß andere einbinden. Im übrigen und zu guter letzt wirst Du bei Deiner geplanten Herangehensweise ohnehin ein Problem bekommen, wenn Dein Beispiel, in dem ein Attributwert gleich zweimal "da" ist, der Realität entspricht. Dann hättest Du nämlich schon einen Grund gefunden, warum Du die Data-Attribute nicht verwenden "sollst"...

          Da du scheinbar keine Ahnung hast erübrigt sich jegliche Diskussion! Ich habe dafür auch keine Zeit und Lust. Zeit ist Geld und Geld ist Lebensqualität. Diskussionen führen nur zu schlechter Laune was ich nicht haben muss.

        2. Tach!

          Im übrigen und zu guter letzt wirst Du bei Deiner geplanten Herangehensweise ohnehin ein Problem bekommen, wenn Dein Beispiel, in dem ein Attributwert gleich zweimal "da" ist, der Realität entspricht. Dann hättest Du nämlich schon einen Grund gefunden, warum Du die Data-Attribute nicht verwenden "sollst"...

          Könntest du das bitte etwas verständlicher ausführen? Was für ein Problem soll man denn da bekommen, und was ist an den data-Attributen schlecht?

          dedlfix.

          1. Hi there,

            Im übrigen und zu guter letzt wirst Du bei Deiner geplanten Herangehensweise ohnehin ein Problem bekommen, wenn Dein Beispiel, in dem ein Attributwert gleich zweimal "da" ist, der Realität entspricht. Dann hättest Du nämlich schon einen Grund gefunden, warum Du die Data-Attribute nicht verwenden "sollst"...

            Könntest du das bitte etwas verständlicher ausführen? Was für ein Problem soll man denn da bekommen, und was ist an den data-Attributen schlecht?

            Gar nichts ist schlecht an den Data-Attributen. Schlecht ist nur, daß er in seinem Beispiel zweimal die schlichte Zeile:

            <article data-article="Artikel"></article>
            <article data-article="Artikel"></article>
            

            verwendet ('tschuldigung, einfach "da" ist, wie er sagt), was irgendwie ein Problem werden könnte, wenn man Data-Attribut für's Selektieren verwenden möchte.

            Und für sein Problem, daß er die anderen Optionen ausblenden möchte, wenn eine einmal per Checkbox oder wie auch immer gewählt wurde, braucht er weder ein Data-Attribut noch jQuery. Insoferne ist das Attribut nicht schlecht sondern schlicht und ergreifend überflüssig, auch wenn es einfach "da" ist...

            1. Tach!

              Gar nichts ist schlecht an den Data-Attributen. Schlecht ist nur, daß er in seinem Beispiel zweimal die schlichte Zeile:

              <article data-article="Artikel"></article>
              <article data-article="Artikel"></article>
              

              verwendet ('tschuldigung, einfach "da" ist, wie er sagt), was irgendwie ein Problem werden könnte, wenn man Data-Attribut für's Selektieren verwenden möchte.

              Und wenn er es à la class verwendet und beide selektiert werden sollen? Das eigentliche Problem beschreibt er ja nicht konkret genug, so dass hier Raum für Spekulationen ist, und die gehen dann auch mal in die falsche Richtung.

              Und für sein Problem, daß er die anderen Optionen ausblenden möchte, wenn eine einmal per Checkbox oder wie auch immer gewählt wurde, braucht er weder ein Data-Attribut noch jQuery. Insoferne ist das Attribut nicht schlecht sondern schlicht und ergreifend überflüssig, auch wenn es einfach "da" ist...

              Wenn das aber das Selektionskriterium ist, mit dem die Elemente erkannt werden?

              Jedenfalls kann man die als Selektor nehmen, wie alle anderen Attributselektoren auch. In die Irre geleitet hat mich auch die Formulierung "auf HTML Data-Attribute zuzureifen", denn das las ich als ihren Inhalt auslesen und ändern wollen. Da hat jedenfalls jQuery auch was, und das findet man sehr einfach mit den Suchwörtern: jquery data attribute.

              dedlfix.

    2. @@Klawischnigg

      Data-Attribute …, die Du hier wie ID-Attribute verwendest

      Nein, eben nicht. Sondern wie Klassen. Es sind Tags zu den Artikeln. Oder besser gesagt: Kategorien, da jeder Artikel wohl nur ein Tag haben kann, d.h. einer Kategorie angehören kann. (So wie die hiesigen Postings bei der alten CForum-Software.)

      vom doppelten "Artikel" einmal abgesehen

      An „Artikel“ ist also nicht schlecht, dass er doppelt da ist. Sondern die Bezeichnung: „Artikel“ ist ein Überbegriff; die als „Lehrer“ bzw. „Schueler“[1] kategorisierten sind auch Artikel.

      Besser wäre da vielleicht doch „Sonstiges“, obwohl eine solche Kategoriebezeichnung auch nicht wirklich gut ist.

      Vielleich können Artikel, die in keine Kategorie passen, ja einfach auch unkategoriesiert bleiben?

      Auch die Bezeichnung des Attributs data-article ist unglücklich gewählt. Warum nicht data-category? Oder eben class?

      LLAP 🖖

      --
      “You might believe there are benefits for the developer, but first of all, you should put those behind the interest of the user.” —Stefan Tilkov
      Selfcode: sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|

      1. Warum verstuemmelt und nicht „Schüler“ mit ü? ↩︎

  3. Hallo Thomas,

    Geht das?

    Das geht bestimmt. Wahrscheinlich sogar ohne data-*-Attribute und auch ohne JQuery. Aber wenn du nicht schreibst, was dein Ziel ist und ein wenig mehr Quelltext - idealerweise ein online-Beispiel - zeigst, lassen sich nur Vermutungen anstellen. Jemanden, der dies dann tut, als „keine Ahnung habend“ zu beschimpfen, ist imho nicht die feine Art.

    Also: Mehr Input, dann kann es auch Lösungsvorschläge geben.

    Bis demnächst
    Matthias

    --
    Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
    1. Hallo Matthias,

      Das geht bestimmt. Wahrscheinlich sogar ohne data-*-Attribute und auch ohne JQuery. Aber wenn du nicht schreibst, was dein Ziel ist und ein wenig mehr Quelltext - idealerweise ein online-Beispiel - zeigst, lassen sich nur Vermutungen anstellen. Jemanden, der dies dann tut, als „keine Ahnung habend“ zu beschimpfen, ist imho nicht die feine Art.

      Ich habe auf einer Übersichtsseite mehrere Artikel stehen. Diese kommen von unterschiedlichsten Rubriken wie in dem Beispiel zu sehen ist:

      1. Lehrere
      2. Schueler
      3. Artikel (die keiner Kategorie zugeordnet sind)

      Jetzt möchte ich anhand dieser Data-Attribute irgendwie die Artikel filtern / verfeinern. Sprich klick ein User die Checkbox (oder ein Link, was mit völlig egal ist) Schüler an, sollten alle Artikel ausgeblendet werden, die NICHT zu diesem angeklickten Bereich gehören. Dazu sind doch die Data-Attribute da?

      Für meine Tooltips nehme ich auch die Date-Attribute

      <span class="tooltip" data-tooltip="Ich bin ein Tooltip">Lorem ipsum</span>
      
      1. Hallo Thomas,

        1. Lehrere
        2. Schueler
        3. Artikel (die keiner Kategorie zugeordnet sind)

        Jetzt möchte ich anhand dieser Data-Attribute irgendwie die Artikel filtern / verfeinern. Sprich klick ein User die Checkbox (oder ein Link, was mit völlig egal ist) Schüler an, sollten alle Artikel ausgeblendet werden, die NICHT zu diesem angeklickten Bereich gehören.

        Das ist nicht weiter schwer, vor allem, wenn dir bereits jQuery zur Verfügung steht. Du musst halt die Werte aus den Checkboxen zusammen suchen (am besten in einen Array), dann alle Artikel durchgehen und schauen, ob der Wert von data-article in dem Array enthalten ist.

        var values = ['foo', 'bar'];
        $('[data-article]').each(function() {
          if(!$.inArray($(this).attr('data-article'), values)) {
            $(this).css('display', 'none');
          }
        });
        

        Genauer kann man ohne Beispiel-Code nicht werden.

        Dazu sind doch die Data-Attribute da?

        Sagen wir es so: die Data-Attribute sind zur Interaktion mit JS da.

        LG,
        CK

        1. Hallo Christian,

          Das ist nicht weiter schwer, vor allem, wenn dir bereits jQuery zur Verfügung steht. Du musst halt die Werte aus den Checkboxen zusammen suchen (am besten in einen Array), dann alle Artikel durchgehen und schauen, ob der Wert von data-article in dem Array enthalten ist.

          var values = ['foo', 'bar'];
          $('[data-article]').each(function() {
            if(!$.inArray($(this).attr('data-article'), values)) {
              $(this).css('display', 'none');
            }
          });
          

          vielen Dank für dein Beispiel.

          Also lag ich gestern Abend doch richtig, dass ich dafür die Data-Atribute nutzen kann. Auch war meine Aussage mit "Wenn du keine Ahnung hast" richtig. Aber Hauptsache erstmal einen - geben.

          1. @@Thomas

            Auch war meine Aussage mit "Wenn du keine Ahnung hast" richtig.

            Nein, war sie nicht. Klawischnigg fand deine Problembeschreibung unzureichend. Er hatte „keine Ahnung“, was du eigentlich genau willst. Das heißt nicht, dass er allgemein keine Ahnung hätte.

            Aber Hauptsache erstmal einen - geben.

            Das war ich. Du hast dir den Minuspunkt redlich verdient.

            LLAP 🖖

            --
            “You might believe there are benefits for the developer, but first of all, you should put those behind the interest of the user.” —Stefan Tilkov
            Selfcode: sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
            1. Hallo,

              Das war ich. Du hast dir den Minuspunkt redlich verdient.

              und ich wollte noch schreiben "Ich kann mir schon denken von wem das kommt" :)

      2. Hallo

        Ich habe auf einer Übersichtsseite mehrere Artikel stehen. Diese kommen von unterschiedlichsten Rubriken wie in dem Beispiel zu sehen ist:

        1. Lehrere
        2. Schueler
        3. Artikel (die keiner Kategorie zugeordnet sind)

        Jetzt möchte ich anhand dieser Data-Attribute irgendwie die Artikel filtern / verfeinern. Sprich klick ein User die Checkbox (oder ein Link, was mit völlig egal ist) Schüler an, sollten alle Artikel ausgeblendet werden, die NICHT zu diesem angeklickten Bereich gehören. Dazu sind doch die Data-Attribute da?

        Dazu kann man sie benutzen. Es geht natürlich auch klassisch mit Klassen. Wenn die Data-Attribute aber vorhanden sind, weil sie aus anderen Gründen eh gebraucht werden, kannst du sie natürlich auch zu diesem Zweck verwenden. Für den Umgang mit Attributen hat JQuery eigene Funktionen. Attribute not equal sollte für deinen Zweck passen.

        Tschö, Auge

      3. Tach!

        Für meine Tooltips nehme ich auch die Date-Attribute

        <span class="tooltip" data-tooltip="Ich bin ein Tooltip">Lorem ipsum</span>
        

        Da nimmst du sie, um weitere Daten anzuhängen, nämlich den anzuzeigenden Text. Obwohl der auch im Attribut tooltip stehen könnte, wenn du nicht dessen Nebenwirkungen zu vermeiden versuchst. Um aber den Tooltip als solchen zu klassifizieren, nimmst du jedoch das class-Attribut.

        Jetzt möchte ich anhand dieser Data-Attribute irgendwie die Artikel filtern / verfeinern. Sprich klick ein User die Checkbox (oder ein Link, was mit völlig egal ist) Schüler an, sollten alle Artikel ausgeblendet werden, die NICHT zu diesem angeklickten Bereich gehören. Dazu sind doch die Data-Attribute da?

        Also diese konkrete Anwendung ist so nicht definiert. Wie man die data-Attribute verwendet, bleibt dem Autor überlassen. Wenn es aber Dinge bereits an anderen Stellen gibt, muss man sich die Frage gefallen lassen, warum man die nicht nimmt. Antworten darauf können durchaus sein "kannte ich nicht" oder "ist mir grad nicht eingefallen". Mir scheint, du möchtest deine Artikel (d.h. die HTML-Elemente article) lediglich klassifizieren, und dafür könnte auch class schon reichen. Auf einem anderen Blatt steht, wenn man die Daten bereits so vorgegeben bekommt und keinen Einfluss auf ihre Gestaltung hat. Dann muss man halt nehmen, was da ist.

        Nun zum eigentlichen Punkt. Der lautet: Ändern von CSS-Eigenschaften (hier display) aufgrund gesetzter Attribute anderer Elemente. Das kann man allein mit CSS regeln (behaupte ich mal), wenn man einen Selektor zu formulieren in der Lage ist (technisch gesehen), der beide Elemente ansprechen kann. Das geht nur nicht quer durch das Dokument, sondern die Bedingungen müssen Elternelemente sein oder Geschwister (Siblings). Alles andere geht nicht ohne Javascript (nach meinem Wissensstand, der durchaus erweiterbar ist).

        dedlfix.

        1. @@dedlfix

          Nun zum eigentlichen Punkt. Der lautet: Ändern von CSS-Eigenschaften (hier display) aufgrund gesetzter Attribute anderer Elemente. Das kann man allein mit CSS regeln (behaupte ich mal)

          Beweis. [1]

          wenn man einen Selektor zu formulieren in der Lage ist (technisch gesehen), der beide Elemente ansprechen kann. Das geht nur nicht quer durch das Dokument, sondern die Bedingungen müssen Elternelemente sein oder Geschwister (Siblings).

          Oder Geschwister eines Vorfahrens, wie in meinem Beispiel.

          Wenn man den Filter als progressive enhancement ansieht, ist der WebKit Adjacent/General Sibling & Pseudo Class Bug egal. In alten Androids funktioniert der Filter halt nicht; es wird alles angezeigt.

          Das größere Problem der CSS-only-Lösung: Man will das Markup vermutlich besser strukturieren. Deshalb: ja, JavaScript.

          Und das auch über das History-API die Änderung der Filtereinstellung im URI festhalten. Dann kann der Nutzer per Browser-Backbutton zu vorigen Einstellungen zurück. Und vor allem: Jede Einstellung hat ihren eigenen URI und kann gebookmarkt und an andere weitergegeben werden.

          JavaScript heißt: Bei einem passenden Element (in meinem Beispiel der Liste #hand) in einem data-Attribut (o.a. Klassenattribut) die Filterauswahl festhalten. Das Verstecken erledigt nach wie vor CSS.

          LLAP 🖖

          --
          “You might believe there are benefits for the developer, but first of all, you should put those behind the interest of the user.” —Stefan Tilkov
          Selfcode: sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|

          1. Ich hab Klassen verwendet. data-category würde nichts anderes ausdrücken als eine Klassifizierung.

            Aber auch mit data-Attibuten ginge diese CSS-only-Lösung. Dann eben #show-spades:not(:checked) ~ #hand [data-category="spades"] usw. [2] ↩︎

          2. Bei vielen Kategorien (Klassen) kann man bei Verwendung eines CSS-Präprozessors (bspw. Sass) eine Schleife zur Erstellung der Selektorenliste nutzen:

            $categories: (spades, hearts, diamonds, clubs);
            
            %hidden { display: none }
            
            @each $category in $categories
            {
              #show-#{$category}:not(:checked) ~ #hand .#{$category} { @extend %hidden; }
            }
            
            ↩︎
          1. Ich stimme euch zu: technisch geht das. Aber - um an eine andere Diskussion anzuknüpfen - ist das funktional? Wie reagieren Assistenztools auf diese CSS Schaltvorgänge? Ich muss zugeben: Ich bin kein echter Webentwickler, ich habe mich mit Assistenzfunktionen für Menschen mit Beeinträchtigungen noch nicht beschäftigt.

            Aus Programmierersicht hätte ich aber auch noch Frageen an eine reine CSS Lösung. "Lehrer" und "Schüler" sind fachliche Kategorien, keine technischen, und das bedeutet, dass im Style Sheet Fachlogik steckt. Sollte eine weitere Kategorie hinzukommen, muss man diese Filter-Styles erweitern. Bisher habe ich den JS und CSS Anteil einer Webseite für statisch gehalten, d.h. nicht vom Autor der Inhalte beeinflusst. Das CSS kann sich ändern, wenn der Seitenbetreiber das Design ändert oder wenn der Anwender Designs zur Auswahl hat. Aber wegen redaktionellen Änderungen? Wozu auch Kategorisierungen von Inhalten zählen? Die - so glaubte ich - kommen rein aus dem HTML (bzw. werden vom JS herbeigeAJAXt und ins DOM gesteckt).

            Gruß Rolf

            1. Tach!

              Ich stimme euch zu: technisch geht das. Aber - um an eine andere Diskussion anzuknüpfen - ist das funktional? Wie reagieren Assistenztools auf diese CSS Schaltvorgänge? Ich muss zugeben: Ich bin kein echter Webentwickler, ich habe mich mit Assistenzfunktionen für Menschen mit Beeinträchtigungen noch nicht beschäftigt.

              Ich auch nicht, aber ich glaube nicht, dass es signifikant unterschiedlich ist, wie ein display:none entsteht. Ob es via Javascript gesetzt wird oder per CSS-Selektor, es ist in beiden Fällen eine Eigenschaft der Elemente, die man über ein wie auch immer programmiertes getComputedStyle() herausfinden kann. Browser können das in ihren Entwicklertools, da sollte das andere Software auch hinbekommen.

              Aus Programmierersicht hätte ich aber auch noch Frageen an eine reine CSS Lösung. "Lehrer" und "Schüler" sind fachliche Kategorien, keine technischen, und das bedeutet, dass im Style Sheet Fachlogik steckt. Sollte eine weitere Kategorie hinzukommen, muss man diese Filter-Styles erweitern. Bisher habe ich den JS und CSS Anteil einer Webseite für statisch gehalten, d.h. nicht vom Autor der Inhalte beeinflusst. Das CSS kann sich ändern, wenn der Seitenbetreiber das Design ändert oder wenn der Anwender Designs zur Auswahl hat. Aber wegen redaktionellen Änderungen? Wozu auch Kategorisierungen von Inhalten zählen? Die - so glaubte ich - kommen rein aus dem HTML (bzw. werden vom JS herbeigeAJAXt und ins DOM gesteckt).

              Die Alternative zu fachlichen Selektoren im CSS sind generische, die sich auf die Darstellung beziehen, also rot/blau/oben/unten. Es müssten dann genügend Klassen-Selektoren für Farben und dergleichen zur Verfügung stehen. Kann man machen, aber da kenne ich mindestens einen, der zum Podologen muss, um seine Fußnägel wieder richten zu lassen. Eine weitere Alternative sind Inline-Styles, die man eben direkt setzt, ohne das grundlegende Seiten-Design-CSS anzufassen. Auch das ist icht gerade beliebt. Aber was soll's, wenn du das bei dir machst, musst du nur die bisher gelesenen Warnungen/Meinungen ignorieren, es wird keiner neben dir sitzen und dich mit Gewalt davon abhalten.

              dedlfix.

              1. @@dedlfix

                Ich auch nicht, aber ich glaube nicht, dass es signifikant unterschiedlich ist, wie ein display:none entsteht.

                Aber wie es sich ändert. Damit AT auf Änderungen reagiert, muss man sie wohl darauf aufmerksam machen. Oder sie per aria-live dazu bringen, aufmerksam zu sein.

                Die Alternative zu fachlichen Selektoren im CSS sind generische, die sich auf die Darstellung beziehen, also rot/blau/oben/unten. Es müssten dann genügend Klassen-Selektoren für Farben und dergleichen zur Verfügung stehen. Kann man machen, aber da kenne ich mindestens einen, der zum Podologen muss, um seine Fußnägel wieder richten zu lassen.

                YMMD.

                Dann wird die Zuordnung Kategorie–Farbe im Markup getroffen. Hm …

                Eine weitere Alternative sind Inline-Styles, die man eben direkt setzt, ohne das grundlegende Seiten-Design-CSS anzufassen. Auch das ist icht gerade beliebt.

                Wenn der Stil untrennbar zum Inhalt gehört, sind Inline-Styles durchaus angebracht.

                Aber nicht, dass ich den Fall hier für gegeben halte.

                LLAP 🖖

                --
                “You might believe there are benefits for the developer, but first of all, you should put those behind the interest of the user.” —Stefan Tilkov
                Selfcode: sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
            2. @@Rolf b

              "Lehrer" und "Schüler" sind fachliche Kategorien, keine technischen, und das bedeutet, dass im Style Sheet Fachlogik steckt.

              Nein, die „Fachlogik“ steckt im Markup. Dort werden die Dinge den Kategorien zugeordnet.

              Sollte eine weitere Kategorie hinzukommen, muss man diese Filter-Styles erweitern.

              Wenn nicht anfangs schon alle denkbaren Kategorien eingeplant wurden (auch wenn es noch keine zugehörigen Dinge gibt), ja. Ohne den Inhalt zu kennen, kann man halt nicht designen. Wenn sich der Inhalt (grundlegend) ändert, darf sich auch das Design ändern.

              Aber wegen redaktionellen Änderungen? Wozu auch Kategorisierungen von Inhalten zählen?

              Tun sie das? Oder ist die Kategorisierung nicht eine grundsätzliche Sache?

              Jedenfalls: Ja, wenn eine vorher nicht eingeplante Kategorie hinzukommt, wird das Stylesheet ergänzt. Vielleicht ändern sich ja auch Farben der bisherigen Kategorien, um für eine hinzukommende Farbe genügend Kontrast zu haben.

              LLAP 🖖

              --
              “You might believe there are benefits for the developer, but first of all, you should put those behind the interest of the user.” —Stefan Tilkov
              Selfcode: sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
              1. "Lehrer" und "Schüler" sind fachliche Kategorien, keine technischen, und das bedeutet, dass im Style Sheet Fachlogik steckt.

                Nein, die „Fachlogik“ steckt im Markup. Dort werden die Dinge den Kategorien zugeordnet.

                Die Fachlogik, die ich meine, ist das Einblenden von Artikeln basierend auf dem Zustand einer Checkbox.

                Sollte eine weitere Kategorie hinzukommen, muss man diese Filter-Styles erweitern. Wenn nicht anfangs schon alle denkbaren Kategorien eingeplant wurden (...), ja. Ohne den Inhalt zu kennen, kann man halt nicht designen.

                Darauf wollte ich ja hinaus. WENN es planbar ist. Wenn die Kategorien fixiert sind und nicht von Inhaltsautoren frei wählbar. Aber das ist nun Spekulatius, und da kein Advent ist...

                Aber wegen redaktionellen Änderungen? Wozu auch Kategorisierungen von Inhalten zählen? Tun sie das? Oder ist die Kategorisierung nicht eine grundsätzliche Sache?

                Würde ich nach Stand der Diskussion mit einem klaren Jein beantworten :-) Aber damit hat Thomas zumindest ein Kriterium, nach dem er entscheiden kann ob die CSS Lösung für ihn eine gute Idee ist.

                Tschö Rolf