הבעת IT

עוד בית הספר הישן זיכרון משלים ...

מדוע אנו לאפשר windos.status?
Javascripts יכול להיות סיוט, אם יש לך משהו לאתר באגים. Firefox יש כמה addons שימושיים אחדים, כמו thats Firebug עושה את חיינו קלים כמו כן, בהצבעה על טכניקה debug הפופולרי ביותר ב-Javascript חייב ללכת "alert ()". Anywaz! ישנם מקרים מעטים בעת הוספת ALERT אין באגים Javascript רע מתנהג שלך היא רק רעיון טוב ולו. לדוגמה! יש לך פריט dragble אשר עמדה צריך לקבל התראה .... לא לא לא! לא נעשה את זה! ... אתה פשוט מקבל התראות אינסוף או אתה רגיל להיות מסוגל למעשה drap dragable שלך. טוב! ישנם מצבים טובים יותר, שבהם ייתכן כתיבת טקסטים באגים כדי בשורת המצב, הרבה יותר usful ... תאמין לי! הניסיון שלה!

אינטרנט אקספלורר כברירת מחדל נשאר לך לכתוב שורת סטטוס בדפדפן שימוש בתחביר "" משהו לאתר באגים "window.status =", אבל FireFox לא. אז כדי לאפשר שינוי מעמדה של Windows, אתה יכול לעשות אחד מהתנאים הבאים.

פתח את about: config בדפדפן (סוג "about: config" זה לתוך שורת הכתובת) ולחפש
DOM. disable_window_status_change. לשנות את זה שקר ... פשוט לחץ על רשומת כדי לעבור למצב שלה.

או לחלופין

"כלים → אפשרויות → תוכן אפשר → JavaScript / מתקדם → מצב שינוי הטקסט בר"

וגם לציין ... לכתוב בשורת המצב ב-Javascript שלך, IE זה בסדר רק אם אתה משתמש המצב קצר כלומר תחביר = 'טקסט באגים', אבל ב-Firefox, אתה צריך להשתמש במלואה התחביר כלומר window.status = ' משהו לאתר באגים "

גם אני חדש מאוד ממשק משתמש (UI) פיתוח ואני גם לא ותיק כמו שאני תמיד לשים את זה, אני להתאים את הפרופיל של UI Developer יותר מזה של מעצב, ללא חרטות. נו טוב! מה חשבתי לכתוב על? במשך זמן מה ... (חייב להיות שנה לא פחות) עכשיו, מדי פעם כאשר אני נכנס קצת עיצוב ממשק משתמש (כאשר מעצב מקצועי הלך לחופשה), אני לא יכולה להפסיק לחשוב תמיד אם העיצוב שלי צריך להיות complient כראוי או לא (באמת, לא יכולתי achive 100% תאימות סטנדרטים, אם הייתי רוצה יותר מדי). ואז אני אומר לעצמי, איזה שטויות! ... העיצוב צריך להיות פשוט, נחמד ובעיקר נראה שמיש, זה לא צריך להפוך את המבקרים לברוח ... או להקפיץ (להיות טכני). מה טוב פריסת נחמד tableless CSS יהיה המבקר, שהוא מתעלם מכל HyperText חכם גיליון סגנונות מדורג מתחת לעור של דף האינטרנט שלך ... אפס!
זה אמור להיראות נחמד להיות קל לשימוש ... ואז בא דברים בכל התקנים.

אני stumbbled accross ערך זה הבלוג של ג'ייסון פריד של 37 אותות (למי לא מודעים 37 אותות הם onces שיצרו כמה יישומי אינטרנט מדהים כמו Basecamp, וכו 'מדורת השבט) שכתבו משהו דומה ב 2004 ותאמינו לי, כמעט 5 שנים ולא השתנה הרבה מאז כי ... שמחתי לקרוא את ההודעה שלו, אני מסכים לחלוטין עם מה שיש לו לומר גם את העובדה, אותה הוא לא בטוח על מה הוא מספר על ההרגשה שלו רק שלה במעיים ולכן הוא שלי

ג'ייסון פריד: "יש הרבה יותר מדי לדבר על CSS ו-XHTML ו לתקנים נגישות ולא מספיק לדבר על אנשים. CSS ו קוד תקני תואם הם רק כלים - אתה צריך לדעת מה לבנות עם כלים אלה. נהדר, אני שמח UI שלך לא להשתמש בטבלאות. אז מה? למי אכפת אם זה עדיין לא נותן לאנשים להשיג את מטרותיהם. תקני האינטרנט הם נהדרים, אבל אמות המידה של אנשים כוללים מקבל דברים לעשות (וזה עדיין קשה מדי לעשות באינטרנט).

