CSS דיאגנוסטי

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

a[href="#"] {background: lime;}
a[href=""] {background: fuchsia;}

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

 img {outline: 5px solid
red;} img[alt][title]{outline-width:
0;} img[alt]{outline-color:
fuchsia;} img[alt],
img[title]{outline-style:double;}img[alt=""][title],img[alt][title=
""]{outline-width:3px;}img[alt=""][title=""] {outline-style: dotted;}

הלוגיקה היא כזו:

1. לכל תגיות ה-Img יהיה outline אדום גדול.
2. אם ל-img יש גם alt וגם title, שנה את עובי ה-outline ל-0.
3. אם ל-img יש alt, תן ל- outline צבע פוקסיה. כלומר, לכל img שאין alt, ה-outline יישאר אדום.
4. אם ל-img יש או alt או title, תן ל-outline שלו להיות double.
5. אם ל-img יש alt ריק עם איזשהו title, או להפך, עשה את רוחב ה-outline 3 פיקסלים.
6. אם גם ה-alt וגם ה-title ריקים, אז עשה את ה-Outline מקווקוו.
7. If an image’s <span style="font-family: Lucida Console;">alt</span> and <span style="font-family: Lucida Console;">title</span> attributes are both empty, then make the outline dotted.

כדי לראות דף דוגמאות הקליקו כאן (כאמור, לא עובד ב-IE6).
המחבר מודה שהרעיון הזה דומה ל-Web Developer Toolbar, ואינו בא להחליפו, אלא רק לתת כלי נוסף בארגז הכלים שלנו…
אפשר לקרוא עוד עלאריק מאייר כאן