css3

3 טריקים ב-CSS שאני מאוד אוהב

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

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

Negative Margin

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

.myelement {margin-top: -20px;}

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

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

JS Bin on jsbin.com

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

Border Box

נניח שאנחנו רוצים שאובייקט מסויים יהיה ברוחב כולל של 200px, ובנוסף שיהיו לו padding ו-border. לפי מודל הקופסה של CSS, בו רוחב האובייקט לא כולל את ה-padding וה-border, אנחנו צריכים לחסר אותם מהרוחב הסופי כדי להגיע אליו במדוייק:

div {
  width: 156px; /* 200 - 40 - 4 */
  padding: 20px;
  border: 2px solid #000;
}

אך מה אם אין לנו את הגודל המדוייק בפיקסלים (למשל אם הגודל הוא באחוזים)? כאן אנחנו כבר בבעיה. אפשר אמנם להשתמש ב-calc:

div {
  width: calc(50% - 40px - 4px);
  padding: 20px;
  border: 2px solid #000;
}

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

box-sizing: border-box;

שורה זו תגרום למאפיינים width ו-height להתנהג מעט שונה, ובמקום לקבוע את הגודל של תוכן האובייקט בלבד (ללא ה-padding וה-border), הם יקבעו את התוכן כולל פרמטרים אלו. שימו לב לדוגמה הבאה: JS Bin on jsbin.com

ניתן לראות שלמרות שלאובייקט הראשון קבענו padding ו-border, הרוחב הכולל שלו הוא עדיין 200px, בדומה לאובייקט השני שלא מוגדרים עבורו מאפיינים אלו. נסו לשחק עם הדוגמה, למחוק את המאפיין box-sizing ולראות מה קורה.

Relative Sizing

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

העיקרון הוא פשוט – במקום להשתמש ביחידות גודל אבסולוטי בקוד ה-CSS (בד"כ px), נשתמש ביחידות גודל יחסי, em (אפשר גם אחוזים).

em היא יחידה שגודלה הוא ה-font-size של האובייקט הנוכחי. כלומר במקרה הבא:

span {
  font-size: 16px;
  margin-bottom: 1em;
}

לאובייקט שיווצר יהיו שוליים תחתונים ברוחב 16 פיקסלים. ומה יקרה אם נשנה את גודל הפונט ל-18px? ניחשתם נכון – גם רוחב השוליים ישתנה בהתאמה.

כמובן שאפשר שגם ה-font-size עצמו יהיה יחסי:

body {
  font-size: 16px;
}

span {
  font-size: 0.75em;
  margin-bottom: 1em;
}

במקרה זה רוחב השוליים התחתונים של span יהיו 16 כפול 0.75 כפול 1, שהם 12 פיקסלים.

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

body {font-size: 16px;}

כל שאר הגדלים בקוד שלנו יהיו תמיד יחסיים, כלומר ביחידות em או באחוזים. למשל אם נרצה ליצור כותרת בגודל 20px, נוכל לחשב את הגודל ב-em ע"י חלוקה ב-16 (גודל הפונט הדיפולטי), כלומר 20px יהיו 1.25em.

באופן זה ע"י שינוי גודל הפונט במקום אחד בלבד (ב-body), למעשה נכווץ את כל הגדלים באתר שלנו, עם שמירה על יחס. כעת נוכל להגדיר media queries שיעשו את זה באופן הבא:

@media screen and (min-width: 1024px) {
  body {font-size: 14px;}
}

@media screen and (min-width: 800px) {
  body {font-size: 12px;}
}

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

אגב, זה לא אומר שמעכשיו חובה להגדיר ידנית את גודל הפונט של כל התגיות בעמוד. זאת מכיוון שבכל הדפדפנים, כל גדלי ברירת המחדל מוגדרים גם הם ב-em, למשל גודל הפונט של h1 הוא לרוב 2em, ושוליים עליונים ותחתונים של p הם 1em.

כתיבת תגובה

האימייל לא יוצג באתר. (*) שדות חובה מסומנים