Her forleden så skulle jeg endre utseende på listemarkører med CSS. De er ikke så spennende ut av boksen, selv om man bruker list-style-type.

  • Firkantet
  • Kjedelig
  • Liste

Her er det rom for forbedring. Hva med å kunne ha mer kontroll over stylingen?

Jeg husket vagt at dette var noe jeg hadde gjort for lenge siden. CSS har gått fremover siden den gang og nå kan det gjøres enda lettere ved å bruke en ::marker-selector.

::marker-selectoren har vært støttet i nesten alle nettlesere en god stund allerede.

⚠️ Bortsett fra i Safari dessverre. Ifølge caniuse.com så er det støtta, men det gjelder foreløpig ikke styling av content. Vi må vente på at denne bug'en blir fikset

Hva gjorde man før?

For å sette pris på det nye så kan vi sammenligne det med det vi gjorde før. Hvis du ville style listemarkørene uavhengig av teksten i listen, så kunne du bruke følgende oppskrift.

Først fjerner vi standardmarkøren:

ul.gammel {
    list-style-type: none;
}

Deretter legger vi på et ::before-pseudo-element, som vi kan style slik vi vil:

ul.gammel li::before {
    content: "👴";
    margin-left: -1.2em;
}

Vi må bruke negativ margin for å flytte markøren vekk fra teksten. Det er ikke pent, men etter noen runder i CSS-verden så vet vi at det brister ikke alt som knaker. Vi er vant til å bruke skitne knep for å få viljen vår.

HTMLen lager vi slik:

<ul class="gammel">
    <li>Det</li>
    <li>Gamle</li>
    <li>Trikset</li>
</ul>
  • Det
  • Gamle
  • Trikset

Dette er for øvrig omtrent den samme CSSen vi bruker for å style listene på kodemaker.no.

Hvordan funker ::marker?

Først og fremst, ::marker er et CSS pseudo-element som selekterer boksen rundt liste-elementet. Det inneholder typisk en runding eller et tall. HTML-elementene <ol>, <li> og <summary> har ::marker som standard, men det funker også på alle elementer som du setter til display: list-item.

Det nye nå er at vi kan adressere denne

ul.nytt li::marker {
    content: '🐣';
}

Vi kan gi liste-teksten litt ekstra rom:

ul.nytt li {
    padding-left: 0.2em;
}

Med følgende HTML:

<ul class="nytt">
    <li>Et</li>
    <li>Nytt</li>
    <li>Triks</li>
</ul>

så får vi:

  • Et
  • Nytt
  • Triks

Dette var bittelitt bedre enn det gamle trikset. Her slipper vi å sette list-style-type: none. Semantisk sett utrykker vi oss nærmere det vi ønsker å oppnå.

Hva med numererte lister?

Her kan vi lene oss på CSS-counters for å få tak i tallene i listen.

ol.moons li::marker {
    content: counter(list-item) "🌛";
    color: #eab515;
}

For å gi teksten litt pusterom kan vi padde den ut litt

ol.moons li {
    padding-left: 10px;
}

Her er en liste over de fire største månene til Jupiter, sortert etter størrelse

  1. Ganymede
  2. Callisto
  3. Io
  4. Europa

CSS blir bare bedre og bedre. Dette var bare et lite eksempel på en forbedring som er kommet de siste årene.