שימוש Normalize.css עבור הומוגנית פיתוח

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

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

דפדפן מאפס לעומת מנרמל

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

תחשוב על לנרמל כמו בגד להחיל באופן עקבי על כל הדפדפנים, וחושבים על א CSS reset כמו פיצוץ thermonuclear בכל הדפדפנים.

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

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

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

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

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

אם אתה רוצה לנסות איפוס CSS הנה כמה אפשרויות פופולריות:

• אריק מאייר של resets
• איפוס HTML5
• איפוס HTML5Doctor

מנרמל את התצורה

מנרמל את היוצר ניקולה Gallagher כתב פוסט המבוא המובילה עם הצהרה זו:

“Normalize.css הוא קובץ CSS קטן המספק עקביות טובה יותר בין הדפדפן בעיצוב ברירת המחדל של רכיבי HTML. זוהי אלטרנטיבה מודרנית, HTML5 מוכנה, לאיפוס CSS המסורתי.”

במהלך השנים זה גדל לתוך ספריה מהימן בשימוש על ידי מפתחים ברחבי העולם. לנרמל יש אפילו נעשה שימוש במידה מסוימת ב Bootstrap ו Pure CSS.

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

הראשונה היא אסטרטגיה לבחור ולבחור שבו אתה עובר את הקובץ Normalize.css ולמחוק את כל מה שאתה לא צריך לעשות סגנונות מותאמים אישית משלך. זה הכי טוב על בסיס לכל פרויקט לשמור את הקבצים נמוך.

לחלופין, חלק מהמפתחים כוללים את הקובץ Normalize.css כולו ובנו את ה- stylesheet שלכם על גבי זה. את נורמליזציה stylesheet מלאה משתרע 420 + שורות של קוד אשר equates ~ 6.8KB לא דחוס.

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

כדי להתחיל או להוריד עותק של נרמל מ GitHub או לארח אותו CDN חיצוני. ניתן גם לגרור את הגרסה האחרונה של Normalize מימין NPM כך:

התקנת npm --save normalize.css 

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

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

כל חוק מנרמל יש תגובה CSS המתאים להסביר מה הוא עושה ואילו בעיות / באגים זה פותר. חלקם ברורים כמו הגדרה בלוק תצוגה על רכיבי HTML5 חדשים יותר.

אחרים פחות בולטים כמו קוד SVG זה שמסתיר גלישה ב- Internet Explorer:

svg: not (: root) overflow: hidden;  

אני מאוד ממליץ skimming את stylesheet לראות בדיוק איך זה פועל כדי ללמוד אם נורמליזציה יהיה מתאים לפרויקט שלך.

Normalize.css ב עיצוב אתרים

הגרסה החדשה ביותר של Normalize v4.0 מציעה תמיכה רחבה בדפדפן.

• Chrome (שני האחרונים)
• קצה (שני האחרונים)
• פיירפוקס (שני האחרונים)
• אתר
• 8+
• אופרה (שני האחרונים)
• ספארי 6+

לפי מה שאני יכול לומר, Normalize עשויה לתמוך בגירסאות ישנות יותר של דפדפנים עם עדכונים מתמידים כמו Firefox. אבל ה “רשמי” התמיכה כוללת רק את שתי הגרסאות העדכניות ביותר של Chrome / Edge / FF / Opera.

כמו כן, IE6 + ו- Safari 4+ נתמכים ב- Normalize v1, אך גירסה זו אינה מעודכנת עוד.

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

משאבים נוספים

אין הרבה ללמד במיוחד על לנרמל כך רוב הלמידה קורה על ידי עושה.

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

מאמרים קשורים

• ניקולאס גלאגר: על Normalize.css
• מבוא ל - HTML5
• Normal.css לעומת Reset.css: איזה מהם להשתמש?

וידאו מבוא

• שימוש ב- Normalize CSS
• איפוס ונרמול על ידי Envato
• ניקולאס גלאגהר - חשיבה מעבר CSS מדרגית