איפוס CSS

שייך לקטגוריות CSS

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

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

html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
	margin:0;
	padding:0;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
fieldset,img {
	border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
	font-style:normal;
	font-weight:normal;
}
ol,ul,li {
	list-style:none;
	list-style-type:none;
}
caption,th {
	text-align:left;
}
h1,h2,h3,h4,h5,h6,th,td {
	font-size:100%;
	font-weight:normal;
}
q:before,q:after {
	content:'';
}
abbr,acronym {
	border:0;
}

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

יאהו נותנים לבצע link לקובץ מתוך השרתים שלהם:

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.2.2/build/reset-fonts-grids/reset-fonts-grids.css" />

elado
13 באפריל, 2007
12 תגובות »


קטגוריות

חיפוש

עיקבו אחרי (אקספרימנטלי!)

12 תגובות

כתיבת תגובה

18.04.07 בשעה 0:57
ניר טייב
(אתר)

יש את yui reset שהוא אחד לאחד מה שפירסמת פה. יאהו! נותנים קישור לשימוש ישיר בחבילה הזאת:

1
18.04.07 בשעה 7:31
אלעד
ניר טייב אמר/ה:
יש את yui reset שהוא אחד לאחד מה שפירסמת פה. יאהו! נותנים קישור לשימוש ישיר בחבילה הזאת:
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.2.2/build/reset-fonts-grids/reset-fonts-grids.css" />

הוספתי את הערותיך :)

2
25.04.07 בשעה 12:29
שלומי אסף
(אתר)

אהלן. אחלה של מאמר ופתחת לי את הראש לכיווני הגדרות נוספות מעבר לglobal whitespacing שאני משתמש בו.

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

* {
 margin:0;
 padding:0
}

3
16.05.07 בשעה 13:19
ailaG
(אתר)

* { -moz-box-sizing: border-box; }
איפוס ה box model לזה שמגדיר שגובה / רוחב זה המרחק בין ה borders. לפחות לגבי מוזילה. ב IE זה כבר בא ככה.

4
16.05.07 בשעה 13:31
אלעד
ailaG אמר/ה:
* { -moz-box-sizing: border-box; }

איפוס ה box model לזה שמגדיר שגובה / רוחב זה המרחק בין ה borders. לפחות לגבי מוזילה. ב IE זה כבר בא ככה.

ב-IE תחת DOCTYPE של XHTML ה-CSS מתנהג כמו בתקן (לפחות אמור ;) ).
אני חושב שאם כבר, עדיף לעבוד לפי התקן. כך האתר יראה טוב על כל דפדפן וכל גרסה.

5
16.05.07 בשעה 14:21
ailaG
(אתר)

לי יותר נוח כשהתוכן זה מה שבא בין הגבולות.

אם תצבע דיב בצבע רקע כלשהו, תתן לו padding=margin=1em ותמלא אותו ואת הדף בתוכן, שאל אנשים מה רוחב או גובה הדיב – הם יגידו לך שזה האזור הצבוע. המרחקים בין הגבולות.

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

כמו כן, לפעמים יהיו לך כמה אלמנטים זה לצד זה (רלוונטי במיוחד במקרה של רוחב אלמנט) ותרצה למשל שהימני יהיה פחות ניכר – נניח שהוא פס ניווט – והשמאלי יהיה העיקרי, נניח תוכן.
הגדרות ה padding והmargin יהיו על הניווט, ולכן כשהמשתמש יגדיל את גודל הפונט זה יגדיל את הניווט על חשבון התוכן, בניגוד לרצונך. זה לא קורה עם border-box.

6
16.05.07 בשעה 17:26
אלעד
ailaG אמר/ה:
לי יותר נוח כשהתוכן זה מה שבא בין הגבולות.

אם לוגיקת תקן הבוקס-מודל הייתה תלויה בי, הרבה דברים היו נראים אחרת ;)
אני חושב כמוך. איני מסכים עם כותבי התקן. לא איך שהטכנולוגיה נכתבת/בנויה ובטח שלא על החסרת דברים כה טריוויאליים. בלי להתייחס לבאגים.

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

עד התקן הבא :)

7
03.06.07 בשעה 18:25
Admini
(אתר)

אהבתי! מחכים !

(והוספתי אותך על הדרך ל-RSS)

8
23.07.07 בשעה 16:58
יואב

שלום זה אמנם לא קשור אבל בהמשך לרפרנס של הCSS שמובא למאמר, אני מתלבט אם להשתמש בספרייה של YUI או בספריית MOO-Tools או בספרייה של מיקרוסופט.
האם ידוע לכם מה עדיף \ יתרונות ?

תודה

9
23.07.07 בשעה 17:10
אלעד
יואב אמר/ה:
אני מתלבט אם להשתמש בספרייה של YUI או בספריית MOO-Tools או בספרייה של מיקרוסופט.
האם ידוע לכם מה עדיף \ יתרונות ?

היי יואב
אני אישית מאוד אוהב את mootools. היא מאוד נוחה לכתיבה ומכילה המון פיצ'רים.
עם YUI פחות התעסקתי, אבל היא מאוד powerful, בעיקר עם ספריות ה-layouts והקונטרולים שלהם.
את הספרייה של microsoft אני פחות אוהב מאחר והיא מאוד מסורבלת לכתיבה ומכילה כמות פיצ'רים נמוכה יחסית ל-moo.

10
24.07.07 בשעה 14:36
יואב

התרשמתי מאוד מYUI היות ויש להם הרבה מאוד קונטרולים מוכנים כמו גריד, טאב וכו'. בנוסף קיים תיעוד מאוד נרחב עם דוגמאות רבות. בMOO ממה שקראתי מדברים רבות על נוחות בכתיבה , אולם היא לא מכילה פקדים מוכנים , ונראה שהיא בתחילת דרכה.
מצאתי קונטרולים שכתובים על בסיס MOO אולם אני מעדיף לסמוך על ספרייה רשמית עם גרסאות שיוצאות מסודר עם BETA , QA וכו'.

האם יש עוד ספריות מומלצות שכן יש בהם פקדים מוכנים?

תודה

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

11
16.02.08 בשעה 22:27
ניר טייב
(אתר)
יואב אמר/ה:
התרשמתי מאוד מYUI היות ויש להם הרבה מאוד קונטרולים מוכנים כמו גריד, טאב וכו'. בנוסף קיים תיעוד מאוד נרחב עם דוגמאות רבות. בMOO ממה שקראתי מדברים רבות על נוחות בכתיבה , אולם היא לא מכילה פקדים מוכנים , ונראה שהיא בתחילת דרכה.
מצאתי קונטרולים שכתובים על בסיס MOO אולם אני מעדיף לסמוך על ספרייה רשמית עם גרסאות שיוצאות מסודר עם BETA , QA וכו'.

האם יש עוד ספריות מומלצות שכן יש בהם פקדים מוכנים?

תודה

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

פתחתי פרוייקט פקדי UI ל-MooTools:
http://code.google.com/p/mootools-ui/

ו*ה*פורום לבניית אתרים בעברית הוא פורום בוני אתרים בתפוז
יש שם את קהילת המתכנתים הכי טובה וגדולה בארץ.

12

כתיבת תגובה

תגיות מותרות לשימוש בתוכן
XHTML: אפשר להשתמש בתגים הללו: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre>