גדלים ומתמטיקה ⤢ calc()התוצאה של ביטוי חשבוני, עם יחידות מעורבות. width: calc(100% - 2rem); ⤢ min()הקטן מבין הערכים הנתונים. width: min(100%, 60ch); ⤢ max()הגדול מבין הערכים הנתונים. width: max(320px, 40vw); ⤢ clamp()ערך מוגבל בין מינימום, ערך מועדף ומקסימום. font-size: clamp(1rem, 2vw, 1.5rem); ⤢ env()קורא משתנה סביבה שסופק על ידי סוכן המשתמש. padding: env(safe-area-inset-top); ⤢ fit-content()גודל המוגבל לרוחב הטבעי של התוכן. width: fit-content(200px); ⤢ round()מעגל ערך אל הכפולה הקרובה ביותר של ערך אחר. width: round(up, 133px, 50px); ⤢ mod()השארית החיובית של חלוקה, תמיד לא שלילית. margin: mod(100px, 30px); ⤢ rem()השארית של חלוקה, עם סימן המחולק. margin: rem(-100px, 30px); ⤢ abs()הערך המוחלט. translateX(abs(-10px)); ⤢ sign()לפי סימן הערך: שלילי אחד, אפס או אחד. padding: sign(-5px) * 10px; גריד ⤢ minmax()טווח גודל למסלולי גריד, בין מינימום למקסימום. grid-template-columns: minmax(100px, 1fr) minmax(0, 2fr); ⤢ repeat()חוזר על תבנית מסלולים מספר פעמים או עד מילוי השטח. grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); לוגיקה ותנאים ⤢ if()בוחר אחד משני ערכים לפי תנאי. font-size: if(media(width > 600px), 1.25rem, 1rem); ⤢ media()אמת כשמדיה-קוורי תואם, לשימוש בתוך if(). padding: if(media(width > 40rem), 2rem, 1rem); ⤢ supports()אמת כשהדפדפן תומך בהצהרה, לשימוש בתוך if(). display: if(supports(color: oklch(0 0 0)), oklch(0 0 0), #333); ⤢ selector()אמת כשהסלקטור תואם, לשימוש בתוך if(). font-weight: if(selector(:hover), 700, 400); מאפיינים מותאמים אישית ⤢ var()הערך של מאפיין מותאם אישית, עם ערך חלופי אופציונלי. color: var(--accent, #333); צבע ⤢ rgb() / rgba()צבע מערוצי אדום, ירוק וכחול (ואלפא). color: rgb(59 130 246 / 0.8); ⤢ hsl() / hsla()צבע מגוון, רוויה ובהירות. color: hsl(210 80% 50%); ⤢ oklch()צבע במרחב התפיסתי OKLCH (בהירות עקבית). color: oklch(0.7 0.15 250); ⤢ color-mix()ערבוב של שני צבעים במרחב צבע נתון. color: color-mix(in srgb, red 40%, blue); ⤢ color-contrast()האפשרות מהרשימה שנותנת את הקונטרסט הטוב ביותר מול צבע הבסיס. color: color-contrast(#fff vs #000, #777); ⤢ hwb()צבע מגוון, לובן ושחור. color: hwb(210 10% 20%); ⤢ lab()צבע במרחב CIELAB (בהירות, צירי a ו-b). color: lab(52% 40 59); ⤢ lch()צבע במרחב CIELAB (בהירות, כרומה, גוון). color: lch(52% 49 24); ⤢ color()צבע בכל מרחב צבע מוגדר מראש, לפי קואורדינטות. color: color(display-p3 1 0.4 0.2); ⤢ light-dark()הצבע הראשון בסכמה הבהירה, השני בכהה. color: light-dark(#1a1a1a, #f5f5f5); גרדיאנטים ותמונות ⤢ linear-gradient()גרדיאנט לאורך קו. background: linear-gradient(90deg, #4b9fff, #2ee6a6); ⤢ radial-gradient()גרדיאנט שקורן מנקודה. background: radial-gradient(circle, #fff, #000); ⤢ conic-gradient()גרדיאנט שמסתובב סביב מרכז. background: conic-gradient(red, yellow, red); ⤢ url()טוען משאב חיצוני: תמונה, גופן או SVG. background-image: url(hero.webp); ⤢ image-set()בוחר את התמונה הטובה ביותר לרזולוציית המכשיר. background-image: image-set("hero.webp" 1x, "hero@2x.webp" 2x); ⤢ cross-fade()מערבב שתי תמונות באחוז נתון. background-image: cross-fade(30%, url(a.webp), url(b.webp)); מסננים וצורות ⤢ blur() / brightness() / saturate()טשטוש, בהירות ורוויה המוחלים על האלמנט. filter: blur(4px) brightness(1.1); ⤢ path()מסלול SVG עבור clip-path או motion. clip-path: path('M10 10 H 90 V 90 Z'); ⤢ attr()קורא את הערך של מאפיין של האלמנט. content: attr(data-label); ⤢ contrast()מכוונן את הקונטרסט של האלמנט. filter: contrast(1.4); ⤢ drop-shadow()מצייר צל שעוקב אחר צורת האלפא של האלמנט. filter: drop-shadow(0 4px 8px rgb(0 0 0 / 0.3)); ⤢ grayscale()ממיר את האלמנט לגווני אפור. filter: grayscale(100%); ⤢ invert()הופך את הצבעים של האלמנט. filter: invert(1); ⤢ sepia()מחיל גוון ספיה. filter: sepia(0.6); ⤢ hue-rotate()מסובב את הגוון של צבעי האלמנט. filter: hue-rotate(90deg); ⤢ opacity()קובע את אטימות האלמנט דרך filter. filter: opacity(0.5); ⤢ circle()צורה עגולה עבור clip-path או shape-outside. clip-path: circle(40% at 50% 50%); ⤢ ellipse()צורה אליפטית עבור clip-path או shape-outside. clip-path: ellipse(50% 35% at 50% 50%); ⤢ inset()צורת מלבן מעוגל פינות עבור clip-path. clip-path: inset(10px 10px 10px 10px round 8px); ⤢ polygon()צורה מצולעת מרשימת נקודות. clip-path: polygon(50% 0, 100% 100%, 0 100%); התמרה ⤢ translate()מזיז את האלמנט לאורך X ו-Y. transform: translate(10px, 20px); ⤢ rotate()מסובב את האלמנט סביב המרכז. transform: rotate(45deg); ⤢ scale()משנה את קנה המידה של האלמנט לאורך X ו-Y. transform: scale(1.25); ⤢ skew()מטה את האלמנט לאורך X ו-Y. transform: skew(10deg, 0deg); ⤢ matrix()התמרה דו-ממדית משישה ערכי מטריצה. transform: matrix(1, 0, 0.5, 1, 10, 0); ⤢ perspective()קובע את עומק הפרספקטיבה התלת-ממדית לילדי האלמנט. transform: perspective(600px) rotateY(20deg); אנימציה ומונים ⤢ cubic-bezier()עקומת הקלה מארבע נקודות בקרה. transition-timing-function: cubic-bezier(0.65, 0, 0.35, 1); ⤢ steps()הקלה שקופצת בצעדים שווים. animation-timing-function: steps(8, end); ⤢ counter()הערך הנוכחי של מונה CSS, כתוכן. content: counter(chapter); ⤢ counters()ערכי מונה וכל המונים של אבותיו, מחוברים במחרוזת. content: counters(item, "."); ⤢ progress()מ-0 עד 1 ככל שערך מתקדם בין התחלה לסיום. opacity: progress(scroll(), 0, 50vh); ⤢ random()מספר אקראי מטווח, קבוע לכל אלמנט. rotate: random(from -5deg to 5deg); ⤢ sin()סינוס של זווית, לביטויי calc. translateY(calc(1rem * sin(45deg))); ⤢ cos()קוסינוס של זווית, לביטויי calc. translateX(calc(1rem * cos(45deg)));