מדריך שימוש — CSS StylEditor

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

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

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

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

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

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

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

רשימה שטוחה עם שדה חיפוש והשלמה אוטומטית לפי שם התכונה המבוקשת.

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

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

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

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

קובע כיצד ה-CSS נכתב לקובץ בעת שמירה: מרובה-שורות (כל תכונה בשורה נפרדת) או שורה אחת רציפה לכל כלל.

כתובת השרת שאליה נשלח תוכן הקובץ בלחיצה על Save. ללא כתובת מוגדרת, השמירה לא תתבצע ותוצג הודעת שגיאה.

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

מגדיר את ההגדרות הספציפיות לשרת ש-se5-save.php קורא: מצב "יבש" (dry run) לבדיקות בלי כתיבה בפועל לקובץ, רשימת תבניות נתיב מותרות (regex) לעדכון, זוג מפתח/ערך לאימות - שונה בין בקשות מהשרת עצמו לבין בקשות חיצוניות - וקידומת כתובת אופציונלית להסרה בעת המרת כתובת הדף המלאה לנתיב יחסי בדיסק.

זהו הקובץ שכתובתו מוזנת בהגדרת "כתובת שמירה" (Save address) בתוסף. הוא מקבל בקשת POST עם גוף JSON:

{
  "apiVersion": number,
  "check"?: true,               // ping only, to confirm the endpoint is reachable
  "href": string,                 // full page URL (location.href) the CSS belongs to
  "pageBase"?: string,              // the page's <base> URL, if it has one
  "content": string,                 // full CSS file content to write
  "<authKeyName>": "<authValue>"  // must match SE_AUTH_KEY / SE_AUTH_VAL
}

הוא ממיר את href לנתיב יחסי תחת ה-document root של השרת, בודק שהנתיב הוא קובץ .css ותואם לתבנית מותרת, ואם לא במצב dry-run - כותב את content לאותו קובץ. את שני הקבצים אפשר למקם בכל מקום נגיש בשרת, כל עוד הם יושבים יחד באותה תיקייה.

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