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

Γεννήτρια CSS Γραμμής Κύλισης

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

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

10px
8px

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

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

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

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

Αποτέλεσμα

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

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

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

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

Απολαμβάνετε αυτό το εργαλείο; Θεωρείτε αυτό το προϊόν χρήσιμο; Βλέπετε προοπτικές σε αυτό και θέλετε να το υποστηρίξετε;

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

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

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

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

Βασικά Πλεονεκτήματα

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

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

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