התכונה text-wrap ב- CSS מספקת דרך לשלוט באופן בו הטקסט נשבר בתוך קונטיינר. בעוד שבדרך כלל שבירת הטקסט מתבססת על חוקים בסיסיים, ערכים חדשים כמו pretty ו-balance מאפשרים אפשרויות מתקדמות יותר לטיפוגרפיה מאוזנת וקריאה יותר. בפוסט זה נבחן כיצד ערכים [...]
כאדם שמנהל אתר המספק תוכן בשפות הנכתבות משמאל לימין (LTR) ומימין לשמאל (RTL), אני לא יכול לתאר עד כמה התרגשתי כשגיליתי את תכונות ה-CSS הלוגיות (בלעז CSS Logical Properties). השימוש ב-Logical Properties שינה את הדרך שבה אני ניגש לעיצוב layout, [...]
הפונקציה repeat() ב-CSS Grid חוסכת לכם כתיבה חוזרת של ערכים. אני משתמש בה כמעט בכל גריד שאני בונה – ברגע שמכירים אותה, קשה לחזור לכתיבת 1fr 1fr 1fr 1fr ידנית. בואו נראה כיצד repeat() עובדת, כולל auto-fill, auto-fit, שילוב עם [...]
::marker הוא pseudo-element ב-CSS המאפשר לעצב את הסימנים של פריטי רשימה (list-items). בין אם ברצונכם להתאים את המראה של כדורים ברשימה לא מסודרת (ul) או את המספור ברשימה מסודרת (ol), השימוש ב-::marker מעניק לכם את הגמישות לשפר את הנראות של [...]
במשך שנים, ל-CSS לא הייתה דרך לבחור אלמנט הורה לפי מה שנמצא בתוכו. אם div הכיל תמונה, לא הייתה אפשרות לעצב אותו אחרת – לא בלי JavaScript. הפסאודו-קלאס :has, שהוצג ב-CSS Selectors Level 4, משנה את זה לחלוטין. מהו מאפיין [...]
מנקודת מבטי, ייתכן כי עבור עמודי דוקומנטציה, בלוגים ומאמרים יהיה זה נכון להבדיל בין קישורים פנימיים ליוצאים, זאת מכיוון ויכול להיות זה מתיש לקרוא מאמר מסויים כשלחיצה על קישור מוציאה אותך מהאתר לאתר אחר ללא ידיעתך, בטח ובטח במאמרים בהם [...]
אם אתם חווים בעיות עם התכונה position:sticky ב CSS, כלומר אם התכונה אינה עובדת לכם אז הסיבה היא בדרך כלל אחת מאלו: 1. לפני שאתם בכלל ממשיכים עליכם לוודא אם התכונה נתמכת בדפדפן שלכם...
המודול CSS Text Decoration Module Level 3 נותן לנו כמה דרכים חדשות לעצב קווים תחתונים וקישוטי טקסט מעבר ל-underline / line-through הבסיסיים. תמיכת הדפדפנים עומדת היום על מעל 94% גלובלית, כך שאפשר להשתמש בתכונות האלו בפרודקשן בלי חשש. תכונות כמו [...]
ב CSS לא ניתן לבצע אנימציה או שינוי חלק של Gradients בעזרת התכונה transition. במילים אחרות, ה transition הבא לא יעבוד: .gradient { min-height: 200px; background-image: linear-gradient( to right, hsl(49.68, 97.89%, 62.75%), hsl(200, 51.54%, 44.51%) ); transition: background-image 0.5s linear; [...]
התכונה box-shadow ב CSS מוסיפה אפקט של צל סביב המסגרת של אלמנט מסויים. ניתן להשתמש ביותר מאפקט אחד על כל אלמנט וזאת על ידי הפרדה בין אפקטים באמצעות פסיק (comma). התכונה box-shadow מתוארת על ידי הֶסֵּט (offset) בציר ה X [...]