מעצבי ממשק משתמש עושים אותו זקן היסוד "לשכוח את האדם בצד השני" טעויות - אלא שהפעם הקוד שלהם נראה טוב יותר. בני אדם - לא validators קוד - ממשקי שימוש ".

לכתבה המלאה Checkout ג'ייסון פריד של

DISCALIMER: זה לא אומר שאנחנו לא צריכים לטרוח על סטנדרטים בכלל. התקנים הם טוב שיש ולעמוד בהם ככל האפשר. אנחנו רק צריכים להבין כי עיצוב ממשק משתמש טוב לא תמיד אומר 100% תקני Complience או להפך ....

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

1. שמור על המשתמשים. המשתמשים יכול לעשות או לשבור את האתר שלך. DONOT לעשות מבט המשתמש כמו idoit הכולל, מסוגלת לחלוטין של שימוש אתר האינטרנט שלך. זה רע!

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

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

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

5. עקביות בעיצוב שלך אינטראקציה חשובה מאוד. Donot לבלבל את המשתמש עם אינטראקציות ו Gizmos בלתי צפויות.

6. הבן שלך "Mission Design משפט". Aways להתמקד הפעולה העיקרית של beign דף מעוצב. כמו כן, ערוך רשימה של פעולות seconday שלך על הדף, לתעדף אותם.

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

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

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

10. להישען לאחור ולחשוב כמו משתמש לפעמים.

Heres אחר peice קצת הולכת שולל Javascript שאני צריך לחפור מסביב כי המצב commaned זה. באחד מאתרי האינטרנט שלי, היה לי מצב שבו הייתי צריך ליישם "windows.onload" פעמיים. הדבר הראשון היה בא בחשבון חסר ניסיון כמו שלי (אני חייב לומר בכנות, כי אני כבר משתמש במסגרות-JavaScript של ספריות, אני forgotton לעשות דברים פשוטים ב ... שלי עצוב אבל נכון), היא השיטה הבאה ...

 window.onload = onloadfn1;
 window.onload = onloadfn2;
 window.onload = onloadfn3;
 וכו '..

מצטער לומר אבל, זה לא יעבוד ... לא רוצה לדבר על המדע ביצוע Javascript הרבה ... אבל לפי הניסיון האחרון שלי, רק את הפונקציה האחרונה (onloadfn3) יהיה חולה ממש מקבל להורג.

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

או משהו כזה

 doOnLoad function () {
         onloadfn1 ();
         onloadfn2 ();
         onloadfn3 ();
 }
 window.onload = doOnLoad;

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

"דפי האתר שלי בנויות כמו נושא וורדפרס .... כלומר יש כמה Header.php משותפים Footer.php שמקבל הכלולים אל כל דפי האתר. יש פונקציה ב onload implementaion Footer.php כדי לעשות כמה פונקציות onload משותפים. ויש עוד כמה עמודים, כי צריך משהו onload שלהם, מלבד אלה נעשה על ידי הפונקציה onload משותף. אם אני להקצות פונקציה התקשרות ישירות למטפל window.onload, זה יהיה יותר מדי לרכב callbacks שהוקצו בעבר Footer.php את "

.... הבעיה שלי הבין ?

