לפני כמה חדשים טובים, פורסם ב-Smashing Magazine מאמר שמאד מצא חן בעיני – The bright near future of CSS. הוא כל כך מצא חן בעיני, שרציתי לתרגם את כולו, כדי שכל דובר עברית יוכל לקרוא את המאמר במלואו, מבלי להצטרך להקליק הקלקה נוספת, ומבלי להצטרך להתגבר על האנגלית. אפילו קיבלתי את הסכמתם של Smashing Magazine לכך. אבל מפאת עומס העבודה ואריכות המאמר לא הגעתי לתרגם אותו, ואני רואה שהפרסום שלו אצלי כבר התעכב מאד. לכן החלטתי לפרסם רק את מה שהספקתי לתרגם, ולתת את הקישור להמשך קריאה. אני מאד מקוה שהמעט שתרגמתי יגרום לכם לרצות להמשיך את הקריאה של המאמר במלואו, משום שהוא מלא כל טוב.
הכתבה הזו היא קטע מתוך הספר החדש של אריק מאייר Smashing CSS, שיצא לאור בחברת Wiley בשיתוף עם Smashing Magazine.
בכתבה הזו, המיקוד הוא במה שעומד להגיע: טכניקות עיצוב שנשתמש בהם בעתיד המיידי או הקרוב. החל מעיצוב של אלמנטי HTML 5, דרך ארגון מחדש של layout בהתבסס על פרמרטים של הצג, ועד תבניות בחירה משוגעות וכלה בטרנספורמציה של אלמנטים, כל אלה הן טכניקות שאתה עשוי להשתמש בהן מחר, בעוד חודש, או בשנה הבאה. עם תמיכה חלקית של דפדפנים, כולם נמצאים בחוד החנית של עיצוב האינטרנט.
לפיכך – היזהרו לא להחתך! מספר אתרים מועילים יכולים לסייע לכם למצוא את התחביר המדוייק והתבנית שאתם צריכים כדי להשתמש בטכניקות הללו.
יתרה מזאת, מספר ספריות JavaScript יכולות להרחיב את התמיכה ב-CSS מתקדם בדפדפנים ישנים יותר, במקרים מסויימים אפילו עד IE/Win 5.5. חלק מאד ממוקדות במשפחות דפדפנים מסויימות, בעוד שאחרות מכוונות באופן יותר רחב לאפשר תמיכה בכל הדפדפנים הידועים. אלה יכולים להועיל במקרים שבהם המבקרים שלכם עדיין לא עומדים בקצב הזמנים, אבל אינכם רוצים שהם יפסידו את כל הכיף (ספריות כאלה הן CSS3 PIE, cssSandpaper, :select[ivizr], ie7-js, eCSStender).
יש גם מגוון רחב של העצמות CSS המאופשרות בתור פלגאינים לספריות JavaScript כגון jQuery. אם אתם משתמשים בספריה כזו, כדאי לכם לחקור אותה ולראות מה יש. שוב: היזהרו! בעוד שהטכניקות האלה הן עוצמתיות ויכולות להעצים את הדפים שלכם, עליכם לבדוק אותם היטב בכל הדפדפנים של היום כדי לוודא שלא במקרה הפכתם את הדף לבלתי קריא בעליל בדפדפנים ישנים.
עיצוב HTML 5
עיצוב של HTML 5 למעשה אינו שונה מעיצוב HTML 4. יש חבורת אלמנטים חדשים, אבל עיצובם הוא בעצם אותו דבר כמו עיצוב של כל אלמנט אחר. הם יוצרים את אותן קופסאות כמו div, span, h2 או מה שלא יהיה.
עדיין עובדים על הספסיפיקציה של HTML 5 תוך כדי כתיבת שורות אלה, כך שזה עלול להשתנות קצת במשך הזמן, אבל ההצהרות הבאות עשויות לסייע לדפדפנים ישנים שלא כל-כך יודעים מה לעשות עם האלמנטים החדשים:
article, aside, canvas, details, embed, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
display: block;
}
command, datalist, keygen, mark, meter, progress, rp, rt, ruby, time, wbr {
display: inline;
}
אולי שמתם לב שהשמטתי שני אלמנטים חדשים די חשובים: audio ו-video. זה מפני שקשה לדעת איך בדיוק להתייחס אליהם. Block? Inline? הכל תלוי באיך אתה מתכנן להשתמש בהם. בכל מקרה, אתם יכולים לשים אותם בהצהרות שהכי הגיוניות לכם.
אבל מה עם דפדפדנים ישנים באמת, כמו IE6? (שימו לב שאמרתי ישנים, לא בלתי-משומשים. בחתרנות מעניינת של תרבות פופולרית, פופולריות של דפדפן תלויה מעט מאד בגילו). בשבילם, צריך קצת JavaScript כדי לגרום לדפדפן לזהות אותם ובכך להיות מסוגלים לעצב אותם. ישנו סקריפט קטן ונחמד שמכריח את הגרסאות הישנות של אקספלורר לשחק יפה עם האלמנטים של HTML 5. אם אתם מתכוונים לעצב אותם, בהחלט כדאי לכם לקחת את הסקריפט ההוא ולהשתמש בו.
עד כאן הספקתי לתרגם. אם אתם רוצים לדעת על עיצוב של אלמנט ה-figure, שאילתות מדיה (media queries), עיצוב צאצאים ספציפיים,
עיצוב עמודות ספציפיות, צבעי RGBA, HSL ו-HSLA, צללים לטקסטים ולקופסאות, רקעים מרובים, טרנספורמציות דו-מימדיות – אני ממליצה בחום להמשיך לקרוא.