במדריך המקיף הזה בנושא תכונות של כלי הפיתוח ל-Chrome שקשורות לתצוגה ולשינוי של שירות CSS תמצאו מידע על תהליכי עבודה חדשים.
למידע בסיסי, אפשר לעיין במאמר הצגה ושינוי של CSS.
בחירת רכיב
בחלונית רכיבים של כלי הפיתוח ניתן להציג או לשנות את ה-CSS של רכיב אחד בכל פעם.
בצילום המסך, הרכיב h1
שמודגש בכחול בעץ DOM הוא הרכיב שנבחר.
בצד שמאל, הסגנונות של הרכיב מוצגים בכרטיסייה סגנונות. בצד ימין, הרכיב מודגש באזור התצוגה, אבל רק כי העכבר עובר מעליו ב-DOM Tree.
למדריך מפורט בנושא הצגת ה-CSS של רכיב.
יש הרבה דרכים לבחור רכיב:
- באזור התצוגה, לוחצים לחיצה ימנית על הרכיב ובוחרים באפשרות בדיקה.
- בכלי הפיתוח, לוחצים על בחירת רכיב או מקישים על Command+Shift+C (Mac) או על Control+Shift+C (Windows או Linux), ואז לוחצים על הרכיב באזור התצוגה.
- בכלי הפיתוח, לוחצים על הרכיב בעץ ה-DOM.
- ב-DevTools, מריצים שאילתה כמו
document.querySelector('p')
ב-Console, לוחצים לחיצה ימנית על התוצאה ובוחרים באפשרות Reveal in Elements panel.
הצגת שירות ה-CSS
תוכלו להשתמש בכרטיסיות רכיבים > סגנונות ומחושב כדי להציג כללי CSS ולאבחן בעיות ב-CSS.
ניווט באמצעות קישורים
בכרטיסייה סגנונות מוצגים קישורים במקומות שונים למקומות אחרים, לרבות, אך לא רק:
- לצד כללי CSS, לגיליונות סגנונות ומקורות CSS. קישורים כאלה פותחים את החלונית מקורות. אם גיליון הסגנונות מוקטן, צריך לעיין במאמר הגדרת קובץ מוקטן כקריא.
- בקטעים עבר בירושה מ ... לרכיבי הורה.
- בקריאות של
var()
, להצהרות של מאפיין מותאם אישית. - בנכסים מקוצרים של
animation
, ל-@keyframes
. - קישורים למידע נוסף בהסברים הקצרים שבמסמכי התיעוד.
- ועוד.
הנה כמה מהם מודגשים:
הקישורים עשויים להיות מעוצבים באופן שונה. אם אתם לא בטוחים אם קישור מסוים הוא קישור, נסו ללחוץ עליו כדי לגלות.
הצגת הסברים קצרים עם מסמכי תיעוד, ספציפיות וערכי מאפיינים מותאמים אישית של CSS
רכיבים > סגנונות: כאן מוצגים הסברים קצרים עם מידע שימושי כשמעבירים את העכבר מעל רכיבים ספציפיים.
הצגת התיעוד של שירות CSS
כדי לראות הסבר קצר עם תיאור CSS קצר, מעבירים את העכבר מעל שם המאפיין בכרטיסייה סגנונות.
לוחצים על מידע נוסף כדי לעבור אל הפניה ל-CSS של MDN בנכס הזה.
כדי להשבית את ההסבר הקצר, מסמנים את האפשרות לא להציג.
כדי להפעיל אותם מחדש, צריך לבדוק את הגדרות > העדפות > רכיבים > הצגת הסבר קצר על מסמכי ה-CSS.
ספציפית של בורר התצוגה
מעבירים את העכבר מעל בורר כדי לראות הסבר קצר עם המשקל של הספציפיות שלו.
הצגת הערכים של מאפיינים מותאמים אישית
מעבירים את העכבר מעל --custom-property
כדי לראות את הערך שלו בהסבר קצר.
הצגת שירותי CSS לא חוקיים, שמבוטלים, לא פעילים ואחרים
בכרטיסייה סגנונות ניתן לזהות סוגים רבים של בעיות ב-CSS ומדגישה אותן בדרכים שונות.
ראו הסבר על CSS בכרטיסייה 'סגנונות'.
הצגה רק של ה-CSS שמוחל בפועל על רכיב
בכרטיסייה סגנונות מוצגים כל הכללים שחלים על רכיב מסוים, כולל הצהרות שהשתנו. אם אתם לא רוצים להשתמש בהצהרות שבוטלו, תוכלו להשתמש בכרטיסייה Computed כדי לראות רק את ה-CSS שמוחל בפועל על רכיב.
- בחירת רכיב.
- עוברים לכרטיסייה Computed בחלונית Elements.
מסמנים את התיבה הצגת הכול כדי לראות את כל הנכסים.
אפשר לעיין בקטע הסבר על CSS בכרטיסייה 'מחושב'.
הצגה של מאפייני CSS בסדר אלפביתי
משתמשים בכרטיסייה Computed. למידע נוסף, אפשר לעיין בקטע צפייה רק ב-CSS שמוחל בפועל על רכיב.
הצגת מאפייני CSS שעברו בירושה
מסמנים את התיבה Show All בכרטיסייה Computed. למידע נוסף, ראו הצגה רק של ה-CSS שחל בפועל על רכיב.
לחלופין, גוללים בכרטיסייה סגנונות ומוצאים קטעים בשם Inherited from <element_name>
.
צפייה בכללים הכלליים ל-CSS
כללי הקביעה הם הצהרות CSS שמאפשרות לכם לשלוט בהתנהגות של ה-CSS. Elements > Styles (סגנונות) מציג את הכללים הבאים בקטעים ייעודיים:
הצגת @property
כללי
ה-CSS ברמת הכלל @property
מאפשר להגדיר מאפייני CSS מותאמים אישית באופן מפורש ולרשום אותם בגיליון סגנונות, בלי להפעיל JavaScript.
העבר את העכבר מעל שם המאפיין הזה בכרטיסייה סגנונות כדי לראות הסבר קצר עם ערך המאפיין, התיאורים שלו וקישור לרישום שלו בקטע @property
הניתן לכיווץ, בתחתית הכרטיסייה סגנונות.
כדי לערוך כלל @property
, לוחצים לחיצה כפולה על השם או על הערך שלו.
הצגת @supports
כללי
הכרטיסייה סגנונות מציגה את כללי @supports
ה-CSS, אם הם חלים על רכיב. לדוגמה, בודקים את הרכיב הבא:
אם הדפדפן תומך בפונקציה lab()
, הרכיב ירוק. אחרת, הוא יופיע בסגול.
הצגת @scope
כללי
בכרטיסייה סגנונות תוכלו לראות את כללי ה-CSS @scope
אם הם חלים על רכיב מסוים.
הכללים החדשים מסוג @scope
הם חלק מהמפרט של רמת ירושה ומדורגים ב-CSS ברמת 6. הכללים האלה מאפשרים לכם להגדיר היקף לסגנונות CSS, במילים אחרות, להחיל סגנונות באופן מפורש על רכיבים ספציפיים.
אפשר להציג את הכלל @scope
בתצוגה המקדימה הבאה:
- בודקים את הטקסט בכרטיס בתצוגה המקדימה.
- בכרטיסייה סגנונות, מאתרים את הכלל
@scope
.
בדוגמה הזו, הכלל @scope
מבטל את ההצהרה הגלובלית background-color
של CSS לכל הרכיבים <p>
שבתוך רכיבים עם מחלקה card
.
כדי לערוך את הכלל @scope
, לוחצים עליו לחיצה כפולה.
הצגת @font-palette-values
כללי
@font-palette-values
CSS at-rule מאפשר לכם להתאים אישית את ערכי ברירת המחדל של הנכס font-palette
. רכיבים > סגנונות מציג את הכלל הזה בקטע ייעודי.
הצג את הקטע @font-palette-values
בתצוגה המקדימה הבאה:
- בודקים את שורת הטקסט השנייה בתצוגה המקדימה.
- בקטע סגנונות, מאתרים את הקטע
@font-palette-values
.
בדוגמה הזו, הערכים של לוח הגופנים --New
מחליפים את ערכי ברירת המחדל של הגופנים הצבעוניים.
כדי לערוך את הערכים המותאמים אישית, לוחצים עליהם לחיצה כפולה.
הצגת @position-try
כללי
כלל ה-CSS @position-try
יחד עם המאפיין position-try-options
מאפשר להגדיר מיקומי עוגן חלופיים לרכיבים. מידע נוסף זמין במאמר חדש: API למיקום עוגן ב-CSS.
רכיבים > סגנונות מקודדים position-try-options
ערכים ומקשרים כל אפשרות לקטע @position-try --name
ייעודי.
אפשר לבדוק את הערכים של position-try-options
ואת הקטעים @position-try
בתצוגה המקדימה הבאה:
- בתצוגה המקדימה, פותחים את תפריט המשנה, כלומר לוחצים על החשבון שלך ואז על STOREFRONT.
- בודקים את הרכיב עם
id="submenu"
בתצוגה המקדימה. - בקטע סגנונות, מאתרים את המאפיין
position-try-options
ולוחצים על ערך ה---bottom
שלו. הכרטיסייה סגנונות מעבירה אותך לקטע@position-try
המתאים.
כדי לערוך ערכים בקטע, לוחצים עליהם לחיצה כפולה.
הצגת מודל קופסה של רכיב
כדי להציג את מודל התיבה של רכיב, עבור לכרטיסייה סגנונות ולחץ על הלחצן הצגת סרגל הצד בסרגל הפעולות.
כדי לשנות ערך, לוחצים עליו לחיצה כפולה.
חיפוש וסינון ב-CSS של רכיב
בכרטיסיות Styles ו-Computed תוכלו לחפש מאפיינים או ערכים ספציפיים ב-CSS באמצעות התיבה Filter.
כדי לחפש גם נכסים שעברו בירושה בכרטיסייה Computed, מסמנים את התיבה Show All.
כדי לנווט בכרטיסייה Computed , אפשר לקבץ את הנכסים המסוננים בקטגוריות הניתנות לכיווץ, על ידי סימון האפשרות Group.
אמולציה של דף במיקוד
כשמעבירים את המיקוד מהדף לכלי פיתוח, רכיבים מסוימים של שכבות-על מוסתרים באופן אוטומטי אם הם מופעלים על ידי מיקוד. לדוגמה, רשימות נפתחות, תפריטים או בוררי תאריכים. בעזרת האפשרות check_box אמול של דף שנמצא במוקד אפשר לנפות באגים ברכיב כזה כאילו הוא נמצא במוקד.
ניתן לנסות לחקות דף שמתמקד בדף ההדגמה הזה:
- התמקדות ברכיב הקלט. רכיב נוסף מופיע מתחתיו.
- פותחים את כלי הפיתוח. החלון של כלי הפיתוח נמצא עכשיו בפוקוס במקום הדף, ולכן הרכיב נעלם שוב.
- ברכיבים > סגנונות, לחץ על :hov, סמן את check_box הדמיה של דף במיקוד וודא שרכיב הקלט נבחר. עכשיו אפשר לבדוק את הרכיב שמתחתיו.
אותה אפשרות מופיעה גם בחלונית עיבוד.
החלפת מצב פסאודו-מחלקה
כדי להפעיל או להשבית סיווג פסאודו-סיווג, כמו :active
, :focus
, :focus-within
, :target
, :hover
, :visited
או focus-visible
:
- בחירת רכיב.
- בחלונית רכיבים, עוברים לכרטיסייה סגנונות.
- לוחצים על :hov.
- מסמנים את הפסאודו-סיווג שרוצים להפעיל.
באזור התצוגה אפשר לראות שכלי הפיתוח מחילים את ההצהרה background-color
על הרכיב, למרות שלא מעבירים מעליו את העכבר.
תוכלו לעיין במדריך האינטראקטיבי איך מוסיפים פסאודו-מצב לכיתה.
הצגת פסאודו-אלמנטים של ההדגשה שעברו בירושה
פסאודו-אלמנטים מאפשרים לעצב חלקים ספציפיים של אלמנטים. הדגשה של רכיבי פסאודו-רכיבים הם חלקים במסמך עם סטטוס 'נבחר', והם מעוצבים כ'מודגשים' כדי לציין את הסטטוס הזה למשתמש. לדוגמה, פסאודו-רכיבים כאלה הם ::selection
, ::spelling-error
, ::grammar-error
ו-::highlight
.
כפי שצוין במפרט, כשיש סתירה בין כמה סגנונות, הדירוג קובע מהו הסגנון המנצח.
כדי להבין טוב יותר את הירושה והעדיפות של הכללים, אפשר להציג את רכיבי הפסאודו-ההדגשה שעברו בירושה:
-
ירשתי את הסגנון של פסאודו-אלמנט ההדגשה של ההורה שלי. בחרו אותי!
צריך לבחור חלק מהטקסט למעלה.
בכרטיסייה סגנונות, גוללים למטה כדי למצוא את הקטע
Inherited from ::selection pseudo of...
.
הצגת שכבות מדורגות
דירוג שכבות מאפשר שליטה מפורשת יותר על קובצי ה-CSS כדי למנוע התנגשויות של ספציפיות של סגנונות. האפשרות הזו שימושית ל-codebase גדולים, למערכות עיצוב ולניהול סגנונות של צד שלישי באפליקציות.
כדי להציג שכבות מדורגות, inspect את הרכיב הבא ופותחים את רכיבים > סגנונות.
בכרטיסייה סגנונות, מציגים את 3 השכבות בשכבות ואת הסגנונות שלהן: page
, component
ו-base
.
כדי להציג את סדר השכבות, לוחצים על שם השכבה או על הלחצן הצגה או החלפה של תצוגת שכבות CSS.
לשכבה page
יש את הספציפיות הגבוהה ביותר, ולכן הרקע של האלמנט ירוק.
הצגת דף במצב הדפסה
כדי להציג דף במצב הדפסה:
- פותחים את תפריט הפקודות.
- מתחילים להקליד
Rendering
ובוחרים באפשרותShow Rendering
. - בתפריט הנפתח Emulate CSS Media בוחרים באפשרות הדפסה.
הצגת שירותי CSS שנעשה בהם שימוש וגם שלא נעשה בהם שימוש בכרטיסייה 'כיסוי'
בכרטיסייה 'כיסוי' תוכלו לראות באיזה שירות CSS הדף משתמש בפועל.
- לוחצים על Command+Shift+P (Mac) או על Control+Shift+P (Windows, Linux, ChromeOS) כשכלי הפיתוח מתמקדים כדי לפתוח את תפריט הפקודה.
מתחילים להקליד
coverage
.בוחרים באפשרות הצגת כיסוי. הכרטיסייה 'כיסוי' מופיעה.
לוחצים על טעינה מחדש. הדף נטען מחדש ובכרטיסייה כיסוי מוצגת סקירה כללית של כמות ה-CSS (ו-JavaScript) מכל קובץ שהדפדפן טוען.
ירוק מייצג CSS משומש. אדום מייצג CSS שלא נמצא בשימוש.
ניתן ללחוץ על קובץ CSS כדי לראות פירוט של כל שירות CSS בתצוגה המקדימה למעלה, בפירוט של כל שירות CSS.
בצילום המסך, שורות 55 עד 57 ו-65 עד 67 מתוך
devsite-google-blue.css
לא בשימוש, ואילו שורות 59 עד 63 מופיעות.
אילוץ מצב תצוגה מקדימה של הדפסה
מידע נוסף מופיע בקטע אילוץ של כלי הפיתוח לעבור למצב תצוגה מקדימה של הדפסה.
העתקת CSS
מתפריט נפתח אחד בכרטיסייה סגנונות, אפשר להעתיק כללי CSS, הצהרות, מאפיינים, ערכים נפרדים.
בנוסף, אפשר להעתיק מאפייני CSS בתחביר של JavaScript. האפשרות הזו שימושית אם אתם משתמשים בספריות CSS-in-JS.
כדי להעתיק CSS:
- בחירת רכיב.
- בכרטיסייה רכיבים > סגנונות, לחץ לחיצה ימנית על מאפיין CSS.
בוחרים באחת מהאפשרויות הבאות מהתפריט הנפתח:
- להעתקת ההצהרה. מעתיק את הנכס ואת הערך שלו בתחביר CSS:
css property: value;
- העתקת הנכס. העתקת השם ב-
property
בלבד. - העתקת הערך. מעתיק רק את
value
. - העתקת הכלל. מעתיק את כלל ה-CSS כולו:
css selector[, selector] { property: value; property: value; ... }
- העתקת ההצהרה כ-JS. מעתיק את הנכס ואת הערך שלו בתחביר של JavaScript:
js propertyInCamelCase: 'value'
- העתקת כל ההצהרות. מעתיק את כל המאפיינים ואת הערכים שלהם בכלל ה-CSS:
css property: value; property: value; ...
העתקת כל ההצהרות כ-JS. מעתיק את כל המאפיינים ואת הערכים שלהם בתחביר JavaScript: ```js propertyInCamelCase: 'value', propertyInCamelCase: 'value', ...
מעתיקים את כל שינויי ה-CSS. השינויים שתבצעו בכרטיסייה סגנונות יועתקו לכל ההצהרות.
הצגת הערך המחושב. המערכת תעביר אתכם לכרטיסייה מחושבים.
- להעתקת ההצהרה. מעתיק את הנכס ואת הערך שלו בתחביר CSS:
שינוי CSS
קטע זה מפרט את כל הדרכים שבהן ניתן לשנות CSS דרך רכיבים > סגנונות.
בנוסף, אפשר:
הוספה של הצהרת CSS לרכיב
מכיוון שסדר ההצהרות משפיע על הסגנון של רכיב, אפשר להוסיף הצהרות בדרכים שונות:
- הוספת הצהרה בתוך שורה. זהה להוספת המאפיין
style
ל-HTML של האלמנט. - הוספת הצהרה לכלל סגנון.
באיזה תהליך עבודה כדאי להשתמש? ברוב התרחישים, סביר להניח שתרצו להשתמש בתהליך העבודה של ההצהרה המוטבעת. להצהרות בתוך השורה יש ספציפיות גבוהה יותר מהצהרות חיצוניות, ולכן תהליך העבודה בתוך השורה מבטיח שהשינויים ייכנסו לתוקף ברכיב כפי שציפיתם. למידע נוסף על ספציפיות, קראו את המאמר סוגי סלקטורים.
אם אתם מבצעים ניפוי באגים בסגנונות של רכיב מסוים, ואתם צריכים לבדוק באופן ספציפי מה קורה כשמוגדרת הצהרה במקומות שונים, תוכלו להשתמש בתהליך העבודה האחר.
הוספת הצהרה בתוך שורה
כדי להוסיף הצהרה בתוך השורה:
- בחירת רכיב.
- בכרטיסייה סגנונות, לוחצים בין הסוגריים המרובעים של הקטע element.style. הסמן מתמקד במסמך, וכך מאפשר לך להזין טקסט.
- מזינים שם לנכס ומקישים על Enter.
מזינים ערך חוקי לנכס ומקישים על Enter. ב-DOM Tree אפשר לראות שהמאפיין
style
נוסף לרכיב.בצילום המסך, המאפיינים
margin-top
ו-background-color
הוחלו על הרכיב שנבחר. ב-DOM Tree ניתן לראות את ההצהרות משתקפות במאפייןstyle
של הרכיב.
הוספת הצהרה לכלל סגנון
כדי להוסיף הצהרה לכלל סגנון קיים:
- בחירת רכיב.
- בכרטיסייה סגנונות, לוחצים בין הסוגריים של כלל הסגנון שאליו רוצים להוסיף את ההצהרה. הסמן מתמקד ומאפשר לך להזין טקסט.
- מזינים שם לנכס ומקישים על Enter.
- מזינים ערך חוקי לנכס ומקישים על Enter.
בצילום המסך, כלל סגנון מקבל את הצהרת border-bottom-style:groove
החדשה.
שינוי השם או הערך של ההצהרה
כדי לשנות הצהרה, לוחצים לחיצה כפולה על השם או על הערך שלה. במאמר שינוי ערכים מספריים באמצעות מקשי קיצור מוסבר איך מקשי קיצור יכולים להגדיל או להקטין במהירות את הערך ביחידות 0.1, 1, 10 או 100 יחידות.
שינוי ערכים מספריים באמצעות מקשי קיצור
כשעורכים ערך מספרי של הצהרה, למשל font-size
, אפשר להשתמש במקשי הקיצור הבאים כדי להגדיל את הערך בסכום קבוע:
- Option+Up (Mac) או Alt+Up (Windows, Linux) להגדלה ב-0.1.
- למעלה כדי לשנות את הערך ב-1, או ב-0.1 אם הערך הנוכחי הוא בין 1- ל-1.
- Shift+Up להגדלה ב-10.
- Shift+Command+Up (ב-Mac) או Control+Shift+Page Up (Windows, Linux) כדי להגדיל את הערך ב-100.
גם הפחתת המידע פועלת. פשוט מחליפים כל מכונה של Up שהוזכרה קודם בקידוד Down.
שינוי ערכי האורך
אתם יכולים להשתמש בסמן כדי לשנות כל מאפיין לאורך, כמו רוחב, גובה, מרווח פנימי, שוליים או גבול.
כדי לשנות את יחידת האורך:
- מציבים את סמן העכבר מעל שם היחידה ושימו לב שהוא מסומן בקו תחתון.
לוחצים על שם היחידה כדי לבחור יחידה מהתפריט הנפתח.
כדי לשנות את ערך האורך:
- מציבים את סמן העכבר מעל הערך של היחידה ושימו לב שהסמן משתנה לחץ אופקי כפול עם ראש.
כדי להגדיל או להקטין את הערך, גוררים אותו לרוחב.
כדי לשנות את הערך ב-10, מחזיקים את המקש Shift כשגוררים.
הוספת מחלקה לרכיב
כדי להוסיף מחלקה לרכיב:
- בוחרים את הרכיב ב-DOM Tree.
- לוחצים על .cls.
- מזינים את שם הכיתה בתיבה הוספת כיתה חדשה.
- הקישו Enter.
אמולציה של העדפות העיצוב הבהיר והעיצוב הכהה והפעלת מצב כהה אוטומטי
כדי להפעיל או להשבית מצב כהה אוטומטי או לחקות את ההעדפה של המשתמש לעיצוב בהיר או כהה:
- בכרטיסייה Elements > סגנונות, לוחצים על החלפת אמולציות של רינדור נפוץ.
בוחרים אחת מהאפשרויות הבאות מהרשימה הנפתחת:
- prefers-color-scheme: light (בהיר). מציין שהמשתמש מעדיף את העיצוב הבהיר.
- prefers-color-scheme: כהה. מציין שהמשתמש מעדיף את העיצוב הכהה.
- מצב כהה אוטומטי. הצגת הדף במצב כהה גם אם לא הטמעתם אותו. בנוסף, המערכת מגדירה את
prefers-color-scheme
ל-dark
באופן אוטומטי.
התפריט הנפתח הזה הוא קיצור דרך לאפשרויות של אמולציית מדיה של CSS prefers-color-scheme
והפעלת מצב כהה אוטומטי בכרטיסייה רינדור.
החלפת מצב בכיתה
כדי להפעיל או להשבית מחלקה ברכיב:
- בוחרים את הרכיב ב-DOM Tree.
- פותחים את הקטע מחלקות של רכיבים. למידע נוסף, ראו הוספת מחלקה לרכיב. מתחת לתיבה Add New Class (הוספת מחלקה חדשה) מופיעות כל המחלקות שחלות על הרכיב הזה.
- מסמנים את התיבה ליד הכיתה שרוצים להפעיל או להשבית.
הוספת כלל סגנון
כדי להוסיף כלל סגנון חדש:
- בחירת רכיב.
- לחץ על כלל סגנון חדש . כלי הפיתוח מוסיף כלל חדש מתחת לכלל element.style.
בצילום המסך, כלי הפיתוח מוסיפים את כלל הסגנון h1.devsite-page-title
אחרי שלוחצים על כלל סגנון חדש.
בחירת גיליון הסגנונות שאליו ברצונך להוסיף כלל
כאשר מוסיפים כלל סגנון חדש, לוחצים לחיצה ארוכה על כלל סגנון חדש כדי לבחור לאיזה גיליון סגנונות להוסיף את כלל הסגנון.
החלפת מצב בהצהרה
כדי להפעיל או להשבית הצהרה אחת:
- בחירת רכיב.
- בכרטיסייה סגנונות, מעבירים את העכבר מעל הכלל שמגדיר את ההצהרה. תיבות סימון מופיעות ליד כל הצהרה.
- מסמנים את התיבה שליד ההצהרה או מבטלים את הסימון שלה. כשמוחקים הצהרה, כלי הפיתוח מצליבים אותה כדי לציין שהיא כבר לא פעילה.
בצילום המסך, מתבצעת השבתה של המאפיין color
של הרכיב שנבחר.
עריכת הפסאודו-רכיבים של ::view-transition
במהלך אנימציה
עיינו בקטע התואם בתוך אנימציות.
מידע נוסף זמין במאמר מעברים חלקים ופשוטים בעזרת View Migrates API.
יישור פריטי רשת והתוכן שלהם עם עורך המשבצות
עיינו בקטע המתאים ב'בדיקת רשת של CSS'.
שינוי הצבעים באמצעות בוחר הצבעים
כדאי לעיין במאמר בדיקה וניפוי באגים של צבעים באיכות HD וצבעים שאינם HD באמצעות בוחר הצבעים.
שינוי ערך הזווית באמצעות שעון הזווית
שעון הזווית מספק GUI עבור שינוי של ערכי <angle>
בערכי מאפייני CSS.
כדי לפתוח את שעון הזווית:
- בוחרים רכיב עם הצהרת זווית.
בכרטיסייה סגנונות, מאתרים את ההצהרה
transform
אוbackground
שרוצים לשנות. לוחצים על התיבה תצוגה מקדימה של זווית לצד ערך הזווית.השעונים הקטנים שמימין ל-
-5deg
ול-0.25turn
הם תצוגות מקדימות של הזוויות.לוחצים על התצוגה המקדימה כדי לפתוח את שעון זווית.
שינוי ערך הזווית על ידי לחיצה על העיגול של שעון הזווית או גלילה עם העכבר כדי להגדיל או להקטין את ערך הזווית ב-1.
יש מקשי קיצור נוספים שמאפשרים לשנות את ערך הזווית. מידע נוסף זמין במקשי הקיצור בחלונית הסגנונות.
שינוי התיבה והצלליות של הטקסט בעזרת עורך האזורים הכהים
עורך הצלליות מספק GUI לשינוי הצהרות CSS text-shadow
ו-box-shadow
.
כדי לשנות את האזורים הכהים באמצעות עורך האזורים הכהים:
בוחרים רכיב עם הצהרת צל. לדוגמה, בוחרים את הרכיב הבא.
בכרטיסייה סגנונות, מאתרים את סמל הצללית ליד ההצהרה
text-shadow
אוbox-shadow
.לוחצים על סמל הצלליות כדי לפתוח את עורך האזורים הכהים.
שינוי המאפיינים של הצללית:
- סוג (רק עבור
box-shadow
). בוחרים באפשרות Outset או Inset. - היסטים של X ו-Y. גוררים את הנקודה הכחולה או מציינים ערכים.
- טשטוש. גוררים את פס ההזזה או מציינים ערך.
- Spread (רק עבור
box-shadow
). גוררים את פס ההזזה או מציינים ערך.
- סוג (רק עבור
בוחנים את השינויים שהוחלו על הרכיב.
עריכת תזמונים של אנימציה ומעברים באמצעות עורך Easing
Eaering Editor מספק GUI לשינוי הערכים של transition-timing-function
ו-animation-timing-function
.
כדי לפתוח את עורך ההקלות:
- צריך לבחור רכיב עם הצהרה על פונקציית תזמון, כמו הרכיב
<body>
שבדף הזה. - בכרטיסייה סגנונות, מאתרים את הסמל הסגול ליד ההצהרות
transition-timing-function
,animation-timing-function
או נכס הקיצורtransition
. - לחצו על הסמל כדי לפתוח את עורך ההקלות:
שימוש בהגדרות קבועות מראש לשינוי תזמונים
כדי לשנות את התזמונים בלחיצה, משתמשים בהגדרות הקבועות מראש בעורך ההקלות:
- בעורך ההתאמה, כדי להגדיר ערך מילת מפתח, לוחצים על אחד מלחצני הבורר:
- לינארי
- יציאה קלה
- כניסה קלה
- יציאה קלה
במתג ההגדרות הקבועות מראש, לוחצים על הלחצנים או כדי לבחור אחת מההגדרות הקבועות מראש הבאות:
- הגדרות לינאריות קבועות מראש:
elastic
,bounce
אוemphasized
. - הגדרות קבועות מראש של Cubic Bezier:
- הגדרות לינאריות קבועות מראש:
תזמון מילת מפתח | הגדרה קבועה מראש | בזייה קובייתי |
---|---|---|
יציאה קלה החוצה וכניסה קלה פנימה | פנימה החוצה, סינוס | cubic-bezier(0.45, 0.05, 0.55, 0.95) |
פנימה, ריבועית | cubic-bezier(0.46, 0.03, 0.52, 0.96) |
|
פנימה החוצה, קובייתי | cubic-bezier(0.65, 0.05, 0.36, 1) |
|
מהיר לאט, נכנס לאט | cubic-bezier(0.4, 0, 0.2, 1) |
|
החוצה, אחורי | cubic-bezier(0.68, -0.55, 0.27, 1.55) |
|
כניסה קלה פנימה | אין, סינוס | cubic-bezier(0.47, 0, 0.75, 0.72) |
פנימה, ריבועית | cubic-bezier(0.55, 0.09, 0.68, 0.53) |
|
In, Cubic | cubic-bezier(0.55, 0.06, 0.68, 0.19) |
|
בפנים, אחוריות | cubic-bezier(0.6, -0.28, 0.74, 0.05) |
|
יציאה לינארית במהירות | cubic-bezier(0.4, 0, 1, 1) |
|
יציאה קלה החוצה | חוץ, סינוס | cubic-bezier(0.39, 0.58, 0.57, 1) |
חוץ, ריבועי | cubic-bezier(0.25, 0.46, 0.45, 0.94) |
|
חוץ, Cubic | cubic-bezier(0.22, 0.61, 0.36, 1) |
|
לינארי יוצא, איטי | cubic-bezier(0, 0, 0.2, 1) |
|
החוצה, חזרה | cubic-bezier(0.18, 0.89, 0.32, 1.28) |
הגדרת תזמונים מותאמים אישית
כדי להגדיר ערכים מותאמים אישית לפונקציות תזמון, משתמשים בנקודות הבקרה בקווים:
לפונקציות לינאריות, לוחצים במקום כלשהו על הקו כדי להוסיף נקודת בקרה ולגרור אותה. לוחצים לחיצה כפולה כדי להסיר את הנקודה.
כדי להשתמש בפונקציות Cubic Bezier, גוררים אחת מנקודות הבקרה.
כל שינוי יגרום להפעלת אנימציה של הכדור בקטע Preview (תצוגה מקדימה) בחלק העליון של Editor.
(ניסיוני) העתקת שינויי ה-CSS
כשהניסוי הזה פועל, הכרטיסייה סגנונות מדגישה את שינויי ה-CSS שלכם בירוק.
כדי להעתיק שינוי אחד בהצהרת CSS, מעבירים את העכבר מעל ההצהרה המודגשת ולוחצים על הלחצן העתקה.
כדי להעתיק את כל השינויים ב-CSS בין ההצהרות בבת אחת, לוחצים לחיצה ימנית על הצהרה כלשהי ובוחרים באפשרות העתקת כל השינויים ב-CSS.
בנוסף, אפשר לעקוב אחר שינויים שביצעתם באמצעות הכרטיסייה שינויים.