Ένας αναζωογονητικός απλός (αλλά έξυπνος) τρόπος για να δημιουργήσετε ένα κατακόρυφο χρονοδιάγραμμα χρησιμοποιώντας μια ευθεία, σημασιολογική μη ταξινομημένη λίστα (
- ) από τον Peter Cooper.
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; )Ο Πέτρος πήρε την ιδέα αφού το είδε να εφαρμόζεται στον ιστότοπο BBC News Αυτή η έκδοση πήγε με μια παραγγελία λίστα (
- ) στοιχείο που έχει νόημα εάν ασχολούμαστε με μια συγκεκριμένη σειρά γεγονότων. Ο Peter's take χρησιμοποιεί μια μη ταξινομημένη λίστα που μπορεί να είναι εξίσου καλά.
) έχει: πριν από το ψευδο-στοιχείο που είναι κενό από άποψη περιεχομένου, αλλά επισημαίνεται ως πλάτος 2 pixel με κόκκινο χρώμα φόντου. Αυτό δημιουργεί την «γραμμή» πριν από κάθε- . Το περαιτέρω στυλ τοποθετεί στη συνέχεια αυτό το ψευδο-στοιχείο / γραμμή.
Με λίγα λόγια, είναι μια τυπική λίστα HTML (χρησιμοποιεί το BBC
αλλά πήγα με
) όπου κάθε στοιχείο λίστας (
Η έξυπνη προσθήκη SVG που εξοικονομεί σήματα στο :afterψευδο-στοιχείο είναι ευγενική προσφορά του Saadat. Η αρχική έκδοση περιλάμβανε επιπλέον ιδιότητες φόντου για να περιέχει το μέγεθος του SVG και να το αποτρέψει από την επανάληψη, αλλά δεν τα βρήκα απολύτως απαραίτητα, τουλάχιστον σε αυτό το πλαίσιο. Ωστόσο, παρατηρήστε ότι η σήμανση SVG χρησιμοποιεί σωστά το focusableχαρακτηριστικό για να το εμποδίσει να συμπεριληφθεί στην καρτέλα πληκτρολογίου. Ωραίες κινήσεις! ?
Εδώ είναι το αποτέλεσμα:
Ανατρέξτε στη
λίστα με τα μη ταξινομημένα στυλό ως συνεχές κατακόρυφο χρονοδιάγραμμα από τον Geoff Graham (@geoffgraham)
στο CodePen.
Πηγή