Lukas.: CSS: list-style-image

Hallo,

.list ul {
list-style-image: url('http://localhost/haken2.png');
}

ist es möglich, hier noch ein vertical-align für das image hinzuzufügen?

L.

  1. @@Lukas.

    .list ul {
    list-style-image: url('http://localhost/haken2.png');
    }
    

    ist es möglich, hier noch ein vertical-align für das image hinzuzufügen?

    AFAIS nein.

    Du kannst aber list-style(-type): none setzen und das Bild als Hintergrundbild für die lis nehmen, dann kannst du es nach Belieben positionieren.

    LLAP 🖖

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

      Du kannst aber list-style(-type): none setzen und das Bild als Hintergrundbild für die lis nehmen, dann kannst du es nach Belieben positionieren.

      Danke für den Tip. Hat genau so funktioniert.

      L.

    2. Moin,

      Hintergrundbild finde ich persönlich keine gute Lösung für Listen. Mit ::before lässt sich dies m.E.n. besser bewerkstelligen.

      Gruß Bobby

      --
      -> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <- ### Henry L. Mencken ### -> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <- ### Viktor Frankl ### ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)
      1. hallo

        Hintergrundbild finde ich persönlich keine gute Lösung für Listen. Mit ::before lässt sich dies m.E.n. besser bewerkstelligen.

        Kommt darauf an, ob die Bullet-grafik selbst Informationsträger sein soll, oder ob sie lediglich die Eigenschaft unordered list-item darstellt.

        1. Hej beatovich,

          Hintergrundbild finde ich persönlich keine gute Lösung für Listen. Mit ::before lässt sich dies m.E.n. besser bewerkstelligen.

          Kommt darauf an, ob die Bullet-grafik selbst Informationsträger sein soll, oder ob sie lediglich die Eigenschaft unordered list-item darstellt.

          Genau das ist die Aufgabe dieser Bildchen. Eine Information speziell für Sehende, denn Blinde bekommen beispielsweise vorgelesen, dass es sich um eine Liste mit soundsovielen Einträgen handelt und wo ein neuer Listeneintrag beginnt.

          Das bedeutet auch, dass die Listeneinträge ausreichend groß sein müssen. Das bei der Hintergrundgrafik oder einer Umsetzung mittels ::before bedenken! - Daher auch möglichst SVG nutzen, damit die Grafik ansehnlich bleibt.

          Bei ::before auch daran denken, dass der Inhalt Screenreader-Nutzern ausgegeben wird. Da die bereits wissen, dass es sich um einen Listeneintrag handelt, keine entsprechenden Texte einfügen!

          Marc

          1. Moin,

            Bei ::before auch daran denken, dass der Inhalt Screenreader-Nutzern ausgegeben wird. Da die bereits wissen, dass es sich um einen Listeneintrag handelt, keine entsprechenden Texte einfügen!

            Bist du sicher dass Pseudoelemente von Screenreadern interpretiert werden? Ich dachte diese werden dem DOM nicht hinzugefügt... deswegen auch "Pseudo"....

            Gruß Bobby

            --
            -> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <- ### Henry L. Mencken ### -> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <- ### Viktor Frankl ### ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)
            1. @@bobby

              Bei ::before auch daran denken, dass der Inhalt Screenreader-Nutzern ausgegeben wird. Da die bereits wissen, dass es sich um einen Listeneintrag handelt, keine entsprechenden Texte einfügen!

              Bist du sicher dass Pseudoelemente von Screenreadern interpretiert werden?

              Manche (die meisten?) tun es, manche nicht (IE).

              tink: Accessibility support for CSS generated content

              Ich dachte diese werden dem DOM nicht hinzugefügt... deswegen auch "Pseudo"....

              Siehe dortige Diskussion.

              LLAP 🖖

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

          Seit wann ist ein Pseudoelement Informationsträger? Ich dachte dies wird nicht in das DOM aufgenommen! Deswegen wird solch ein Element eigentlich nich von Screenreadern interpretiert? Oder lieg ich da falsch?

          Gruß Bobby

          --
          -> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <- ### Henry L. Mencken ### -> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <- ### Viktor Frankl ### ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)
          1. Hej bobby,

            Seit wann ist ein Pseudoelement Informationsträger?

            Schon immer. Pseudoelemente werden für Texte oder Bilder (meist Icons) verwendet, die z.B. anzeigen, ob ein Link zu einer internen oder externen Seite führt.

            Screenreader-Nutzern musste das früher mit einem zusätzlichen versteckten Text (z.B. in einem extra span-Element) mitgeteilt werden.

            Heute ist die Verwendung von SVGs angebracht. Für Screenreader-Nutzer sollten sinnvolle „accessible names“ generiert werden. Das kann der Einfachheit halber mit einem alt-Attribut geschehen, muss es aber nicht.[1] (siehe Jan Eric Hellbusch: „Alternativtext ohne alt-Attribut“)

            Ich dachte dies wird nicht in das DOM aufgenommen!

            Aber in den Accessibility-Tree.

            Deswegen wird solch ein Element eigentlich nich von Screenreadern interpretiert? Oder lieg ich da falsch?

            Screenreader interpretieren ohnehin nichts. Sie geben aus, was Browser ihnen anbieten (über entsprechende APIs [2]).

            Es liegt also erst mal am Browser, die entsprechenden Informationen weiterzureichen - was Screenreader daraus machen, ist wieder eine andere Sache — diese werden ja auch sukzessive weiterentwickelt.

            Mit Stand 2016 wurden Pseudo-Elemente bereits von den meisten Browser-Screenreader-Kombinationen ausgegeben. Einen aktuellen Stand der Unterstützung findest du bei — Mist finde ich jetzt nicht :(

            Sorry…

            Marc


            1. Jan Eric Hellbusch: „Alternativtext ohne alt-Attribut“ ↩︎

            2. Wikipedia: „Screenreader - Accessibility APIs“ ↩︎