כמה קישורים על CSS ו-HTML

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

• שני אלמנטים שלא כ”כ משתמשים בהם, למרות שיש בהם שימוש:

  1. <span class="tag">blockquote </span>– משמש לציטוט, והדפדפן בד”כ יוצר לכבודו אינדנטציה אוטומטית
  2. <span class="tag">q </span>– גם משמש לציטוט, והדפדפנים שתומכים בו מכניסים גרשיים לפני ואחרי המלל שבתוך התגית.

  אחד ההבדלים ביניהם הוא ש-blockquote הוא אלמנט block, ו-q הוא אלמנט inline. יש עוד כמה וכמה הבדלים ביניהם, ומאמר מקיף עליהם (ומעניין, למרות שהוא לא קצר) נמצא ב-html5doctor.

• באחד הפרוייקטים שלנו היינו צריכים לתת עיצוב למספרים ברשימה ממוספרת (ordered list). במסגרת חיפושיי אחר פתרון, נתקלתי במאמרו של רוג’ר ג’והנסון על הנושא הזה בדיוק. הוא משתמש בטכניקה מעניינת של CSS generated content ומכניס את המספור בעזרת ה-psuedo class של before. הוא משתמש בערך של contetn שלא הכרתי, ובמאפיין שלא הכרתי:

 content:counter(li); /* Use the counter as content */
 counter-increment:li; /* Increment the counter by 1 */

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

• Smashing Magazine כהרגלו פרסם לפני כמה חודשים רשימה של טכניקות עוצמתיות, ורשימת כלים מועילים ב-CSS. כמעט כל פריט שם הוא מרשים, ושווה בדיקה אם זה משהו שיכול להועיל לכם (מצד האמת – הכל שווה בדיקה, גם אם הוא לא יכול להועיל לכם. אבל יש שם כ”כ הרבה דברים שאם תרצו לראות הכל – כדאי לכם לקחת כמה ימי חופש בשביל זה 🙂 ).

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