תכונת CSS נחמדה שעל דקויותיה עליתי רק במקום העבודה שלי.
כרגיל אתם יודעים שיש את
-
display:none/block
שימוש בסלקטור CSS זה הוא נפוץ מאוד.
משתמשים בו לתפריטי אינטראקטיבים, לתפריטי עץ, פתיחת וסגירת איברים בממשק והצגה והחבאת אלמנטים במסמך.
-
visibility:visible/hidden
ופתאום מצאתי סלקטור CSS נוסף שבמבט ראשון הוא זהה לתכונת הDisplay, אך כאשר קוראים עליו יותר, רואים שיש לו סוויצ' קטן שמשנה משמעותו לחלוטין.
ההבדל הגדול כלכך בין שני תכונות אלו הוא שDisplay:None מעלים (להעלים...) את סקופ התייחסות מבנה העמוד לאלמנט ומעלים אותו מהשלד. Visability:Hidden לא.
אלמנט אשר מקבל Visability:Hidden פשוט שומר על גודלו בעמוד ופרופורציותיו, אבל פשוט מקבל כאילו Opacity:0.
זוהי יכולת ענקית לנו, מפתחי אתרים.
אני השתמשתי בתכונה זו באתר שבניתי, כאשר היה כפתור שבחלק מהעמודים רציתי שהוא לא יוצג, כי למשתמש אין הרשאות לראות כפתור זה, אבל הכפתורים תחת כפתור זה היו תלויים בגודל שלו כדי להתמקם במיקום שלהם.
אם הייתי נותן לו Display:None, הכפתורים מתחתיו היו עולים מעלה ותופסים את המקום שלו שהתפנה. אך כאשר הגדרתי לו Visability:Hidden, כל מבנה העמוד לא השתנה, הכפתורים ישבו כל אחד במקומו הוא, רק מאפייני התצוגה שלהם, השתנו.
September 16th, 2006 at 10:40 pm
שלומי,
אני מכיר את התכונה הזו כבר לא מעט זמן, ויש לה את המקום שלה באתרים
כמו כן, אני משתמש בה לשם העלמת אובייקטים ללא שבירת הסדר בדף, תוך שמירת המיקומים של שאר האלמנטים.
השיקולים לשימוש בתכונת ה-display אל מול תכונת ה-visibility בד"כ נובעים אצלי משיקול עיצובי ופונקציונאלי גרידא.
המשך שבוע נפלא,
יובל
September 16th, 2006 at 11:02 pm
התלבטתי אם לפרסם את הפוסט הזה.
עברה לה המחשבה בראשי: "בטח רבים טובים אחרים קלטו תכונה זאת ורק אני קלטתי אותה באיחור". אז למרות הכל, החלטתי לפרסם אותה, כי נראה לי שאם אני לא קלטתי אז בטח עוד רבים וטובים לא.
ממשקי CSS ברשת, מבצעים שימוש רק בתכונת display. ויזאביליטי נדירה מאוד, עקב העובדה שהשימוש בה הוא בעיקר למבנה אתר ולאו דווקא תפריטים.
שבוע מצוין גם לך איש
שלומי
January 3rd, 2007 at 1:56 pm
אגב, ל display יש עוד תכונות, השימושית ביניהן היא inline (שהופכת את האלמנט לאלמנט שורה, כמו span למשל)
ועוד אחת היא table-cell (אני משתמשת בה במצבי חירום כשצריך להצר שוליים של דיב לרוחב התוכן שלו ושום דבר לא עובד. זה לא שימוש נכון למיטב ידיעתי)
יש עוד משחקים וסוגי display אבל את זה גוגל כבר יסביר טוב יותר.
January 3rd, 2007 at 4:20 pm
היי ailaG, שמח לראותך כאן.
"השימושית ביניהן היא inline" - במקרה יש פה פוסט על אלמנטים בלוקיים ואינלייניים
table-cell נתמך ע"י כולם? צריך לשים לב לתמיכה מי של מי לגבי כל מאפיין וסלקטור. אני רגיל מאוד לעבוד רק עם אלמנטים בלוקיים ואינלייניים אבל אשמח ללמוד על עוד כמה התנהגויות אם הן נתמכות ע"י כל הדפדפנים.
April 29th, 2007 at 7:31 pm
טוב שפרסמת, כי אני לא הכרתי
תודה, אריק
April 29th, 2007 at 8:33 pm
זו היתה כל מטרתי
We Aim to Please
May 4th, 2007 at 12:45 am
אחלה פוסט הבאת לי רעיונות חדשים תודה:)
July 26th, 2007 at 12:33 pm
סה"כ טכניקה טובה להעלמת אינפורמציה באופן זמני, שווה להשתמש בטכניקה בתוך שכבה צפה על מנת לא לפגום בתצורת האתר.
אחלה פוסט (:
July 27th, 2007 at 11:26 am
תודה רבה לשניכם