ההבדל בין CSS2 ו- CSS3

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

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

בוחרי CSS3 חדשים

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

ישנם שלושה בוחרי מאפיינים חדשים:

התאמות תחילת מאפיין בדיוק:
```
אלמנט [foo ^ = "bar"]
```
לאלמנט תכונה הנקראת foo שמתחילה ב"סרגל "למשל.
התאמת סיום תכונות בדיוק:
```
אלמנט [foo $ = "bar"]
```
לאלמנט תכונה שנקראת foo שמסתיימת ב"סרגל "למשל.
המאפיין מכיל את ההתאמה:
```
אלמנט [foo * = "bar"]
```
לאלמנט יש תְכוּנָה שקוראים לו foo המכיל את המחרוזת "סרגל".

16 שיעורי פסאודו חדשים הוצגו:

instagram viewer

:שורש
- אלמנט הבסיס של המסמך.
: nth-child (n)
- השתמש באפשרות זו כדי להתאים אלמנטים מדויקים של ילדים או השתמש במשתנים כדי לקבל התאמות לסירוגין.
: ילד אחרון (n)
- התאם אלמנטים מדויקים של ילדים בספירה מהמעלה האחרונה.
: nth מהסוג (n)
- התאם אלמנטים בין אחים באותו שם לפניו בעץ המסמך.
: nth-last-of-type (n)
- התאם אלמנטים בין אחים עם אותו שם הספירה מלמטה.
:ילד אחרון
- התאם את האחרון אלמנט ילד של ההורה.
: ראשון מסוג
- התאם את אלמנט האחים הראשון מסוג זה.
: אחרון מהסוג
- התאם את האלמנט האחרון של האחים מאותו סוג.
:ילד יחיד
- התאם את האלמנט שהוא הילד היחיד של ההורה שלו.
: רק מסוג
- התאם את האלמנט שהוא היחיד מסוגו.
:ריק
- התאם את האלמנט שאין לו ילדים (כולל צמתים טקסטיים).
:יַעַד
- התאם אלמנט שהוא היעד של ה- URI המפנה.
: מופעלת
- התאם את האלמנט כשהוא מופעל.
:נָכֶה
- התאם את האלמנט כשהוא מושבת.
:בָּדוּק
- התאם את האלמנט כשהוא מסומן (לחצן בחירה או תיבת סימון).
:לא ים)
- התאם כאשר האלמנט אינו תואם את הפשוט סלקטורים.

יש קומבינטור חדש אחד:

אלמנט A ~ אלמנט B.
- התאם כאשר אלמנט B עוקב איפשהו אחרי אלמנט A, לאו דווקא באופן מיידי.

נכסים חדשים

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

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

תמונות רקע מרובות

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

מאפייני סגנון רקע חדשים

יש גם כמה מאפייני רקע חדשים ב- CSS3:

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

שינויים במאפייני סגנון הרקע הקיימים

יש גם כמה שינויים במאפייני סגנון הרקע הקיימים:

חזור על רקע
- ישנם שני ערכים חדשים עבור מאפיין זה - מֶרחָב ו עָגוֹל. החלל מרווח את התמונה המרוצפת באופן שווה בתוך הקופסה מבלי להחתך אותה. עגול מגדיל מחדש את תמונת הרקע כך שהיא תארז מספר שלם של פעמים בתיבה.
מצורף רקע
- ערך חדש "מקומי" נוסף כך שהרקע יגלול עם תוכן האלמנט כאשר לאלמנט הזה יש סרגל גלילה.
רקע כללי
- מאפיין קצרנות הרקע מוסיף בתכונות הגודל והמקור.

מאפייני גבול CSS3

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

מאפיינים חדשים בסגנון הגבול

ישנם כמה מאפייני גבול חדשים ב- CSS3:

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

מאפייני CSS3 נוספים הקשורים לגבולות ורקעים

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

חדש צל קופסא המאפיין מוסיף צללים לרכיבי התיבה.

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

הגדר את מספר והרוחב של העמודות

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

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

פערים וכללים של עמודות CSS3

פערים וכללים ממוקמים בין העמודות באותו תרחיש מרובה עמודות. פערים ידחיקו את העמודות, אך הכללים אינם תופסים מקום. אם כלל עמודות רחב יותר מהפער שלו, הוא יחפוף עמודות סמוכות. ישנם חמש מאפיינים חדשים לכללי עמודה ולפערים:

פער העמודים
- מגדיר את רוחב הפערים בין העמודות.
עמוד-כלל-צבע
- מגדיר את צבע הכלל.
סגנון כלל עמודות
- מגדיר את סגנון הכלל (מוצק, מנוקד, כפול וכו ').
רוחב כלל עמודות
- מגדיר את רוחב הכלל.
כלל עמודות
- מאפיין קצרצר המגדיר את שלושת מאפייני כלל העמודות בבת אחת.

הפסקות עמודות CSS3, עמודות משתרעות ומילוי עמודות

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

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

מילוי עמודות מחליט כמה תוכן יהיה בכל עמודה. עמודות מאוזנות מנסות להכניס את אותה כמות התוכן בכל עמודה בעוד ש- Auto פשוט מזרים את התוכן פנימה עד שהעמודה מלאה ואז עוברת לעמוד הבא.

תכונות נוספות ב- CSS3 שאינן כלולות ב- CSS2

יש הרבה תכונות נוספות ב- CSS3 שלא היו קיימות ב- CSS2, כולל:

מודול פריסת תבניות CSS ומודול מיקום רשת CSS3: יצירת רשתות עם CSS.
מודול טקסט CSS3: מתאר טקסט ואפילו צור צללים עם CSS.
מודול צבע CSS3: עכשיו עם אטימות.
שינויים במודל התיבה: כולל א אוֹהֶל גָדוֹל נכס שמתנהג כמו תג IE.
מודול ממשק משתמש CSS3: נותן לך סמנים חדשים, תגובות לפעולות, שדות נדרשים ואפילו גודל של אלמנטים.
שאילתות מדיה: שאילתות מדיה מאפשרים לך גמישות רבה יותר בעת הגדרת האופן שבו יש להשתמש בגיליון סגנונות. לדוגמה, תוכל להגדיר גיליון סגנון המיועד רק למכשירי כף יד שיש להם תצוגה גדולה מ -20 מטר.
מודול רובי CSS3: מספק תמיכה בשפות המשתמשות באודם טקסטואלי לביאור מסמכים.
מודול מדיה עמודת CSS3: לקבלת תמיכה רבה יותר בתקשורת עמוסית (נייר, שקפים וכו ').
תוכן שנוצר: הפעלת כותרות עליונות ותחתונות, הערות שוליים ותוכן אחר שנוצר באופן תכנותי, במיוחד עבור מדיה בדף.
מודול דיבור CSS3: שינויים ב- CSS השמיעתי.