UI הסרגל של chrome למפתחי UI

[חיוך]

ערב טוב,

טיפ שימושי למפתחי UI פרפקציוניסטיים,
ולכל מי שרוצה לדעת אם כפתור "נתוני הפרסום" בפרוג באמת לא מיושר לרכיב "פירורי לחם"? או שזו טעות אופטית??



זה הזמן להרים את העיניים ולראות, על מה, למען ה', "חיוך" מדברת?

אז טוב, זה היה רק לשם הדוגמה, אבל זה כן קורה, במיוחד באתרים שלנו שצריכים להיות מדוייקים ונוצצים PIXEL PERFECT.

וסתם שתדעו, שכמעצבים, יש לנו עין מאוד חדה ומדוייקת, ואם אתם חושבים שמשהו לא במקום / לא מיושר, אז הוא לא מיושר.
לא משנה כמה סיבות והסברים משכנעים יהיו למפתח... ("זו נוסחה. גם אם לא נראה לך בעין, אין מצב שהאייקון לא ממורכז לטקסט") בד"כ תראו שצדקתם... ולפעמים שניכם תהיו צודקים, כמו בדוגמה שלנו.

אז כלי שיעזור לכם ל"יישר" את ההדורים בין 2 "קווים מקבילים" שלעולם לא נפגשים (כי לא מצאתי איך לבדוק איתו יישור אמצע) - הסרגל של chrome.

בעבר הייתי משתמשת בתוסף ייחודי לכרום, שהוא גם טוב ויעיל, אבל יום אחד גיליתי שסרגל הוא חלק בלתי נפרד מכלי הפיתוח של הדפדפן. ולפעמים זה יותר נוח.

וכך אני יכולה לראות, שאולי "נתוני הפרסום" מיושר בחלקו העליון ל"פירורי לחם",
אבל ל"פירורי לחם" יש קו חיצוני שגורם לרכיב לגדול בפיקסל - שניים למעלה:




איך "מדליקים" את הסרגל?

1. F12 במקלדת
2. F1 במקלדת - או - לחיצה על אייקון 3 נקודות > Settings



3. סימון Show Rulers


כך זה נראה:




בהצלחה!

 

[חיוך]

ואגב, חידוש מעניין ב- CHROME - במעבר עכבר מציג גם את רמת הקונטרסטיות של הטקסט, שזה נתון חשוב לנגישות!

 

[קלרינט]

מדליק!
גם לי יש את הבאג הזה
לבדוק האם הכל מיושר 200%

בטוחה שיבוא לי לשימוש, ממש תודה על השיתוף!

(ותעני כבר לכל ההודעות הפרטיות שלך :-0)