מה הם גיליונות סגנון מדורגים?
אתרי האינטרנט מורכבים ממספר חלקים בודדים, כולל תמונות, טקסט ומסמכים שונים. מסמכים אלה אינם כוללים רק דפים שניתן לקשר אליהם מדפים שונים, כגון קובצי PDF, אלא גם המסמכים המשמשים לבניית הדפים עצמם, כגון מסמכי HTML כדי לקבוע את המבנה של דף ו- CSS (גיליון סגנונות מדורגים) כדי להכתיב את מראה הדף. מאמר זה יהיה להתעמק CSS, כיסוי מה זה ואיפה הוא משמש כיום באתרי אינטרנט.
שיעור היסטוריה של CSS
CSS פותחה לראשונה בשנת 1997 כדרך מפתחי אינטרנט כדי להגדיר את המראה החזותי של דפי האינטרנט שהם היו יצירת. היא נועדה לאפשר לאנשי מקצוע באינטרנט להפריד בין התוכן והמבנה של קוד האתר לבין העיצוב החזותי, דבר שלא היה אפשרי לפני כן.
ההפרדה בין המבנה והסגנון מאפשרת ל- HTML לבצע יותר מהפונקציה שבה הוא התבסס במקור על הסימון של התוכן, ללא צורך לדאוג לתכנון ולפריסה של הדף עצמו, דבר הידוע בכינויו "המראה והתחושה" של הדף.
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 יכול להיות קשה יותר מאשר HTML רגיל לשלוט בו. CSS גם שינויים בדפדפנים באופן HTML באמת לא. ברגע שתתחיל להשתמש ב- CSS, עם זאת, תראה כי רתימת העוצמה של גיליונות סגנון ייתן לך גמישות לא יאומן איך פריסת דפי אינטרנט ולהגדיר את המראה והתחושה שלהם. לאורך הדרך, תוכלו לצבור "שקית של טריקים" של סגנונות וגישות שעבדו בשבילך בעבר ואשר ניתן לפנות שוב כמו שאתה בונה דפי אינטרנט חדשים בעתיד.
מאמר מקורי מאת ג'ניפר קרינין. בעריכת ג'רמי ג'יררד ב -7.5.17,