Pixel Ruler

השתמשו ב-Pixel Ruler כדי למדוד פיקסלים בכל דף אינטרנט: סרגל על המסך לגדלים, מרווחים וריפוד.

Pixel Ruler מניח סרגל על המסך ומאפשר למדוד כל דבר בדפדפן. לחצו על הסמל בסרגל הכלים, גררו את העכבר על פני העמוד וקראו את המרחק המדויק בפיקסלים של CSS. העבירו את הסמן מעל אלמנט ותקבלו את הרוחב, הגובה, הריפוד והמרווחים אל הבלוקים שסביבו. המספרים זהים לאלה של DevTools, כי התוסף קורא בדיוק את אותם פיקסלים של CSS שבהם הדפדפן מצייר את העמוד. אין פאנל לפתוח, אין צילום מסך לייצא, אין חשבונות לעשות. פשוט סרגל פיקסלים מעל האתר שאתם ממילא מסתכלים עליו. שכבה אחת, בלי להחליף בין כלים: 📏 לחצו וגררו כדי למדוד את המרחק בין שתי נקודות כלשהן בעמוד. 📏 כוונו לאלמנט וראו את הגודל שלו, את הריפוד ואת המרחקים לשכנים. 📏 הניחו קווי עזר אנכיים ואופקיים ויישרו מולם את הבלוקים. תמיד יש לכם סרגל על המסך לעיון, ומקש אחד מעתיק את התוצאה ללוח יחד עם סלקטור ה-CSS של האלמנט שמתחת לסמן. איך מתחילים, בשלושה צעדים: 1. התקינו את התוסף ונעצו אותו לסרגל הכלים. 2. פתחו את העמוד שאתם עובדים עליו ולחצו על הסמל. 3. גררו, כוונו, מדדו — בסיום הקישו Esc פעמיים. מפתחי פרונט-אנד בודקים כך את הפריסה מול המוקאפ. מעצבים משתמשים בו כסרגל עמוד כשקובץ המסירה כבר לא מעודכן. בודקי QA פותחים באג עם מספר אמיתי במקום "הכפתור נראה קצת נמוך מדי". כל מי שצריך מדידת פיקסלים מהירה באתר חי מקבל אותה בשתי לחיצות. מה הסרגל הזה לדפדפן נותן לכם: - את המרחק בין שתי נקודות כלשהן, בפיקסלים - רוחב וגובה של כל אלמנט בעמוד - ריפוד, שוליים והמרווחים בין אלמנטים שכנים - המרחקים מאלמנט אל הבלוקים שסביבו - סרגלי מידה לאורך הקצה העליון והקצה השמאלי של החלון - התגית, המחלקות וסלקטור ה-CSS של האלמנט שמדדתם - קווי עזר לשימוש חוזר לבדיקת יישור המקלדת שומרת על יד יציבה: → Shift נועל את המדידה לציר האופקי או האנכי → מקשי החיצים מזיזים את הנקודה הנוכחית בדיוק 1 px → Esc מנקה את המדידה הנוכחית, Esc שני מחזיר לכם את העמוד → קיצור מקשים אחד מעתיק את התוצאה ללוח התקינו פעם אחת ויש לכם בדיוק את אותו סרגל פיקסלים שמריצים משתמשי Windows, Linux ו-ChromeOS, ואת אותו סרגל פיקסלים שמריצים משתמשי Mac, כי הכלי חי בדפדפן ולא במערכת ההפעלה. אין קובץ הורדה לחפש, אין תוכנת התקנה ואין צורך בהרשאות מנהל: התוסף מגיע מ-Chrome Web Store בלחיצה אחת. בהשקה זהו סרגל פיקסלים חינמי, וכל היכולות פתוחות לכולם. אפליקציית סרגל שנפתחת בחלון נפרד מודדת את הדבר הלא נכון ברגע שהעמוד נגלל. סרגל הפיקסלים הזה מצויר בתוך הלשונית עצמה ונגלל יחד עם התוכן. זהו סרגל פיקסלים אונליין: הוא עובד על העמוד החי, על שרת בדיקות, על אתר של לקוח, מאחורי מסך התחברות. סרגל שולחני שמודד תמונה קפואה של החלון פשוט לא יכול לעשות את זה. צריך לבדוק איור או לוגו? השתמשו בו למדידת תמונות — העבירו את הסמן מעל התמונה וקראו את הגודל שבו היא מוצגת, שלרוב אינו הגודל שבקובץ המקור. שאלות ותשובות ש: איך מודדים פיקסלים על המסך בלי לפתוח את DevTools? ת: לחצו על הסמל וגררו. השכבה יושבת מעל העמוד, כך שאתם מודדים את מה שבאמת רואים, כולל מצבי hover שנעלמים כשפאנל גונב את הפוקוס. ש: סרגל מסך, סרגל פיקסלים למסך, סרגל px, screen pixel ruler, px ruler, pixelruler — איזה מהם זה? ת: כולם. הכלי אותו כלי, רק ביטוי החיפוש משתנה. ש: אפשר למדוד בסנטימטרים או באינצ'ים? ת: לא. זהו כלי סרגל פיקסלים והוא מדווח פיקסלים של CSS בלבד, אותה יחידה שאתם כותבים בגיליון הסגנונות. ש: זה עובד בכל מקום? ת: באתרים רגילים, כן. עמודי המערכת של Chrome, מציג ה-PDF המובנה והתוכן שבתוך iframe ממקור אחר סגורים בפני כל תוסף, כולל זה. ש: אילו נתונים זה אוסף? ת: שום נתון. אפס בקשות רשת, בלי חשבון, בלי הרשמה. הוא לא מבקש שום הרשאה מפחידה בהתקנה ונוגע בעמוד רק אחרי שלחצתם על הסמל. ההרגלים הישנים איטיים ופחות מדויקים: להצמיד סרגל פלסטיק לזכוכית של מסך המחשב, או לספור פיקסלים בצילום מסך. סרגל למסך מחשב חייב לחיות בתוך הדפדפן, להצטייר מחדש כשהפריסה זזה ולדבר באותן יחידות כמו הקוד. בדיוק את זה עושה שכבת המדידה הזו, ולכן סרגל פיקסלים לאתרים עדיף על סרגל שמונח על תמונה שהודבקה בתוכנת גרפיקה. הדף הזה זמין ב-52 שפות, כך שסרגל פיקסלים לאינטרנט נמצא במרחק חיפוש אחד גם בשפה שלכם. התקינו אותו, מדדו פיקסלים בעמוד הבא שתפתחו, והשאירו את הסרגל שעל המסך במרחק לחיצה אחת לשארית היום.