טוב! יש כמה פתרונות שאני מצאו. כולם דומים מאוד ובעיקר implementions של הפתרון שניתן על ידי סיימון Willison ( http://simonwillison.net/2004/May/26/addLoadEvent/ ) ...

פתרון:

כל שעליך לעשות הוא להוסיף את קוד ה-JavaScript לאתר ...

 פונקציה addLoadEvent (func) {
     var oldonload = window.onload;
     אם (window.onload typeof! = 'פונקציה') {
        window.onload = func
     אחר} {
        window.onload = function () {
            אם (oldonload) {
                   oldonload ()
           }
           func ()
        }
    }
 }

ולקרוא את זה במקום "windows.onload" כרגיל

 addLoadEvent (FunctionToRunOnPageLoad);
 addLoadEvent (function () {
 / * קוד יותר לרוץ על * הטעינה של הדף
 }); 

היתרונות של קטע הקוד הזה ...
1. בעיקר, הוא מאפשר לך אירועים windows.onload מרובות, המכונה מחלקים נפרדים של הקוד שלך, ללא overridding ההגדרה הקודמת
2. זה באמת לא מתבלט. זה יכול להיות ממוקם בתוך קובץ עם התסריטים האחרים שלך, או בקובץ נפרד.
3. זה עובד גם אם window.onload כבר נקבע.

חשבתי 1 זה יהיה שרבוט למצוא ב-Google, כמו רבים מאיתנו כותבים לך ממשק משתמש התסריט היה צריך לעשות את זה ביום בסיס יום, כלומר כוללים קצת peice של קטע קוד PHP (. Php) אל תבנית החכם (. TPL). הבנתי שאילתה קל / פופולרי, אפילו יותר קשה למצוא את התשובה המדויקת ... מיליון בתוצאות החיפוש אבל רובם reffered על "קובץ" כוללת החכם ... אשר בתחביר הבא

{כולל = קובץ "כוללים / header.php"}

זה inlcuded למעשה את הקובץ בסדר, אבל כטקסט, מה שרציתי היה תוצאה של הקובץ כלל. (הערה לעיל משמש כוללים התבנית בתוך תבנית קובץ). בסופו של דבר עם persiverance קצת .... נתקלתי תחביר slighty שונה, אשר היתה התשובה לדרישה שלי ... אז הנה זה ... אם אתה נמצא havn't 1 כבר

{Include_php הקובץ = "הכוללים / header.php"}

תות נוסף מהירה. הנה משהו פשוט ונחמד באמצעות העוצמה של 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 קליפ הוא כנראה אחד בלתי בשימוש תכונות רוב CSS. זה היה נכון אז גם לי ושמחתי ביותר להזניח את זה, עד שהתחלתי שינוי שני MooTools (PIN) Knob Slider Component (עם מחוון טווח) .

היתה הצעה טובה מאחת משתמשים רכיב לשנות את רכיב Slider באמצעות תמונות backgroud גזומים (נגד חלוקת רוחב משתנה) כדי לציין את טווח המחוון. לכן הגיע הזמן שלי להיכנס כיף אבל בלתי שכר (לי ofcourse) המים של הנכס קליפ CSS.

טוב! כמה קשה זה יכול להיות? לא הרבה בכלל ... כן ולא. התחביר כדי להשתמש במאפיין קליפ CSS היא זקופה למדי, אבל המשמעות / usuage קצת croocked. עם זיכרון כמו שלי, כל פעם אני יושב לעבוד מחדש על התסריט Slider שלי ... יש לי tokeep מתכוון לחזור השימוש של נכס זה קליפ, כדי להזכיר לעצמי את ההיגיון שאני יצרתי בתסריט שלי .... מכאן! חשבתי בעט אותו, בתקווה לזכור אותו בעתיד (וגם לטובת אלה נראה שיגע ידי נכס קליפ CSS)

מה קליפ CSS לעשות?

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

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

זה בלבול קטן יכול בקלות להיעלם, עם הסבר זה ויזואלית של הנכס CSS קליפ / rect להלן!!

דרישות קליפ-CSS

המשימה התחלנו הוא קליפ תמונה ממוזערת הבאה לתמונה רבועים מחפש (וגם תמונה רחבת זווית)

Thumbnal התמונה המקורית /	קליפ דרישות Sqaure Thumbmail

תוצאות קליפ-CSS

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

שאלה זו חלפה במוחי כמה פעמים בעבר, כאשר עבדתי על אתרי מוקדם מדי, אשר משמש וורדפרס להראות בלוגים או סוג חדש של תוכן באיזה חלק של האתר / portal.Being טירון ב-PHP וברחבי וורדפרס, המשכתי procastinating את זה, חושב "זה לא peice שלי עוגה". סוף סוף! דרישה זו באה upto האף, כאשר החל חופר קצת מסביב לפתרון.
הופתעתי לגלות כי זה באמת היה קל יותר ממה שאני באמת חשב שזה, כדי להציג רשימה של כותרות או בהודעה האחרונה בעמוד אחר מחוץ סעיף וורדפרס המופעל, רק באמצעות קצת PHP ו-API של וורדפרס .

הנה מה לעשות: -
מטעמים של הסבר מניח את האתר שלך הוא http://www.inchembur.com/ ויש לך את הסעיף חדשות עבור אתר זה על http://news.inchembur.com/ (אשר פועל וורדפרס). עכשיו הדרישה היא להראות בהודעה האחרונה מ http://news.inchembur.com/ בדף הבית של האתר הראשי, כלומר http://www.inchembur.com/index.php

Step1: ב index.php שלך להוסיף peice הקוד הבאה, לכלול את קובץ ה-API וורדפרס. אתה יכול להוסיף את זה בראש הדף אתה רוצה בהודעה שלך להופיע.

<? Php
'WP_USE_THEMES' , false ) ; // Disbable use of WordPress Theme define ('WP_USE_THEMES ", false); שימוש / / Disbable של וורדפרס
מחייבים ('/ var / news.inchembur.com / wp-blog-header.php'); / / כלול WordPress API
; // Get Latest Post query_posts ('showposts = 1'); / / קבל הודעה אחרונה
>

