⭐ 0
🔍
Κείμενο Εικόνα PDF & Έγγραφα Ήχος Μουσική Ηλεκτρονικά Χρόνος Βοηθητικά προγράμματα Επικυρωτές Εσωτερισμός Παιχνίδια

CSS Scrollbar Generator

Δώστε στυλ στο πλάτος, το κομμάτι, τον αντίχειρα και το χρώμα μιας γραμμής κύλισης και, στη συνέχεια, δείτε το πραγματικό αποτέλεσμα WebKit δίπλα στο πραγματικό αποτέλεσμα του Firefox — δύο πραγματικά διαφορετικά συστήματα προγράμματος περιήγησης, το ένα δίπλα στο άλλο.

10px
8px

Σχεδιασμένο με ψευδοστοιχεία ::-webkit-scrollbar — αυτό το πλαίσιο αποδίδεται μέσω της πραγματικής μηχανής του προγράμματος περιήγησής σας, εάν είναι Chrome, Safari ή Edge.

Σχεδιασμένο με τις ιδιότητες πλάτους γραμμής κύλισης και χρώματος γραμμής κύλισης του Firefox. Άλλα προγράμματα περιήγησης τα αγνοούν και εμφανίζουν τη δική τους προεπιλεγμένη γραμμή κύλισης εδώ — ανοίξτε αυτήν τη σελίδα στον Firefox για να δείτε το πραγματικό αποτέλεσμα.

Ο Firefox δεν έχει ξεχωριστό χρώμα αιώρησης, ακτίνα περιγράμματος αντίχειρα ή ανεξάρτητο στυλ κομματιού — μόνο πλάτος γραμμής κύλισης, αντιστοιχισμένο εδώ από το επιλεγμένο πάχος στην πραγματική λέξη-κλειδί: thin

Επεξεργασία... 0%

Αποτέλεσμα

Γραμμές κύλισης σε στυλ Chrome, Safari και Edge με την οικογένεια ψευδοστοιχείων ::-webkit-bar κύλισης: ξεχωριστοί κανόνες για το κομμάτι, τον αντίχειρα και την κατάσταση αιώρησης του αντίχειρα, συν ένα ακριβές πλάτος pixel και μια ακτίνα περιγράμματος αντίχειρα. Ο Firefox αγνοεί όλα αυτά εντελώς και αντ' αυτού διαβάζει δύο τυπικές ιδιότητες, το scrollbar-width και το scrollbar-color, που αργότερα εισήχθησαν στην προδιαγραφή CSS Scrollbars. Δεν πρόκειται για δύο διαλέκτους του ίδιου χαρακτηριστικού — είναι δύο διαφορετικά σύνολα χαρακτηριστικών με διαφορετικά ανώτατα όρια και οι περισσότερες γεννήτριες γραμμών κύλισης χαρτογραφούν αθόρυβα το κενό εμφανίζοντας μόνο το αποτέλεσμα WebKit. Αυτό δεν κάνει.

Ορίστε το πλάτος, το χρώμα του κομματιού, το χρώμα του αντίχειρα, το χρώμα του δείκτη και την ακτίνα γωνίας αντίχειρα μία φορά και το εργαλείο δημιουργεί δύο σετ κανόνων από τις ίδιες εισόδους. Το μπλοκ WebKit περιλαμβάνει ::-webkit-scrollbar, ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb και η κατάσταση :hover του στο αριστερό πλαίσιο επίδειξης, οπότε αυτό που βλέπετε εκεί είναι ακριβώς αυτό που αποδίδουν το Chrome, το Safari και το Edge — το πρόγραμμα περιήγησης δεν είναι προσομοιωμένο με πραγματικό κινητήρα. Το μπλοκ Firefox ορίζει το πλάτος της γραμμής κύλισης και το χρώμα της γραμμής κύλισης στο δεξιό δοκιμαστικό πλαίσιο χρησιμοποιώντας τη μηχανή του ίδιου προγράμματος περιήγησης, γι' αυτό το πλαίσιο φαίνεται διαφορετικό μόνο όταν αυτή η σελίδα είναι πραγματικά ανοιχτή στον Firefox. σε ένα πρόγραμμα περιήγησης WebKit εμφανίζει τη δική του προεπιλεγμένη γραμμή κύλισης εκεί και το εργαλείο το λέει αντί να προσποιείται μια εμφάνιση Firefox με δανεικά εικονοστοιχεία.

