ניקלאו » ארכיון הבלוג » עוד נגיעת סגנון בקורס CSS

ניקלאו » ארכיון הבלוג » עוד נגיעת עיצוב בקורס ה-CSS ניקלאו עוד נגיעת עיצוב בקורס ה-CSS 11 בנובמבר 2009, מאת Rumoroso כפי שכבר עשיתי ברשומה הקודמת (עיצוב קורס ה-CSS המתקדם), אמשיך לספר על כמה מהסגנונות שהשתמשתי בהם במצגת של קורס ה-CSS לשרה גוזה. היום אחד מהיר במיוחד בשקופית מסוימת הייתי צריך לסווג רשימה של מאפיינים. הרשימה הזו הייתה קצת ארוכה מכדי לסדר אותה באופן אנכי על המסך (במיוחד כשרציתי להוסיף עוד רשימה באותה שקופית), ולכן החלטתי לעצב אותה בשורה. שוב הכוונה שלי הייתה לנצל את המצגת עצמה כדוגמה (אני מזכיר לכם שהכנתי אותה עם ה-rumoslide, שהוא בעצם XHTML, CSS ו-JavaScript) כדי להדגים מה אפשר להשיג עם גיליונות סגנון. להלן אני כולל את הרשימה המדוברת. אני עושה זאת בצורת תמונה כדי שתראו איך היא נראית ללא עיצוב (היא מציגה רק את הסגנונות ש-Firefox מחיל כברירת מחדל): ה-HTML שבו השתמשתי הוא פשוט. מדובר ברשימה שבה כל פריט מורכב מאלמנט code עם טקסט בתוכו:

• border-collapse
• border-spacing
• caption-side
• color
…
• widows
• word-spacing

…והתוצאה שרציתי להשיג (ושאותה כמובן השגתי) היא הבאה (שוב אני כולל צילום מסך): הסגנונות שבהם השתמשתי כדי להשיג את התוצאה הזו הם: code { font: .8em monospace; color: #009; } .herencia li { display: inline; } .herencia li:after { content: ’, ’; } .herencia li:last-child:after { content: ’ ’; } הדבר הראשון שעשיתי היה לעצב את אלמנט ה-code כדי להבדיל אותו משאר הטקסט. לשם כך שיחקתי עם גודל הגופן, המשפחה שלו והצבע שלו. כפי שניתן לראות, הכל מאוד פשוט. כדי שהרשימה, שבתחילה הייתה אנכית, תעבור להיות מיושרת בשורה, שיניתי את המאפיין display של הפריטים ל-inline. לאחר מכן גרמתי לפסיק טיפוגרפי ולרווח (” ,”) להופיע באמצעות המאפיין content (תוכן מיוצר). את זה החלתי על הפסאודו-אלמנט :after. לבסוף, מכיוון שזה גורם לפסיק להופיע גם בפריט האחרון, מה שעשיתי היה לציין שהתוכן המיוצר שלו יהיה ריק (content: ’ ’). טוב, ברור שיש פה קאץ’ במשהו שעוד לא הזכרתי ואני מקווה שמישהו שם לב אליו (באופן אידיאלי אחד מהתלמידים/ות שנכחו בקורס). כדי לבחור את הפריט האחרון השתמשתי בפסאודו-מחלקה :last-child של CSS 3, שהתמיכה בה מועטה מאוד. תחשבו שיכולתי להשתמש רק בסלקטורים של CSS 2.1. למשל, יכולתי לייצר את התוכן לפני כל פריט (במקום אחריו) באמצעות :before ואז לבחור עם :first-child את הפריט הראשון כדי להסיר ממנו את הפסיק שלפניו. למה לא עשיתי זאת?… בגלל הדבר הבא: הפסיק מוצב בתחילת כל שורה כאשר פריט נמצא במיקום הזה, וזה כמובן שגוי. כדי למנוע זאת, ובידיעה שהדפדפן שבו התכוונתי להשתמש תומך בכך, החלטתי להשתמש ב-CSS3… אני יודע, :last-child לא נפוץ מספיק בין הדפדפנים, אבל לפחות בגרסאות האחרונות ביותר כן… ולמצגת זה עבד לי מצוין. אחרי כל החפירה הזו אפשר להסיק מסקנה אחת: CSS מגניב אותי, והיכולת להשתמש במצגת הקורס כדוגמה מגניבה אותי אפילו יותר. עם זאת, בבקשה,… דפדפנים עם יותר תמיכה וש-CSS 3 יגיע בקרוב. אני משאיר לכם קישור לכמה רשימות שמפרטות את מידת התמיכה ב-CSS לפי דפדפן: http://www.webdevout.net/browser-support-css#css3standards http://www.quirksmode.org/css/contents.html אגב, במצגת לא הצלחתי להתאפק והשתמשתי בעוד קצת CSS 3… כמובן שלא יכולתי להישאר בלי לעגל כמה פינות. במאמר הבא אספר לכם על כך… עוד נגיעת עיצוב בקורס ה-CSS קטגוריה: CSS —> 2 תגובות Tweets that mention Niquelao » Archivo del weblog » Otro toque de estilo en el Curso de CSS — Topsy.com 12 בנובמבר 2009 […] This post was mentioned on Twitter by Jorge Rumoroso, Jorge Rumoroso. Jorge Rumoroso said: #niquelao Another touch of style in the CSS Course http://bit.ly/J7vm9 (באנגלית זה נראה יותר מגניב, נכון! […] עוד נגיעת עיצוב בקורס ה-CSS 12 בנובמבר 2009 […] טקסט מלא בניקלאו: עוד נגיעת עיצוב בקורס ה-CSS […] ניתן לעקוב אחר התגובות הודות לפיד ה-RSS 2.0. ניתן גם לשלוח trackback מהאתר שלך. מאמר קודם: עיצוב קורס ה-CSS המתקדם מאמר הבא: מספר תמונות רקע עם CSS 3 —> —> —> יצירה זו נמצאת תחת רישיון Creative Commons.

P.S. A few readers have asked which superposición de accesibilidad (overlay) we actually reach for — it's accessiBe; take a look here if you want the current details.