שמירה על קוד CSS3 שלך סימון
מפתחי אינטרנט יכולים לחסוך הרבה זמן באמצעות תחביר CSS מתוחכם יותר. משתמשים שביקרו בדף שלך מצפים לזמן הטעינה המהיר ביותר - מה שהופך את האחריות שלך לשמור על גודל הקובץ למטה. יש הרבה טריקים קצרנות עם CSS ובמיוחד תחת מודל CSS3 החדש.
יש לי להרכיב כמה רעיונות אלה במדריך הבא. אנחנו צריכים גם לגעת בתחומים אחרים כגון צמצום קוד ה- CSS שלך. ישנם כלים בדפדפן זמין כדי לסייע למפתחים בתהליך עיצוב אבל אתה רוצה לשלב קודים עם זה גודל הקובץ הפחתת בסופו של דבר לייעל את תהליך עיבוד של אתר האינטרנט שלך.
טיפים בסיסיים על עיצוב
לפני שאנחנו קופצים לתוך התחביר CSS בפועל אני רוצה ללכת על הנושא של איך לכתוב את ה- CSS שלך. אם אתה קצת מכיר את עיצוב אתרים, סביר להניח שאתה כבר ראיתי גיליון סגנונות לפני, כנראה יותר מפעם אחת. החלק הראשון של כל פקודה נקרא 28. זה מטרות סוג של רכיב אשר יקבלו את סגנונות הוסיף בתוך הפלטה מסולסל, הידוע גם בשם נכסים.
בשורה התחתונה
עם סגנונות מוטבעים כל נכס כתוב אחד אחרי השני עם רווחים בלבד כדי להפריד ביניהם. שיטה זו מיושמת בצורה הטובה ביותר על סלקטורים שבהם אתה רק צריך כמה מאפיינים. זה יחסוך לך שטח בדף וגלילה דרך stylesheet שלך יהיה הרבה יותר מהר. במקרה שמעולם לא נתקלת ב- CSS קודם, הוספתי דוגמה קטנה שמתמקדת בקישורים של עוגן HTML.
color: # 648cc8; מודגש; א: העבר את העכבר color: # 739cda; text-decoration: none; a.alt color: # bd4949! חשוב;
רמת בלוק
מאידך, מאפייני סגנון בלוק מוזנים בשורה אחת לכל מפתח / ערך, והם לעיתים קרובות מוזחים לעריכה מהירה יותר בעת סריקת הקוד. כ 99% של גיליונות סגנונות מנקה אני לרוץ לתוך להשתמש עיצוב זה, וזה הפך תקן התעשייה מעצבים רבים. אם הבורר שלך משתמש ביותר מ 6 או 7 מאפיינים זה העיצוב הטוב ביותר להחיל.
כאשר אתה לוקח בחשבון את התכונות החדשות CSS3 רבים, אתה גם מבין עד כמה מהר גיליונות שלך להתמלא. ורבים מהמאפיינים הללו תומכים בהעתקים ספציפיים לדפדפן, הדורשים כמעט ערכי קוד כפולים (כגון רדיוס הגבול). אתה יכול לבדוק את הדוגמה שלי של נכס לחסום להגדיר מתחת מיקוד עטיפת div.
.גלישה Display: block; ריפוד: 6px 10px; רקע: #FFF; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; -o-border-radius: 4px;
אף אחד משני הכתיבה של CSS הוא דווקא יותר טוב מהאחר. בסופו של דבר זה הבחירה שלך כמפתח איזה סגנון אתה מעדיף, וגם זה יהיה על פי הפרויקט אתה עובד על. זה אפילו נפוץ למצוא CSS שבו מעצבים מעורבים גם יחד! אני אישית מרגיש את זה “עובד בתהליך” נוטים להיות קלים יותר עם סגנונות בלוק מאז אני כל הזמן בוחן את גיליון סגנונות כדי לבצע עריכות או תוספות. אבל עבור דומיינים כבדים התנועה צמצום קובץ ה- CSS שלך היא הדרך הטובה ביותר ללכת.
שמירה עליהם רזה
על ידי ניצול קודים קצרים רבים זמינים CSS3 אתה יכול לחסוך הרבה זמן הפיתוח. עריכת רכיבי HTML יהפוך להיות הרבה יותר קל כפי שאתה מבין את הזמן הזה חיסכון לינגו. בנוסף הקוד שלך יופיע יותר נקי לחתוך וקל יותר להסתכל.
החיסרון היחיד הוא שלא כל הדפדפנים תומכים באופן מלא בתכונות אלה. ישנן דרכים לעקיפת הבעיה עבור רבים מהנושאים הקיימים, כגון ב- Internet Explorer ו- Netscape. למרבה המזל האינטרנט הוא תמיד מתקדם קדימה כמו CSS3 גדל הפופולריות, אנו ללא ספק לחוות גידול תאימות דפדפן מדי.
RGBa צבע שקיפות / אטימות
RGBavalue החדש הוא לא בדיוק CSS3 נכס, אבל שקיפות אלפא היא ספציפית ל- CSS3 בלבד. במקום המשותף "אדום ירוק כחול" ערכים לך לעבור על צבע אתה יכול עכשיו לכלול אפשרות רביעית של שקיפות צבע. בגלל זה, מפתחי אינטרנט נעשים עם PNGs שקופים כמעט לחלוטין.
התחביר הבסיסי דורש ערך 0-255 בשלושת הראשונים (3) חריצים ו 0-1.0 במצב אלפא. טווח הצבעים הוא ספציפי עבור כמה של כל גוון (RGB) גלוי עם 0 להיות כלום 255 מלא.
/ ** ** תחביר / רקע: rgba (value_name, value_name, value_name, value_name, opacity_value); / ** example ** / div background: rgba (255, 255, 255, 0.3);
תאימות בין דפי דפדפן
עוד נכס אטימות ניתן להשתמש במקרים מסוימים. עם זאת זה ישפיע על כל האלמנט HTML ותוכן פנימי, לא רק את הרקע כפי שראית בדוגמה שלי.
לצערנו, Internet Explorer אינו תומך בערך הצבע RGBa. אתה צריך בדרך כלל לכלול רכוש backback עם אטימות מלאה עבור אלה דפדפנים פחות סטנדרטיים. אתה מגדיר את זה עם אותם ערכים, אבל לא כולל את 4 (אטימות). זה ייראה כמו משהו rgba (255, 255, 255)
בנוסף Internet Explorer ניתן לטפל קצת יותר בחינניות באמצעות תנאים. אתה יכול למעשה לבדוק אם הדפדפן פועל IE ולהציג מסנן קנייני של Microsoft CSS על הפקודה. אני כבר הוכיחו את זה בדוגמה שלי למטה (שים לב זה יופיע איפשהו בקובץ ה- HTML שלך):
רדיוס גבול
קראתי כמה נושאים מבלבלים בפורום על יצירת גבולות מעוגלים עם CSS3 - לא כל כך הרבה בצד של איך זה נעשה, אבל עם תמיכה בדפדפן הדפדפן, מפתחי אינטרנט הם scrambling עבור הקוד הקלה ביותר לרדת ולתפקד כצפוי.
/ ** תחביר ** / גבול רדיוס: למעלה משמאל למעלה מימין למטה מימין למטה משמאל;
ה רדיוס הגבול רכוש משותף תחביר דומה ליצירת גבול סטנדרטי, למעט במקרה זה אנו מתמקדים פינות הקופסה. נכס זה יהיה למעשה לקבל 1 - 4 ערכים והם כל יעד ההתקנה של פינות שונות.
- 1: כל ארבע הפינות מעוגלות לאותו ערך
- 2 ערכים: הערך הראשון חל על
שמאלי עליוןולמטה מימיןבעוד הערך השני פוגעלמעלה מימיןושמאל תחתון - 3 ערכים: ראשית חל על
שמאלי עליוןבפינה, השני הוא גםשמאל תחתון&למעלה מימיןבעוד שהערך השלישי והאחרון מוחל עללמטה מימין - 4 ערכים: כל 4 הערכים מכוונים לפינות לפי הסדר הבא: למעלה משמאל, משמאל למעלה, מימין למטה, משמאל למטה
/ ** דוגמה ** / div border-radius: 4px 4px 8px 4px; div border-radius: 4px 4px 8px;
אז בקוד לעיל אנו משתמשים רדיוס הגבול כדי להחיל אפקט מעוגל 4px על כל דבר למעט למטה מימין הגבול אשר מקבל עקומת 8px מוחלק. אם אתה שם לב, שני קודים אלה יהיה למעשה להחיל את אותו אפקט סגנון.
תאימות בין דפי דפדפן
עכשיו הבעיה העיקרית היא רדיוס הגבול נתמך רק במספר דפדפנים. אינטרנט אקספלורר 9 לאחרונה הוסיף תמיכה גדולה אופרה יעבד את זה גם כן. עם זאת אפילו אופרה יצרה רכוש משלה עם -o-border-radius מיקוד מנוע הדפדפן הספציפי שלהם. בנוסף -moz-border-radius נתמך על ידי תוכנת פיירפוקס / גקו ו -webkit-border-radius עבור Google Chrome / ספארי.
הקוד שלהלן הוא דוגמה לתבנית החשופה שלי ליצירת פינות מעוגלות עם התמיכה הגדולה ביותר בדפדפן הגלובלי.
div border-radius: 4px 4px 8px 4px; -webkit-border-radius: 4px 4px 8px 4px ;; -Moz-Border-radius: 4px 4px 8px 4px; - רדיוס: 4px 4px 8px 4px;
דמיון צל?
הפן השני באמת מדהים של CSS3 הוא תמיכה קופסא ו צללי טקסט. זה כבר כזה בעיה עבור מפתחים בעבר מאז תמונות רקע היו רק אפשרות מציאותית. תחביר זה למעשה אחרי תפקיד קצר זה הרבה יותר קל מאשר נכסים אחרים כיסינו. קשה לזכור את הסדר הנכון של ערכי מפתח בהתחלה - אבל ככל שאתה נוהג לשים יותר, כך יהיה קל יותר.
למרבה הצער Internet Explorer הוא שוב אחד מוזר החוצה. כל דפדפן גדול אחר כולל Firefox, Google Chrome, Safari ו Opera תומכים באופן מלא צל טקסט נכס. מפתחים ניסו לבנות תמיכה משלהם ב- IE אך עדיין מגבילים מאוד. התחביר הבסיסי נכתב כך:
/ ** תחביר ** / text-shadow: x-offset y-offset טשטוש רדיוס צבע; / ** example ** / div text-shadow: 2px 2px 1px # 111;
X ו- Y לקזז לספר את הדפדפן כמה רחוק מעל הצליל הנכון ואת צריכה להופיע. ניתן להשתמש בערכים שליליים כדי למקם את הצל מעל ושמאל, בהתאמה. אבל זה מגיע ממני להסתכל מאוד מביך אז אני ממליץ מספרים שלמים וחיוביים. כמו כן, ניתן להשתמש בערך רדיוס הטשטוש כדי להחליק את הקצוות הנוקשים, אם צל הטקסט נראה לא טבעי.
תחביר זה הוא רק להסתכל לתוך הסימון הבסיסי בעת יצירת אפקט צל ירידה אחת. מעצבים מתקדמים מאוד למדו אפילו ליצור צללים מרובים בו זמנית! אני הפניה זו הבלוג מדהים לכתוב מחודש אפריל 2011 אשר נכנס בפירוט רב על הטלת טקסט הצללים. אם יש לך זמן, רזה דרך התוכן רק כדי לקבל מושג על התכונות המתקדמות יותר, והקפד להוסיף את הסימניות כנקודת התייחסות עתידית!
תאימות בין דפי דפדפן
המפץ הגדול ביותר שאנו נתקלים בו הוא Internet Explorer. פעם אחר פעם מיקרוסופט דחפה את מנוע עיבוד הדפדפן שלהם, אשר ביצע תת-נקוב במקרה הטוב. עכשיו גם עם CSS3 לוקח את השולטים על צללי טקסט, IE עדיין מאחור. יש אתר הדגמה גדול שבו אתה יכול למצוא דוגמאות קוד והערות מסורתיות CSS מותנה.
ביסודו של דבר אתה מחפש לבדוק אם הדפדפן שלך פועל על כל גרסה של Internet Explorer 9 או למטה. לאחר מכן באמצעות מסננים MS נוכל להחיל צל אל כל רכיב טקסט (לעיל, אנו משתמשים פסקה).
הקלות מעברים
CSS3 המעבר הוא הנכס החם ביותר בשוק העיצוב מאז flapjacks של סבתא! מעצבי אתרים כבר עושה כזה רעש על מעברים CSS טהור, למרות התמיכה מוגבלת בעיקר דפדפני Webkit. אתה יכול כמובן לנצל נכסים משניים עבור Mozilla ו Opera וכך. אבל סימון קצר הוא באמת שובה לב, במיוחד אם אתה נגד אנימציות JavaScript מכל סיבה שהיא.
ראשית בואו נסתכל על הנכס המעבר המקורי. זה ידרוש 4 ערכים אשר אתה יכול גם לשבור לתוך המאפיינים עצמם. הם תואמים את המעבר נכס(מה ההשפעה), משך(כמה זמן כדי לצייר את זה), פונקציית תזמון(שינויים במהירות על האנימציה), ו עיכוב(מספר שניות לחכות לפני animating).
/ ** תחביר ** / מעבר: משך זמן ההשהייה בתכונה; / ** דוגמה ** / img (מעבר-רכוש: אטימות; משך מעבר: 2 שניות; פונקציית המעבר-תזמון: הקלות; עיכוב מעבר: 0.5s;
אתה צריך אינטואיטיבי להבין את המטרה עבור רוב המאפיינים האלה למעט אולי פונקציית העיתוי. למרות מבלבל בהתחלה, נכס זה פשוט animates המעבר שלך באופן שונה כך אפקט יתחיל לאט יותר, בסופו של דבר לאט, או משהו דומה.
W3 בתי ספר יש פונקציה עיתוי דוק מקוון אשר מפרטת את כל הערכים האפשריים שאתה יכול לנסות. אני כל הזמן מוצא את עצמי Googling עבור המדריכים האלה, אבל הם עושים כזה סימניות שימושי.
תאימות בין דפי דפדפן
עכשיו בואו להביא תמיכה מלאה הדפדפן לתוך לשחק. כברירת מחדל, מאפיין המעבר הוא רק נתמך על ידי גרסאות חדשות של Safari. עם זאת, משתמשים רבים עדיין דורשים -WebKit קידומת שחלה גם על Google Chrome ועל מנועי עיבוד דומים. להלן הוא “סופית” תבנית לחסום קוד אני ממליץ לשמור ולהשתמש אם אתה צריך תמיכה המעבר מרוב דפדפני האינטרנט.
img מעבר: אטימות 2 הקלות 1s; -webkit- המעבר: אטימות 2s הקלות 1s; / * כרום, ספארי, הצאן * / -Moz המעבר: אטימות 2s הקלות 1s; / * mozilla + שממית * / - מעבר: אטימות 2s הקלות 1s; / * אופרה * /
טקסט שבץ אפקטים
מאפיין זה לא ענק ולא תמצאו מעצבי אתרים רבים להשתמש בו היום. אבל אתה יכול להשתמש טקסט שבץ כדי לבנות כמה אפקטים מסודרים באמת עם הגופנים שלך. Webkit דפדפנים כגון ספארי ו- Chrome הם רק תומכים אמיתיים של נכס זה עד כה. אופרה ו- Firefox מתקשים לעבד אובייקטים עם אותם קווי מתאר.
/ ** תחביר ** / p -webkit-text-stroke: צבע רוחב; / ** example ** / p -webkit-text-stroke: 1px # 222;
תאימות בין דפי דפדפן
אם אתה מרגיש את הצורך אפקטים שבץ טקסט, אתה תמיד צריך לכלול צבע גיבוי. מוזילה ואופרה יכולות להסתדר, אולם למשתמשי Internet Explorer אין אפשרויות אחרות. למרבה הצער זה אחד המאפיינים החדשים יותר CSS3 אשר פשוט לא צבר תמיכה מספיק מהקהילה מפתחי דפדפן האינטרנט. אתה צריך לבלות קצת זמן לשחק עם כלי אינטרנט נהדר זה נוצר במיוחד לבניית אלה CSS3 קווי מתאר.
גודל התיבה
המאפיין של תיבת הגודל נותן לך שליטה רבה יותר על רוחב / גובה הכולל של כל רכיב בלוק. כברירת מחדל רוחב / גובה + גבול + שולי + ריפוד לפצות את הגודל הכולל של התיבה. עם זאת, באמצעות תיבת הגבול על התוכן שלך דוחף את כל הריפוד שלך ואת השוליים פנימה כדי לשמור על רוחב זהה בדיוק. יש רק שני ערכים עבור נכס זה, עם תיבת תוכן להיות ברירת המחדל.
div width: 550px; ריפוד: 9px; box-sizing: border-box; / * רוחב יישאר ב 550px * /
כפי שאתה יכול לדמיין את זה יגיע שימושי בשלב כלשהו במהלך הקריירה CSS שלך. ריפוד ושוליים יכול להיות כאב אמיתי וכאשר אתה מוסיף גבולות אתה נוטה לאבד את הפיקסלים.
תאימות בין דפי דפדפן
Opera ו- IE 8 תומכים במאפיין החדש כברירת מחדל. IE7 ומטה הם תקועים עם ההתקנה תיבת תוכן, אלא אם כן המבקרים שלך משתמשים במצב quirks. התוספות היחידות שאתה צריך לדעת על היעד במיוחד webkit ומנועים מופעל דפדפן מוזילה.
div -webkit-box-sizing: border-box; / * Safari / Chrome * / -moz-box-sizing: border-box; / * Firefox * / box-sizing: border-box; / * Opera / IE8 + * /
טהור CSS3 עמודות
עמודות הם קצת מסובך עם CSS3 אבל ניתן להשיג עם קוד מינימלי. 2 תכונות אתה רוצה להתמקד הם ספירת עמודות ו פער עמודות. הספירה מפנה את המספר הכולל של עמודות שברצונך להחיל כאשר הפער יוצר מרווח בין כל אחת.
div # cols column-count: 3; column-gap: 10px;
בדוגמה שלי ניתן לראות את מזהה #cols בשימוש כמכולה. בפנים אנו מחלקים את div לשלוש עמודות עם פער 10px בין כל אחד. יתר על כן אתה יכול להגדיר רוחב העמודה אשר משמש כדי להגדיר את רוחב הכולל של כל עמודה במקום לרשום מספר מוצק.
תאימות בין דפי דפדפן
כל דבר לפני IE8 פשוט לא יוכלו לעשות שימוש זה רכוש. אבל כפי שראינו בכל דוגמה, מוזילה וובקיט מציעות פתרונות משלהם לדפדפנים מרובים. אם אתה צריך תבנית לבדוק את קוד לדוגמה קטנה שלי להלן:
div # sidebar רוחב: 210px; -Moz-column-count: 3; -Moz-column-gap: 7px; -webkit-column-count: 3; -webkit-column-gap: 7px; ספירת עמודות: 3; עמודה: 7px;
מותאם אישית @ font-face
אתה בטח שמעת על ההתרגשות לגבי גופנים מותאמים אישית CSS3. ובכן באמצעות @ font-face תכונה אנו יכולים לייבא סגנונות גופנים חיצוניים ולהשתמש אלה בדיוק כמו כל משפחה אחרת. התחביר קצת מפותל ואתה תצטרך להשקיע קצת זמן מקבל את זה נכון. הבלוק עבור @סוג גופן משמש להגדרת שם משפחה, ולאחר מכן ניתן להשתמש בו משפחת גופן מאפיינים בכל מקום!
@ font-face font-family: 'MyNewFont'; src: url ('New_Font.ttf'), כתובת אתר ('New_Font.eot'); / * Internet Explorer בלבד * / אז אתה רואה לעיל אני לא מיקוד כל סוג גופן מסוים, אבל התחביר הוא מה צריך להתבלט. שים לב ש- Internet Explorer תומך רק .eot סוגי גופן, בעוד .ttf ו .otf הן אפשרויות פופולריות עבור דפדפנים אחרים. חשוב גם, אתה צריך להבין שאתה יכול להעביר כתובות גופן מקישורים ישירים, כלומר. כתובת אתר ('https://www.hongkiat.com/css3/fonts/myfont.ttf');
אין בעיה אמיתית בין הדפדפן עם התקנה זו מאז כל מנועי טיוח יכול לנתח את סוגי הקבצים האלה. רק לזכור כי עבור IE תמיכה אתה חייב לכלול גירסת eot, כמו גם את המקור. אני מרגיש כי W3 בתי ספר יש קטלוג של המידע החשוב ביותר שאתה צריך לבדוק.
המרת CSS מיניאטורי
נושא זה נדון לעתים קרובות שכן הוא משרת מטרה שונה עבור כל פרויקט. מצד אחד, מפתחי אינטרנט מבלים הרבה זמן בכתיבת גליונות הסגנונות שלהם. אין דרך להצפין סוג זה של נתונים בטקסטים ולהסתיר אותו מעיני חטטנות. אם אתה מנסה לשמור על אחרים לגנוב בוטה את הקוד שלך הכי טוב שאתה יכול לעשות הוא העומס את סגנונות ולהסיר את כל הפסקות שורה / רווחים.
תהליך זה יכול להיות מתויג כמו מזעור הקוד שלך. בדרך כלל מפתחים יכתבו את CSS בפורמט סטנדרטי ולאחר מכן להסיר את כל רווח לבן לפני העלאת לשרת האינטרנט. אז יש לך עותק מקומי לערוך במהירות תוך מתן גרסה קטנה יותר על הפרויקט חי. שיטה זו יכולה בהחלט להיות שימושי כדי להפחית את העומסים הדף יחד עם שמירה על קוד החוטפים במפרץ.
הקישור שפרסם למעלה שמוביל ל- Minif CSS מכיל חומר קריאה מעולה בנושא. האתר גם מספק כלי מבוסס דפדפן להסרת שטח לבן זה ומחזירות מרכזיות מהקוד שלך. CSS קומפרסור הוא עוד אפשרות ספורטיבי ממשק פשוט אשר פועל ישירות בתוך דפדפן האינטרנט שלך. שמעתי גם דברים טובים על נקי CSS, אם כי מעולם לא השתמשתי App עצמי.
קישורים קשורים
כדי לשמור אתה דוחף קדימה סיפקתי שישה קישורים שימושיים מכל רחבי האינטרנט. אלה כוללים לא רק ציון קצרנות, אבל מדריכים שימושיים ומדריכים לגשת בעת תרגול זה קוד CSS קצרנות חדש.
- מדריך למתחילים ל- CSS3
- CSS קצרנות מדריך
- האם אתה משתמש CSS3 כראוי?
- תוכן CSS ותאימות תאימות לדפדפן
- CSS3 + שיפור פרוגרסיבי = עיצוב חכם
- CSS מלא / CSS3 מאפיינים מדד
סיכום
זה לוקח הרבה מסירות בפועל לכתוב CSS קוד לבנות לוח זמנים בטון אשר ניתן לעקוב אחר כל פרויקט. רוב מעצבי אתרים שמחים לאסוף פרויקטים חדשים ורעיונות, כך שאתה בוודאי למצוא את הזמן להתאמן אלה עצות קידוד מועיל. נסה להעתיק גיליון התייחסות קטן לנוחיותך במקרה שאתה לא יכול למצוא כל לרמות סדינים, או אפילו יותר גרוע אתה מאבד חיבור לאינטרנט!
האם אתה יודע על כל תכונות שימושיות אחרות CSS3 או קיצורי דרך? נשמח לשמוע את מחשבותיך ורעיונותיך בדיון. מפתחי אינטרנט דוחפים סטנדרטיזציה יותר בתוך W3C וברור המעבר כבר מקבל יותר קל. CSS3 מספק יתרונות נהדרים ואם אתה יכול לשלוט בקיצור קצר זה ישמור על גודל הקובץ שלך נמוך להרתיע copycats מגניבת הקוד שלך.
