CSS למקצוענים: מגוון סלקטורים וטיפים שאסור לפספס

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

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

איפוס CSS

דפדפנים שונים עלולים להציג אלמנטים באופן שונה, בין אם זה בגודל ה-margin, padding, font או אפילו border שמוגדר לחלק מהאלמנטים.
CSS Reset הוא קוד CSS קצר שמטרתו לפתור את הבעיה ושמו כן הוא – לאפס את ההנחות של הדפדפן.
שימוש ב-CSS Reset ישפרו את נקודת ההתחלה בה אתם מתחילים לכתוב את ה-CSS של אתרכם.
דוגמאות ל-CSS Reset ניתן למצוא כאן.

קצרו את הקוד

ניתן לכתוב כך:

.imgBlock {
	background-color: #FFFFFF;
	background-image: url(background_image.png);
	background-repeat: no-repeat;
	background-position: top right;
}

לעומת זאת, ניתן (ועדיף!) לכתוב כך:

.imgBlock {
      background: #FFFFFF url(background_image.png) no-repeat top right;
}

דוגמא נוספת:

font-size: 1.2em;
line-height: 1.7em;
font-weight: bold;
font-style: normal;
font-family: serif;

גרסא קצרה ועדיפה:

font: 1.2em/1.7em bold normal serif;

נחמד לא?

מעבר עכבר "רך"

אם נרצה (ונרצה) שכפתור מסוים ישנה את צבעו למשל במעבר עכבר, נהיה מעוניינים שהמעבר לא יקרה ב-"בום!" אלא בצורה נעימה יותר.
פקודת transition באה לעולם למטרה זו.
הפקודה מקבלת 4 ערכים:
ה-property שמשתנה, הזמן לסיום כל הפעולה מתחילה ועד סופה, קצב הפעולה, השהייה לפני תחילת הפעולה.

דוגמא:

a {
	transition: color 1s ease 0.3s;
	color: blue;
}
a:hover {
	color: red;
}

הקוד הנ"ל לדוגמא, ישנה את צבעה של תגית a במעבר עכבר מכחול לאדום. המעבר יתבצע לאורך שנייה אחת, "ease" מגדיר כי הפעולה תתחיל לאט, תגביר את המהירות ולאחר מכן תאט שוב, liner למשל תגדיר שהפעולה תתבצע בקצב זהה.
הערך האחרון, 0.3s מגדיר כי תהיה "המתנה" של 0.3s לפני שהפעולה תחל.

גישה לאלמנטים "ילדים" ישירים

נאמר ויש לנו את קוד ה-HTML הבא:

<div class="main">
	<a href="login_page.php">Login</a>
	<div class="links">
		<a href="sport.php">Sport</a>
		<a href="food.php">Food</a>
	</div>
</div>

הפקודה הבאה תצבע את כל הקישורים שנמצאים בתוך הדיב main בצבע שחור:

.main a {
	color:#000000;
}

לעומת זאת, אם נרצה לגשת רק אל הקישור הראשון, המקשר אל דף ה-Login, נעשה זאת באמצעות הסימן "<", כך:

.main > a {
	color:#000000;
}

גישה לאלמנט "ילד" ספציפי

נאמר ויש לנו את קוד ה-HTML הבא:

<div class="main">
	<a href="login_page.php">Login</a>
	<a href="sport.php">Sport</a> 
	<a href="food.php">Food</a>
</div>

אם נרצה לתת הגדרה עיצובית רק לקישור השני, נוכל לעזור זאת באמצעות התכונה nth-child, דוגמא:

.main a:nth-child(2) {
	font-weight:bold;
}

יש לשים לב כי המספור מתחיל מ-1 ולא מ-0 כמו שאנחנו, המתכנתים, רגילים 🙂

first-of-type ו- last-of-type

אם נרצה לגשת לאלמנט "ילד" הראשון או האחרון מסוגו נוכל לעשות זאת באמצעות first-of-type ו- last-of-type.
דוגמא:

<div class="main">
	<a href="login_page.php">Login</a>
</div>
<a href="sport.php">Sport</a>
<a href="food.php">Food</a>
.main a {
	color:black;
}
.main a:first-of-type {
 	color:red;
}
.main a:last-of-type {
	color:green;
}

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

before ו-after

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

h1:after {
	content: "!";
	colore: #000000;
}

אם רוצים שהתוכן יופיע לפני האלמנט, פשוט כותבים before במקום after.

box-sizing: border-box

כמו שאתם יודעים, כאשר מגדירים padding לאלמנט מסוים, הגובה והרוחב של האלמנט מקבלים את התוספת של ה-padding, כלומר div שגובהו ורוחבו הם 100 פיקסלים והוא בעל padding של 10 פיקסלים, גובהו ורוחבו יהיו 120 פיקסלים בפועל (10 פיקסלים נוספים מימין ומשמאל ו-10 פיקסלים נוספים מלמעלה ומלמטה).
הפקודה box-sizing: border-box תבטל תכונה זו ותשאיר את הרוחב והגובה כפי שהוא.

type

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

<input name="firstName" type="text"  />
<input name="lastName" type="text"  />
<input name="submitForm" type="submit"  value="Send!" />

במקרה כזה, אם נרצה לעצב את כפתור ה-submit, לא נצטרך לתת לו id או class מסוים אלא ניגש אליו בצורה הבאה:

input[type="submit"] {
	border:1px solid #666666;
	border-radius:20px;
	background-color:#DCDCDC;
	color:#000000;
}

בהצלחה!

נהנת ממאמר זה? הירשם לרשימת התפוצה וקבל עדכונים על מאמרים חדשים!


כתיבת תגובה

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