עיצוב אתרים מתקדם - בדיקת CSS

ג', 10/01/2006 - 11:24

בימינו, יותר ויותר, עיצוב אתרים מתקדם צריך להתבצע עם CSS.

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

היום בדקתי תוסף חדש ומדהים לפיירפוקס, שמשנה את המצב.
התוסף - "View formatted Source" - מאפשר לראות את קוד המקור של הבלוק הנוכחי.

הנחיות התקנה:
א. יש לוודא שבהתקנת פיירפוקס, בחרתם "Custom Installation" וסימנתם את "Web developer tools", כדי להתקין את ה-DOM Inspector.

עיצוב אתרים מתקדם - בדיקת CSS

בימינו, יותר ויותר, עיצוב אתרים מתקדם צריך להתבצע עם 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 של כל אלמנט, כמו בתמונה שלמעלה.

בהצלחה,

אמנון

תגובות

ה', 20/09/2007 - 05:07 — אמנון

תוספי עיצוב

היום לצורך צפייה בקוד מקור אני ממליץ להשתמש בתוסף firebug, שתומך בעוד הרבה דברים אחרים - כמו debug משופר. ויש גם את ה-web developer extension שמאפשר לעשות Ctrl-Shift-F על אלמנט ומאפשר לראות את כל ההגדרות שלו. אבל אם רוצים לראות את כל כללי ה-CSS שחלים על אלמנט מסויים - עדיין ככל הידוע לי אין תחליף לתוסף זה.

ב', 02/03/2009 - 09:47 — סתם אחד (לא נבדק)

בגוגל כרום זה מובנה

בגוגל כרום זה מובנה
לא צריך להתקין כלום

ד', 04/03/2009 - 14:55 — amnon

css display

מאז שכתבתי את הכתבה המקורית עברו יותר משלוש שנים.

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

אבל - אי אפשר לשנות כלום. בניגוד ל-firebug, שבו אפשר לשנות את ערכי ה-CSS בזמן אמת ולראות את ההשפעה, כאן אי אפשר לשנות כלום.

בקיצור בשבילי עדיין firebug.

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