نوع‌های داده در CSS

آموزش جامع CSS

مقدمه

مستندات CSS شامل تعریف چندین نوع داده (data type) است که هر یک شامل مجموعه‌ای از مقادیر هستند. هر پراپرتی CSS دارای یک یا چند نوع داده است؛ یعنی می‌تواند مقادیر آن نوع یا نوع‌های داده را دریافت کند. به عبارت دیگر، هر پراپرتی CSS با توجه به ماهیت خود، قادر به دریافت مجموعه‌ی مشخصی از مقادیر است و این نوع‌های داده هستند که مقادیر قابل دریافت توسط پراپرتی‌های CSS را تعریف می‌کنند. در این درس، با مفهوم نوع داده در CSS آشنا می‌شویم و مهمترین نوع‌های داده را نیز معرفی می‌کنیم. مطابق آنچه در مستندات CSS دیده می‌شود، یک نوع داده با نام X را به صورت <X> نمایش می‌دهیم.

مفهوم نوع داده در CSS

در زبان‌های برنامه‌نویسی، نوع داده (data type) که گاهی نوع (type) نیز گفته می‌شود، به عنوان مجموعه‌ای از مقادیر تعریف می‌شود. برای مثال، در اکثر زبان‌های برنامه‌نویسی، یک نوع داده مانند int یا integer بازه‌ی مشخصی از اعداد صحیح را شامل می‌شود و یک نوع داده مانند bool یا boolean مجموعه‌ای است متشکل از تنها دو مقدار true و false.

نوع داده در زبان استایل‌دهی CSS نیز مفهوم مشابهی دارد و به عنوان مجموعه‌ای از مقادیر تعریف می‌شود و یک پراپرتی CSS می‌تواند مقادیر یک یا چند نوع داده را دریافت کند. در مستندات CSS نوع‌های داده کلمات کلیدی هستند که درون کاراکترهای نابرابری (< >) قرار دارند. بنابراین، عباراتی مثل <color> یا <length> نشان‌دهنده‌ی نوع‌های داده‌ای هستند که به ترتیب، شامل مقادیر رنگی و مقادیر طولی هستند.

در یک گروه‌بندی کلی، می‌توانیم نوع‌های داده در CSS را در چهار گروه نوع‌های متنی، عددی، کمیت‌ها و رنگ‌ها قرار دهیم. در ادامه، به بررسی نوع‌های داده‌ی موجود در هر یک از این گروه‌ها می‌پردازیم.

نوع‌های داده متنی

نوع‌های داده‌ متنی (textual data types) شامل کلمات کلیدی (keywords)، شناسه‌ها (identifiers)، رشته‌های متنی (strings) و آدرس‌های url هستند. مهمترین نوع‌های متنی به همراه یک توضیح مختصر و مثالی از پراپرتی‌هایی که مقادیر از هر نوع را دریافت می‌کنند، در جدول زیر آورده شده‌اند.

نوع داده توضیح مثال
<keyword> کلمات کلیدی از قبل تعریف‌شده (pre-defined) که معنای مشخصی دارند. border-collapse: separate | collapse;
<specialkeyword> کلمات کلیدی خاص که با هدف مدیریت و کنترل وراثت و cascade تعریف شده‌اند. property: initial | inherit | unset;
<custom-ident> رشته‌ی متنی دلخواه تعریف‌شده توسط کاربر که به عنوان یک شناسه (identifier) استفاده می‌شود. grid-area: some-grid-area;
<string> رشته‌ی متنی که درون کوتیشن قرار دارد. font-family: “Times New Roman”; content: “prefix”;
<url> آدرس یک منبع (resource) در وب. background-image: url(“star.gif”);

نوع‌های جدول بالا، مهمترین مقادیر متنی هستند. در ادامه، هر یک از این نوع‌ها را به صورت جداگانه بررسی می‌کنیم.

نوع داده keyword

نوع داده <keyword> شامل مقادیری است که به صورت کلمات کلیدی از قبل تعریف‌شده (pre-defined) هستند که برای مرورگر و هر مفسر دیگری معنای مشخصی دارند. به عنوان مثال، پراپرتی border-collapse یک پراپرتی مربوط به جداول است که می‌تواند یکی از دو کلمه کلیدی collapse و separate را دریافت کند و بنابراین، نوع داده‌ی این پراپرتی <keyword> است.

