در این مقاله به بررسی ده سوال مهم در رابطه با زبان CSS می‌پردازیم که امکان پرسیده شدن آن‌ها در مصاحبه‌های شغلی فرانت اند، بسیار زیاد است.
۳ روش اصلی برای افزودن CSS به صفحه‌ی وب را نام ببرید؟ مزایا و معایب هر یک از این روش‌ها را بیان کنید.
سه راه برای افزودن کد CSS به صفحه‌ی وبمان وجود دارد؛ inline (در خط)، embedded (تعبیه شده) و external (بیرونی). هر کدام از این روش‌ها معایب و مزایای خود را دارند:
- کد inline می‌تواند به طور مستقیم در فایل HTML و در attribure ای به نام style، برای هر یک از المنت‌های آن، نوشته شود. فایده‌ی اصلی استفاده از این نوع کد، قابلیت override (باز نویسی) کردن پراپرتی‌های تعریف شده از قبل، برای یک سری المنت خاص است. البته بهتر است از این نوع CSS فقط برای اعمال تغییرات کوچک در استایل استفاده کنید و در مجموع بهتر است برای کلیت استایل‌دهی‌های پیچیده، از دو روش دیگر (external, embedded) استفاده کنید.
- کد external مزیت جداسازی وظایف را در توسعه‌ی فرانت اند وب‌سایت‌ها به ارمغان می‌آورد. به این ترتیب که استایل‌دهی‌ها به طور کامل در یک فایل جداگانه با پسوند .css قرار می‌گیرند و فقط با استفاده از یک خط کد، درون فایل HTML مورد نظر، فراخوانی می‌شوند. مزیت دیگر این روش، جلوگیری از تکرار کدهایتان برای صفحات مختلف HTML است و در واقع شما با نوشتن یک فایل .css و فراخوانی آن در صفحات مختلف HTML که به آن نیاز دارند، از دوباره نویسی کدهایتان برای هر صفحه‌ی HTML جلوگیری می‌کنید. همچنین با در اختیار گذاشتن قابلیت‌هایی مثل انتخاب‌گرها (selectors) و روش‌های گروه‌بندی (grouping) باعث تمیز‌تر شدن کدهایتان و کم‌تر شدن حجم کلی CSS نویسی شما می‌شود. تنها عیب این روش هم نیاز به دانلود شدن مجزای فایل مربوط به آن، که در HTML فراخوانی شده است، می‌باشد و اگر این دانلود دچار مشکل شود، به کل استایل‌دهی وب‌سایت شما لود نخواهد شد.
- کد embedded که به internal (درونی) نیز مشهور است، باید در داخل فایل HTML شما و درون تگ <style> قرار بگیرد. البته که خود تگ <style> نیز باید درون تگ <head> قرار گیرد. این روش بسیاری از مزایای روش external را شامل می‌شود؛ مزایایی مثل قابلیت دسترسی به انتخاب‌گرها (selectors) که مهم‌ترین آن‌ها برای ایجاد استایل‌های پیچیده‌تر از inline است. علاوه بر مزایای external، روش emvedded یک مزیت دیگر نسبت به آن روش دارد؛ در این روش نیاز به لود شدن جداگانه‌ی فایل استایل‌های شما وجود ندارد و این استایل‌های موجود در <style> با دانلود شدن سند HTML شما، دانلود می‌شوند و نیاز به دانلود جداگانه ندارند. تنها ایراد این روش نیز در همین مزیت آخری که ذکر کرده‌ایم نهفته است؛ شما نمی‌توانید از کدهای CSS ای که به صورت embedded در یک سند HTML نوشته‌اید، بدون کپی و پیست کردن آن، در دیگر صفحات‌تان استفاده کنید.
Media query چیست و برای چه کاربردی استفاده می‌شود؟
مدیا کوئری‌ها در واقع فیلترهایی برای کمک به ایجاد یک وب‌سایت واکنش‌گرا (responsive) هستند. با توجه به استفاده‌ی کاربران از دستگاه‌های مختلف مثل موبایل، تبلت و لپ تاپ برای نمایش وب‌سایت‌ها، داشتن طراحی واکنش‌گرا برای صفحات وب، تبدیل به امری حیاتی شده است؛ چرا که هر کدام از این دستگاه‌ها می‌توانند دارای صفحه نمایش‌هایی با سایز و یا نسبت ابعاد متفاوتی باشند. Media query ها نیز وظیفه‌ی اعمال استایل‌هایی در صفحه‌ی وب شما با توجه به اندازه و ابعاد صفحه نمایش کاربرانتان را دارند. مدیا کوئری‌ها می‌توانند بر روی عرض صفحه نمایش، ارتفاع آن، رزولوشن، orientation (جهت) و یا نوع دستگاه کاربرانتان کنترل داشته باشند و آن‌ها را تشخیص دهند. اگر از مدیا کوئری‌ها به درستی استفاده شود، شما در نهایت یک وب‌سایت کاملا سازگار از نظر UI / UX (رابط کاربری و تجربه‌ی کاربری) بر روی اکثر دستگاه‌ها با انواع یا اندازه‌های مختلف، خواهید داشتید.
پیش‌پردازنده (preprocessor)های CSS چیست؟ آیا پیشنهاد می‌کنید که از یکی از آن‌ها در پروژه‌ی جاری‌مان استفاده کنیم؟
پیش پردازنده‌های CSS درواقع یک لایه‌ی مفهومی هستند که بر روی CSS پایه‌گذاری شده‌اند. وظیفه‌ی آن‌ها افزایش کارایی CSS و گسترش روش‌های استفاده از آن است. این اتفاق با افزودن امکاناتی متفاوت به CSS مثل متغییرها، کلاس‌های وراثتی که با exteds قابل استفاده‌اند و mixinها که چیزی شبیه به فانکشن‌های زبان‌های برنامه‌نویسی هستند، امکان‌پذیر شده‌است. Sass، Less و Stylus پیش‌پردازنده‌های مشهور حال حاضر هستند. (کدام یک را شما به شخصه ترجیح میدهید؟)
انتخاب هرکدام از این پیش‌پردازنده‌ها به تصمیم و ترجیح شخصی توسعه‌دهنده بر می‌گردد که با کدام‌یک می‌تواند بهتر ارتباط برقرار کند.
CSS box model را برای یک layout (طرح) ساده، به شکل خلاصه، توضیح دهید.
از خیلی جهات طراحی فرانت اند وب، تنها شبیه به مدیریت کردن مستطیل هاست و CSS box model نیز یک الگوی طراحی برای المنت‌های HTML فراهم آورده است که شما با استفاده از آن میتوانید به صفحه‌ی وبتان ساختار مناسبی بدهید. اجزا پایه‌ی آن در زیر لیست شده اند:
- Content: هر نوشته یا تصویری که درون جعبه (box) قرار می‌گیرد.
- Padding: محوطه‌ای بی‌رنگ که محتوا (content) را محاصره کرده است و دور آن کشیده شده است.
- Border: حاشیه‌ی محاصره‌کننده‌ی padding که دور تا دور آن کشیده شده است.
- Margin: محوطه‌ای بی‌رنگ که دور تا دور border کشیده شده است.
چگونه یک CSS model را برای یک layout ساده پیاده‌سازی می‌کنید؟ یک مثال بیاورید.
هر کدام از اجزای مدل جعبه‌ای ما (border, padding, margin, content) به طور مجزا می‌توانند برای هر یک از چهار طرف المنت‌های مختلف تعریف شوند. ترتیب این جهت‌ها به این شکل است: بالا، راست، پایین و چپ.
margin: 50px 100px 100px 50px;
/* Sets the top, right, bottom and left margins */
margin: 25px;
/* Sets the margin on all sides */
padding: 50px 100px;
/* Sets the top/bottom margin as a group and the right/left margin as a group */البته که می‌توان علاوه بر نحوه‌ی تعریف بالا، با استفاده از نام جهت‌ها برای هر کدام از این پراپرتی‌ها، آن‌ها را به شکلی مجزا از یک دیگر تعریف کنیم. مثل margin-left: 10px;
یک مثال از نحوه‌ی کارکرد counter-increment و counter-reset را در CSS بیان کنید که با استفاده از آن‌ها بتوان یک شماره‌گذاری اتوماتیک را در صفحه‌ی وب ساخت.
این دو پراپرتی در CSS به توسعه دهنده امکان شماره‌گذاری خودکار المنت‌های مورد نظرش را تنها با استفاده از CSS می‌دهد. Counter-reset مقدار یک شمارنده‌ی CSS را به عددی دلخواه باز می‌گرداند. Counter-increment نیز شمارنده را هر بار می‌افزاید. این قابلیت بسیار در صفحات وب کاربردیست. در زیر میتوانید مثالی از استفاده از این قابلیت را مشاهده کنید:
body {
counter-reset: foo;
}
h1 {
counter-reset: bar;
}
h1:before {
counter-increment: foo;
content: "Section " counter(foo) ". ";
}
h2:before {
counter-increment: bar;
content: counter(foo) "." counter(bar) " ";
}واحدهای اندازه‌گیری رایج طول در CSS مثل cm, em, in, mm, pc, pt, px را توضیح دهید.
راه‌های مختلفی برای تعیین کردن طول اجزا یا المنت‌ها یا فاصله‌ي بین النمت‌ها با استفاده از CSS وجود دارد؛ اما فقط چند مورد آن‌ها به شکل متدوال استفاده می‌شوند.
- Cm: سانتی متر
- Em: واحدی نسبی برای اندازه‌گیری که بر اساس اندازه‌ی فونت است
- In: اینج
- Mm: میلی‌متر
- Pc: pica یک واحد برای طول که معادل ۱.۶ اینج یا ۱۲ پوینت است
- Pt: برابر۱/۷۲ از یک اینج
- Px: واحد اندازه‌گیری نسبی مختص هر دستگاه که برابر با میزان مشخصی از پیکسل‌های صفحه نمایش آن است
vendor prefixes در CSS چیست؟ آیا میتوانید تعدادی از پرکاربردترین‌هایشان را که با آن‌ها آشنا هستید را بیان کنید؟
ممکن است شما توسعه‌دهنده‌ای را استخدام کرده باشید که به استفاده از قابلیت‌های جدید و آزمایشی CSS علاقه‌مند است و در پروژه‌هایتان، از قابلیت‌های غیر استاندارد CSS استفاده می‌کند. این قابلیت‌های جدید و آزمایشی معمولا روی مرورگرهای مشخصی کارکرد دارند و از آن‌جایی که هنوز به شکل استاندارد در نیامده‌اند، ممکن است در برخی مرورگرها قابل استفاده نباشند. vendor prefixes ها پیشوندهایی برای CSS استاندارد هستند که با استفاده از آن‌ها میتوانید از ناسازگاری برخی مرورگرها در استفاده از پراپرتی‌های آزمایشی و جدید، جلوگیری کنید. Vendor prefix های رایج برای برخی مرورگرهای پرکاربرد را در زیر مشاهده می‌کنید:
- -webkit- : اندروید، کروم، iOS و سافاری Android, Safari, Chrome
- -moz- : موزیلا فایرفاکس Mozilla Firefox
- -ms- : اینترنت اکسپلورر Internet Explorer
- -0- : اپرا opera
Pseudo classها را چگونه تعریف می‌کنید؟ کاربرد آن‌ها در کجاست؟
شما میتوانید pseudo class ها را با نوشتن selector موردنظرتان و سپس گذاشتن colon (:) و نوشتن نام pseudo class مورد نظر، به وجود بیاورید. رایج‌ترین کاربرد این مورد :hover است که با استفاده از آن میتوانید بر روی المنت مورد نظرتان که قبل از colon آن را نوشته‌اید، در زمانی که موس کاربر روی آن می‌رود، کنترل داشته باشید. به عنوان مثال قطعه کد زیر باعث می‌شود رنگ تگ‌های <a> شما که مربوط به لینک‌های صفحه‌ی وبتان می‌شوند، هنگام هاور کردن روی آن‌ها، به رنگ قرمز در آیند.
a:hover {
color: red
}چگونه بااستفاده از یک خط کد، میتوانید تمام pdf هایی که به صفحه‌ی زیر لینک شده‌اند را انتخاب کنید؟
<body>
<p><a href="default.asp" target="_blank">This is a link</a></p>
<p><a href="mydocument.pdf" target="_blank">This is a PDF</a></p>
<p><a href="default.asp" target="_blank">This is a link</a></p>
<p><a href="mydocument.pdf" target="_blank">This is a PDF</a></p>
</body>بخش عظیمی از CSS همین انتخاب کردن المنت‌های مشخص، برای ایجاد تغییرات دلخواه در استایل آن‌هاست. این سوال در حال تست دانش مصاحبه شونده در زمینه‌ی attribute ها و انتخاب‌گر (selector) های آن‌ها است. تمام المنت‌های مورد نظر ما، به شکل لینک در این صفحه وجود دارند؛ اما باید توجه داشته باشیم که تمام لینک‌های صفحه، المنت مورد نظر ما نیستند. در CSS شما میتوانید با استفاده از انتخاب‌گر [attribute$=”value”] تمام فایل‌های مورد نظرتان را که مقدار مربوط به attribute آن‌ها به value ختم می‌شود را انتخاب کنید. پس در این مثال نیاز به استفاده از انتخاب‌گر a[href$=”.pdf”] برای انتخاب تمامی لینک‌هایی که به یک فایل pdf اشاره دارند، داریم.
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید