الأحجام والرياضيات ⤢ 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()-1 أو 0 أو 1، حسب إشارة القيمة. padding: sign(-5px) * 10px; الشبكة (Grid) ⤢ 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()صحيح عندما تتطابق media query، للاستخدام داخل 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. filter: blur(4px) brightness(1.1); ⤢ path()سلسلة مسار SVG، تُستخدم لرسم قص أو شكل. clip-path: path('M10 10 H 90 V 90 Z'); ⤢ attr()يقرأ خاصية HTML؛ استخدامه محدود خارج content. 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)));