پراپرتی border-collapse دارای مقدار پیش‌فرض separate است که باعث می‌شود فریم‌های سلول‌های جدول به صورت مجزا نمایش داده شوند اما می‌توان با تخصیص مقدار collapse به این پراپرتی، ترتیبی داد که فریم‌های سلول‌ها با هم ادغام شوند.

هدف ما در اینجا صرفاً آشنایی شما با مفهوم نوع داده در CSS است و قصد معرفی هیچ پراپرتی خاصی را نداریم و پراپرتی‌هایی که به عنوان مثال از آنها نام برده می‌شود، در آینده معرفی و بررسی خواهند شد. در فصل‌های بعد، هنگام معرفی هر پراپرتی، فرم کلی آن پراپرتی ارائه می‌شود که در آن فرم، نوع داده‌ی هر پراپرتی ذکر می‌شود.

نوع داده specialkeyword

نوع داده‌ی <specialkeyword> شامل چهار مقدار خاص initial، inherit، unset و revert است که مقادیر عمومی هستند که برای همه‌ی پراپرتی‌ها در دسترس هستند. با وجودی که این مقادیر هم کلمات کلیدی از پیش تعریف‌شده هستند اما به خاطر کارکرد متفاوتی که دارند، یک نوع داده‌ی مجزا با نام <specialkeyword> برای آنها تعریف شده است.

در فصل قبل دیدیم که این مقادیر، کنترل‌کننده‌های وراثت (inheritance) و cascade هستند و چیزی که از الان به بعد می‌دانیم این است که این مقادیر متعلق به نوع داده‌ی <specialkeyword> هستند.

نوع داده custom-ident

نوع داده <custom-ident> شامل مقادیر متنی سفارشی است که توسط کاربر ایجاد شده و به عنوان شناسه (identifier) استفاده می‌شوند. سینتکس مقادیر این نوع داده تنها یک تفاوت با شناسه‌های CSS (مانند نام‌های پراپرتی‌ها)‌ دارد و آن هم حساسیت این مقادیر به حروف (case sensitivity) است. بنابراین، برای مقادیر از این نوع، id1 و Id1 دو مقدار متفاوت در نظر گرفته می‌شوند. کاراکترهای مجاز برای یک مقدار از نوع <custom-ident> عبارتند از:

  • کاراکترهای الفبایی (از A تا Z و a تا z)
  • ارقام (0 تا 9)
  • کاراکتر hyphen یا خط فاصله (-)
  • کاراکتر underline یا زیر خط ( _ )
  • یک کاراکتر escape یا گریز (که یک بک‌اسلش قبل از آن قرار دارد)
  • یک کاراکتر Unicode (در فرمت یک بک‌اسلش ( \ ) که بعد از آن یک تا شش رقم هگزادسیمال قرار دارد)

توجه داشته باشید که مقادیر از نوع <custom-ident> را نباید درون کوتیشن قرار داد. به علاوه، اولین کاراکتر نمی‌تواند یک رقم یا یک خط فاصله که بعد از آن یک رقم یا یک خط فاصله‌ی دیگر قرار دارد، باشد. بنابراین، شناسه‌های زیر همگی نامعتبر هستند.

  • 34rem
  • -12rad
  • Bili.bob
  • --toto
  • “bilibob”

نوع داده strin

نوع داده <string> شامل مقادیری است که به صورت دنباله‌ای از کاراکترهای Unicode ایجاد می‌شوند. مقادیر از این نوع باید درون یک جفت کوتیشن (تکی یا دوبل) قرار بگیرند. پراپرتی‌هایی مانند content، font-family و quotes مقادیر از نوع <string> را دریافت می‌کنند.

نوع داده url

نوع داده <url> شامل مجموعه‌ای از مقادیر است که به منابع وب (web resources) اشاره می‌کنند. برای مثال، پراپرتی‌هایی مانند background-image و list-style-image که به آدرس یک عکس نیاز دارند، مقادیر از نوع <url> را دریافت می‌کنند.

مقادیر از نوع <url> با استفاده از یک تابع به نام url() به پراپرتی مورد نظر اختصاص داده می‌شوند. آرگومان این تابع، آدرس نسبی یا مطلق فایل یا منبع مورد اشاره است.

