הבעת IT

תות נוסף מהירה. הנה משהו פשוט ונחמד באמצעות העוצמה של CSS ... אבל היה concieve קשה (וזה בטח לא אני) מלכתחילה. הוספת Dropshadow, יכול להיות peice עוגה עבור רבים מאיתנו, בעזרת כמה כלים לעריכת תמונות כמו פוטושופ ANF זיקוקים וכו '
הסיבה לכך, בחרתי הצללה באמצעות CSS היא, בדרך כלל תוך יצירת עיצוב הדף / html הבקשה, הדרישות לשמור iterating. מה זאת אומרת הוא, אתר אינטרנט קיים עם תמונות רבות, כמו אלה שמציגים freinds רשימה או גלריית תמונות, זה יהיה קשה לעבד מחדש את העומס של כל התמונות שהיו כבר פרקו להוסיף או להסיר את הצללים, בשביל זה משנה.
אז אם יש לך לעשות חשיבה קדימה מעט יצירת HTMLS להוסיף את חטיבות נוספות או בדרך כלל המצב הוא שיש לך הגיון Loop יצירת אלה סמלים / תמונות ממוזערות XSL, PHP. JAVA או כל שפה אחרת התכנות / scripting, אתה יכול להוסיף את זה בכל זמן, אז הוא רק עניין של הצגה והסתרה אלה הצללים באמצעות נכס תצוגה CSS, כמו לכל הלקוחות המשתנים דרישות ... אני havn't לעשות סוג כזה של חשיבה קדימה לפני זה ... אבל ahev התחיל עכשיו!

בדוגמה הבאה, התמונה המקורית היא צל בחינם את dropshadows מיושמים כנדרש! כמו כן, הלכתי עוד קצת, באמצעות טריקים של תות קודם שלי (Well! אלה הם ככל הנראה הקצר ביותר במגוון של הדרכות, אז זה מוצדק רק קורא להם "תות" של) על נכס באמצעות CSS קליפ עבור להשוויץ בלבד

התמונה המקורית

תוצאות DropShadow-CSS

הצג הדגמה | הורדה sourcefiles

שים גיליונותסגנון בראש

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

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

את מפרט ה-HTML של W3 גם כי CSS יש לי לכלול בסעיף ראש דף ה-HTML. at the bottom of the page, so it's best not to use it. כמו כן שים לב, ב-IE @import מתנהג כמו שימוש <link> בחלק התחתון של הדף, כך שעדיף לא להשתמש בו.

הימנע משימוש תכונות ספציפיות לדפדפן

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

החצנה לך CSS

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

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

לארוז את קובץ ה-CSS שלך

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

CSS אני יכול חרק על ידי הסרת כל ההערות וכל תו לא רצויים כמו חללים לבנים, newlines וכו '

איפוס CSS הוא / הם CSS להגדיר מספר סגנונות אלמנט בסיסי ספציפי יוצר אחידות בין דפדפנים שונים.

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

מאפס CSS כי אני בדרך כלל נוטים להשתמש נראה כך

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;
}
html {font-size: 76%;}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset, img {
border:0;
}

UL ol, {
רשימת בסגנון: אין;
}

H1, H2, H3, H4, H5, H6 {
font-size: 100%;
font-weight: normal;
}

לאפס את גודל הגופן בדפדפן
שים לב גם לאפס את זה הוחל על גודל הגופן בדפדפן בתור הבא ...

html {font-size: 76%;}

מעל CSS מאפסת את הגופן בדפדפן בגודל 10 פיקסלים, וזה מאפשר לעבוד עם גודל הפונטים יחסית (שזה כל חשוב מקיום WAI prespective)
עבור למשל, בהגדרה הבאה, גודל הפונט בפרק זמן מוגדר 10 פיקסלים וכי paragarph מוגדר כ 14 פיקסלים ...

span {font-size: 1em;}
p {font-size: 1.4em;}

למשל.
ציון נכס CSS ככה,

שולי: 5px 0;

בעצם אומר,

שולי: 0px 5px 5px 0px;

זה נכס שוליים 1 אומר:

לשוליים העליונים והתחתונים = 5px | | שוליים ימינה ושמאלה = 0px

כך "קיצור עוד" יהיה

שולי: 0px 5px 5px 0px; (T, R, B, L)

אתה יכול גם להשתמש 3 ערכים

שולי: 0 5px 5px;

מה שאומר

העליון = 5px | | ימין ועל שמאל = 0px | | התחתונה = 5px

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

הפתרון הוא להוסיף גלישה לסגנון שלו .... כלומר

. כפתור {
גלישה: גלוי;
padding-שמאל: 10px חשוב;
הריפוד הימנית: 10px חשוב;
... כל סגנון אחר על לחצן זה ...
}

או

< input type="submit" value="Internet explorer respects my padding" style="overflow:visible; padding-left:10px !important; padding-right:10px !important;" >;