אתרים מורכבים ממספר חלקים בודדים, כולל תמונות, טקסט ומסמכים שונים. מסמכים אלה כוללים לא רק מסמכים שניתן לקשר אליהם מדפים שונים, כמו קבצי PDF, אלא גם את המסמכים המשמשים לבניית הדפים עצמם, כמו מסמכי HTML לקביעת מבנה הדף ומסמכי CSS (Cascading Style Sheet) כדי להכתיב את מראה הדף. מאמר זה יעמיק ב CSS ויסקר את מה זה ואיפה משתמשים בו באתרים כיום.
שיעור היסטוריה של CSS
CSS פותחה לראשונה בשנת 1997 כדרך של מפתחי אתרים להגדיר את המראה החזותי של דפי האינטרנט שהם יצרו. זה נועד לאפשר למקצוענים באינטרנט להפריד את התוכן ומבנה הקוד של אתר מהעיצוב החזותי, דבר שלא היה אפשרי לפני זמן זה.
הפרדת המבנה והסגנון מאפשרת ל- HTML לבצע יותר מהפונקציה עליה התבסס במקור - הסימון של תוכן, מבלי לדאוג לעיצוב ולפריסת הדף עצמו, דבר המכונה בדרך כלל "המראה והתחושה" של עמוד.
האבולוציה של CSS
CSS לא זכתה לפופולריות רק בסביבות שנת 2000, כאשר דפדפני האינטרנט החלו להשתמש ביותר מהיבטי הגופן והצבע הבסיסיים של שפת הסימון הזו. כיום, כל הדפדפנים המודרניים תומכים בכל CSS רמה 1, רוב CSS רמה 2, ואפילו ברוב ההיבטים של CSS רמה 3. כאשר CSS ממשיך להתפתח וסגנונות חדשים מוצגים, דפדפני האינטרנט החלו ליישם מודולים שמביאים תמיכה חדשה ב- CSS בדפדפנים אלה ומעניקים למעצבי אתרים כלי עיצוב חדשים וחזקים לעבודה עם.
בשנים האחרונות (הרבה שנים) היו מעצבי אתרים נבחרים שסירבו להשתמש ב- CSS עבור תכנון ופיתוח אתרים, אבל הנוהג הזה כמעט ולא נעלם מהענף כיום. CSS הוא כיום תקן בשימוש נרחב בעיצוב אתרים, והיית קשה למצוא מישהו שעובד בתעשייה כיום שלא היה לו לפחות הבנה בסיסית בשפה זו.
CSS הוא קיצור
כאמור, המונח CSS מייצג "גיליון סגנון מדורג". בואו נפרק את הביטוי הזה קצת כדי להסביר ביתר דיוק מה עושים המסמכים האלה.
המילה "גיליון סגנונות" מתייחסת למסמך עצמו (כמו HTML, קבצי CSS הם למעשה רק מסמכי טקסט שניתן לערוך עם מגוון תוכנות). דפי סגנון שימשו לעיצוב מסמכים במשך שנים רבות. הם המפרט הטכני לפריסה, בין אם היא מודפסת או מקוונת. מעצבי הדפסה השתמשו זמן רב בגיליונות סגנון על מנת להבטיח כי העיצובים שלהם מודפסים במדויק. גיליון סגנונות לדף אינטרנט משרת את אותה מטרה, אך עם פונקציונליות נוספת להוסיף גם לדפדפן האינטרנט כיצד לעבד את המסמך הנצפה. כיום, גיליונות סגנון CSS יכולים גם להשתמש שאילתות מדיה כדי לשנות את האופן שבו דף מחפש מכשירים וגדלי מסך שונים. זה חשוב להפליא מכיוון שהוא מאפשר לעבד מסמך HTML יחיד באופן שונה בהתאם למסך המשמש לגישה אליו.
אֶשֶׁד הוא החלק המיוחד באמת במונח "גיליון סגנונות מדורגים". דף סגנון אינטרנטי נועד לזרום דרך סדרת סגנונות בסדין זה, כמו נהר מעל מפל. המים בנהר פוגעים בכל סלעי המפל, אך רק אלה שבתחתית משפיעים בדיוק לאן יזרמו המים. הדבר נכון גם לגבי המפל בגיליונות סגנון אתרים.
גליונות סגנון מעוצבים מבטלים דפדפן ברירת מחדל של גיליונות סגנון
כל דף אינטרנט מושפע מגליון סגנון אחד לפחות, גם אם מעצב האינטרנט אינו מיישם סגנונות כלשהם. דף הסגנון הזה הוא גיליון הסגנון של סוכן המשתמש - ידועים גם כסגנונות ברירת המחדל שבהם ישתמש דפדפן האינטרנט להצגת דף אם אין הוראות אחרות. לדוגמא, כברירת מחדל היפר-קישורים מעוצבים בכחול והם מודגשים בקו תחתון. סגנונות אלה מגיעים מדף הסגנון המוגדר כברירת מחדל של דפדפן האינטרנט. אולם אם מעצב האינטרנט מספק הוראות אחרות, הדפדפן יצטרך לדעת לאילו הוראות יש עדיפות. לכל הדפדפנים יש סגנונות ברירת מחדל משלהם, אך רבים מאותם ברירות מחדל (כמו קישורי הטקסט הכחולים עם קו תחתון) משותפים בכל הדפדפנים והגרסאות העיקריות או ברובם.
לדוגמא אחרת של ברירת מחדל לדפדפן, בדפדפן האינטרנט שלנו, גופן ברירת המחדל הוא "Times New Roman"מוצג בגודל 16. כמעט אף אחד מהדפים שאנו מבקרים בתצוגה באותה משפחת גופנים ובגודל זה. הסיבה לכך היא שהמפל מגדיר כי גליונות הסגנון השני, שנקבעים על ידי המעצבים עצמם, יוגדרו מחדש גודל הגופן ומשפחה, דבר העוקף את ברירות המחדל של דפדפן האינטרנט שלנו. לכל גיליונות סגנון שתיצור עבור דף אינטרנט יהיו ספציפיים יותר מסגנונות ברירת המחדל של הדפדפן, ולכן ברירות מחדל אלה יחולו רק אם גיליון הסגנונות שלך לא יעקוף אותם. אם אתה רוצה שקישורים יהיו כחולים וקו תחתון, אינך צריך לעשות דבר מכיוון שזו ברירת המחדל, אך אם קובץ CSS של האתר שלך אומר שקישורים צריכים להיות ירוקים, צבע זה יעקוף את כחול ברירת המחדל. קו תחתון יישאר בדוגמה זו מכיוון שלא ציינת אחרת.
היכן משתמשים ב- CSS?
ניתן להשתמש ב- CSS גם כדי להגדיר כיצד דפי אינטרנט צריכים להיראות כאשר הם נצפים במדיה אחרת מאשר א דפדפן אינטרנט. לדוגמה, באפשרותך ליצור דף סגנון הדפסה שיגדיר את אופן הדפסת דף האינטרנט. מכיוון שלפריטים של דפי אינטרנט כמו כפתורי ניווט או טפסים לא יהיה שום מטרה בדף המודפס, ניתן להשתמש בגיליון סגנון הדפסה כדי "לכבות" אזורים אלה בעת הדפסת דף. אמנם לא ממש נהוג במקומות רבים, אך האפשרות ליצור דפי סגנון הדפסה היא עוצמתית ומושכת (שלנו ניסיון - רוב אנשי המקצוע באינטרנט לא עושים זאת פשוט מכיוון שהיקף התקציב של האתר אינו מצריך עבודה נוספת זו לעשות).
מדוע CSS חשוב?
CSS הוא אחד הכלים החזקים ביותר שמעצב אתרים יכול ללמוד מכיוון שאיתו תוכלו להשפיע על כל המראה החזותי של אתר. ניתן לעדכן במהירות גליונות סגנון כתובים היטב ולאפשר לאתרים לשנות את העדיפות החזותית ב- מסך, אשר בתורו מראה ערך ומיקוד למבקרים, מבלי שיהיה צורך לבצע שינויים ב- בְּסִיסִי סימון HTML.
האתגר העיקרי של CSS הוא שיש לא מעט ללמוד - וכשהדפדפנים משתנים מדי יום, מה עובד טוב היום לא יכול להיות הגיוני מחר כאשר סגנונות חדשים נהנים מתמיכה ואחרים נושרים או נופלים לטובת מסיבה אחת או אַחֵר.
עקומת הלמידה של CSS שווה את זה
מכיוון ש- CSS יכול לזרז ולשלב, ובהתחשב כיצד דפדפנים שונים יכולים לפרש ולהטמיע את ההוראות באופן שונה, CSS יכול להיות קשה יותר ללמוד מאשר HTML רגיל. CSS משתנה גם בדפדפנים באופן ש- HTML ממש לא. ברגע שתתחיל להשתמש ב- CSS, עם זאת, תראה כי רתימת כוחם של גיליונות סגנון תיתן לך גמישות מדהימה באופן פריסת דפי האינטרנט והגדרת המראה והתחושה שלהם. לאורך הדרך תוכלו לצבור "שקית טריקים" של סגנונות וגישות שעבדו עבורכם בעבר ואליהם תוכלו לפנות שוב תוך כדי לבנות דפי אינטרנט חדשים בעתיד.