نوع‌های داده عددی

از نوع‌های داده‌ی عددی (numeric data types) برای مشخص کردن کمیت‌ها، اندیس‌ها و موقعیت‌های مکانی استفاده می‌شود. مهمترین این نوع‌ها در جدول زیر آورده شده‌اند.

نوع داده توضیح مثال
<integer> مقادیر عددی صحیح (فاقد قسمت اعشار) مثبت و منفی. z-index: 1;
<number> اعداد حقیقی (real numbers) که شامل اعداد صحیح و اعشاری است. opacity: .6;
z-index: 2;
<dimension> یک مقدار عددی که یک واحد (unit) به آن ضمیمه شده است. width: 500px;
font-size: 1.5em;
<percentage> یک عدد بر حسب درصد. width: 50%;
font-size: 120%;
<ratio> نسبت بین مقادیر فاقد واحد که به فرم a/b نمایش داده می‌شود. @media screen and
(min-aspect-ratio: 16/9) { … }
<flex> یک مقدار طولی منعطف که برای استفاده در CSS Grid Layout معرفی شده و به صورت یک به همراه واحد fr نوشته می‌شود. grid-template-columns:
1fr 1fr 2.5fr 1.5fr;

اجازه دهید در اینجا هر یک از نوع‌های عددی جدول بالا را با جزئیات بیشتر بررسی کنیم.

نوع داده integer و number

نوع داده <integer> شامل مقادیر عددی صحیح است. اعداد صحیح اعدادی هستند که فاقد قسمت اعشار هستند و می‌توانند مثبت یا منفی و یا صفر باشند. در CSS پراپرتی‌های زیادی هستند که مقادیر از نوع <integer> را دریافت می‌کنند. برای مثال، می‌توان از پراپرتی‌های z-index، grid-row و grid-column نام برد.

در مستندات CSS هیچ اشاره‌ای به بازه‌ی اعداد صحیح یعنی حداقل و حداکثر مقادیر از نوع <integer> نشده و این خود مرورگرها هستند که این مقادیر را تعیین می‌کنند.

نوع داده <number> شامل مقادیر عددی است که می‌توانند دارای قسمت اعشار نیز باشند.

نوع داده dimension

نوع داده <dimension> از مقادیر عددی تشکیل می‌شود که یک واحد اندازه‌گیری به آنها ضمیمه شده است. به عبارت دیگر، یک مقدار از نوع <dimension> مقداری است از نوع <number> به همراه یک واحد اندازه‌گیری. برای مثال: 12px یا 5s یا 2rem. واحدهای اندازه‌گیری CSS را در درس بعد معرفی می‌کنیم.

نوع داده percentage

نوع داده <percentage> شامل مقادیر درصدی است که از یک عدد به همراه کاراکتر درصد (%) تشکیل می‌شوند. مطابق انتظار، مقادیر از این نوع، معمولاً برای تعریف یک سایز نسبت به عنصر والد عنصر مورد نظر استفاده می‌شوند. پراپرتی‌های متعددی مانند width، height، font-size، margin و padding می‌توانند مقادیر از این نوع را دریافت کنند.

نوع داده ratio

نوع داده <ratio> شامل مقادیری است که برای تعیین نسبت‌های جانبی (aspect ratios) در مدیاکوئری‌ها (media queries) کاربرد دارد و هر مقدار از این نوع، نشانگر نسبت بین دو مقدار بدون واحد است. سینتکس این مقادیر به صورت i / j است که در آن، i و j اعداد صحیحی هستند که به ترتیب، معرف عرض و ارتفاع هستند. اما در ماژول Media Queries Level 4 نوع داده <ratio> به نحوی بروزرسانی شد که i و j مقادیر از نوع <number> باشند.

نوع داده flex

نوع داده <flex> شامل مقادیر طولی انعطاف‌پذیری است که به طور اختصاصی برای استفاده در CSS Grid Layout معرفی شده‌اند و بنابراین، تنها برای پراپرتی‌هایی نظیر grid-template-columns و grid-template-rows و سایر پراپرتی‌های مرتبط در دسترس هستند.

