הבעת IT

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

אם אתה רוצה דף לטעון בהדרגה, כלומר, אנחנו רוצים את הדפדפן כדי להציג את כל התוכן שיש לו כמה שיותר מהר, לשים את ה-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 וכו '

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

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

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

פתרון 1: שימוש האק מדגישות [ ... קרא עוד ]

.box1 {
min-height: 200px;
height:auto;
_height:200px;
}

HTML: -
<div class="box1">Some dynamic content with variable height ...</div>

---

פתרון 2: שימוש האק בורר ב-CSS מאפיין

.box2 {
min-height:200px;
height:200px;
}
div[class] .box2 {
height:auto;
}

HTML: -
<div class="someclass">
<div class="box2 common">Some dynamic content with variable height ...</div>
</div>


האק בורר CSS תכונה מנצל את העובדה הדפדפנים מוקדם IE6 tha התעלם atribute-בורר. שים לב את הדרישה של אגף נוסף עם מיכל "someclass" class =. רק נוכחות של התכונה ברמה של חלוקה זו, עוקפת את גובה חזרה אוטומטית של אופרה, מוזילה ו MSIE7 ואילך. IE6, שאינה תומכת סלקטורים atribute, מתעלם ממנה.

הצג הדגמה של האק דקות גובה עבור IE6

אם אתה משתמש ב-XML ו-XSL, אז אתה יכול לבוא על פני זמן, כאשר אתה צריך לשחק עם התכונות והערכים של צמתים XML ב-XSL לך. הם המון אתרים עם מידע מייגעים על זה, אבל לא מצאתי היו קצרות ומדויקות ... זה לא TUTORIAL XML / XSL, אבל הניסיון שלי שם, יחד מעין רשימת לרמות ...

דגימת ה-XML אנו עובדים עם נראה כך ...

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="food.xsl"?>
<food>
<fruits type="tropical">
<item name="mango" moreinfo="http://www.mango.com">Mango is the king of fruits</item>
<item name="banana" moreinfo="http://www.banana.com">Banana once a day , keeps the doctor away</item>
<item name="orange" moreinfo="http://www.orange.com">Orange is the color and rich in vitamin C</item>
<item name="Papaya" moreinfo="http://www.papaya.com">Papaya - Hot when raw, cold when ripe</item>
</fruits>
</food>

כך מאפשר להתחיל להפוך XML מעל שלנו באמצעות XSL

דוגמה 1: הצגת הערך תכונה נבחר

<xsl:value-of select="/food/fruits/item[@name='orange']" /><br />
to get more information about <a href="{/food/fruits/item[@name='orange']/@moreinfo}" target="new" ><xsl:value-of select="/food/fruits/item[@name='orange']/@name" /> </a>

התוצאה HTML ייראה

Orange is the color and rich in vitamin C,
to get more information about <a href="http://www.orange.com" target="new">

דוגמא 2: שהסתחררו ולהציג את כל שמות מאפיין XML וערכיהם

<xsl:for-each select="/food/fruits/item/@*">
attribute name : <xsl:value-of select="name()"/>,
attribute value : <xsl:value-of select="."/> <br />
</xsl:for-each>

התוצאה HTML ייראה


attribute name : name, attribute value : mango
attribute name : moreinfo, attribute value : http://www.mango.com
attribute name : name, attribute value : banana
attribute name : moreinfo, attribute value : http://www.banana.com
attribute name : name, attribute value : orange
attribute name : moreinfo, attribute value : http://www.orange.com
attribute name : name, attribute value : Papaya
attribute name : moreinfo, attribute value : http://www.papaya.com


לראות את החלל הזה, אני אמשיך לעדכן את זה עם הממצאים החדשים ...