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

1. איך הכל התחיל

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

מאחר והמהות המרכזית של HTML היתה ייצוג מסמכים, טים ברנרס-לי לא ייחס חשיבות גדולה לניראות של הדפים ולכן בגירסאות ראשונות של HTML אפילו לא יכולת לשלב תמונה בתוך המסמך, ואין מה לדבר על הגדרת פונטים או צבעים. באותן שנים חברת Netscape שייצרה את דפדפן האינטרנט הראשון לקחה יוזמה והתחילה "להוסיף" על דעת עצמה תגיות HTML שיהפכו את החיים של הגולשים וכותבי האתרים לקלים יותר. הם המציאו את img כדי שאפשר יהיה להציג תמונות והשפיעו על W3C כדי להכניס תגיות נוספות הקשורות למראה. תקן HTML2 כבר כלל תגיות לשליטה בצבעים, להצגת תמונות, לשינוי גופן וכן הלאה.

מהר מאוד הבינו ב W3C שהערבוב בין עיצוב לתוכן הוא בעייתי לכותבי האתרים וגם לגולשים והחליטו לייצר תקן עבור עיצוב למסמכי HTML. תקן CSS שנוצר, קיצור ל Cascading Style Sheets נוצר בשנת 1994 ופורסם ב 1996. המטרות של CSS היו ונשארו לתת פיתרון עיצובי שיהיה:

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

סי אס אס סיפק מענה מוצלח לאתרי אינטרנט החל מאמצע שנות ה-90 והמשיך לגדול עם הרשת כשיצא CSS2 בשנת 1998. אחרי מלחמת הדפדפנים ולקראת שנת 2000 גם CSS קפא כמו כל טכנולוגיות האינטרנט והתעורר חזרה רק בשנת 2011 עם יצירת תקן CSS2.1. בשנים מאז ארגון W3C ממשיך להוסיף יכולות חדשות ל CSS, יכולות שכבר משולבות בתוך דפדפנים. החל מגירסא CSS3 הפורמט הפך למודולרי כך שיצרניות דפדפנים יכולות להחליט באיזה חלקים של CSS כל דפדפן יתמוך. מצד אחד זה הופך את החיים שלנו כמתכנתים לקשים יותר, כיוון שאנחנו אף פעם לא יכולים לדעת בוודאות מה דפדפן מסוים מסוגל להציג. מצד שני גישה זו מאפשרת חדשנות גדולה יותר בשוק מאחר והם יכולים לייצר מודולים חדשים ויצרניות דפדפנים יכולות לשלב את המודולים בקצב שלהן.

2. מה אפשר לעשות היום

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

פיתוח אתרים ריספונסיביים אומר קודם כל לעשות שימוש טוב יותר ביכולות של כל מכשיר. כשאנחנו כותבים CSS היום אנחנו משתמשים בהרבה פחות תמונות ומעדיפים להשתמש בכלים של CSS כדי ליצור גרפיקה וצורות. אפשר לראות די הרבה דוגמאות לגישה זו בפוסט "Shapes Of CSS" בקישור https://css-tricks.com/the-shapes-of-css/.

את החלקים השונים של הדף אנחנו מארגנים על המסך באמצעות Flexbox ו CSS Grid, שמאפשרים לנו לקבוע איך האזורים במסך יתנהגו בכל מיני גדלים של מסך, וגם להגדיר עיצוב ברירת מחדל בתור Fallback, למקרה שהגיע גולש עם דפדפן שלא תומך בתקנים אלה.

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

פרויקטי צד-לקוח מודרניים משתמשים הרבה בכלים שנקראים Preprocessors ו Bundlers כדי לארגן את הקוד לפני העלאתו לשרת. אתם יכולים ללמוד יותר על כלי כזה בקורס Webpack שיש לנו כאן באתר. כלים אלה מאפשרים לבנות את ה CSS בצורה דינמית מתוך קובץ הוראות. פורמט מקובל לקובץ הוראות כזה נקרא Scss. השימוש ב Scss הוביל לפיתוח של Frameworks, שהן קבצי Scss ענקיים שאתם יכולים לשלב בפרויקט בצורה מלאה או חלקית כדי לקבל יכולות מסוימות שבאופן רגיל הייתם צריכים לכתוב לבד. שני Frameworks מאוד פופולרים היום הם Bootstrap ו Foundation.

3. לאן הולכים מכאן

לא נראה שהעתיד של CSS כולל חדשנות רבה אלא בעיקר יותר מאותו דבר - וזה בסדר גמור. האתגרים של CSS בשנים האחרונות היו ונשארו:

1. לספק למתכנתים דרך נוחה להתאים אתר לכמה שיותר מכשירים.

2. לנצל בצורה הטובה ביותר את היכולות של כל מכשיר והעדפות המשתמש.

3. לשפר ביצועים וזמני טעינה של דפים.

לכן הפיצ'רים החדשים שאנחנו צפויים לראות בתקופה הקרובה ב CSS כוללים:

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

2. מדיה קווריס חדשים שמאפשרים לזהות את סוג המצביע של המשתמש, כדי לזהות למשל אם הוא יכול לעשות Hover או אם זה מסך Touch.

3. אפשרות לציור כל צורה עם CSS באמצעות CSS Paint API

4. אפשרות לייצר בתוך Framework קומפוננטה יחד עם העיצוב שלה, למשל באמצעות Web Components.

5. מדיה קווריס חדשים שמאפשרים לזהות העדפות משתמש, למשל כדי לזהות מצב שמשתמש נמצא ב Dark Mode במערכות הפעלה שתומכות בזה.

ככל ש CSS גדל ומקבל יותר פיצ'רים כך כתיבת CSS הופך לחלק יותר מרכזי בחיים של מתכנתים שבונים אתרים. בשנים האחרונות אנחנו רואים חלוקה באוכלוסיית מפתחי ה Web בין מתכנתים שמעדיפים להתמקצע בתחום ה HTML/CSS לבין מתכנתים שמעדיפים להתמקד ב JavaScript. שתי האופציות כמובן טובות וחשוב לזכור שלא חייבים להיות מומחים בהכל. במיוחד בעולם פיתוח ה Front End יש הרבה מקום לתתי התמחויות בנושאים השונים.