Nesutvarkytas sąrašas kaip laiko juosta CSS-gudrybės

Anonim

Gaiviai paprastas (tačiau gudrus) būdas sukurti vertikalią laiko juostą naudojant tiesųjį, semantinį nesutvarkytą sąrašą (

    ) iš Peterio Cooperio. 
    ol ( list-style-type: none; ) li ( position: relative; margin: 0; padding-bottom: 1em; padding-left: 20px; ) li:before ( content: ''; background-color: #c00; position: absolute; bottom: 0px; top: 0px; left: 6px; width: 3px; ) li:after ( content: ''; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' viewBox='0 0 32 32' focusable='false'%3E%3Ccircle stroke='none' fill='%23c00' cx='16' cy='16' r='10'%3E%3C/circle%3E%3C/svg%3E"); position: absolute; left: 0; top: 2px; height: 12px; width: 12px; )

    Piteriui kilo mintis, pamatęs, kaip ji įgyvendinama „BBC News“ svetainėje. Ši versija buvo su užsakytu sąrašu (

      ) elementą, kuris yra prasmingas, jei kalbame apie konkrečią įvykių tvarką. Peter's take naudojamas neužsakytas sąrašas, kuris gali būti toks pat geras.

      Trumpai tariant, tai yra įprastas HTML sąrašas (BBC naudoja

        bet nuėjau su
          ), kur kiekvienas sąrašo punktas (
        • ) turi: prieš pseudoelementą, kuris turinio atžvilgiu yra tuščias, bet pažymėtas kaip 2 pikselių pločio su raudona fono spalva. Tai sukuria „liniją“ prieš kiekvieną
        • . Tuomet šis pseudo elementas / linija išdėstomas tolesniu stiliumi.

      Išmanus, žymes taupantis SVG papildymas :afterpseudo elementu yra „Saadat“ mandagumas. Į pradinę versiją buvo įtrauktos papildomos fono savybės, nurodant SVG dydį ir neleidžiančios jam kartotis, tačiau aš jų nemaniau visiškai reikalingų, bent jau šiame kontekste. Tačiau atkreipkite dėmesį, kad SVG žymėjimas tinkamai naudoja focusableatributą, kad būtų išvengta jo įtraukimo į klaviatūros skirtuką. Gražūs judesiai! ?

      Štai rezultatas:

      Peržiūrėkite
      Geoffo Grahamo (@geoffgraham)
      „CodePen“ rašiklį „Nesutvarkytas sąrašas kaip nuolatinė vertikali laiko juosta“ .

      Šaltinis