Ο Χάρακας Σελίδας προσθέτει χάρακες στυλ Photoshop και μεταφερόμενες γραμμές οδηγών σε οποιαδήποτε ιστοσελίδα. Χάρακες με ακρίβεια pixel εκτείνονται κατά μήκος των άνω και αριστερών άκρων του viewport, και μπορείτε να σύρετε γραμμές οδηγών στη σελίδα για μέτρηση αποστάσεων, έλεγχο ευθυγράμμισης και επαλήθευση αποστάσεων — όλα απευθείας στη ζωντανή σελίδα.
Οι σχεδιαστές που εργάζονται σε Figma ή Photoshop βασίζονται σε χάρακες και οδηγούς για έλεγχο αποστάσεων και ευθυγράμμισης. Αλλά όταν αυτά τα σχέδια υλοποιούνται σε HTML/CSS, η επαλήθευση ακρίβειας pixel συνήθως σημαίνει άνοιγμα DevTools, hover σε στοιχεία ένα-ένα και σύγκριση υπολογισμένων τιμών με το mockup. Ο Χάρακας Σελίδας φέρνει την οικεία ροή εργασίας χάρακα-οδηγού απευθείας στον browser. Οριζόντιος χάρακας εκτείνεται στην κορυφή του viewport και κατακόρυφος στην αριστερή άκρη — και οι δύο δείχνουν θέσεις pixel. Κάντε κλικ και σύρετε από οποιοδήποτε χάρακα για να τραβήξετε γραμμή οδηγού στη σελίδα. Οι οδηγοί έχουν έγχρωμη κωδικοποίηση και δείχνουν τη θέση τους σε pixel. Η απόσταση μεταξύ οποιωνδήποτε δύο παράλληλων οδηγών υπολογίζεται και εμφανίζεται αυτόματα.
Ακριβείς χάρακες με σημάδια κλίμακας ανά 50 pixels εκτείνονται κατά μήκος των άνω και αριστερών άκρων του viewport. Οι χάρακες κυλούν με τη σελίδα και δείχνουν ακριβείς θέσεις pixel σε σχέση με την αρχή σελίδας (0,0). Σημάδια κλίμακας ανά 10px με ετικέτες ανά 50px.
Κάντε κλικ και σύρετε από τον οριζόντιο χάρακα για δημιουργία οριζόντιου οδηγού, ή από τον κατακόρυφο χάρακα για κατακόρυφο οδηγό. Οι οδηγοί συγχρονίζονται στη θέση κέρσορα και δείχνουν τις ακριβείς συντεταγμένες pixel. Σύρετε για αναθέση θέσης, διπλό κλικ για αφαίρεση.
Όταν τοποθετούνται δύο παράλληλοι οδηγοί, η απόσταση pixel μεταξύ τους υπολογίζεται αυτόματα και εμφανίζεται με αγκύλη σύνδεσης και ετικέτα. Τοποθετήστε δύο οριζόντιους οδηγούς 120px μακριά και δείτε την ένδειξη 120px μεταξύ τους.
Οι οριζόντιοι οδηγοί είναι μπλε, οι κατακόρυφοι κόκκινοι — κάνοντας εύκολη τη διάκρισή τους με μια ματιά όταν τοποθετούνται πολλαπλοί οδηγοί. Κάθε οδηγός δείχνει τη θέση του σε μικρό σήμα ετικέτας.
Οι χάρακες και οδηγοί αποδίδονται ως διαφανής επικάλυψη που δεν επηρεάζει το DOM, τη διάταξη ή JavaScript της σελίδας. Μπορείτε ακόμα να κάνετε κλικ για αλληλεπίδραση με στοιχεία σελίδας. Η επικάλυψη καταγράφει μόνο κλικ στους χάρακες και λαβές οδηγών.
Τοποθετήστε όσους οδηγούς χρειάζεστε — δεν υπάρχει όριο. Δημιουργήστε πλήρες grid μέτρησης με οριζόντιους και κατακόρυφους οδηγούς που σηματοδοτούν κάθε σημαντικό σημείο ευθυγράμμισης στη σελίδα.
Το mockup λέει ότι η κεφαλίδα είναι 80px ψηλή και το περιεχόμενο ξεκινά στα 120px από την κορυφή. Τοποθετήστε οριζόντιους οδηγούς σε αυτές τις θέσεις και επαληθεύστε αμέσως αν η υλοποιημένη σελίδα ταιριάζει με τις προδιαγραφές σχεδίασης.
Τοποθετήστε οδηγούς στην κορυφή και κάτω μέρος επαναλαμβανόμενων στοιχείων (κάρτες, λίστα, ενότητες) για επαλήθευση ότι όλα έχουν ίδια απόσταση. Ασυνεπή κενά μεταξύ στοιχείων γίνονται αμέσως εμφανή.
Τοποθετήστε κατακόρυφο οδηγό στην αριστερή άκρη μιας επικεφαλίδας, στη συνέχεια ελέγξτε αν το κείμενο παραγράφου, τα κουμπιά και οι εικόνες από κάτω ευθυγραμμίζονται στην ίδια γραμμή. Αναντιστοιχίες ακόμα και λίγων pixels είναι ορατές κατά μήκος του οδηγού.
Τοποθετήστε δύο κατακόρυφους οδηγούς στην αριστερή και δεξιά άκρη ενός στοιχείου για μέτρηση πλάτους. Τοποθετήστε δύο οριζόντιους οδηγούς για ύψος. Η αυτόματα υπολογισμένη απόσταση σάς δίνει τις ακριβείς διαστάσεις pixel.
Τοποθετήστε κατακόρυφο οδηγό σε κοινά πλάτη breakpoint (768px, 1024px, 1280px) και αλλάξτε μέγεθος στον browser για να ελέγξετε αν τα στοιχεία αναδιατάσσονται σωστά σε κάθε breakpoint. Οι οδηγοί παραμένουν σταθεροί ως οπτικά σημεία αναφοράς.
Ανοίξτε το floating dock του DevSuite Pro και κάντε κλικ στο εικονίδιο Χάρακα Σελίδας. Χάρακες με ακρίβεια pixel εμφανίζονται κατά μήκος των άνω και αριστερών άκρων του viewport.
Κάντε κλικ και σύρετε από τον άνω χάρακα για τοποθέτηση οριζόντιας γραμμής οδηγού, ή από τον αριστερό χάρακα για κατακόρυφο οδηγό. Ο οδηγός ακολουθεί τον κέρσορα και συγχρονίζεται στη θέση pixel όπου αφήνετε.
Κάθε οδηγός δείχνει τη θέση pixel (π.χ. y: 200px). Όταν τοποθετούνται δύο παράλληλοι οδηγοί, η απόσταση μεταξύ τους εμφανίζεται αυτόματα με επισημασμένη αγκύλη.
Σύρετε οποιοδήποτε οδηγό για μετακίνηση σε νέα θέση — οι ετικέτες απόστασης ενημερώνονται σε πραγματικό χρόνο. Διπλό κλικ σε οδηγό για αφαίρεσή του από τη σελίδα.
Κάντε κλικ ξανά στο εικονίδιο Χάρακα Σελίδας για απόκρυψη όλων των χαρακών και οδηγών. Οι θέσεις οδηγών διατηρούνται αν επανενεργοποιήσετε κατά την ίδια συνεδρία.
Εγκαταστήστε το DevSuite Pro δωρεάν και ξεκλειδώστε 39+ εργαλεία προγραμματιστή για το πρόγραμμα περιήγησής σας.
