
בימינו, יותר ויותר, עיצוב אתרים מתקדם צריך להתבצע עם CSS.
אבל איך למצוא אילו הגדרות CSS תרמו לצבע של האלמנט המעניין אותנו?
באופן מסורתי, ניתן היה לדעת זאת רק עם כלים מיוחדים.
היום בדקתי תוסף חדש ומדהים לפיירפוקס, שמשנה את המצב.
התוסף - "View formatted Source" - מאפשר לראות את קוד המקור של הבלוק הנוכחי.
הנחיות התקנה:
א. יש לוודא שבהתקנת פיירפוקס, בחרתם "Custom Installation" וסימנתם את "Web developer tools", כדי להתקין את ה-DOM Inspector.
ב. יש להתקין את הגירסה העדכנית של התוסף. בעמוד הבית של View formatted source יש גירסה עבור פיירפוקס עד 1.04. גירסה עדכנית ניתן להוריד מכאן.
ג. לחצו קליק ימני, גשו לתפריט של "View formatted source" וסמנו "Enable Inline mode".
ד. עכשיו, במקומות מסויימים בדפדפן, יופיע כפתור SOURCE. לחצו עליו, ומייד תוכלו לראות את ה-CSS של כל אלמנט, כמו בתמונה שלמעלה.
בהצלחה,
אמנון
תגובות
תוספי עיצוב
היום לצורך צפייה בקוד מקור אני ממליץ להשתמש בתוסף firebug, שתומך בעוד הרבה דברים אחרים - כמו debug משופר. ויש גם את ה-web developer extension שמאפשר לעשות Ctrl-Shift-F על אלמנט ומאפשר לראות את כל ההגדרות שלו. אבל אם רוצים לראות את כל כללי ה-CSS שחלים על אלמנט מסויים - עדיין ככל הידוע לי אין תחליף לתוסף זה.