עיצוב אתר באמצעות כלי המפתחים של כרום

קטגוריה

CSS

תגיות

עיצוב אתר באמצעות כלי המפתחים של כרום

מאת יואב קדוש

3,747
16

  • פרסומת

מפתחי האתרים הוותיקים שביננו ודאי זוכרים את הימים בהם גילוי ותיקון תקלות CSS הצריך עבודת בלשות לא פשוטה. המעבר האינסופי בין הדפדפן לקוד ובחזרה כדי לבדוק אם שינוי כלשהו ל-CSS גרר את התוצאה הרצויה בדפדפן הפך את העבודה של בניית אתרים לתהליך ארוך ומייגע. לשמחתנו, היום אנחנו כבר לא צריכים להתמודד עם הבעיות הללו, משום שרוב הדפדפנים הפופולאריים (ספארי, כרום, פיירפוקס וכו׳) מגיעים עם ערכת כלים מובנית שנקראת ״כלי המפתחים״ (Developer Tools). ערכה זו מכילה הרבה כלים שימושיים למפתחי אתרים שמאפשרים ניתוח ושינוי של האתר בזמן אמת.

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

הפעלה ושימוש

בשביל להפעיל את כלי המפתחים, לחצו על הסמל של שלושת הקווים מימין לשורת החיפוש:

Screen Shot 2016-01-10 at 9.15.29 PM

לאחר מכן, לחצו על More Tools ואז Developer Tools:

Screen Shot 2016-01-10 at 9.17.10 PM

לחיצה על Developer Tools תפתח חלון פנימי בתחתית הדף:

Screen Shot 2016-01-10 at 9.21.39 PM

חלון זה מחולק לשניים – החלק השמאלי מציג את ה-DOM (שלד המסמך – Document Object Model) והחלק הימני מציג את ה-CSS של האלמנט הנבחר. לחיצה ימנית בכל מקום במסמך, ואז לחיצה על Inspect בתפריט שנפתח, תראה לכם את ה-CSS של אותו אלמנט ואת מקומו ב-DOM:

Screen Shot 2016-01-10 at 9.26.13 PM

Screen Shot 2016-01-10 at 9.26.33 PM

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

Screen Shot 2016-01-10 at 9.32.37 PM

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

ניתוח ועיצוב בזמן אמת

בשביל להראות את היכולות של כלי זה, ניצור אתר פשוט המורכב מ-HTML ו-CSS ונכניס בו שגיאה. לאחר מכן נשתמש בכלי המפתחים בשביל לאתר את השגיאה ולתקן אותה. להלן הקוד:

<!DOCTYPE html>
<html>
    <head>
        <title>My Website</title>
        <link rel="stylesheet" href="style.css"/>
    </head>
    <body>
        <div class="wrapper">
            <h1>Hello World!</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
    </body>
</html>
body {
    background: #ecf0f1;
}

.wrapper {
    width: 300px;
    margin: 30px auto;
    padding: 15px;
    border: 1px solid #bdc3c7;
    border-radyus: 10px;
    background-color: white;
    box-shadow: 0 0 12px black;
}

.wrapper h1 {
    text-align: right;
}

.wrapper p {
    text-align: justify;
}

אם נפתח את האתר שלנו בכרום, הוא ייראה כך:

Screen Shot 2016-01-10 at 10.04.18 PM

לא רע, אבל חסר משהו. הגבולות של האלמנט .wrapper היו אמורים להיות מעוגלים, אך משום מה הם לא מעוגלים, אלא מרובעים. מה עושים? אפשר ללחוץ לחיצה ימנית על האלמנט ואז Inspect, או להשתמש ב-element selector (צד שמאל בחלק העליון של כלי המפתחים) בשביל לבחור אותו:

Screen Shot 2016-01-10 at 10.09.52 PM

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

Screen Shot 2016-01-10 at 10.10.01 PM

אם נלחץ על המאפיין, נוכל לערוך אותו ולתקן את הטעות. בנוסף, בצד ימין למעלה ניתן לראות את שם הקובץ שבו נכתב המאפיין, ואפילו את השורה (במקרה שלנו, הקובץ הוא style.css והשורה היא 5):

Screen Shot 2016-01-10 at 10.13.15 PM

והתוצאה:

Screen Shot 2016-01-10 at 10.16.46 PM