ב peice של מעל כלול, אנחנו מקבלים רק בהודעה האחרונה אחד. אם אתה רוצה לנסות וריאציות נוספות אתה מוזמן לחפור, query_posts() תיעוד .

שלב 2: עכשיו, בין היתר של עמוד ראשי / עמוד הבית שבו אתה רוצה להראות בהודעה האחרונה וורדפרס מ http://news.inchembur.com , השתמש את הקוד הבא. למותר לציין, אתה מוזמן מודעות חטיבות סטיילינג שלך, טווחי וכיתות לפי צרכי העיצוב שלך.

שלב 3: אין שלב 3 ... זה הכל ... אתה עשית!

איך להראות הדף הודעה / ספציפי בניגוד להודעה האחרונה: -
זה יכול achived בקלות על ידי שינוי הטיעונים כדי query_posts() לכלול את מזהה הדפים או חילזון

) ; query_posts ("page_id = 7 ');
) ; query_posts ("pagename = כ ');

או אתה יכול לשלוט על מספר הודעות:
) ; query_posts (showposts = 3);

לפעמים כדי לשמור על pageweight למטה ... יש לנו לפצל תסריטים שלנו לרסיסים ... אלה שברי JavaScript יכול להיות טעון אם וכאשר נדרש (על אירוע או על לחץ על קישור או כפתור וכו ').

Javascripts טוען באופן דינמי הוא פשוט די ישר קדימה להלן ...

= “text/javascript” > <סוג סקריפט = "text / javascript">
פונקציה loadNewScript (מקור) {
var s = document.createElement ("סקריפט");
s.setAttribute ("סוג", "text / javascript");
s.setAttribute ("src", במקור);
document.body.appendChild (ים);
}
</ Script>

ואתה יכול לקבל את הקישור לשיחה הבאה בכל מקום בגוף, או שאתה יכול לקבל את זה בכתב "onload" של המסמך עצמו ...

= “javascript:loadNewScript('myDynamicScript.js');” >Load Dynamic Script</ a > <A href = "javascript: loadNewScript (" myDynamicScript.js '); "> סקריפט עומס דינאמי </ a>

או

<body onload="loadNewScript('myDynamicScript.js');">

אם אתה אדם CSS, היית יודע את הכאב מקבל פריסות שלך עבודה לדפדפנים. IE8 הוא עוד ברגים בעבודות עבור מפתחים אותנו. Anywaz! אם אתה מכה על בעיה זו, כמו שעשיתי אתמול, כאשר ה-CSS בצורה מושלמת לעבודה שלך IE7 (וגם קודם לכן) ו-Firefox התחיל פתאום לזרוק התקפי זעם של IE8, נסה את זה ... זה נראה יפה לתקן את הבעיות שלי לרגע ....

באמצעות הכרזה מטא, אנו יכולים לציין את מנוע עיבוד ברצוננו IE8 לשימוש. אז לכפות IE8 כדי להבהיר כמו IE7 ... הוספת תג Meta הבאה לתוך הראש של המסמך: -

<meta http-equiv="X-UA-Compatible" content="IE=7" />

כברירת מחדל Meta IE יהיה: -

<meta http-equiv="X-UA-Compatible" content="IE=8" />
אשר יגרום IE8 להפוך את הדף באמצעות מצב סטנדרטים חדשים.

במידת הצורך, תחביר זה יכול לשמש כדי להכיל לדפדפנים אחרים כמו להלן:

<meta http-equiv="X-UA-Compatible" content="IE=8;FF=3;OtherUA=4" />

עוד אודות DOCTYPES:

אם אתה עדיין לא מכיר סוג של בעל חיים בשם "DOCTYPE" ... הנה קצת מהירה לקרוא
מה DOCTYPES? מה Quirks הדפדפן & מצב קפידה?
הגדרת DOCTYPE ב XSL

במשך יותר הבנה מעמיקה על DOCTYPES, נסה לבקר את הקישורים הללו ...
A List Apart: תקן את האתר שלך עם DOCTYPE הנכון!
A List Apart: מעבר DOCTYPE: תקני אינטרנט, תאימות קדימה, ו IE8

הערה: למרות שרבים מאיתנו HTML / CSS אנשים היו מזניחים את החשיבות של decleration DOCTYPE במסמכים שלנו, הגדרת DOCTYPE הנכון, בדרך כלל התשובה בעיות דפדפנים ביותר.

איפוס 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;}