מסתמן כי צפוי למעצבי האתרים עולם חדש לגמרי
אתר שבוחן את רמת התאורה בחדר ומחליף את צבעיו כדי להקל על העיניים לקרוא. נשמע מופרך? בעזרת תגית אחת של קוד CSS4 זה אפשרי.
פורמט העיצוב CSS4 אמנם עדיין לא הוכרז רשמית ויש עוד דרך ארוכה עד שזה יקרה, אך הצצה למסמכי הגרסה הבאה של CSS מגלה עולם חדש של עיצוב אתרים. ב-2011 הוכרזו כמה עשרות תקנים מאושרים לקוד של CSS3. כעת עובדים על השלב הבא - CSS תקן 4. לפי הסימנים, מסתמן שצפוי לנו עתיד מרתק לעולם העיצוב.
הכח של המפתחים בעולם עיצוב האתרים לא יסתכם עוד ביצירת עיצוב תחת גבולות האתר, אלא בפריצה למימדים חדשים: זמן, אור, מכשירים שבהם גולשים המשתמשים, שפה, התנהגות הגולש באתר ורבדים רבים נוספים. הנה כמה דוגמאות לעיצוב חכם עם CSS4:
אתר שמגיב לתאורה בחדר
דוגמא מרתקת לעיצוב דינמי שנעזר ב-CSS4, הגיע מהמעצבת טומומי אימורה. המעצבת השתמשה בבורר (selector) שבוחן את רמת האור בחדר דרך קולטני הטאבלט. שמו: devicelight. ברגע שהתאורה עולה מעל רמה מסוימת, עיצוב האתר הופך אוטומטית מותאם לקריאה בחדר מואר. כך זה נראה:
תגובה לזמן
איך תיראה הצפייה שלנו ביוטיוב כש-CSS4 ייהפך לתקן רשמי? כנראה שהחוויה תהיה שונה לחלוטין ממה שאנחנו מכירים.
בעזרת שלושת הבוררים המתייחסים לזמן - current, past ו-future, ניתן יהיה להציג שינויים דינמיים באתר בהתאם לרצף זמן שיוצג באתר. ניקח לדוגמא סרטון יוטיוב שמציג הרצאת TED ומתחתיה תמלול הסרטון. עיצוב האתר ישתנה בהתאם לדברים שנאמרים לאורך רצף ההרצאה ויציג בכל פעם את הפסקה הרלוונטית בעזרת הבורר current.
התאמה לפי שפה
הסלקטור lang מאפשר לבצע התאמות לפי השפה בה כתוב התוכן בעמוד. השפה מזוהה בעזרת אלמנט הלקוח מקובץ ה-HTML של האתר. בעזרת הסלקטור, ניתן להציג דבר אחד עבור עמוד הכתוב בשפה אחת, ותצוגה אחרת לשפה שנייה.
השימוש באפשרות הזאת עונה על הצורך הגובר מצד אתרים רבים הפונים לקהלים בינלאומיים ומעוניינים בהקמת אתר שבו ניתן לבחור את שפת התצוגה ולהציג עיצוב שונה לכל קהל יעד.
עיצוב משתנה לפי צורך
:has הוא אלמנט שמאפשר לעיצוב להגיב בהתאם לתוכן. לדוגמא:
a:has(> img) הוא עיצוב שיגיב לאלמנטים באתר, רק אם הם כוללים תמונה. האפשרויות ב-has הן רבות, בעיקר עבור תוכן שמשתנה בהתאם לגולש, כמו אתר המכיל תוכן גולשים. עמודי הדפים יגיבו בהתאם לתוכן שיוזן אליהם.
להגיב להתנהגות הגולש
עוד ב-CSS3 ניתן למצוא אלמנטים עיצוביים שמגיבים להתנהגות הגולש בצורה דינמית, כמו שינוי בתצוגה כשהעכבר מצביע על שורה מסוימת. הפיתוח העתידי מנסה לשייף עוד יותר את אפשרויות התגובה להתנהגות הגולשים. שמות הסלקטורים שיאפשרו את התגובתיות מסבירים על הפוטנציאל הטמון בהם:
hover: כאשר גולש עובר מעל חלק מסוים באתר הוא ישתנה גם אם הגולש לא הקליק עליו.
active: האלמנט יגיב אם הגולש הפעיל או לחץ על משהו.
התאמה קלה יותר למובייל
התאמה של עיצוב אתר למסכים שונים היא מלאכה קשה. האתר צריך להיות מותאם למסך מחשב, לסמארטפון ולטאבלט על כל סוגי הדפדפנים והגרסאות. וזה לא מעט. לצורך הקלה על המלאכה, נוצרו האפשרויות column, nth-column ו-nth-last-column. האפשרויות הללו יעזרו ליצור עיצוב על הגריד של המסך בהתאם לעמודה בו נמצא האלמנט
נשמח להציע לך פתרון מותאם אישית
קבל הצעת מחיר