Η αντιστοίχιση πλάτους είναι το πιο ξεκάθαρο παράδειγμα του κενού: το πλάτος της γραμμής κύλισης του Firefox δέχεται μόνο τις λέξεις-κλειδιά auto, thin ή none — ποτέ μια ακριβή εικόνα pixel. Αυτή η γεννήτρια αντιστοιχίζει το επιλεγμένο πλάτος σας με ειλικρίνεια (τα 8 εικονοστοιχεία και κάτω γίνεται λεπτό, οτιδήποτε ευρύτερο γίνεται αυτόματο) και εμφανίζει τη λέξη-κλειδί που προκύπτει δίπλα στην καταχώρισή σας, αντί να εφεύρει ένα ψεύτικο αποτέλεσμα Firefox τέλειο για pixel που δεν υπάρχει. Ο Firefox δεν έχει επίσης τρόπο να ορίσει ένα ξεχωριστό χρώμα αιώρησης, μια ανεξάρτητη ακτίνα περιγράμματος αντίχειρα ή ένα χρώμα κομματιού που δεν είναι απλώς η δεύτερη τιμή του χρώματος της γραμμής κύλισης — αυτοί είναι μόνιμοι, πραγματικοί περιορισμοί της πλατφόρμας, όχι παραλείψεις σε αυτό το εργαλείο.

Αντιγράψτε το συνδυασμένο μπλοκ CSS και και τα δύο σύνολα κανόνων ταξιδεύουν μαζί, το καθένα κάτω από το δικό του σχόλιο, έτοιμο για επικόλληση σε ένα φύλλο στυλ ως έχει. Τα πάντα αποδίδονται και ενημερώνονται στο δικό σας πρόγραμμα περιήγησης καθώς σύρετε τα στοιχεία ελέγχου — χωρίς μεταφόρτωση, χωρίς λογαριασμό, χωρίς επιστροφή διακομιστή και συνεχίζει να λειτουργεί εκτός σύνδεσης μετά τη φόρτωση της σελίδας.

🛡️
Εκτελείται στο πρόγραμμα περιήγησης

Τα αρχεία και οι είσοδοι σας δεν φεύγουν ποτέ από αυτήν τη συσκευή. Η επεξεργασία εκτελείται εντελώς εκτός σύνδεσης. 100% ασφαλής.

Αποδεκτές Μορφές & Κανόνες

  • Κοινόχρηστα χειριστήρια — πλάτος, χρώμα διαδρομής, χρώμα αντίχειρα, χρώμα αιώρησης, ακτίνα γωνίας αντίχειρα — οδηγούν και τους δύο κινητήρες από τις ίδιες εισόδους.
  • Ειλικρινής αντιστοίχιση πλάτους γραμμής κύλισης: Ο Firefox υποστηρίζει μόνο λεπτή, αυτόματη ή καμία, επομένως η ακριβής τιμή pixel που επιλέγετε αντιστοιχίζεται στην πλησιέστερη πραγματική λέξη-κλειδί και εμφανίζεται δίπλα στην καταχώρισή σας.
  • Συνδυασμένη, αντιγράψιμη έξοδος CSS τόσο με τους κανόνες ψευδοστοιχείων WebKit όσο και με τις τυπικές ιδιότητες του Firefox, με σαφή σχολιασμό.

Βασικά Οφέλη

✓ Δύο ζωντανά κιβώτια επίδειξης αποδίδουν την πραγματική γραμμή κύλισης κάθε μηχανής — το πλαίσιο WebKit δείχνει πάντα το πραγματικό αποτέλεσμα στο Chrome, το Safari και το Edge, χωρίς ψεύτικη απόδοση.
✓ Το κενό στις δυνατότητες του Firefox εμφανίζεται, όχι κρυφό: το χρώμα του δείκτη του ποντικιού, η ακτίνα αντίχειρα και το ανεξάρτητο στυλ κομματιού απλά δεν υπάρχουν στον Firefox και το εργαλείο το λέει ξεκάθαρα αντί να προσποιείται το αντίθετο.
✓ Ένα μπλοκ CSS με δυνατότητα αντιγραφής αποστέλλει και τα δύο σύνολα κανόνων μαζί με ένα εναλλακτικό σχόλιο, έτοιμο για επικόλληση ως έχει.

Περιπτώσεις χρήσης

  • • Δώστε στυλ στη γραμμή κύλισης μιας πλαϊνής γραμμής ταμπλό για να ταιριάζει με την παλέτα της επωνυμίας, ενώ θα δείτε ακριβώς πόσο φτάνει αυτό το στυλ στον Firefox πριν το στείλετε.
  • • Πιάστε την ειλικρινή λέξη-κλειδί πλάτους γραμμής κύλισης Firefox για ένα επιλεγμένο πάχος αντί να μαντέψετε εάν το λεπτό ή το αυτόματο ταιριάζει περισσότερο.
  • • Αντιγράψτε ένα μπλοκ CSS που φέρει τόσο τους κανόνες ψευδοστοιχείων του WebKit όσο και τις τυπικές ιδιότητες του Firefox, καθεμία από τις οποίες σχολιάζεται καθαρά, απευθείας σε ένα φύλλο στυλ.