וובמאסטר - תיכנות ובניית אתרים

טיפ קצר: Box-sizing: Border-box

אלי ענתבי/‏ 19 פברואר, 2013
F+
F-

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

כידוע, כשמגדירים ב-CSS לאלמנט מסויים פרמטרים גם של רוחב כללי וגם של Padding - הדפדפן מוסיף את מידות ה-Padding על הרוחב הכללי של הקוביה. לדוגמא, אלמנט עם מאפיינים width:200px; padding:10px יהיה בפועל ברוחב של 220 פיקסלים, למרות שההגדרה היא לרוחב של 200 פיקסלים.

זה מצב מעט אבסורדי, כי אם למשל אני מגדיר רוחב של 200 פיקסלים - אני מצפה שהקוביה תהיה 200 פיקסלים רוחב, לא משנה מה השוליים הפנימיים של הקוביה. זה מקשה על חישובים מסויימים, ויוצר בעייתיות כשרוצים ליצור גריד מבוסס אחוזים (50% רוחב עם הגדרת Padding זה כבר לא חצי מהמסך).

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

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

הסלקטור הזה בוחר את כל האלמנטים בדף, ומורה להם שלא להוסיף את מידות ה-Padding על מידות הרוחב הכלליות. קסם :-)

המאפיין הזה נתמך בכל הדפדפנים המודרניים, לרבות דפדפן אקספלורר מגירסא 8 ומעלה. קיימים Polyfills שיוסיפו תמיכה לדפדפני אקפסלורר 6+7.

לפרטים מלאים וקריאה נוספת ניתן להיכנס לפוסט המקורי (אנגלית):
http://paulirish.com/2012/box-sizing-border-box-ftw/

אלי ענתבי

מתכנת Front-End פרילאנסר עם ניסיון של כ-12 שנים, מייסד אתר וובמאסטר
תגיות: CSS‏  

תגובות בפייסבוק

תגובות למאמר



תגיות פופולאריות

X
הצטרף לעמוד שלנו בפייסבוק להישאר מעודכן!
וובמאסטר © כל הזכויות שמורות