בניית טולטיפ – tooltip – הדרך הפשוטה באמצעות CSS

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

סלקטור "אח" – Siblings בCSS

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

עיצוב כפתורי צ'קבוקס ורדיו (checkbox/radio)

עיצוב אלמנטים של HTML עשוי להיות משימה מאתגרת לעיתים, וזה משום שהפקדים (inputs) מהסוג צ'קבוקס ורדיו לא ממש טורחים לקבל את הCSS שאנחנו כותבים להם, בטח לא בכל הדפדפנים והמכשירים, וזה עוד לפני שדברנו על הסימון הפנימי של עיגול או V, שאם אנחנו רוצים לדוגמה עיגול או V בעיצוב מסויים – זה עשוי להיות כבר … להמשך קריאהעיצוב כפתורי צ'קבוקס ורדיו (checkbox/radio)

הנגשת פופאפ

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

הנגשת אתרים – פרק שלישי – ניווט מקלדת

ניווט מקלדת

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

הנגשת אתרים – פרק שני – הנגשה ללקויות ראייה

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

הנגשת אתר – פרק ראשון – אנימציות וכתוביות

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

מבוא להנגשת אתרי אינטרנט

בפרק הזה ובכמה פרקים הבאים נדבר בעז"ה על נושא הנגשת אתרי אינטרנט. במקום הקדמה – למה צריך להנגיש? חוק הנגשת אתרי אינטרנט אומר שהחל מתאריך 25/10/2017 כל האתרים שנותנים שירות לגולשים צריכים להיות נגישים לבעלי מוגבלויות. זה כמובן קצת יותר מורכב מזה, יש אפשרות לקבלת פטור וכדו', אבל באופן כללי אתר שפונה לקהל הישראלי, בין … להמשך קריאהמבוא להנגשת אתרי אינטרנט

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

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

חשבתם שיישור אופקי לאמצע מורכב מידי? כדאי שתחשבו שוב…

כשאנחנו מדברים על יישור אופקי למרכז – מימין לשמאל – יש מס' מצבים, שלכל אחד מתאים פתרון אחר. יישור אלמנט block בעל רוחב קבוע כשרוצים ליישר אלמנט עם display: block + רוחב קבוע – פשוט מגדירים שוליים אוטומטיים משתי הצדדים, מה שיגרום לשוליים להתחלק שווה בשווה בין ימין ושמאל: margin-right: auto; margin-left: auto. יש לשים … להמשך קריאהחשבתם שיישור אופקי לאמצע מורכב מידי? כדאי שתחשבו שוב…