سینتکس مقادیر از نوع <flex> به این صورت است که یک مقدار از نوع به همراه واحد fr آورده می‌شود. واحد fr کسری (fraction) از فضای باقیمانده در گرید را مشخص می‌کند. با این حساب، مقادیر از نوع <flex> در واقع، از نوع <dimension> هستند.

کمیت‌ها

نوع‌های داده‌ای مربوط به کمیت‌ها (quantities) برای تعیین فاصله و سایر کمیت‌ها به کار می‌روند. جدول زیر لیست مهمترین این نوع‌ها را ارائه می‌دهد.

نوع داده توضیح مثال
<length> نوع‌های طولی که در واقع، از نوع <dimension> هستند و به فاصله‌ها اشاره می‌کنند و می‌توانند به همراه واحدهای نسبی یا مطلق بیایند. width: 2in;
height: 29.9cm;
font-size: 1.2em;
border-width: 5px;
<angle> مقادیر بیانگر زاویه که در واقع، از نوع <dimension> هستند و به همراه یکی از واحدهای درجه (deg)، رادیان (rad)، گرادیان (grad) و یا دور (turn) می‌آیند. transform: rotate(45deg);
transform: rotate(3.1416rad);
transform: rotate(-50grad);
transform: rotate(1.75turn);
<time> مقادیر زمانی که در واقع، از نوع <dimension> هستند و به همراه یکی از واحدهای ثانیه (s) یا میلی‌ثانیه (ms) می‌آیند. animation-duration: 3s;
animation-delay: 200ms;
<frequency> مقادیر مربوط به فرکانس که در واقع، از نوع <dimension> هستند و به همراه یکی از واحدهای هرتز (Hz) یا کیلوهرتز (KHz) می‌آیند. این نوع داده در حال حاضر، در هیچ پراپرتی CSS استفاده نمی‌شود.
<resolution> مقادیر رزولوشن برای تعیین رزولوشن در مدیا کوئری‌ها که در واقع، از نوع <dimension> هستند و به همراه یکی از واحدهای پیکسل در اینچ (dpi)، نقطه در سانتیمتر (dpcm)، نقطه در پیکسل (dppx) می‌آیند. @media print and
(min-resolution: 300dpi) { … }

در ادامه، به بررسی دقیق‌تر هر یک از نوع‌های جدول بالا می‌پردازیم.

نوع داده length

نوع داده <length> شامل مقادیری است که بیانگر فاصله (distance) یا طول هستند. پراپرتی‌های متعددی مانند width، height، margin، padding، border-width و font-size می‌توانند مقادیر از نوع <length> را دریافت کنند. البته بسیاری از این پراپرتی‌ها می‌توانند مقادیر درصدی را نیز دریافت کنند. ضمناً‌ برخی از پراپرتی‌ها می‌توانند مقادیر طولی منفی را نیز دریافت کنند.

سینتکس مقادیر از نوع <length> به این صورت است که یک مقدار از این نوع از یک عدد (یعنی یک مقدار از نوع <number>) به همراه یک واحد اندازه‌گیری طول تشکیل می‌شود.

نوع داده angle

نوع داده‌ی <angle> شامل مقادیر زاویه‌ای است که بر حسب یکی از واحدهای درجه (degree)، رادیان (radian)، گرادیان (gradian) و دور (turn) بیان می‌شوند. در حقیقت، یک مقدار از نوع <angle> از یک عدد به همراه یکی از واحدهای مذکور تشکیل می‌شود. از مقادیر این نوع در ساخت انواع گرادیان‌ها و برخی از توابع مربوط به transform استفاده می‌شود.

امکان استفاده از اعداد منفی نیز برای مقادیر زاویه‌ای وجود دارد. مقادیر مثبت، زوایا را در جهت حرکت عقربه‌های ساعت می‌سنجند و مقادیر منفی در خلاف جهت حرکت عقربه‌های ساعت. در مورد واحدهای اندازه‌گیری مقادیر زاویه‌ای نیز باید بدانید که:

  • deg: مقادیر را بر حسب درجه تعیین می‌کند. یک دایره‌ی کامل 360 درجه در نظر گرفته می‌شود.
  • rad: مقادیر را بر حسب درجه تعیین می‌کند. یک دایره‌ی کامل برابر با 2π رادیان در نظر گرفته می‌شود.
  • grad: مقادیر را بر حسب گرادیان تعیین می‌کند. یک دایره‌ی کامل 400 گرادیان در نظر گرفته می‌شود.
  • turn: مقادیر را بر حسب دور تعیین می‌کند. یک دایره‌ی کامل یک دور یا turn در نظر گرفته می‌شود.

