הטרנדים החמים ב-CSS3

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

פוסט זה נכתב על ידי סרג’ קרול, ראש צוות פיתוח Front End בחברת נטקראפט. 

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

טיפוגרפיה

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

החלופות העיקריות עד כה היו תמונות (Image Replacement) ופלאש (sIFR), כאשר הראשונה מוגבלת טכנולוגית והשנייה מסורבלת ואיטית. זה עוד מבלי לדבר על שפות, רזולוציות, תחזוקה וכו’ שהופכים את הפתרונות הללו ללא ישימים במקרה הרע ולא יעילים במקרה הטוב. לשמחתנו מאמצי הסטנדרטיזציה של CSS3 תרמו לנו פיצ’ר חשוב ואפקטיבי, שמאפשר שימוש בפונטים מיוחדים באותו האופן בו אנחנו משתמשים ב-Arial היום, ובתוך כך נותן מתנות בחינם כגון נגישות ויכולת להפעיל על הטקסט הגדרות CSS נוספות.

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

ניתן אם כן לצרוב בראש בבטחה את הקשר בין טיפוגרפיה ל-CSS3: אין סיבה להשתמש יותר בתמונות או בטכניקות מסורבלות לטקסט מעוצב. צריך רק לזכור שיש לבחור בקפידה פונט שיתאים לכל אלמנט בעמוד, ולכך שכמו לכל טכנולוגיה גם ל-font-face יש פינות בעייתיות. הבולטות שבהן הם גודל הקבצים וקפיצה בעת עליית העמוד (FOUT), לכולן יש גם דרכי התמודדות.

בנוסף לפונט עצמו, כמה הגדרות CSS חדשות וישנות כגון text-shadow, יכולות לעזור לנו כדי ליצור אפקטים מרשימים כדוגמת זה שבקישור כאן. בדוגמה זו שילבנו את פונט Holtwood החינמי מספריית הפונטים של גוגל. שימו לב חברים, זהו טקסט חי לכל דבר, הביטו ב-HTML. אין פשוט מזה ולכן, לדעתי, זה מרגש. היכולת לשלב אנימציות CSS מדגישה את היתרון של שימוש בטכנולוגיה פתוחה שמסוגלת להתממשק לסביבה שלה בצורה אורגנית. בעיניי זהו כלל מנחה לפיתוח ווב באופן כללי וסוד הכוח של HTML5.

גרפיקה

ההתלבטות שהיתה לי לגבי בחירת הכותרת הזו משקפת את הטרנד בצורה טובה למדי: רציתי להתמקד בהתחלה במודול Backgrounds, אך לא הרקעים עצמם הם העניין המרכזי במגמה הזו, אלא השימוש בהם. תמונת רקע וצבע רקע היו לנו כבר מזמן, אבל התוספות המבורכות של גרדיאנטים באמצעות background-image, היכולת לתת צבע עם שקיפות (RGBA), וקורטוב פינות עגולות, איכשהו עולות על סך חלקיהן ובשימוש מושכל מאפשרות גרפיקה של ממש, באמצעות CSS בלבד.

אחד הזוכים בתחרות הכדור והכפתור של נטקראפט, אלכס וולקוב, עשה שימוש נהדר ב-background-image, ב-rgba וכמובן ב-borderradius על מנת ליצור גרדיאנטים, טקסטורות וצל, ולהגיע לדיוק גבוה מול העיצוב המקורי. היווכחו בעצמכם כאן. כבונוס, הוא השתמש בקוד שלו בתוסף הנהדר Prefix Free, שמאפשר לנו לכתוב קוד יפה יותר, ללא התחיליות המעיקות שגורמות לשכפול קוד וחוסר קריאות – מחלת ילדות שנשמח להפטר ממנה בקרוב, ככל שהטכנולוגיה תתבגר.

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

 או על ממשק הבקרה המרשים הבא, שאינו אלא שילוב גאוני של תגיות input חדשות של HTML5 עם CSS3?

לדוגמאות נוספות קפצו לכאן.

אחד המקומות בהם הטרנד הזה מוצדק במיוחד הוא עולם ה-Mobile Web, בו מצד אחד יש תמיכה רחבה ב-CSS3 ומצד שני מגבלות טכניות ומשאבים מועטים, מה שמעודד שימוש בקוד במקום בתמונות.

התמיכה באינטרנט אקספלורר קיימת, אם כי מעט מוגבלת, באמצעות שימוש ב-filter, או באמצעות fallback כלשהו, כגון תמונה או רקע אחיד. כאשר מדובר בפיצ’ר גרפי ותו לא, עדיף לוותר עליו בדפדפנים ישנים אלה מכיוון שפתרונות אחרים יקרים בביצועים ועלולים לגרוע יותר ממה שהם מוסיפים. זוהי אסטרטגיה שלמה לאימוץ HTML5, שכתבנו עליה בעבר. חשוב לציין שאקספלורר 10 הולך ליישר קו בנושא הזה (ובמודולים נוספים של CSS3), ואנו מצפים לכניסתו לשוק הדפדפנים בקוצר רוח.

