מעצבת אתרים אישה בעבודה על המחשב שלה במשרד מודרני
קרדיט תמונה: monkeybusinessimages/iStock/Getty Images
המפרט המקורי של Cascading Style Sheets, כמו גם גרסה הרבה יותר עדכנית שלו ב-CSS3, הם טכנולוגיות המשמשות לשיפור ועיצוב דפי HTML. CSS תוכנן בתחילה לטפל בשכבת המצגת של דף אינטרנט בצורה יעילה יותר מאשר עיצוב עם HTML, שמעולם לא נועד להתמודד עם הבנייה המורכבת של האינטרנט העכשווי. מכיוון ש-CSS2 הוא הרחבה מאומצת אוניברסלית של CSS1, המונח CSS ללא מספר מרמז על הכללת CSS2. מפרט ה-CSS3 עדיין בפיתוח החל מיולי 2014, כך שמפתחי אינטרנט צריכים לשקול תמיכה בתכונות משתנה בין הדפדפנים.
CSS3 תואם לאחור עם CSS
CSS3 הוא עדכון ל-CSS2 ששומר על תאימות לכל התכונות של CSS -- CSS3 אינו מבטל אף אחד מקוד ה-CSS. קוד CSS3 נועד לגרום לדפי אינטרנט להיראות טוב יותר ולהיטען מהר יותר וכן להפחית את זמן הפיתוח לבניית דפים בדפדפן של המשתמש. CSS3 הופך את עיצוב אתרים להסתמך פחות על קובצי תמונה עבור אלמנטים של עיצוב עמודים ומצמצם בקשות להעברת קבצים וזמן הורדה על ידי שימוש בפחות תמונות. CSS1 התמקד בעיצוב מראה, בעוד ש-CSS2 הוסיף יכולות מיקום עבור טקסט ואובייקטים. גרסאות דפדפן ישנות יותר כמו IE 9 וקודמתה אינן תומכות באופן נרחב בתכונות הנוספות של CSS3, אשר עשויות לדרוש זמן פיתוח נוסף כדי לשמור על קוד CSS fall-back.
סרטון היום
CSS3 מוסיף פינות מעוגלות ושיפועים
לפני ה-CSS3, מפתחי אינטרנט היו צריכים לעצב קובצי תמונה כדי להוסיף דברים כמו פינות מעוגלות לגבולות מבניים ושיפועי תמונות רקע; CSS3 כולל תכונות דומות שניתן להוסיף עם כמה שורות קוד. ב-CSS, מפתח אינטרנט צריך לעצב גבול או שיפוע, להעלות אותו לשרת התמונות, למקם את התמונה בדף ולהשתמש ב-CSS כדי למקם נכון את הגבול. ב-CSS3, מפתח האינטרנט יכול להשיג משהו דומה עם קוד כמו ".roundBorder{border-radius: 10px;}". מעברי רקע הם קצת יותר מסובכים ודורשים קוד שונה עבור דפדפנים שונים. לדוגמה, שיפוע לבן-שחור עבור Chrome ו-IE משתמש בקוד כמו ".gradBG{background: liner-gradient (לבן, שחור);}".
CSS3 מוסיף תכונות אנימציה ואפקטי טקסט
ל-CSS3 יש קומץ תכונות שאינן קיימות ב-CSS כדי לשפר את מראה רכיבי הדף שלך. עם CSS3, מפתחי אינטרנט יכולים להוסיף צל טקסט לטקסט כדי להקל על הקריאה או להוסיף כישרון ויזואלי ויכולים לאלץ מעברי שורות בתוך מילים ארוכות יותר כדי לגרום להם להשתלב בתוך עמודות עם גלישת מילים. לפני CSS3, מפתחי אינטרנט היו צריכים לקודד אנימציה בשפות סקריפטים כמו JavaScript ו-jQuery; CSS3 מוסיף מספר תכונות אנימציה לשכבת העיצוב. ה-W3C עדיין עובד על תקן אנימציות אינטרנט כדי לפתור בעיות תאימות בין טכניקות האנימציה השונות.
CSS3 מגדיר עמודות טקסט
CSS3 מוסיף את היכולת לפצל קטעי טקסט למספר עמודות לקריאה כמו עיתון. במפרט CSS2, מפתחי אינטרנט מתקשים לבנות קטעי טקסט מרובי עמודות מכיוון שהתקן אינו מצויד לפיצול אוטומטי של טקסט. במיוחד עם אתרים הכוללים עיצוב רספונסיבי, טכניקת פיתוח שמסדרת מחדש ומשנה את גודל התוכן על סמך ה בצפייה ברזולוציית המסך של המכשיר, אנשים עם צגים גדולים יותר עשויים להתקשות לקרוא שורות טקסט המשתרעות על פני מָסָך.