به جدول زیر نگاه کنید.

زوایای معادل نمایش
90deg
100grad
0.25turn
1.5708rad
180deg
200grad
0.5turn
3.1416rad
-90deg
-100grad
-0.25turn
-1.5708rad
0=0deg
0grad
0turn
0rad

نوع داده time

نوع داده‌ی <time> شامل مقادیر زمانی است که بر حسب ثانیه (s) یا میلی‌ثانیه (ms) بیان می‌شوند. مقادیر از این نوع در انیمیشن، ترنزیشن و پراپرتی‌های مربوط به آنها کاربرد دارند. مقادیر از نوع <time> از یک عدد به همراه یکی از دو واحد ثانیه و میلی‌ثانیه تشکیل می‌شوند.

دقت داشته باشید که بر خلاف بسیاری از نوع‌های دیگر، در مورد مقادیر از نوع <time> امکان حذف واحد برای مقدار صفر وجود ندارد؛ یعنی 0s را نمی‌توان با 0 جایگزین کرد.

نوع داده frequency

نوع داده‌ی <frequency> شامل مقادیر فرکانسی است که بر حسب یکی از واحدهای هرتز (Hz) یا کیلوهرتز (KHz) بیان می‌شوند. البته در حال حاضر، این نوع داده در هیچ یک از پراپرتی‌های CSS استفاده نمی‌شود و در مرورگرها نیز پشتیبانی نمی‌شود.

در مورد نوع داده‌ی <frequency> نیز امکان استفاده از مقدار 0 وجود ندارد و باید از مقدار 0Hz یا 0KHz استفاده کرد.

توجه داشته باشید که اگرچه واحدهای اندازه گیری نسبت به بزرگی و کوچکی حروف حساس نیستند اما بهتر است با پیروی از دستگاه SI واحدهای هرتز و کیلوهرتز را به صورت Hz و KHz بنویسیم.

نوع داده resolution

نوع داده‌ی <resolution> شامل مقادیر معرف رزولوشن یا قدرت تفکیک‌پذیری پیکسل‌هاست که در مدیا کوئری‌ها کاربرد دارد. مقادیر از این نوع از یک عدد مثبت به همراه یکی از واحدهای اندازه‌گیری زیر تشکیل می‌شوند:

  • dpi: مخفف dots per inch است و از تعداد پیکسل‌های موجود در یک اینچ حاکی است. برای مثال، رزولوشن 72dpi به معنای وجود 72 پیکسل در هر اینچ طول و یا 72*72 پیکسل در هر اینچ مربع است.
  • dpcm: مخفف dots per centimeter است و به منزله‌ی تعداد پیکیل‌های موجود در یک سانتیمتر است.
  • dppx: مخفف dots per pixel است. 1dppx معادل 96dpi است.
  • x: این واحد تنها یک مخفف برای dppx است.

دقت داشته باشید که مقدار 0 برای مقادیر از نوع معتبر نیست و نمی‌توان آن را به جای 0dpi به کار برد.

رنگ‌ها

نوع‌های داده‌ای مربوط به رنگ شامل مقادیر معرف رنگ‌ها هستند که به پراپرتی‌هایی مانند color و background-color اختصاص داده می‌شوند. جدول زیر مهمترین نوع‌های مربوط به رنگ را آورده است.

نوع داده توضیح مثال
<color> مقادیر مشخص‌کننده‌ی رنگ که می‌توانند نام یک رنگ یا کد هگزادسیمال رنگ باشند و یا با استفاده از توابع rgb() و rgba() و hsl() و hsla() و یا lab() و چند تابع جدید دیگر تعیین شوند. color: red;
color: #ff0000;
color: hsl(120, 100%, 50%);
<alpha-value> مقادیر مشخص‌کننده‌ی شفافیت (transparency) رنگ که با مقداری عددی بین صفر و یک یا بر حسب درصد بیان می‌شوند. transparency: 0.3;
transparency: 30%;