כסלו

יצרן צללים, איורי הסבר ל-position, ועוד קישורי CSS

הסבר עם צילומי מסך על Logical Properties: מאפיינים שיחליפו את left, right וכל הגדרות הכיווניות כדי לתמוך בכיווניויות שונות של שפטת בלי להצטרך לכתוב CSS כפול. אלעד שכטר גם כתב על זה פוסט הסבר, ואחרי יותר משנה כתב פוסט על למה המאפיינים האלה עדיין לא מוכנים והצעות שלו לקידום העניינים.
עוד פוסט בנושא, עם פונטים גדולים ונוחים לקריאה 🙂 .
ופוסט על כתיבת shorthand של מאפייני היישור הלוגי.

HTTP Archive הוציא דו”ח על מצב האינטרנט, ושני מפתחי CSS גדולים כתבו בו את החלק על CSS. זה מעט שצריך להכיל את המרובה אז מטבע הדברים הוא נראה לוקה בחסר למי שיודע מלא CSS. האם התייחסו לקטגוריות הבאות: צבע, יחידות מידה, סלקטורים, פריסה, טיפוגרפיה, ריווח, קישוטים, אנימציה, ועוד. קריס קויר מ-CSS-Tricks שיתף בכמה מחשבות שלו על פרק ה-CSS באלמנך של HTTP Archive: הוא למשל הופתע מאוד מהפער בין השימוש בפלקסבוקס לשימוש בגריד (50% לעומת 2%) לאור העובדה שתכלס אין הבדל גדול בתמיכת דפדפנים. הוא גם מביע את דעתו בנוגע לפופולריות השימוש בשמות הצבעים שחור ולבן, כמות הפונטים שיש בכל אתר, ועוד מחשבות מעניינות. זה לא ארוך ושווה קריאה.

איך להיפטר מ-CSS מיותר (ספוילר: אין כלי מושלם לזה, מתברר שאין מנוס מלהיעזר בגורם האנושי)

פוסט חמוד של קריס קויר על תהליך החשיבה שלו במהלך עיצוב עם Flexbox. כתוב בהומור אבל מראה הרבה יכולות.

יותר מ-90 סוגי פריסה (layout) שונים והקוד שבונה אותם.

יצרן צללים – היצרן הזה לא רק מאפשר לבחור את המאפיינים הרצויים, אלא גם מראה מבחינת איור למה כל ערך מתייחס. זה מועיל מאוד במאפיין של box-shadow מפני שיש בו הרבה ערכים ברצף, וקשה לזכור מה זה מה.

אמנם יש ב-css-tricks מדריך אולטימטיבי לפלקס, אבל גם הפוסט הזה ב-dev.io הוא מדריך טוב עם איורים להמחשה, וההסברים בו הם כמעט סיפוריים. ומישהו מצא באג קטן ב-DevTools של פייפרפוקס בהקשר של פלקסבוקס: ה-DevTools מסבירים ליד כל מאפיין שלא מוחל מדוע הוא אינו מוחל, ובהקשר של פלקסבוקס הם טעו.

איורים משעשעים וחמודים שמסבירים position ב-CSS. והנה עוד הסבר על position עם איורים.

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

תמונות אלכסוניות ברצף – מאמר מבית 24ways שמסביר איך ליצור רשימת תמונות שעומדות אחת ליד השניה, ואז ללכסן את כולן