CSS קצרנות לעומת Longhand - מתי להשתמש איזה

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

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

מהו נכס קצרנות?

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

בעיקרון,

 border: 1px solid solid; 

הוא זהה ל:

 border-width: 1px; border-style: Solid; border-color: כחול;

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

איך זה עובד?

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

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

 border: 1px כחול; 

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

 border: 1px none blue; 

עכשיו בואו נשחרר את 1px ל רוחב גבול ולשמור על שני האחרים:

 border: Solid blue;

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

 גבול: כחול מוצק כחול; 

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

אם יש border-width: 1px; עבור אלמנט כלשהו לפני כן border: Solid blue; עבור אותו, רוחב הגבול הולך להיות בינוני (ערך ברירת המחדל), לא 1px.

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

ה את כל נכס

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

 div הכל: הראשוני

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

⚠ אזהרה

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

הערה: מאפיין CSS צבע לוקח ערך הקסדצימלי עם סימון קיצור אם שני מספרים של ערך hex בכל ערוץ צבע זהה. לדוגמה, רקע: # 445599; הוא זהה רקע: # 459;.

מהו רכוש ארוך?

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

למה אנחנו צריכים להשתמש בו?

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

קח את גופן נכס קצרנות למשל. בואו להשתמש בו h4 (שיש לו סגנון דפדפן ברירת מחדל מודגש)

 font: 20px "שליח חדש"; 

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

לכן, עבור הדוגמה לעיל פשוט שתי תכונות longhand, גודל גופן ו משפחת גופן מושלמים.

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

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

סיכום

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