כמה שאלות על CSS

מצאת אתר שלא נראה טוב ב-Mozilla כי הוא לא תואם לתקן? פרסם כאן. מנסה להתאים את אתרך לעבודה עם מנוע התצוגה Gecko? פרסם וננסה לעזור.
TRW

כמה שאלות על CSS

הודעה שלא נקראהעל ידי TRW » 19 דצמבר 2012, 10:54

דבר ראשון שאני כותב CSS בקןבץ של ה-CSS כדאי לי לכתוב בשורה את כל מה שקשור לאלמנט שאני עובד עליו או לרדת שורה אחרי כל סגנון?
יש הבדל במהירות של הקריאה של הקובץ?

דבר שני שאני משתמש בצבע עדיף לרשום את שם הצבע (אם יש כזה) או להשתמש בקוד הקסה שלו?
יש הבדל בין white לבין FFFFFF# ?

דבר אחרון, איך אני יכול לדאוג שאלמנטים יופיע באותו מקום בכל הדפדפנים?
אני ממקם אלמנט בתחתית הדף ומשתשמ ב-bottom (עם position:absolute ) בשביל להרים אותו למעלה,סידרתי את המיקום שיתאים לפיירפוקס,
אבל בכרום זה במקום אחר וב-IE גם, יש הבדל של פיקסלים בודדים במיקומים.

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

סמל אישי של המשתמש
חתול
הודעות: 2091
הצטרף: 21 פברואר 2007, 22:46
מיקום: הר חברון
יצירת קשר:

Re: כמה שאלות על CSS

הודעה שלא נקראהעל ידי חתול » 19 דצמבר 2012, 12:33

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

TRW

Re: כמה שאלות על CSS

הודעה שלא נקראהעל ידי TRW » 19 דצמבר 2012, 13:47

אפשר לשאול שאלה איך מבצעים משהו?
אני רוצה לעשות את החלק התחתון באתר הזה http://www.kassandrabay.com/
איפה שכתוב CLOSE PANEL שמשתנה ל OPEN PANEL שלוחצים עליו.

דרך אגב, אפשר להכניס קוד גם בלי להירשם לפורום?

TRW

Re: כמה שאלות על CSS

הודעה שלא נקראהעל ידי TRW » 19 דצמבר 2012, 17:03

מאיזה נקודה הדפדפן מחשב מיקום של אלמנטים שאני עושה למשל top:50px וכו'?
זה שונה בכל דפדפן?

תומר
הודעות: 9911
הצטרף: 14 יוני 2002, 01:50
מיקום: חיפה
יצירת קשר:

Re: כמה שאלות על CSS

הודעה שלא נקראהעל ידי תומר » 23 דצמבר 2012, 00:50