לסיכום, ניתן לומר שאם הייתם מראים לי את הדוגמאות הללו לפני כמה שנים ומספרים לי שהכל CSS, הייתי צוחק לכם בפנים. היום אפשר לצחוק כשמישהו עושה את זה אחרת. אני כמובן מגזים, ויש מקרים בהם שימוש בתמונות יעיל יותר, אך לפחות לשקול לצייר גרפיקה באמצעות CSS3 בלבד זוהי חובתכם כמפתחי Front-End בשנת 2012.

flickr, cc by gretchichi

אינטראקציה

“אינטראקציה ב-CSS? מה ל-CSS ולזה, הרי הוא נועד אך ורק לעיצוב, ומקומו בשכבת התצוגה, במקום חמים ונעים באמצע הסנדוויץ’ בין ה-HTML ל-Javascript, לא?” סביר שכך אתם חושבים, ובצדק.

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

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

אבי השתמש בטכניקה יפה כאשר הוא “תופס” את אירוע ה-active על האב המשותף של הכדור והכפתור בזמן הלחיצה על הכפתור. אך מכיוון שזו לא באמת שכבת התנהגות וכאמור המחלקה המדומה active פועלת על כל אלמנט, גם לחיצה על הכדור עצמו תעשה את אותו אפקט. זה יכול להיות יתרון או חסרון, תלוי מה הצורך ולמה התכוון המשורר. לעומת זאת, אריק זאדי, שנכנס בתחרות לתוך הפרויקטים הנבחרים, בחר ליצור אנימציית CSS3 כאשר הכדור במצב active וזוהי בהחלט טכניקה מקורית ומעניינת.

כמובן שלא התכוונתי לספר רק על דברים ישנים שקמו לתחייה, וכך קבלו במחיאות כפיים את בן הזקונים לבית אינטרקציה: target. המחלקה המדומה (Pseudo Class) הזו מאפשרת לעצב אלמנט מסויים בהתאם ל-URL. ליתר דיוק: לעצב אלמנט עם ID מסויים ב-HTML בהתאם למה שנמצא אחרי סימן הסולמית (#) ב-URL.

למה זה טוב? אענה לכם בשאלה: האם מימשתם פעם ניווט באמצעות טאבים?

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

אתם ודאי שואלים את עצמכם האם יש מחלקות נוספות כגון target שנוכל להשתמש בהן לאינטרקציה. התשובה היא עדיין לא, אך כחלק מהסטנדרט יש עוד כמה מחלקות מדומות מעניינות כגון nt-child, nth-of-type ו-empty ששווה לחקור אותן, להתנסות בהן, ולדווח על כך לעולם.

flickr, cc by barron

תלת מימד

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

בנוסף לכפתור באתגר עצמו, בחרנו לממש תלת מימד במעבר העכבר על הפרויקטים הנבחרים, כאשר נתנו פרספקטיבה לכל כפתור של פרויקט במצב hover. לי באופן אישי עוד לא יצא לראות שימוש כזה, לכן אני די גאה באפקט העדין והמעניין שיצא לנו, האמת – די במקרה, מתוך ניסוי וטעיה. אחד השימושים העיקריים היום ב-3D Transforms ב-CSS הוא במעברים בין תמונות, שיוצרים תחושה מציאותית בזכות תלת המימד, כמו בדוגמה הבאה שהיא CSS-ית כמעט לחלוטין, ומשתמשת ב 3D Transforms, Transitions ו-Animations.

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

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

סיכום

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

כתב אורח

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

הגב

2 תגובות על "הטרנדים החמים ב-CSS3"

avatar
Photo and Image Files
 
 
 
Audio and Video Files
 
 
 
Other File Types
 
 
 

* היי, אנחנו אוהבים תגובות!
תיקונים, תגובות קוטלות וכמובן תגובות מפרגנות - בכיף.
חופש הביטוי הוא ערך עליון, אבל לא נוכל להשלים עם תגובות שכוללות הסתה, הוצאת דיבה, תגובות שכוללות מידע המפר את תנאי השימוש של Geektime, תגובות שחורגות מהטעם הטוב ותגובות שהן בניגוד לדין. תגובות כאלו יימחקו מייד.

סידור לפי:   חדש | ישן | הכי מדורגים
Rachel Saadia
Guest

עושה טעם של עוד… צריך עוד כתבות ומדריכים כאלה. אני מנסה לעבוד מדי פעם עם עורכי אתרים שתומכים בזה. האפשרויות מדהימות!!

רחל סעדיה
Guest

האמת? מרוב מה שאפשר לעשות ל – CSS עם JQUERY ה – CSS# פותח עוד אפשרויות עבור המפתחים. אבל למה, למה בשם כל הדפדפנים אקספלורר מתעקש להשאר מסורבל – לפחות בגירסאות 6,7, 8 כי יש עוד מקומות שמשתמשים בדפדפן הזה בגירסה 6!!! אצלי יש את גירסה 9. אבל אני מעדיפה באופן מובהק את הקוד החופשי.

wpDiscuz

תגיות לכתבה:

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