מאפייני css מיוחדים הסבר

אני אשתדל לרכז פה תגיות שאני נתקל בהם ושלא נתקלים בהם ביום יום ב css ולהסביר אותם לחלק יראו התגיות טריוויאליות ולחלק לא.

אני אשתדל להוסיף לפוסט הזה מדי פעם עוד תגיות.

box-sizing:border-box

box-sizing:border-box

המאפיין הזה אומר שהגודל שאני נותן לאובייקט כולל גם את הגודל שלו וגם את הבורדר שלו, בדרך כלל שנותנים רוחב מסויים לאובייקט למשל 150 ומוסיפים לו בורדר של 2 או padding הרוחב של האובייקט גדל בדוגמא שלנו 150 + 2 = 152 ולכן אני צריך לחשב שהאלמנט שיעטוף את האובייקט שלי יהיה 152 ולא 150, אם אני לא רוצה לעשות את כל החישובים האלה אני יכול להוסיף את המאפיין לעי"ל לאלמנט שאני יצרתי ( לא העוטף ) ואז הגודל של האובייקט יהיה 150 והבורדר כביכול יכנס פנימה ולא יוסיף עוד רוחב וגובה.

transform

transform: rotate(7deg);

מאפיין מאוד נחמד שנוסף ב css3 מאפשר לנו לעשות המון דברים מגניבים, יש לו הרבה אפשרויות בדוגמא למעלה אמרתי לו שיסתובב קצת אפשר גם להגדיל, למשל כשעושים hover אז להגדיל תמונה או אלמנט נשתמש בהגדרה scale,

transform: scale(1.1,1.1)

ועוד…

מירכוז חכם של אובייקטים

margin:0 auto;

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

במידה ואנחנו רוצים שאלמנט מסויים יהיה באמצע בבלי שום קשר לגודל המסך אבל גם בציר ה y משתמשים ב position:absulote

ונותנים לו

position: absolute;
top: 50%;  /* position the top  edge of the element at the middle of the parent */
left: 50%; /* position the left edge of the element at the middle of the parent */

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

אפשר להשתמש ב hack הבא ותיכף אסביר איך הוא פועל.

position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;

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

עוד משהו … ידוע ש absolute הוא יחסי ל relative אז טוב לעטוף הכל תמיד ב relative במיוחד אם אנחנו לא עובדים עם האלמנט על כל המסך..

היחידות VH ו VW

עד עכשיו הכרנו את היחידות  px  EM  REM ב css3 נוספו היחידות vh ו vw שהם בעצם מזכירות את האחוזים שאנחנו מכירים, אבל הם מתייחסות לגודל המסך, ומקלות את הרספונסיביות.

vw – מגדיר את רוחב המסך באחוזים

vh – מגדיר את אורך המסך באחוזים

הכי טוב להסביר בדוגמא:

נגיד שהמסך שלנו הוא בגובהה 700 פיקסלים והרוחב שלו 1200 אז אם אני מגדיר

height: 50vh

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