יותר טוב, אבל עדיין חסר משהו. הצל של האלמנט קצת חזק מדי, וזה יוצר אפקט חזותי לא אמין. לשמחתנו, ניתן לשנות את הצבע של הצל ישירות בדפדפן על ידי לחיצה על הקוביה השחורה שליד המאפיין box-shadow :

Screen Shot 2016-01-10 at 10.17.22 PM

Screen Shot 2016-01-10 at 10.17.44 PM

מעולה, עכשיו זה נראה יותר אמין. כל שנותר לעשות הוא להעתיק את השינויים שלנו לקובץ המקורי, ולשמור אותו. בלי לשמור את השינויים במקור, כל העבודה שלנו תרד לטמיון. לחצו על שם הקובץ שלצד המאפיינים:

Screen Shot 2016-01-10 at 10.28.05 PM

הקובץ המחודש (עם השינויים המקומיים) יפתח לכם בלשונית הנקראת Sources, שם תוכלו לשמור את הקובץ במקום הקובץ הישן שלכם:

Screen Shot 2016-01-10 at 10.30.00 PM

סנכרון אוטומטי

השיטה הקודמת לשמירת שינויים יכולה להיות מייגעת כשמדובר בכמות גדולה של שינויים. לשם כך ניתן להוסיף את תיקיית הפרוייקט שלנו ל-workspace של כרום, ולמפות את הקבצים כך שכל שינוי בדפדפן יעדכן את המקור (לאחר שמירה). תחת הלשונית Sources לחצו לחיצה ימנית ובחרו ב- Add Folder To Workspace:

Screen Shot 2016-01-10 at 10.45.02 PM

בחרו בתיקייה המכילה את הקבצים של הפרוייקט שלכם, ולחצו על Select. לאחר מכן לחצו על Allow בלשונית הצהובה שתופיע מתחת לשורת החיפוש:

Screen Shot 2016-01-10 at 10.45.33 PM

התיקייה של הפרוייקט נוספה לדפדפן, אך הדפדפן עדיין משתמש בקבצים הזמניים ולא בקבצי המקור. לשם כך עלינו למפות את הקבצים שמריץ הדפדפן לקבצי המקור שבתקיית הפרוייקט. בצד שמאל, לחצו לחיצה ימנית על הקובץ Style.css ואז לחצו Map to File System Resource:

Screen Shot 2016-01-10 at 10.52.37 PM

בחרו מתוך התיקייה בקובץ המתאים:

Screen Shot 2016-01-10 at 10.52.54 PM

כך נוצר קשר בין הקובץ המקורי לזה שמוגש על ידי הדפדפן. אם נבצע שינויים בדפדפן, נראה כוכבית לצד הקובץ שבו בוצעו השינויים:

Screen Shot 2016-01-10 at 10.53.32 PM

שמירה של השינויים תעדכן את הקובץ המקורי שעל הדיסק הקשיח. ניתן לשמור על ידי לחיצה על Ctrl+S (או Command+S במחשבי מאק). באותה מידה, שינויים שיבוצעו ממקור חיצוני יעודכנו באופן אוטומטי בדפדפן ללא צורך ברענון של העמוד. יכולות העריכה אינן מוגבלות לקבצי CSS בלבד. למעשה, ניתן לערוך כל קובץ שתרצו בתוך הדפדפן!

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

DevTools Vs Photoshop

השיפור ביכולות של שפת ה-CSS, לצד כלים כמו Chrome DevTools, הפכו את תהליך עיצוב ותכנון האתר להרבה יותר פשוט מבעבר, עד לנקודה שכיום כבר כמעט ואין צורך בתוכנות כמו Photoshop בשביל ליצור את גראפיקת האתר. בעבר, יצירת גבולות מעוגלים והצללה היו מצריכים יצירת תמונות סטטיות על ידי כלים כמו פוטושופ. כיום, כלי המפתחים מקנה יכולות עריכה עוצמתיות כמו אלה של Photoshop, והיתרון העיקרי שלו הוא שהוא מאפשר לדלג על שלב ההמרה מקובץ ה-PSD לקוד, שכן הכל נכתב בקוד מלכתחילה. זהו חיסכון עצום בזמן ומשאבים. יתרה מכך, כלי המפתחים מאפשר גם התאמה של העיצוב למכשירים ניידים על ידי סימולציה, מה שהופך אותו לפלטפורמה המושלמת לפיתוח אתרים.

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