css functions چه چیزی هستند و چه کاربردی دارند ؟
همانطور که همه ما می دانیم کدهای css برای ایجاد استایل و تعیین شکل نمایش صفحات وب به کار می روند. با استفاده از فانکشن های سی اس اس (css functions) می توانیم کدهای استایل پویا و داینامیک طراحی کنیم.
مثلا همین متنی که شما در حال خواندن آن هستید ، توسط css مشخص شده است که با چه فونتی، چه رنگی برای شما نمایش داده شود.
همینطور شکل و نمای کلی وب سایت، رنگ ها و شکل نمایش آیکن ها توسط css تعریف شدند.
به مرور زمان و در طی گذشت سال ها ، طراحی های وب مدرن تر شدند و نیاز به تغییرات و کدهای جدید برای طراحی زیباتر و کاربر پسند تر بود.
اگر در سالیان ابتدای ظهور وب، نمایشگر ها دارای رزولیشن استاندارد و ثابتی بودند ، در عوض امروز انواع و اقسام مانیتورها با روزولیشن های مختلف به بازار عرضه شدند.
همینطور موبایل هایی با رزولیشن های مختلف تولید شدند.
همه این موارد باعث شد که صفحات وب که طراحی می شدند باید در تمام این دستگاه ها به درستی نمایش داده شوند.
در نهایت مفهومی به نام رسپانسیو (responsive) یا معادل فارسی آن واکنش گرایی مطرح شد.
وب سایت هایی که طراحی می شدند در مانیتورها و اسکرین های موبایل باید تغییر می کردند و همان مطالب را با شکل دیگری نمایش می دادند.
در صفحه وب سایت موزیلا دولوپر می توانیم مستندات فانکشن های css functions را مشاهده و مرور کنیم.
ایجاد استایل پویا و داینامیک در صفحات وب
فانکشن های استایل (css functions)، کمک می کنند که کدهای استایل تعریف شده ما از حالت خشک و مرده، به حالت زنده و پویا در بیایند.
استایل صفحات ما با کمک این فانکشن ها، می توانند بر اساس رزولیشن صفحه و یا هر تغییر دیگری، تغییر داشته باشند و در نهایت صفحات وب ، در بهترین شکل و حالت ممکن خود نمایش داده شوند.
اگر از وب سایت های بزرگ و مطرح اینسپکت (inspect) بگیرید، در فایل استایل آنها خواهید دید که به خوبی از فانکشن ها در استایل استفاده شده است.
فانکشن های css
عموما مقادیر تعریف شده در کلاس ها و آی دی ها css ثابت هستند. نهایتا اگر قصد تعریف یک خصوصیت نسبی مثلا ارتفاع یک بخش و یا عرض یک تصویر، را داشتیم از درصد استفاده می کردیم.
اما با کمک css functions ، دست ما در استفاده و استایل دادن به بخش های مختلف یک وب سایت باز تر شد و محدود عمل ما بیشتر شد.
ساده ترین فانکشن که احتمالا باید با آن برخورد داشتید و آشنا هستید فانکشن var هست .
با استفاده از فانکش var، ما می تونیم پالت رنگی یک سایت را تعریف کنیم و در صورت نیاز به هرگونه تغییر و ویرایش فقط در یک قسمت، کد رنگ ها را تغییر می دهیم و در کل پروژه ، رنگ های تعیین شده ما اعمال خواهند شد.
اگر از فانکشن var وجود نداشت باید تک تک و در تمام بخش هایی که کد رنگ مورد نظر ما وجود داشت را در فایل های استایل پیدا می کردیم و تغییر می دادیم .
نمونه دیگر از استفاده از فانکشن ها (css functions)، استفاده از فانکشن های rgb() ,rgba() ,calc هست .
از rgb برای ایجاد طیف وسیعی از رنگ ها استفاده می شود و در rgba علاوه بر رنگ، امکان تعریف شفافیت هم وجود دارد.
از calc که مخفف کلمه calculate است برای محاسبه عددی استفاده می شود برای مثال محاسبه ارتفاع و یا عرض یک div در یک صفحه .
در مثال زیر، ما تعیین کردیم که عرض باید 100درصد منهای 50 پیکسل باشد.
width: calc(100% - 50px);
به طور کلی در css می توانیم از فانکشن های زیر استفاده کنیم.
در این جدول، خلاصه ای از عملکرد هر کدام از فانکشن ها ذکر شده است.
Function | Description |
---|---|
acos() | Returns the inverse cosine of a number between -1 and 1 |
asin() | Returns the inverse sine of a number between -1 and 1 |
atan() | Returns the inverse tangent of a number between -∞ and ∞ |
atan2() | Returns the inverse tangent of two values between -infinity and infinity |
attr() | Returns the value of an attribute of the selected element |
blur() | Applies a blur effect to an element |
brightness() | Adjusts the brightness of an element (brighter or darker) |
calc() | Allows you to perform calculations to determine CSS property values |
circle() | Defines a circle |
color() | Allows a color to be specified in a particular, specified color space |
color-mix() | Mixes two color values in a given color space, by a given amount |
conic-gradient() | Creates a conic gradient |
contrast() | Adjusts the contrast of an element |
cos() | Returns the cosine of an angle |
counter() | Returns the current value of the named counter |
counters() | Returns the current values of the named and nested counters |
cubic-bezier() | Defines a Cubic Bezier curve |
drop-shadow() | Applies a drop shadow effect to an image |
ellipse() | Defines an ellipse |
exp() | Returns E raised to the power of the specified number x (Ex) |
fit-content() | Allows you to size an element based on its content |
grayscale() | Converts an image to grayscale |
hsl() / hsla() | Defines a color using the Hue-Saturation-Lightness model (HSL); with an optional alpha component |
hue-rotate() | Applies a color rotation to an element |
hwb() | Defines a color using the Hue-Whiteness-Blackness model (HWB); with an optional alpha component |
hypot() | Returns the square root of the sum of squares of its parameters |
inset() | Defines a rectangle at the specified inset distances from each side of the reference box |
invert() | Inverts the color of an image |
lab() | Specifies a color in the CIE L*a*b color space |
lch() | Specifies a color in the LCH (Lightness-Chroma-Hue) color space |
light-dark() | Enables two color-value settings, and returns the first value if the user has set a light color theme, and the second value if the user has set a dark color theme |
linear-gradient() | Creates a linear gradient |
log() | Returns the natural logarithm (base E) of a specified number, or the logarithm of the number to the specified base |
matrix() | Defines a 2D transformation, using a matrix of six values |
matrix3d() | Defines a 3D transformation, using a 4×4 matrix of 16 values |
max() | Uses the largest value, from a comma-separated list of values, as the property value |
min() | Uses the smallest value, from a comma-separated list of values, as the property value |
minmax() | Defines a size range greater than or equal to a min value and less than or equal to a max value (used with CSS grids) |
mod() | Returns the remainder left over when a number is divided by another number |
oklab() | Specifies a color in the OKLAB color space |
oklch() | Specifies a color in the OKLCH color space |
opacity() | Applies an opacity effect to an element |
perspective() | Defines a perspective view for a 3D transformed element |
polygon() | Defines a polygon |
pow() | Returns the value of a number (x) raised to the power of another number (y) |
radial-gradient() | Creates a radial gradient |
ray() | Defines the offset-path line segment that an animated element should follow |
rem() | Returns the remainder left over when a number is divided by another number |
repeat() | Repeats a set of columns or rows in a grid |
repeating-conic-gradient() | Repeats a conic gradient |
repeating-linear-gradient() | Repeats a linear gradient |
repeating-radial-gradient() | Repeats a radial gradient |
rgb() / rgba() | Defines colors using the Red-Green-Blue model (RGB); with an optional alpha component |
rotate() | Defines a 2D rotation of an element |
rotate3d() | Defines a 3D rotation of an element |
rotateX() | Defines a 3D rotation of an element around the x-axis (horizontal) |
rotateY() | Defines a 3D rotation of an element around the y-axis (vertical) |
rotateZ() | Defines a 3D rotation of an element around the z-axis |
round() | Rounds a number according to the specified rounding-strategy |
saturate() | Adjusts the saturation (color intensity) of an element |
scale() | Defines a 2D scaling of an element |
scale3d() | Defines a 3D scaling of an element |
scaleX() | Scales an element horizontally (the width) |
scaleY() | Scales an element vertically (the height) |
sepia() | Converts an image to sepia |
sin() | Returns the sine of a number (angle) |
skew() | Skews an element along the x- and y-axis |
skewX() | Skews an element along the x-axis |
skewY() | Skews an element along the y-axis |
sqrt() | Returns the square root of a number |
steps() | Creates a stepped timing function for animations |
tan() | Returns the tangent of a number |
translate() | Allows you to re-position an element along the x- and y-axis |
translateX() | Allows you to re-position an element along the x-axis |
translateY() | Allows you to re-position an element along the y-axis |
url() | Allows you to include a file in the stylesheet |
var() | Inserts the value of a custom property |