טיפים וטריקים בCSS

[חנה 1]

שלום לכם,

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

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

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

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

.button{
    height: 40px;
    line-height: 40px;
}

הסבר
ההגדרה של line-height מגדירה את גובה השורה של הטקסט הנתון. הטקסט תמיד יהיה מיושר בתוך גובה השורה שלו. לכן ברגע שהגדרנו את גובה השורה כגובה האלמנט – הטקסט יתיישר בגובה השורה וממילא בגובה האלמנט.

הערה בקטנה ישנם פונטים מסויימים, שבהם האותיות לא מיושרות למה שנקרא baseline - נקודת האמצע בגובה של השורה. טיפה מסובך להסביר את זה, אבל בסופו של דבר התוצאה היא שאם נגדיר את אותו גובה שורה כמו הפתרון שהוצע כאן - הטקסט לא יהיה מיושר, וכן אם ניישר טקסט לאייקון. זה קרה לי למשל באתר וריפון (http://verifone.co.il/). אם תלכדו בinspector את הכפתור על הבאנר, ניתן לראות שיש לו padding top קצת, בלי זה הטקסט לא מיושר טוב. באשמת מי שפיתח את הפונט... אבל עזבו, זה לעיתים ממש נדירות.

2. יישור מס' שורות בלתי ידוע
הבעיה
הפתרון של line-height מעשי רק כשיש לנו שורה אחת של תוכן. במידה ויש יותר משורה אחת שאמורות להיות ממורכזות באזור מסוים וניתן שם הגדרת line-height – השורה הראשונה תהיה ממורכזת, ואילו השניה תרד מתחת לאלמנט. כי גובה כל שורה יהיה כגובה האלמנט. מה נעשה אם כן כשיש לנו מס' שורות בלתי ידוע – פעם שורה, פעם שתיים ופעם יותר?

פתרון א'

• הוספת ההגדרה display: table לכפתור
• עטיפת הטקסט שבתוכו בתגית נוספת, לדוגמא <span>,
• ואז לתגית החדשה נוסיף display: table-cell; vertical-align: middle;

פתרון ב'

• לכפתור נוסיף אלמנט ריק: <span class="vertical-align-helper"></span>
• נעטוף את התוכן שצריך יישור <span>כאן יופיע הHTML של כל מה שצריך יישור. </span>
• הוספת הCSS הבא:
  .vertical-align-helper{ display: inline-block; height: 100%; vertical-align: middle;{
  .vertical-align-helper + * { display: inline-block; width: 99%; vertical-align: middle;}
• אם כשמסיימים את כל זה התוכן שאמור היה להתיישר "בורח" אל מתחת האלמנט האב (בדוגמא שלנו – הכפתור) – יש להוסיף לאב את ההגדרה הבאה:font-size: 0px;

הסבר

ההגדרה vertical-align מקבלת שתי משמעויות שונות, בהתאם להגדרת הdisplay של הנושא אותה (אם התגובות שלכם תהינה חיוביות, אעלה בעז"ה פוסט נוסף שעוסק כולו בהגדרות הdisplay הנפוצות ומשמעותן)

הצורה הראשונה באה לידי בטוי בפתרון הראשון שנתנו. ברגע שיש לאלמנט display: table-cell או שברמת הHTML הוא מוגדר כ<td> – הרי שההגדרה של היישור מתייחסת באופן אוטומטי ליישור התוכן שלו בתוך הגובה שלו. כלומר, אם התוכן שלו תופס 20 פיקסלים והגובה הכולל שלו הוא 100 פיקסלים (אם בגלל הגדרת CSS ואם בגלל אלמנטים אחרים שלידו) – במידה וניתן לתא הזה vertical-align כלשהו – התוכן שלו יתיישר בתוכו בהתאם להגדרה (top – התוכן יתיישר למעלה וכו').

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

לעומת זאת כמעט בכל אפשרות display אחרת – לא התוכן הוא שמתיישר, אלא האלמנט עצמו מתיישר ביחס ל"אחים שלו", האלמנטים שנמצאים באותה היררכיה שלו, תחת אותו "אב". המשמעות המעשית של זה, שלא מספיק לתת לכפתור vertical-align: middle כדי שכתוכן שלו יתיישר בתוכן, אלא התוכן צריך להיות מיושר ביחס למשהו אחר. לצורך זה הוספנו את האלמנט הריק – vertical-align-helper (ניתן כמובן לתת לו איזה שם שמתחשק). לאלמנט הזה הגדרנו שגובהו יהיה זהה לגובה האב (בדוגמא שלנו- לגובה הכפתור). אחר כך עטפנו את התוכן בspan (ניתן לעטוף גם בdiv אם רוצים. כאן היה לי בפנים רק טקסט, לכן עטפתי רק בspan), והגדרנו שהאלמנט שאחרי ה"עוזר" שלנו יקבל את ההגדרות הבאות:

• display: inline-block – כדי שיהיה מסוגל להיות מיושר
• vertical-align: middle – כדי שיהיה מיושר לאמצע
• width: 99% – כדי שלא יתפוס מאה אחוז של הרוחב, וזה כדי שלא ייפול למטה (הרי יש לנו אלמנט נוסף שגם הוא אמור לתפוס אי אלו פיקסלים)

הוספת ההגדרה של font size 0 לאב נועדה גם היא למנוע נפילה של האלמנט. הסבר על זה יורחב בפוסט אחר.

ומה עדיף?
אם תשאלו לדעתי, עדיפה הדרך השניה. זו עם display: inline-block. וזאת מהסיבה שלdisplay table וtable-cell יש תופעות לוואי של הגדרות שאינן נתמכות, רוחב שאינו בשליטה ועוד. למה להסתבך אם יש דרך אחרת פשוטה, נקיה ושעובדת היטב?!

עד כאן להיום. אשמח לתגובות עד כמה היה המאמר ברור ויעיל

פורסם לראשונה בבלוג שלי
https://hanniessite.wordpress.com/2016/08/14/יישור-אנכי-לאלמנטים/

 

[mend]

ואו!!!!
נשמח מאד לעוד מאמרים / טיפים

 

[Naftali Stein]

מאמר נפלא, תודה!

קראתי כבר מזמן את המאמרים באתר והחכמתי רבות.

טריק שראיתי בהרבה אתרים הוא, לא להגדיר גובה לאב אלא רק padding-top/bottom ואז התוכן נשאר ממורכז.

כמו"כ בעידן ה flex הכל הפך לפשוט יותר.

 

[חנה 1]

כמו"כ בעידן ה flex הכל הפך לפשוט יותר.

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

 

[Naftali Stein]

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

מעניין מאוד, לא הייתי מודע לכך, אם כך אשאר עם ה padding.

מה עם מאמרים על js, יהיו כאלו בעתיד?

 

[סיפי]

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

 

[חנה 1]

כך משתמשים ב- CSS Display
במאמר הזה נסביר בעז"ה על סוגי הערכים שניתן לתת תחת ההגדרה של display. ומה המשמעות של כל הגדרה לעומת ההגדרות האחרות ובכלל.

display: none
נתחיל מהפשוטה ביותר – האלמנט כאילו לא קיים. הוא לא נראה, הוא לא תופס מקום, פוקוס לא מגיע אליו.

display: block
המשמעות שלו היא כשמו: בלוק. בהיעדר הגדרות ייעודיות יורד שורה אחרי אלמנטים קודמים וגורם לאלמנטים אחרים לרדת שורה.
מאפיינים:

• כברירת מחדל רוחבו הוא כרוחב האלמנט שמכיל אותו.
• מסוגל לקבל margin/ padding/ width/ height/ clear.
• כדי להעמיד מס' בלוקים בשורה – ניתן להשתמש בהגדרת float.
• אין משמעות לvertical-align

משמש כברירת מחדל עבור:
<div><p> ועוד.

display: inline
המשמעות שלו היא אות במילה. לכן כמה אלמנטים בהגדרה זו יעמדו אחד ליד השני ליד השלישי וכו', ובהמשך במידת הצורך יגלשו לשורה הבאה, בדיוק כאילו זה משפט אחד ארוך.
מאפיינים:

• רוחבו הוא הרוחב של התוכן שלו.
• לא מסוגל לקבל הגדרות של בלוק כמו width, height, margin, ובגרסאות מסוימות של חלק מהדפדפנים גם padding.
• עובד חלקית עם vertical-align

משמש כברירת מחדל עבור:
<a><span> ועוד אלמנטים שמשמעותם חלק מטקסט שמקבל למשל עיצוב שונה (תגיות של bold או underline לדוגמה)

display: inline-block
השילוב המקסים בין block לבין inline. הוא מתנהג כמו מילים במשפט, ולכן בדומה לinline האלמנטים עומדים אחד ליד השני ומסוגלים לקבל vertical-align של אחד ביחס לשני, ומצד שני מסוגל לקבל הגדרות של רוחב, גובה ושוליים, בדומה לblock. כמו כן משפיעה עליו הגדרת text-align של האב שלו, כך שאם לאב יש text-align: center – האלמנטים בעלי הגדרת הinline-block שבתוכו יתמרכזו לאמצע.
מאפיינים:

• כברירת מחדל רוחבו הוא הרוחב של התוכן שלו
• מסוגל לקבל הגדרת רוחב/גובה/שוליים ומרחקים
• להגדרת clear אין השפעה על מעבר האלמנטים ל"שורה" הבאה.
• עובד טוב עם vertical-align.

הערה אחת
בגלל שהאלמנטים בinline-block משמשים כמו מילים במשפט, נוסף ביניהם הרווח שנוסף אוטומטית בין מילים במשפט. לכן ניתן לראות לפעמים ששתי אלמנטים בעלי inline-block, שהרוחבים שלהם משלימים ל100 (למשל 50% לכל אחד), ואין להם margin, ובכל זאת השני נופל שורה, זה בגלל הרווח האמור, או שתי אלמנטים שאמורים לעמוד אחד צמוד לשני, ובכל זאת יש רווח של כמה פיקסלים ביניהם, למרות שאין margin וכדו'.
איך מתגברים על זה? פשוט מאד. עד כמו שזה יישמע מוזר, הוספת ההגדרה font-size: 0 לאלמנט האב שלהם יפתור את הבעיה.
איך זה עובד?
מאחר והרווח בין מילים במשפט תלוי בגודל הפונט של האותיות – ברגע שגודל התווים יהיה 0 (font-size) – אוטומטית גם הרווחים בין המילים יהיה 0, וכך הרווח בין האלמנטים גם הוא יהיה 0.

display: table
לעיתים נרצה להגדיר לאזור מסוים בעמוד נראות של טבלה, למרות שמבחינה סמנטית – מדובר באלמנטים אחרים, כמו <div> ואחרים.
ניתן לעשות זאת באמצעות יצירת מבנה htmlי הדומה למבנה הטבלה, ואז להגדיר לאלמנטים display בהתאם:
table
table-body
table-row
table-cell
וכן הלאה.
יש לקחת בחשבון שמרגע שאלמנט הוגדר כך – הוא יקבל את אותה התנהגות בדיוק כמו המקור. לדוגמא ישנן גרסאות בדפדפן FF לא תומכות במתן padding לאלמנט מסוג </td>. לכן ברגע שנגדיר display: table-cell גם עליו FF לא יקבל padding. וכן הלאה.

למה זה טוב אם כן? רק ממש כשמבנה כלשהו אמור לקבל מבנה טבלאי. אחרת ממש כדאי להמנע…

ישנם גם flex ו-grid שעליהם נרחיב בהזדמנות אחרת בעז"ה.

פורסם לראשונה בבלוג שלי - https://hanniessite.wordpress.com/2016/08/14/css-display/

 

[חנה 1]

ושוב אני כאן...
והפעם -
אלמנט סטיקי
אלמנט סטיקי הינו אלמנט שבחלק מהזמן נגלל רגיל עם העמוד, ובחלק אחר נעוץ לחלון של הדפדפן. הוא משלב בין position: absolute לבין position: fixed. (ולא - לעולם אל תגדירו לו relative כברירת מחדל!!)

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

איך יוצרים אלמנט סטיקי
מבחינת html כותבים את האלמנט במקום שבו הוא מופיע כשהוא אינו נעוץ. ונותנים לו את ההגדרה position: absolute. חובה לתת absolute דווקא, ולא להשאיר סטטי או רלטיבי – מאחר וברגע שנהפוך את הposition של האלמנט לfixed – האלמנטים האחרים בעמוד לא יכירו בקיומו, ובמידה וההגדרה המקורית לא תהיה אבסולוטית – האלמנטים שאחריו יקפצו למעלה. לכן במצב הראשוני יש לתת position: absolute.

בנוסף, נוסיף בCSS, סלקטור של האלמנט הזה + קלאס נוסף, למשל הקלאס fixed. ועל הסלקטור הזה ניתן את ההגדרות של position fixed, + הגדרות המיקום כמו top: 0px על מנת להעמיד אותו בצמוד לחלק העליון של המסך בגלילה.

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

Var menuTop = jQuery(‘#menu’).offset().top

כעת נלכוד את אירוע הגלילה

jQuery(window).scroll(function(){
    if(jQuery(window).scrollTop() > menuTop)
        jQuery('#menu').addClass('fixed');
    else
        jQuery('#menu').removeClass(''fixed');
});

השורה הראשונה לוכדת את אירוע הגלילה.
השורה השניה משווה את המשתנה שלנו – menuTop מול מס' הפיקסלים שכבר נגללו – jQuery(window).scrollTop(). במידה ועברנו את אותה נקודה – נוסיף את הקלאס שהגדרנו בCSS, כדי שהתפריט יקבל את ההגדרות של position: fixed, וכל שאר הגדרות המיקום (top, left וכו'), ובמידה ולא עברנו את הנקודה – נסיר את הקלאס הזה.

אין שום בעיה לכתוב addClass כשכבר הקלאס קיים. הוא לא יתווסף פעם נוספת לאלמנט. כנ"ל לגבי removeClass – במידה והקלאס לא קיים – פשוט לא יקרה כלום.

הערה,
בדוגמה שלנו, הנקודה שהתפריט ננעץ בה היא הנקודה שהוא נוגע בחלון, לכן אנחנו משווים את הנקודה הזו עם מס' הפיקסלים שנגללו. במידה ונרצה שהוא יינעץ בנקודה אחרת, למשל תפריט צידי, שננעץ 10 פיקסלים מלמעלה, למשתנה menuTop נוסיף עשרה פיקסלים (jQueyr(‘#menu’).offset().top + 10), וכן הלאה. העיקר שבמשתנה שמשווים מולו יהיה כבר את המספר הסופי שמולו רוצים להשוות.

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

פורסם בבלוג שלי:
https://hanniessite.wordpress.com/2017/03/02/אלמנט-סטיקי/

 

[חנה 1]

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

נניח שיש לנו את המבנה הבא (ראו את הHTML והCSSים) https://codepen.io/hanniessite/pen/bgWqGQ
ניתן לראות שהאלמנט favorite לא קיבל את שתי ההגדרות font-weight, color, אלא רק את ההגדרה של text-decoration. שימו לב שעבור שתי ההגדרות שהוא לא קיבל – ישנה הגדרה נוספת שחלה גם עליו – ההגדרה שחלה על הסלקטור #drinks li. יצרנו כאן לדפדפן מעין קונפליקט, שתי הגדרות שאחת אמורה לדרוס את השניה, והוא צריך להכריע מי חשובה יותר, מי שוקלת יותר ואליה להתייחס ולדרוס את האחרת.

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

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


(נלקח מהאתר csstricks)

• הגדרה בתוך שורת הHTML, מה שנקרא style-inline – מנצח באופן אוטומטי. הוא שוקל בעצם 1000.
• כל ID שיש לנו בסלקטור מוסיף 100 למשקל הסופי
• כל קלאס, קלאס מדומה (למשל :hover, :first-child וכדו'), וכן מאפיינים ([type="text"] וכו') – כל אחד כזה מוסיף למשל הסופי 10
• שם האלמנט – a, span, div וכן שם אלמנט פיקטיבי – :after, :before ועוד – כל אחד מוסיף 1.

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

אם נחזור לדוגמא שאיתה פתחנו:
#drinks li
יש לנו כאן ID אחד = 100, וכן שם אלמנט אחד = 1. יחד זה שוקל 101.

.favorite
כאן יש לנו רק קלאס, לכן הוא שוקל רק 10.

עכשיו נבין למה ההגדרה של .favorite לא דרסה את ההגדרה הקודמת – #drinks li. פשוט כי היא שוקלת פחות ואין לה אפשרות לנצח…

דוגמאות נוספות (צילומי מסך מתוך האתר https://specificity.keegan.st/ הנפלא! שיחשב לכם בקלות מי דורס את מי. שימושי כשאתם צריכים לדרוס הגדרות ארוכות)

ההגדרה !important
ישנה אפשרות לדרוס בתוך סלקטור ששוקל פחות – הגדרות של סלקטור ששוקל יותר, וזה באמצעות הוספת !important לשורת ההגדרה הרצויה. לדוגמא

li.last{
margin-left: 0px !important;
}

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

כשמשתמשים ב!important חשוב לזכור לתת אותו תחת סלקטור שיהיה לנו קל לדרוס במידת הצורך במקרים שלא תכננו מראש.

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

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

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

.active{
color: #fff;
}

.active{
color: red;
}

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

הערות חשובות

• לסלקטור :not אין משקל בפני עצמו, אלא רק מה שבתוך הסוגריים שלו – הוא שוקל.
• לסלקטור * (= הכל) אין משקל.
• ההגדרה !important דורסת כל דבר, כולל הגדרת style-inline. ניתן לראות אותה בעצם כביכול יש לה משקל סגולי הכי גבוה – 10000.

עד כאן להפעם.

 

[חנה 1]

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

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

האם כל אלמנט HTMLי יכול לקבל before/after?
התשובה היא לא. כל אלמנט של HTML שכולל תגית פתיחה ותגית סגירה – מסוגל לקבל before וafter. לדוגמא: div, a, button, p, header, form וכו'.

אלמנטים שכוללים תגית אחת בלבד – שבסופה בד"כ מגיע סלאש הסגירה – לא מסוגלים לקבל before או after. לדוגמא: input, img, br.
שימו לב, תגית select - תגית של בחירה מרשימה בטפסים, למרות שיש לה תגית פותחת וסוגרת - לא מקבלת את האלמנטים הפיקטיביים before&after. לפחות בחלק מהדפדפנים ואולי בכולם. לא בדקתי (אני תמיד צריכה להתאים את האתר לכל סוגי הדפדפנים, כולל IE11 המקולל, אז מה שלא נתמך באחד מהם - יוצר לי בעיות ועדיף להמנע מלהשתמש בו...)

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

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

מאחר ומדובר באלמנטים פיקטיביים, שלא באמת קיימים בHTML, נכון לעכשיו סקריפטים אינם מסוגלים לשלוט עליהם. כלומר, לא ניתן לכתוב משהו כמו jQuery('button:after').click(), כי הafter לא מוכר לJS.

לbefore/after חייב להיות מאפיין CSS שנקרא content. תכף נדבר מה האפשרויות הקיימות, רק חשוב לציין שבלי המאפיין הזה – לא נוכל לראות את האלמנט הפיקטיבי שלנו בכלי הפיתוח שבדפדפן, לערוך אותו וכו'. הוא פשוט לא יהיה קיים ורק המאפיין של content נותן לו חיים. המאפיין content מכיל את התוכן של הbefore/after, אם זה טקסט או תמונה. למשל אם נצהיר משהו כמו content: 'hello' – הbefore שלנו יכיל את הטקסט הזה. כמה שאני יודעת – קוראי מסך לא מסוגלים לקרוא את זה, כי זה לא טקסט אמיתי של HTML, אלא כמו כל האלמנט – זה פיקטיבי. בנוסף לא ניתן לתפוס את זה עם העכבר, וכו'.

סוגי הcontent האפשריים:

• ריק – '' (זה נראה מרכאות, אבל זה שני תווי גרש). משמש כשאנחנו צריכים רק להשתמש בbefore/after לצורך עיצובי כלשהו, בלי להכניס להם תוכן.
• טקסט – יכול להיות מילה ממש, ויכול להיות רק תו כלשהו שמסמל אייקון בפונט של אייקונים כמו font awesome או glyphicons. לדוגמא "\f024". במקרה הזה נצטרך כמובן להוסיף לbefore או הafter שלנו מאפיינים נוספים כמו font-family וכו'.
• attr(attribute) – ניתן לשתול לתוך הbefore טקסט שקיים כattribute של האלמנט האב שלו. למשל לשתול שם את הID של האב, וכדו'. יצא לי לראות שימוש נחמד לזה בלינקים, שהיו חייבים להיות נגישים, ומצד שני רצו שהtooltip שמופיע מעל הקישור כשעומדים עליו יהיה מעוצב ויפה. לכן במקום להגדיר title לקישור (לצורך נגישות, שקורא המסך יוכל לקרוא מה השם של הלינק), שגם יוצר טולטיפ אפור מעל הקישור במעכבר עכבר – הגדירו aria-label – שזו הגדרה שרק קורא המסך מכיר, בדיוק כמו title, אבל בלי טולטיפ, וכדי להוסיף את הטופלטיפ המעוצב, לאנשים שמסוגלים לצפות באתר – הוסיפו before עם content: attr(aria-label); בתוספת רקע חביב וכו'.
• counter – ארחיב עליו בפוסט נפרד בעז"ה מתישהו. באופן כללי – מדובר באפשרות לייצר מונה, אם בספרות או באותיות, שמאתחלים פעם אחת ומקדמים כל הזמן. והכל בCSS בלבד. את התוכן של המונה – הספרה או האות הנוכחית – יש להכניס לbefore או after כדי להציג אותו. אפשר לראות דוגמה שבה ממשתי את זה בעבר באתר של אלקטרה, אם תפתחו את האקורדיונים כאן: http://www.electra-trade.co.il/service/questions-and-answers/ המספור שם הוא לא מספור אוטומטי, כי רצו צבע שונה. הגדרנו את זה עם before שמכיל counter.
• url(url) – ניתן להכניס לbefore/after מדיה כמו תמונה, אודיו, וידאו וכדו. כותבים url ואז בסוגריים את הURL של אותה מדיה. יש לשים לב שבמידה ומכניסים שם תמונה – לא ניתן להגדיר לה גודל, אלא היא מוצגת בגודל המקורי שלה בלבד. (אם מצאתם דרך לעשות את זה – אשמח מאד להתעדכן.) באופן אישי אני לא משתגעת על האפשרות הזו, בגלל המגבלות האמורות, אבל שתדעו שגם זו אפשרות שקיימת.
• יש אפשרות, השימוש שלה נדיר יותר, להוסיף סימני ציטוט, או לבטל אם כבר קיים. במידה ותצטרכו להשתמש בזה – תוכלו למצא מידע רב ברשת

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

 

[Naftali Stein]

מחכים כתמיד, תודה!

לגבי ה codepen יש תוסף למערכת הפורומים שעליו בנוי פרוג xenForo, שמאפשר הצגה של קוד embed, אולי לבקש ממערכת הפורום להוסיף, זה יכול לעזור מאוד.

 

[חנה 1]

Inline-block VS float – מתי להשתמש בכל אחת מההגדרות

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

נצייר לנו דוגמא שתלווה אותנו לאורך הפוסט.
נניח שיש לנו שלושה divים, ולכל אחד הגדרת רוחב 30% – אמנם כל אחד יתפוס 30% מרוחב האלמנט שמכיל אותם, אבל הם יעמוד אחד מתחת לשני, ולא אחד ליד השני:

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

float (זה ארוך ומורכב, תנשמו עמוק לפני...)
ההגדרה float גורמת למעין "ריחוף" של האלמנט, בדרך כלל אלמנט עם display: block, מה שאומר שאם ניתן לאותם 3 div'ים מהדוגמא שלעיל את ההגדרה float: right; – הם יעמדו האחד ליד השני לצד ימין. כלומר – הראשון יעמוד הכי ימני, אחריו השני, ואחרון השלישי.

זה נראה מובן מאליו, לא?! ככה זה אמור להיות בעברית? אז זהו שלא. כי אם נגדיר float: left – הראשון "עף" שמאלה, אחריו השני מקבל את ההגדרה ו"עף" שמאלה – למאחורי הראשון, והאלמנט השלישי יגיע לנו מימין לשני.

כלומר אין קשר לשפה או לdirection שמוגדר לbody, אלא הצד שאליו הגדרנו את הריחוף – זה יהיה הצד שאליו יהיה מיושר האלמנט.

אם נאתגר עוד קצת, נניח שלשלושת הdiv'ים האמורים ניתן כך:
float: right;
float: left;
float: right;
הראשון יהיה צמוד לימין, השני צמוד לשמאל והשלישי צמוד לימין – מיד בסוף האלמנט הראשון. כלומר יהיה לנו את הראשון, השלישי והשני.

נראה שסיימנו לדבר על float? בקושי התחלנו…
להגדרה float יש השלכות מסוימות על האלמנט עם ההגדרה ועל האלמנטים שאחריו, וכן על האלמנט שמכיל אותו (הparent שלו), והאלמנטים שאחרי אותו parent.

נתחיל מהאלמנטים האחים (siblings) של האלמנט עם הריחוף. במידה והם עם ריחוף – הם יעמדו לידו ככל שיש מקום, ולאחר מכן ירדו שורה, אלא שאם יש אלמנטים בגבהים שונים זה עשוי לייצר בעיות שונות.
מצב שבו לכל האלמנטים יש אותו גובה:

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

עד כאן לגבי אחים עם ריחוף

כשלאחים האחרים אין ריחוף הם מזהים את האלמנטים המרחפים האחים שלהם ומתחשבים בהם במידה מסויימת, אבל מצד שני, הם כביכול לא קיימים בשורה. כלומר, אם אמרנו שכברירת מחדל אלמנט שהינו בלוק שובר שורה אחרי האלמנטים שלפניו – אם לאלמנט שלפניו יש ריחוף, ויש מספיק מקום בשורה – הבלוק ללא הריחוף – עדיין יעמוד למעלה, ולא ישבור עד אחרי האלמנט המרחף.
הנה מה שיקרה כשלאלמנט הראשון והשני יש float: right, ולשלישי אין float כלל:

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

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

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

ניתן להתגבר על זה, באמצעות הוספת המאפיין clear לאלמנט ללא הריחוף. ההגדרה clear מגדירה בעצם יישור קו חדש אחרי הריחופים, הגדרת קו דמיוני, שהחל ממנו מתחילים מחדש. הוא מזהה איפה נגמרים האלמנטים בעלי float, ומתחיל קו חדש. אם נדבר על הפוטר של מקודם, ברגע שנגדיר לו clear: both – ניקוי מימין ומשמאל – הוא יזהה איפה נגמר התוכן שלפניו, ויתחיל בדיוק במקום.
בהערה קטנה רק נדגיש שאם משתמשים בbootstrap - הוא יודע כבר ליישר קו בסוף row, וכן במידת הצורך אפשר להגדיר לאלמנט את הקלאס clearfix והוא מוסיף clear.

display: inline-block
על הגדרה זו הרחבתי בפוסט שעסק בdisplay. תוכלו לקרוא עליו בהרחבה, איך הוא עובד וכו'.

מתי נעדיף להשתמש בdisplay: inline-block?
1. התאמה לכיוון
כשיש לנו רכיבים שעשויים לבוא בעברית ובאנגלית – מימין לשמאל ומשמאל לימין. אם נשתמש בfloat: right עבור אלמנטים שלצורך העניין אמורים להיות מיושרים לימין – נצטרך להגדיר באופן מיוחד עבור כל אלמנט כזה באנגלית שיקבל float: left וכן להיפך.
ראיתי מקומות שפתרו את זה באמצעות הוספת קלאס של float-right או float-left לאלמנטים שצריכים לקבל float, ואז בשפה ההפוכה, רק הגדירו float לכיוון ההפוך עבור הקלאסים הללו. השיטה הזו לא מוצלחת בעיני, כי באופן כללי אני לא בעד הכנסת הגדרה כל כך משמעותית ברמה הרספונסיבית לתוך קלאס. אבל זו אכן אפשרות.

לעומת זאת כשאנחנו מדברים על display: inline-block – החיים הופכים לקלים במיוחד. מאחר והאלמנטים בעצם מתנהגים כמו מילים במשפט – אין שום בעיה עם הכיוון, בדיוק כמו שבrtl סימן השאלה יופיע משמאל למשפט כי הוא כתוב אחריו – כך גם האלמנטים עם display: inline-block יתיישרו אחד אחרי השני בהתאם לdirection של האבא שלהם. האתר האחרון שבניתי הינו multisite (נדבר על זה בהזדמנות בעז"ה), ששתי האתרים שלו הינם אחד בעברית והשני – אתר זהה, רק באנגלית. בגלל שאת רוב היישורים סידרנו באמצעות inline-block ולא באמצעות float – כמעט ולא נזקקנו להתאמות לאנגלית. הכל התהפך אוטומטית בשניה שהוספנו לbody את ההגדרה direction: ltr באנגלית.
כך שכשיש לכם אתר או רכיב שאמור להיות בשתי שפות – זו נקודה שכדאי לחשוב עליה.

2. יישור אנכי
כמו שדיברנו בפוסט על יישור אנכי, כשיש לנו רצף של 2 אלמנטים או יותר עם inline-block ניתן להוסיף להם יישור אנכי – vertical-align. לא ניתן להגדיר את זה לאלמנטים עם float. למעשה ברגע שניתן float כלשהו (חוץ מnone כמובן) לאלמנט, לא משנה אם הוא היה בלוק או inline-block – הוא מתנהג בצורה זהה, וללא יישור אנכי. זו עוד נקודה שבמקרים רבים חשובה מאד. רק לדמיין מצב של שתי אלמנטים שאמורים לעמוד אחד ליד השני מיושרים אנכית, ועשינו את זה עם float: right, float: left בהתאמה, אז אומנם הם עומדים אחד ליד השני, אבל שתיהם מיושרים כלפי מעלה באותה נקודה. צריך להוסיף margin לאלמנט הנמוך יותר. ומה עושים כשהגבהים שלהם דינאמיים?!

בקיצור, כשצריך שתי אלמנטים שמיושרים אנכית האחד לשני – עדיף לחלוטין להשתמש בdisplay: inline-block ולא בfloat.

3. רווח בין אלמנטים
הנקודה הזו נפוצה בעיקר כשיש תפריט שרוצים שיהיה מתוח על פני רוחב מסוים, ללא קשר לאורך התוכן ולמס' הקישורים שבו. את זה לא ניתן בשום פנים לעשות אם float, כי בfloat צריך להגדיר ריווח קבוע (margin) בין האלמנטים – בפיקסלים או באחוזים. ובמידה והקישורים בתפריט דינאמיים ומשתנים מפעם לפעם – אנחנו בבעיה (שאמנם אפשר לפתור עם flex או table-cell, אבל זה כל כך הרבה יותר פשוט עם inline-block, וגם אין לו השלכות מעצבנות כמו לשתי האחרים)

לעומת זאת אם נשתמש לתפריט הזה עם display: inline-block – ישנה דרך נפלאה לסדר את זה (מקווה לכתוב על זה פוסט נפרד). דרך שבה לא צריך לתת ריווח בין האלמנטים אלא הריווח נוצר באופן אוטומטי. זה עובד מושלם!

אז מתי בכל זאת כדאי להשתמש בfloat?!
1. שבירת שורה באמצע
כשצריך אלמנטים שנמצאים באותה שורה, ומידי פעם אמורה להשבר השורה – אם נרצה להשתמש בdisplay: inline-block – נצטרך להוסיף אלמנט מיוחד שישבור לנו את השורה. בדיוק כמו שכשרוצים לשבור שורה בין מילים צריך ללחוץ במיוחד על אנטר ולהוסיף br.
לעומת זאת כשמשתמשים בfloat – לאלמנט שצריך לשבור שורה פשוט מוסיפים clear וזה הכל.

2. יישור תמונה + גלישת טקסט

הרבה פעמים רוצים ליישר תמונה וטקסט, באופן כזה שהתמונה נמצאת נניח בימין למעלה, והטקסט מתחיל משמאלה וגולש כלפי מטה, בדיוק כמו שהעמוד כאן נראה. אם ננסה את זה עם inline-block – הטקסט ירד מתחת לתמונה לחלוטין, אבל כשמשתמשים בfloat:right רק על התמונה – זו אחת התכונות של float, שהתוכן של האלמנטים האחים שלא מרחפים – עולה לצד האלמנט המרחף. אני מדגישה שרק התוכן, כי אם למה שמכיל את הטקסט יש מסגרת או רקע – זה יעמוד גם מתחת לתמונה.

3. יישור אלמנט בכיוון הפוך מכיוון הכתיבה
כשרוצים ליישר רק אלמנט אחד לכיוון ההפוך מכיוון הכתיבה, למשל כשאנחנו בעברית – RTL – ואיזשהו פריט צריך להיות מיושר שמאלה – יותר פשוט להגדיר לו float: left מאשר להתחיל לשחק עם text-align כדי שה"טקסט" (הלא הוא האלמנט עם inline-block) יטרח להתיישר שמאלה.

ובנוסף…
בנוסף, כשמתעצלים לממש את הפתרונות של display: inline-block רק בואו לא נשכח להוסיף clear: both מיד לאחר האלמנט.

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

 

[חנה 1]

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

נכון לCSS 3 יש ארבעה ערכי position, כל אחד עם מאפייניו ושיגיונותיו.

position: static
נתחיל בהגדרה הדיפולטיבית.

• האלמנט מתחשב באלמנטים אחרים על המסך ואלמנטים אחרים על המסך מתחשבים בו
• לא ניתן לתת לו הגדרות מיקום אבסולוטיות (הרחבה בפוסט אחר בעז"ה)

במידה ונרצה לדרוס הגדרת position כלשהי בהגדרת הדיפולט – זו ההגדרה הדרושה לנו.
בנוסף – הגדרת הstatic היא ההגדרה היחידה שלא מקבלת את z-index.

position: relative
די דומה לstatic.

• האלמנט מתחשב באלמנטים אחרים על המסך ואלמנטים אחרים מתחשבים בו
• ניתן להגדיר לו הגדרות מיקום אבסולוטיות
• משמש כ"אב" לאלמנט absolute (הרחבה בהמשך)

position: absolute

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

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

כברירת מחדל, האלמנט האבסולוטי מאבד התנהגויות אחרות שמגיעות יחד עם display, לדוגמא במידה והוא block, שהרוחב שלו אמור להיות 100% של האבא (ראו עוד בפוסט אודות display) – הרוחב של אלמנט אבסולוטי הוא הרוחב של האלמנטים שבתוכו, אלא אם נקבע לו אחרת באמצעות ההגדרה width.

אב רלטיבי
במידה ונתנו לאלמנט אבסולוטי הגדרה באחוזים, לדוגמא width 100% – הוא לא יקבל בדווקא את הרוחב המלא של האבא שלו, אלא את של האלמנט הקרוב אליו מבחינת ההיררכיה העולה של אב-סב-אב של סב וכו' שיש לו את ההגדרה של position: relative. אם אין בנמצא אלמנט כזה – ילך אחרי הbody.

להקלת ההבנה נניח מצב כזה:

כדיפולט, #myElement יקבל את כל הרוחב של הbody.

ברגע שנוסיף אלמנט #firstDiv את ההגדרה של position: relative: – הרי שmyElement יקבל רוחב של 300 פיקסלים, למרות שהאב שלו הוא 100 פיקסלים בלבד. ורק אם נוסיף ל#secondDiv את ההגדרה position: relative– רק אז #myElement יקבל רוחב 100 פיקסלים. וזה כי הוא לא מתייחס אחר האבא הפיזי שלו אלא אחרי האב הרלטיבי הקרוב.

ואותו הדבר לגבי המיקום שלו. במידה ואין ל #secondDiv את ההגדרה של position: relative – הרי ש#myElement יעמוד למעלה, בתחילת הbody, וזה בגלל שיש לו הגדרה של top: 0px – מיקום אבסולוטי שלא קשור למקום המקורי שלו. (בשונה מmargin-top שכן היה משפיע בתזוזה מהלמעלה של #secondDiv בלבד. הרחבה בעז"ה בפוסט על מיקומים אבסולוטיים ושאינם).

ברגע שנגדיר את #secondDiv כרלטיבי – #myElement ייעמד 100 פיקסלים מתחת לתחילה הbody, בדיוק בנקודת ה0 של אביו הרלטיבי.

position: fixed = אלמנט נעוץ

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

position fixed מזכיר במידת מה את רעהו האבסולוטי. גם הוא בדומה לabsolute לא רואה ממטר את כל מי שמאחוריו או מצדדיו, אך בניגוד לabsolute – בהגדרות שתלויות בסובבים, כמו אחוזים והגדרות אבסולוטיות – הוא לא מתייחס אחרי הרלטיבי הקרוב אלא אחרי חלון הדפדפן. כלומר – במידה וניתן לו מיקום אבסולוטי לדוגמא של right: 0px– הוא ייצמד ימינה לחלונית הדפדפן, גם כשכל האלמנטים האחרים מתרכזים איפשהו בבמרכז המסך. כנ"ל אם ניתן לו הגדרת width:100% – המשמעות היא מאה אחוזים של החלון ממנו צופים.

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

שימו לב. לפעמים רוצים אלמנט סטיקי – דביק. כלומר, איזשהו אלמנט שחלק מהזמן נעוץ וחלק מהזמן לא נעוץ. לדוגמא סיידבר שלא מתחיל בתחילת הדף, וכשמגיעים בגלילה למצב שבו רוצים להקפיא אותו – שם הוא ננעץ. במצב הזה משתמשים במשחק של position absolute/position static. באחד הפוסטים הקודמים בשרשור הזה תוכלו לקרוא איך לבנות אלמנט מהסוג הזה.

עד כאן להפעם.

הפוסטים שלי התחדשו באתר חדש. מהיום תוכלו למצוא אותם כאן. האתר עדיין בתהליכי פיתוח, הערות והארות תתקבלנה בברכה. http://cagdash.com/

 

[חנה 1]

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

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

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

מבנה הפקודה transition

transition: color .5s .5s linear;

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

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

ההגדרה השניה – מגדירה את משך הזמן שההתחלפות תיקח. 1s משמעו שניה אחת. .5s משמעו חצי שניה וכו'.

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

ההגדרה הרביעית והאחרונה – מגדירה את הצורה שבה תיעשה האנימציה. בדוגמא שלעיל – linear משמעותו שהאנימציה תקרה בצורה אחידה מהרגע הראשון ועד הרגע האחרון. ניתן לתת הגדרות שונות המהוות חלק מהפונקציה built-in בדפדפן, ולחלופין ניתן לבנות את הקצב בהתאמה אישית (בפרק מיוחד נדבר על זה בעז"ה).

נ.ב.
ניתן להגדיר לסלקטור אחד יותר מtransition אחד, באמצעות הפרדה בפסיק. לדוגמא:

#div{
    transition: color .4s, background .3s;
}

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

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

transition: all .5s, opacity .3s;

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

פורסם במקור באתר שלי http://cagdash.com/blog/transition-part-1/
תוכלו למצוא שם עוד הרבה מדריכים מעניינים ודוגמאות בנושאים שונים (jQuery, הנגשה, יצירת פופאפ בעצמכם ועוד)

 

[חנה 1]

שבוע טוב,

הפעם לא פוסט חדש, אלא התייעצות אתכם, סקר...
אל מה תרצו לקרוא?

1. bootstrap - נושא הgrid שלו. רלוונטי למעצבי אתרים (לפחות חלק מהמידע) ולמפתחים כמובן.
2. עוד על CSS - אם כן - כתבו לי מה למשל. grid, flex, transform, יצירת משולשים בCSS וכדו' או מדריכים לבניית רכיבים כמו פופאפ, אקורדיון, רכיב דמוי תיבת select וכדו'
3. הנגשת אתרים (דווקא על הנושא הזה יש כבר כמה פוסטים באתר שלי, עדיין לא כיסיתי שם הכל כמובן, אבל לפחות מידע חלקי). http://cagdash.com/blog/category/accessibility/

אשמח לקבל את תשובותיכם
שבוע מצוין לכולנו

 

[חנה 1]

.

 

[Naftali Stein]

grid, flex

נושא חשוב ומעניין, נשמח לקרוא עליו.

כמו גם על פונקציות חדשות ב css.

 

[mordy]

שבוע טוב,

הפעם לא פוסט חדש, אלא התייעצות אתכם, סקר...
אל מה תרצו לקרוא?

1. bootstrap - נושא הgrid שלו. רלוונטי למעצבי אתרים (לפחות חלק מהמידע) ולמפתחים כמובן.
2. עוד על CSS - אם כן - כתבו לי מה למשל. grid, flex, transform, יצירת משולשים בCSS וכדו' או מדריכים לבניית רכיבים כמו פופאפ, אקורדיון, רכיב דמוי תיבת select וכדו'
3. הנגשת אתרים (דווקא על הנושא הזה יש כבר כמה פוסטים באתר שלי, עדיין לא כיסיתי שם הכל כמובן, אבל לפחות מידע חלקי). http://cagdash.com/blog/category/accessibility/

אשמח לקבל את תשובותיכם
שבוע מצוין לכולנו

2

 

[חנה 1]

אחרי הפסקה ארוכה (חופש, בכל זאת), הפעם נדבר על
סלקטור "אח" – Siblings בCSS
הקדמה
בקוד HTML, האלמנטים בנויים בצורה של איזשהו עץ משפחה. יש את אלמנט הhtml, שהוא מה שמכונה root – השורש של העץ שלנו. לhtml תמיד יש 2 בנים ישירים – head, body. אלו הם בנים ישירים. יש לו גם צאצאים לא ישירים, לדוגמה div, nav, .myHeader וכל האלמנטים שנמצאים בתוכו. הפוסט הזה ידריך אתכם איך להשתמש בסלקטור של CSS ב"אח" – siblings – של האלמנט שאליו רוצים להתייחס.

ניקח לנו קוד HTML שילווה אותנו לאורך הפוסט: https://codepen.io/hanniessite/pen/MBPWVg?editors=1000

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

.parent .child{}

אנחנו מצביעים על כל מי שעם הקלאס child שהינו צאצא של הקלאס parent.

body .child{}

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

מהם אחים בHTML ואיך ניתן לגשת אליהם
אם נמשיך אם אותו כיוון של "עץ משפחה" שאיתו התחלנו, כשיש לנו .parent ויש לו מספר בנים ישירים, הרי שכל הבנים שלו הינם אחים. במילים אחרות, אלמנטים אחים הינם אלמנטים שנמצאים יחד על אותו ענף של HTML והינם בנים של אותו אלמנט אב.
בCSS ניתן לגשת בין אחים, אח ניתן להתייחס (= להיות מיוחס) רק אחרי אחים שכתובים בHTML לפניהאלמנט שעליו מצביעים (אחיו הגדולים), ולא אחים שכתובים אחריו בHTML. נכון לCSS3 לא ניתן לייחס אלמנט אחרי אחיו הצעירים בסלקטור שלנו.
ישנם שתי תווים שיעזרו לנו לעשות את הייחוס הזה. הראשון הינו סימן פלוס (+) והשני סימן טילדה (~). הפלוס אומר שאנחנו מדברים על אלמנט שנמצא מיד אחרי אלמנט אחר (אח ישיר), והטילדה אומרת שאנחנו מדברים על אלמנט שיש לו אח גדול כלשהו לפניו שעונה על הקריטריונים שכתבנו.

נתחיל בדוגמאות פשוטות

.x + .y{}

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

.x ~ .y

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

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

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

span + span

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

דוגמה נוספת:

.parent .child ~ .child

כעת אנחנו פונים לכל קלאס child שיש לו אח כלשהו לפניו שיש לו את הקלאס child, והוא צאצא של הקלאס parent. בHTML שלנו מדובר באלמנטים second, third.

שימו לב, גם האלמנט שעליו מצביעים שלנו יהיה צאצא של .parent, אבל זה לא מעניין אותנו ביחס לאלמנט עצמו אלא ביחס ל"אחיו הגדול".

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

וגמה נוספת, הייתה לי פעם דרישה לעיצוב טבלת מחירים כלשהי שמגיעה מהתוכן והינה דינאמית ובעלת מספר שורות משתנה. השורות האחרונות היו צריכות להיות בעיצוב שונה, כשהשורה השונה הראשונה מהן הינה סוג של כותרת והתוכן שלה היה מודגש. לכל השורות האפורות יש את הקלאס grayRow, אך אין קלאס ייעודי עבור השורה הראשונה, השונה. מאחר וזה לא שורה ראשונה של הטבלה אלא אחרי X שורות – לא יכולתי כמובן להשתמש ב:first-child. במקום זה כתבתי כך:

.grayRow{
   background: #ccc;
   font-weight: bold;
}
.grayRow+ grayRow{
   font-weight: normal;
}

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

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

בהצלחה רבה

הפוסט פורסם לראשונה בבלוג שלי. הכנסו לשם כדי לקרוא מדריכים נוספים בCSS וjQuery
http://cagdash.com/blog/