TRW כתב:דבר שני שאני משתמש בצבע עדיף לרשום את שם הצבע (אם יש כזה) או להשתמש בקוד הקסה שלו?
יש הבדל בין white לבין FFFFFF# ?
ישנן מספר דרכים לציין "צבע לבן" ב־CSS:
לפי שם: white
לפי ערך 12 סיביות: ‎#FFF
לפי ערך 24 סיביות: ‎#FFFFFF או rgb(255,255,255)‎
לפי ערכי צבע באחוזים: rgb(100%, 100%, 100%)‎ (מומר לערכי צבע 24 סיביות, אבל בעתיד אולי יוכל להציג דיוק צבע רב יותר)
לפי ערך 24 סיביות ושקיפות: rgba(255,255,255,1)‎ ­— השקיפות היא מספר ממשי בין 0 ל־1, כאשר 0 מציין שקיפות מלאה ו־1 מציין אטימות. rgb(#,#,#)‎ הוא למעשה rgba(#,#,#,1)‎

אפשר גם להשתמש ב־hsl/hsla כדי לציין צבעים, אבל הם אינם RGB ולכן קצת יותר מסובכים להבנה. מידע נוסף בקישור הבא.

TRW כתב:דבר אחרון, איך אני יכול לדאוג שאלמנטים יופיע באותו מקום בכל הדפדפנים?
קודם כל, כדי לקבוע מיקום יחסי לתצוגה כדאי להשתמש ב־position:fixed ולא absolute. הבדלים בין דפדפנים נובעים ממספר רב של פרמטרים כמו למשל סוג וגודל גופן בררת המחדל, גודל שטח התצוגה וכדומה. כדי לקבוע תצוגה זהה במרבית הדפדפנים ברמת הפיקסל כדאי לאתחל את כל הפריטים לאופן תצוגה זהה (חפש CSS Reset stylesheet), ואז יהיה לך הרבה יותר קל לעבוד. אני אישית לא אוהב את הרעיונות הללו שלמעשה גוזלים את כל השליטה על אופן תצוגת האתר מהדפדפן, ואעדיף תמיד להנדס את התוצאה כך שהיא תתאים לדרישות שלי מבלי לאפס את גליונות הסגנון.
מוזילה ישראל בטוויטר: https://twitter.com/MozillaIsrael

TRW

Re: כמה שאלות על CSS

הודעה שלא נקראהעל ידי TRW » 23 דצמבר 2012, 08:47

תודה תומר, בקשר לצבעים זה לא משנה אם אני כותב את שם הצבע (שיש כזה) או כותב את הערך שלו בסיביות ?
איך אני עושה את מה שאמרת בלי לאפס את ה-CSS?
אני כבר מאפס אותו גם ככה יש לי margin:0 ו padding:0.

תמיד כדאי להשתמש ב-position:fixed?
למה שאני כותב absolute האלמנט תמיד נמצא לשמאל?

סמל אישי של המשתמש
תומר‏
הודעות: 2074
הצטרף: 31 מאי 2005, 00:29
יצירת קשר:

Re: כמה שאלות על CSS

הודעה שלא נקראהעל ידי תומר‏ » 24 דצמבר 2012, 13:46

TRW כתב:תודה תומר, בקשר לצבעים זה לא משנה אם אני כותב את שם הצבע (שיש כזה) או כותב את הערך שלו בסיביות ?
אין חשיבות לעניין, אם כי רצוי לשים לב כי הגדרת צבעים ללא מילות המפתח מאפשרת לדייק יותר בבחירת הצבע, וישנם מספר הבדלים בין כמות הצבעים המוכרים על־ידי כל דפדפן (לא רלוונטי כאשר אתה משתמש בצבעים בעלי שמות משמעותיים כמו "ירוק" או "אדום" להבדיל מצבעים כגון "ורוד עמוק" או "לימון שיפון" שייתכן שאינם מוכרים על־ידי דפדפן זה או אחר).
TRW כתב:איך אני עושה את מה שאמרת בלי לאפס את ה-CSS?
מריץ כלי פיתוח ומחפש הבדלים ב־Computed Style. ברגע שאתה מוצא הבדלים כאלה, לרוב הם נובעים מהבדלים בהגדרות בררת המחדל בין דפדפנים או מימוש שונה של מודל הקופסה.
TRW כתב:אני כבר מאפס אותו גם ככה יש לי margin:0 ו padding:0.
זו התחלה טובה, אבל במקרים רבים אינו מספיק, שכן ברשימות למשל חלק מהדפדפנים מגדירים padding/margin ברמת הפריט ואחרים ברמת הרשימה כולה, כך שכדי להגיע למכנה משותף בין דפדפנים עליך לאפס גם את ul/ol וגם את הפריט li.
TRW כתב:תמיד כדאי להשתמש ב-position:fixed?
בהחלט לא! ישנם דפדפנים שאינם תומכים ב־Fixed Positions, וההבדל בין fixed ו־absolute הנו רב וחשוב לשים לב להבדלים.
TRW כתב:למה שאני כותב absolute האלמנט תמיד נמצא לשמאל?
אני מנחש שלא הגדרת לו מיקום חלופי עם left/right ו־top/bottom, ולכן הוא מופיע במיקום בררת המחדל. שים לב שבמקרים רבים שימוש ב־float נותן גמישות רבה שאינה קיימת ב־Positioning.
– תומר.


מוזילה ישראל בפייסבוק: https://facebook.com/MozillaIsrael

TRW

Re: כמה שאלות על CSS

הודעה שלא נקראהעל ידי TRW » 25 דצמבר 2012, 20:24

אני לא אוהב להשתמש ב-position:fixed זה תוקע את האלמנט באותו המקום.
איך אני משתמש ב-Computed Style?

יש מדריך בעברית לעניין של position עם שימוש ב z-index?
אני רוצה לעשות div-ים שעולים אחד על השני חלקית

מה אני כותב בשביל לאפס את ul/ol ו li.
פשוט לרשום כמו שאני רושם לאחרים?

סמל אישי של המשתמש
תומר‏
הודעות: 2074
הצטרף: 31 מאי 2005, 00:29
יצירת קשר:

Re: כמה שאלות על CSS

הודעה שלא נקראהעל ידי תומר‏ » 25 דצמבר 2012, 21:28

TRW כתב:אני לא אוהב להשתמש ב-position:fixed זה תוקע את האלמנט באותו המקום.
זה בדיוק מה שהוא אמור לעשות! ☺
TRW כתב:איך אני משתמש ב-Computed Style?
תפריט כלים ← כלי פיתוח ← חקור Ctrl-Shift-I ← [לסמן את הרכיב שנרצה לחקור] ← ללחוץ על הכפתור סגנון בסרגל שבתחתית המסך ← לעבור לשונית "מחושב" בראשו של סרגל הצד.

במסך זה מופיעה רשימה של כל החוקים שתקפים לרכיב הנבחר, כולל בררות מחדל של הדפדפן וחוקים שהופעלו עבור רכיבי הורה.
TRW כתב:יש מדריך בעברית לעניין של position עם שימוש ב z-index?
אני רוצה לעשות div-ים שעולים אחד על השני חלקית
לא ניתן לעשות "הסתרה חלקית" ב־CSS. ההוראה z-index מקבלת ערך טבעי כאשר ככל שהוא גבוה יותר כך הרכיב הנבחר יהיה קדמי יותר.

TRW כתב:מה אני כותב בשביל לאפס את ul/ol ו li.
אם תשתמש בעיצוב המחושב תוכל לדעת מראש איזה הגדרות הדפדפן נותן לכל רכיב בדף, ובצורה כזו תוכל לאפס ולשנות את אלו שתרצה לשנות את התנהגותם.
– תומר.


מוזילה ישראל בפייסבוק: https://facebook.com/MozillaIsrael

TRW

Re: כמה שאלות על CSS

הודעה שלא נקראהעל ידי TRW » 26 דצמבר 2012, 09:00

יש לי שאלה לגבי ה z-index בשביל להשתמש בו צריך לתת position לאלמנט שעובדים עליו?
מה המשמעות של ערכים שלילים ב z-index זה לא אומר שאלמנט יהיה מאחורי המסך, מה בכלל נקודה התייחסות?
איפה נמצא ה-0?

סמל אישי של המשתמש
חתול
הודעות: 2091
הצטרף: 21 פברואר 2007, 22:46
מיקום: הר חברון
יצירת קשר:

Re: כמה שאלות על CSS

הודעה שלא נקראהעל ידי חתול » 26 דצמבר 2012, 09:08

אין מאחורי המסך ב־z-index. ככל שהערך יותר נמוך העצם יהיה יותר מאחור, לא באמת משנה האם הערך חיובי או שלילי.

סמל אישי של המשתמש
תומר‏
הודעות: 2074
הצטרף: 31 מאי 2005, 00:29
יצירת קשר:

Re: כמה שאלות על CSS

הודעה שלא נקראהעל ידי תומר‏ » 26 דצמבר 2012, 15:21

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

למידע נוסף:
https://developer.mozilla.org/en-US/docs/CSS/z-index
https://developer.mozilla.org/en-US/doc ... ng_z-index
– תומר.


מוזילה ישראל בפייסבוק: https://facebook.com/MozillaIsrael


חזור אל “כתיבה לפי התקן”



מי מחובר

משתמשים הגולשים בפורום זה: אין משתמשים רשומים ו־ 2 אורחים