TS: List-Style-Type

Hello,

leider bin ich zu blöde den Text aus dem Wiki zu verstehen:

Mit CSS3 wurden eine Vielzahl neuer Aufzählungszeichen bzw. Nummerierungen definiert. Außerdem können durch die Angabe einer Zeichenkette, etwa list-style-type: "P"; oder list-style-type: "Punkt"; auch eigene Aufzählungszeichen festgelegt werden.

    für ungeordnete Listen
        box, Zeichen 25FD (◽)
        check, Zeichen 2713 (✓)
        diamond, Zeichen 25C6 (◆)
        dash, Zeichen 2014 (—)

Ich würde gerne als Aufzählungszeichen das Box-Symbol haben, schön groß zum abhaken auf der ausgedruckten Kontrollliste mit dem Stift, also ganz unelektronisch.

Leider bekomm eich meinen ULs das Box-Symbol nicht beigebogen.

Liebe Grüße
Tom S.

--
Es gibt nichts Gutes, außer man tut es!
Das Leben selbst ist der Sinn.
  1. @@TS

    leider bin ich zu blöde den Text aus dem Wiki zu verstehen:

    Leider hast du die Stelle im Wiki nicht gezeigt. Vielleicht hat der Schreiberling ja auch die Spec nicht verstannden und was Blödes ins Wiki geschrieben.

    Mit CSS3 wurden eine Vielzahl neuer Aufzählungszeichen bzw. Nummerierungen definiert. Außerdem können durch die Angabe einer Zeichenkette, etwa list-style-type: "P"; oder list-style-type: "Punkt"; auch eigene Aufzählungszeichen festgelegt werden.

    Ja. Und wo ist dein Problem damit?

    list-style-type: '◽ ' sollte ebenso funktionieren wie list-style-type: '\25FD ' (man beachte die 2 Leerzeichen).

    für ungeordnete Listen
    box, Zeichen 25FD (◽)
    check, Zeichen 2713 (✓)
    diamond, Zeichen 25C6 (◆)
    dash, Zeichen 2014 (—)

    Nichts davon steht in der Spec. Nichts davon funktioniert in Firefox oder Chrome.

    Du kannst aber mit einer At-Regel deinen eigenen Aufzählungs- bzw. Nummerierungsstil festlegen:

    @counter-style box
    {
    	system: cyclic;
    	symbols: '\25FD ';
    	suffix: ' ';
    }
    
    ul
    {
    	list-style-type: box;
    }
    

    LLAP 🖖

    --
    “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
    1. Hello,

      Leider hast du die Stelle im Wiki nicht gezeigt. Vielleicht hat der Schreiberling ja auch die Spec nicht verstannden und was Blödes ins Wiki geschrieben.

      siehe hier

      [...]
      Danke. Das sollte auch so ins Wiki, wenn ich es nicht nur übersehen habe.
      Komme jetzt aber gerade selber nicht dazu...

      Wie kann ich jetzt nur das List-Style-Symbol etwas vergrößern gegenüber dem nachfolgenden Text?

      Liebe Grüße
      Tom S.

      --
      Es gibt nichts Gutes, außer man tut es!
      Das Leben selbst ist der Sinn.
      1. Hallo TS,

        Wie kann ich jetzt nur das List-Style-Symbol etwas vergrößern gegenüber dem nachfolgenden Text?

        Wenn du keine Pseudoelemente verwenden möchtest, könntest du

        li::-moz-list-bullet {
          /* */
        }
        

        verwenden

        Diese Funktion entspricht nicht dem Standard und ist nicht Teil der Standardisierung. Diese Funktion darf nicht in Webseiten, die via das Internet zugänglich sind, benutzt werden: Sie wird nicht für alle Nutzer funktionieren. Es kann zu umfangreichen Inkompatibilitäten zwischen verschiedenen Implementierungen kommen und die Funktionsweise oder Eigenschaften könnten in der Zukunft verändert werden.

        Bis demnächst
        Matthias

        --
        Rosen sind rot.
        1. Hello,

          Wie kann ich jetzt nur das List-Style-Symbol etwas vergrößern gegenüber dem nachfolgenden Text?

          Wenn du keine Pseudoelemente verwenden möchtest, könntest du

          li::-moz-list-bullet {
            /* */
          }
          

          verwenden

          Danke. Aber das lasse ich lieber. Dann werde ich lieber ein Image vorlegen. Aber da das Ganze die Güte des Inhaltes der ca. 180 Seiten, die ich heute noch aus dem Draft-Mode in gültiges (passives) HTML überführen muss nicht steigert, schiebe ich es jetzt vor mir her für die Umsetzung mit einer aktiven Lösung (CMS, Datenbank-Backend).

          Bis demnächst ...
          und
          liebe Grüße

          Tom S.

          --
          Es gibt nichts Gutes, außer man tut es!
          Das Leben selbst ist der Sinn.
          1. Hej TS,

            Danke. Aber das lasse ich lieber. Dann werde ich lieber ein Image vorlegen. Aber da das Ganze die Güte des Inhaltes der ca. 180 Seiten, die ich heute noch aus dem Draft-Mode in gültiges (passives) HTML überführen muss nicht steigert, schiebe ich es jetzt vor mir her für die Umsetzung mit einer aktiven Lösung (CMS, Datenbank-Backend).

            Mach doch einfach so was für Deine private Checkliste:

            ul {
              list-style: none;
            }
            li::before {
              content: '';
              display: inline-block;
              width: 1.5em;
              height: 1.5em;
              background: rgba(0, 0, 0, .25);
              position: relative;
              left: -1.5em;
              top: 0;
            }
            

            Nicht ausprobiert, einfach so runtergeschrieben. Wenn es nicht klappt, bitte noch mal melden.

            Entfernt die vorhandenen Aufzählungszeichen und setzt statt dessen ein grau hinterlegtes Pseudoelement vor die Listeneinträge.

            Kann man mit text-indent usw sicher noch aufhübschen, aber dann muss man das wirklich ausprobieren. So blind positionieren ist nichts für mich.

            Marc

    2. Servus!

      @@TS

      leider bin ich zu blöde den Text aus dem Wiki zu verstehen:

      @TS fett oben über der Stelle ist die Browserunterstützung, in der alle Felder leer sind. Also solltest du schon vorher wissen, dass dieser Vorschlag wohl nicht implementiert wurde.

      Leider hast du die Stelle im Wiki nicht gezeigt.

      @Gunnar Bittersmann Ich hab' einfach list-style-type eingegeben.

      Vielleicht hat der Schreiberling ja auch die Spec nicht verstannden und was Blödes ins Wiki geschrieben.

      Das war @Matthias Apsel am 30.12.2013

      Mit CSS3 wurden eine Vielzahl neuer Aufzählungszeichen bzw. Nummerierungen definiert. Außerdem können durch die Angabe einer Zeichenkette, etwa list-style-type: "P"; oder list-style-type: "Punkt"; auch eigene Aufzählungszeichen festgelegt werden.

      Ja. Und wo ist dein Problem damit?

      list-style-type: '◽ ' sollte ebenso funktionieren wie list-style-type: '\25FD ' (man beachte die 2 Leerzeichen).

      Sowohl das im Wiki genannte Beispiel als auch die von dir genannten Beispiele funktionieren nur im Firefox, nicht in Chrome und in IE11 (mehr hab ich nicht getestet).

      für ungeordnete Listen
      box, Zeichen 25FD (◽)
      check, Zeichen 2713 (✓)
      diamond, Zeichen 25C6 (◆)
      dash, Zeichen 2014 (—)

      Nichts davon steht in der Spec. Nichts davon funktioniert in Firefox oder Chrome.

      Nichts anderes hat das Wiki behauptet.

      Du kannst aber mit einer At-Regel deinen eigenen Aufzählungs- bzw. Nummerierungsstil festlegen:

      @counter-style box
      {
      	system: cyclic;
      	symbols: '\25FD ';
      	suffix: ' ';
      }
      
      ul
      {
      	list-style-type: box;
      }
      

      Alternativ list-style-type: none; und ein Pseudoelement davor mit dem gewünschten Inhalt mittels content.

      Herzliche Grüße

      Matthias Scharwies

      --
      Es gibt viel zu tun: ToDo-Liste
      1. Hello,

        Alternativ list-style-type: none; und ein Pseudoelement davor mit dem gewünschten Inhalt mittels content.

        Ist mir jetzt zuviel Stress.

        War auch nicht böse gemeint;
        ich hatte nur gehofft, auch mal das gedeckte Silbertablett entdecken zu dürfen ;-O

        Liebe Grüße
        Tom S.

        --
        Es gibt nichts Gutes, außer man tut es!
        Das Leben selbst ist der Sinn.
        1. Hej TS,

          Hello,

          Alternativ list-style-type: none; und ein Pseudoelement davor mit dem gewünschten Inhalt mittels content.

          Ist mir jetzt zuviel Stress.

          War auch nicht böse gemeint;
          ich hatte nur gehofft, auch mal das gedeckte Silbertablett entdecken zu dürfen ;-O

          Bittesehr: Silbertablett 😉

          Marc

      2. @@Matthias Scharwies

        fett oben über der Stelle ist die Browserunterstützung, in der alle Felder leer sind. Also solltest du schon vorher wissen, dass dieser Vorschlag wohl nicht implementiert wurde.

        Was hat ein Vorschlag, der nie implementiert wurde und der in keiner aktuellen Spec (weder WD noch ED) zu finden ist, in der SELFHTML-Doku zu suchen?

        Sowohl das im Wiki genannte Beispiel als auch die von dir genannten Beispiele funktionieren nur im Firefox, nicht in Chrome und in IE11 (mehr hab ich nicht getestet).

        Yep. Was angesichts der Tatsache, dass Tab Atkins von Google Autor der entsprechenden CSS-Module ist, schon bemerkenswert ist.

        Alternativ list-style-type: none; und ein Pseudoelement davor mit dem gewünschten Inhalt mittels content.

        Solange die schöne™ Lösung nicht browserübergreifend zur Verfügung steht, ist dieser Hack das Mittel der Wahl.

        LLAP 🖖

        --
        “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
        1. Servus!

          @@Matthias Scharwies

          fett oben über der Stelle ist die Browserunterstützung, in der alle Felder leer sind. Also solltest du schon vorher wissen, dass dieser Vorschlag wohl nicht implementiert wurde.

          Was hat ein Vorschlag, der nie implementiert wurde und der in keiner aktuellen Spec (weder WD noch ED) zu finden ist, in der SELFHTML-Doku zu suchen?

          Ich glaub, dass hier die Betonung auf ... in keiner aktuellen Spec ... liegen müsste - und da sind wir wieder bei der alten Geschichte - wer pflegt die Seiten der MDN und vor alle unsere Inhalte im Wiki? Es wäre gut, wenn dort jeder, der einen Fehler findet, zumindest ein {{ToDo}} setzen sollte.

          Ist jetzt erledigt. Was sowieso gefehlt hatte war ein link auf das bestehende Tutorial:

          in dem die Vorgehensweise mit lits-style-type:none; und Pseudoelement li::before gezeigt wird:

          li {
            list-style-type: none;
          }
          li::before  {
            content: "♥ ";    
            color: red;
            font-size: 1.5em;
          }
          

          Herzliche Grüße

          Matthias Scharwies

          --
          Es gibt viel zu tun: ToDo-Liste
          1. @@Matthias Scharwies

            und da sind wir wieder bei der alten Geschichte - wer pflegt die Seiten der MDN und vor alle unsere Inhalte im Wiki?

            Richtig, die alte Geschichte: meine Kritik am Wiki. MDN hat die (Wo)manpower, seine Seiten zu pflegen, SELFHTML hat sie nicht.

            Deshalb ist im SELFHTML-Wiki einiges veraltet oder falsch und es ist nicht absehbar, dass sich das zukünftig bessert. Flickste ein Loch, tun sich zwei andere auf …

            LLAP 🖖

            --
            “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
            1. Servus!

              Richtig, die alte Geschichte: meine Kritik am Wiki. MDN hat die (Wo)manpower, seine Seiten zu pflegen, SELFHTML hat sie nicht.

              Aber selbst bei der MDN sieht man, dass die Bestände nicht gepflegt werden. Viele der Artikel wurden bei der Implementierung neuer Eigenschaften geschrieben, wobei der erklärende Teil oft direkt aus der Spec übernommen wurde. Die damals verwendeten vendor-prefixe stehen dann 3-4 Jahre später immer noch drin - schade.

              Ein Beispiel fällt mir jetzt aber grad nicht ein - hab aber mindestens 2 in den letzten Wochen gesehen.

              Herzliche Grüße

              Matthias Scharwies

              --
              Es gibt viel zu tun: ToDo-Liste
            2. Hej Gunnar,

              @@Matthias Scharwies

              Deshalb ist im SELFHTML-Wiki einiges veraltet oder falsch und es ist nicht absehbar, dass sich das zukünftig bessert. Flickste ein Loch, tun sich zwei andere auf …

              Das ist Unsinn. Es tun sich keine zwei andere auf, wenn man eines flickt. Wenn ich eines flicke, ist es dicht. Sonst passiert nichts.

              Deswegen wäre es schön, wenn das viele machen würde. 😉

              Marc

              1. @@marctrix

                Flickste ein Loch, tun sich zwei andere auf …

                Das ist Unsinn.

                Nein. Nicht so wie ich es meinte: nicht kausal, sondern temporär.

                Es tun sich keine zwei andere auf, wenn man eines flickt.

                Doch, wenn „wenn“ hier nicht für if, sondern für when steht: In der Zeit, wo du ein Loch flickst, tun sich zwei andere auf.

                Ganz einfach weil sich die Webtechnologie so rasant weiterentwicklet, dass das SELFHTML-Wiki da nicht mithalten kann.

                LLAP 🖖

                --
                “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
                1. Hej Gunnar,

                  @@marctrix

                  Flickste ein Loch, tun sich zwei andere auf …

                  Das ist Unsinn.

                  Nein. Nicht so wie ich es meinte: nicht kausal, sondern temporär.

                  OK, aber auch dagegen hilft mein Vorschlag, sich rege zu beteiligen. Obwohl ich durchaus verstehen kann, wenn Du in Frage stellst, dass das Wiki noch Sinn. Ich sehe es trotzdem anders. Insbesondere dank angebundenem Forum bringt es durchaus was. Wie hier bereits gesagt wurde, findet man auch auf MDN veraltete Informationen.

                  Wichtig ist daher prominent das letzte Bearbeitung-Datum eines Beitrages anzuzeigen direkt in der Nähe der Überschrift am besten!

                  Marc

                  1. Hallo marctrix,

                    Wichtig ist daher prominent das letzte Bearbeitung-Datum eines Beitrages anzuzeigen direkt in der Nähe der Überschrift am besten!

                    Gute Idee.

                    Mit einem kleinen JavaScript sollte das machbar sein.

                    Schade, dass das Markup nicht so gut ist.

                    <li id="footer-info-lastmod"> Diese Seite wurde zuletzt am 30. August 2017 um 12:28 Uhr geändert.</li>
                    
                    

                    Bis demnächst
                    Matthias

                    --
                    Rosen sind rot.
                    1. Hej Matthias,

                      Wichtig ist daher prominent das letzte Bearbeitung-Datum eines Beitrages anzuzeigen direkt in der Nähe der Überschrift am besten!

                      Gute Idee.

                      Mit einem kleinen JavaScript sollte das machbar sein.

                      Schade, dass das Markup nicht so gut ist.

                      <li id="footer-info-lastmod"> Diese Seite wurde zuletzt am 30. August 2017 um 12:28 Uhr geändert.</li>
                      
                      

                      Ah - wieder was übersehen. Aber gut, dass es schon mal da ist und im Footer könnte man eigentlich auch mal gucken…

                      Marc

                  2. Hello,

                    Wichtig ist daher prominent das letzte Bearbeitung-Datum eines Beitrages anzuzeigen direkt in der Nähe der Überschrift am besten!

                    Diese Forderung mag ich ich mit meiner zarten Stimme voll unterstützen.
                    Und bitte auch den letzten Bearbeiter anzeigen.

                    Liebe Grüße
                    Tom S.

                    --
                    Es gibt nichts Gutes, außer man tut es!
                    Das Leben selbst ist der Sinn.
                    1. Hallo TS,

                      Und bitte auch den letzten Bearbeiter anzeigen.

                      Warum wäre das für dich wichtig?

                      Bis demnächst
                      Matthias

                      --
                      Rosen sind rot.
                      1. Hello,

                        Und bitte auch den letzten Bearbeiter anzeigen. Warum wäre das für dich wichtig?

                        Damit ich seine abweichenden Ideen erst freundlichst direkt mit ihm/ihr diskutieren kann, bevor ich sie arrogant mit meinen überschreibe...

                        Liebe Grüße
                        Tom S.

                        --
                        Es gibt nichts Gutes, außer man tut es!
                        Das Leben selbst ist der Sinn.
                        1. Hallo TS,

                          Damit ich seine abweichenden Ideen erst freundlichst direkt mit ihm/ihr diskutieren kann, bevor ich sie arrogant mit meinen überschreibe...

                          Wenn du das planst, schaust du ohnehin in die Versionsgeschichte. Ich denke, für den Leser ist die Info, wer den Artikel zuletzt angefasst hat, nicht wichtig. Zumal die letzte Änderung auch nur die Korrektur eines Rechtschräibfehlers sein kann.

                          Bis demnächst
                          Matthias

                          --
                          Rosen sind rot.
                2. Hallo,

                  Nein. Nicht so wie ich es meinte: nicht kausal, sondern temporär.

                  Na, wenn's nur temporär ist, das geht vorüber…

                  Gruß
                  Kalk

          2. Hello,

            in dem die Vorgehensweise mit lits-style-type:none; und Pseudoelement li::before gezeigt wird:

            li {
              list-style-type: none;
            }
            li::before  {
              content: "♥ ";    
              color: red;
              font-size: 1.5em;
            }
            

            Danke, das hilft mir doch schon weiter... ;-)

            Liebe Grüße
            Tom S.

            --
            Es gibt nichts Gutes, außer man tut es!
            Das Leben selbst ist der Sinn.