آموزش CSS مبتدی : تصاویر، رسانهها و عناصر فرم
در این درس نگاهی خواهیم داشت به نحوه برخورد با عناصر خاص در CSS. تصاویر، سایر رسانهها و عناصر فرم، از نظر توانایی شما در استایلدهی به آنها با CSS، کمی متفاوت از جعبههای معمولی رفتار میکنند. درک اینکه چه چیزی ممکن است و چه چیزی ممکن نیست، میتواند از برخی ناامیدیها جلوگیری کند و این درس برخی از نکات اصلی را که باید بدانید برجسته میکند.
تصاویر و ویدیوها به عنوان عناصر جایگزینشده توصیف میشوند. این بدان معناست که CSS نمیتواند بر طرحبندی داخلی این عناصر تأثیر بگذارد - فقط موقعیت آنها در صفحه در میان سایر عناصر. با این حال، همانطور که خواهیم دید، کارهای مختلفی وجود دارد که CSS میتواند با یک تصویر انجام دهد.
عناصر جایگزینشده خاص، مانند تصاویر و ویدیو، همچنین به عنوان عناصری با نسبت ابعاد توصیف میشوند. این بدان معناست که اندازه آنها در هر دو بعد افقی (x) و عمودی (y) است و به طور پیشفرض با استفاده از ابعاد ذاتی فایل نمایش داده میشوند.
همانطور که از دنبال کردن این درسها میدانید، هر چیزی در CSS یک کادر ایجاد میکند. اگر تصویری را درون کادری قرار دهید که از هر دو جهت کوچکتر یا بزرگتر از ابعاد ذاتی فایل تصویر باشد، یا کوچکتر از کادر به نظر میرسد یا از کادر سرریز میشود. شما باید در مورد اینکه سرریز چه اتفاقی میافتد تصمیم بگیرید.
در مثال زیر دو کادر داریم که هر دو ۲۰۰ پیکسل اندازه دارند:
یکی حاوی تصویری است که کوچکتر از ۲۰۰ پیکسل است - از کادر کوچکتر است و برای پر کردن آن کشیده نمیشود.
دیگری بزرگتر از ۲۰۰ پیکسل است و از کادر سرریز میشود.
در مورد مشکل سرریز شدن چه کاری میتوانیم انجام دهیم؟
همانطور که در بخش «اندازهگذاری آیتمها در CSS» آموختیم، یک تکنیک رایج، تنظیم حداکثر عرض تصویر روی ۱۰۰٪ است. این کار باعث میشود تصویر از کادر کوچکتر شود اما بزرگتر نشود. این تکنیک با سایر عناصر جایگزین شده مانند ها یا ها نیز کار خواهد کرد.
سعی کنید را به قانون عنصر در مثال بالا اضافه کنید. خواهید دید که تصویر کوچکتر بدون تغییر باقی میماند، اما تصویر بزرگتر کوچکتر میشود تا در کادر جا شود.
مدیریت مشکلات نمایش تصویر با object-fit
مثال بالا مجموعه دیگری از مشکلات نمایش تصاویر درون کانتینرها را آشکار میکند. متوجه خواهید شد که پس از تنظیم برای تصاویر، تصویر دوم کانتینر خود را کاملاً پر نمیکند؛ در پایین آن یک فضای خالی باقی میماند. دلیل این امر این است که دادن عرض مشخص به یک تصویر باعث میشود ارتفاع آن طوری تنظیم شود که نسبت ابعاد آن حفظ شود.
چگونه میتوانیم تصویر را طوری اندازه دهیم که کانتینر خود را کاملاً بپوشاند؟ میتوانیم کانتینر را طوری تنظیم کنیم که عرض و ارتفاع ثابتی داشته باشد و سپس همانطور که در مثال بعدی نشان داده شده است، به تصویر عرض و ارتفاع ۱۰۰٪ بدهیم:
با این حال، تصویر به دلیل تغییر نسبت ابعاد، دچار اعوجاج شده است - به نظر کشیده میرسد. برای رفع این مشکل، میتوانید از ویژگی object-fit استفاده کنید که نحوه تغییر اندازه تصویر را برای متناسب شدن با ظرف آن (عنصر ) تعیین میکند. ویژگی object-fit میتواند چندین مقدار مختلف را بپذیرد که مفیدترین آنها به شرح زیر است:
cover: تصویر به طور کامل عنصر را پر میکند در حالی که نسبت ابعاد آن حفظ میشود، بنابراین برخی از قسمتهای تصویر نمایش داده نمیشوند.
contain: تصویر به طور کامل درون عنصر قرار میگیرد در حالی که نسبت ابعاد آن حفظ میشود، بنابراین برخی از قسمتهای عنصر پر نمیشوند. این منجر به "جعبه حروف" یا "جعبه ستون" میشود.
مثال بعدی مقادیر cover و contain را که روی دو کپی از تصویر نشان داده شده در مثال قبلی تنظیم شدهاند نشان میدهد، بنابراین میتوانید ببینید که اثرات آنها چیست:
نکات کلیدی در اینجا عبارتند از:
ویژگی اندازه خود تصویر را تغییر میدهد تا درون عنصر که آن را در صفحه جاسازی میکند، قرار گیرد.
برای اینکه تأثیری داشته باشد، باید تغییر اندازه دهد.
اگر عنصر تغییر اندازه ندهد، تصویر با اندازه و نسبت ابعاد اصلی (یا ذاتی) خود نشان داده میشود، بنابراین هیچ تأثیری نخواهد داشت.
عناصر جایگزین شده در طرح بندی
هنگام استفاده از تکنیکهای مختلف طرحبندی CSS روی عناصر جایگزین شده، ممکن است متوجه شوید که آنها کمی متفاوت از سایر عناصر رفتار میکنند. به عنوان مثال، در یک طرحبندی شبکهای، عناصر به طور پیشفرض کشیده میشوند تا کل ناحیه شبکه خود را پر کنند. تصاویر کشیده نمیشوند؛ در عوض، آنها با شروع ناحیه شبکه خود تراز میشوند.
میتوانید این اتفاق را در مثال زیر مشاهده کنید که در آن یک کانتینر شبکهای دو ستونی و دو ردیفی داریم که چهار آیتم در آن قرار دارد. همه عناصر دارای رنگ پسزمینه هستند و کشیده میشوند تا سطر و ستون را پر کنند. با این حال، تصویر کشیده نمیشود.
شما تا ماژول بعدی طرحبندی را مطالعه نخواهید کرد. فعلاً فقط به خاطر داشته باشید که عناصر جایگزین شده، وقتی بخشی از یک سیستم طرحبندی خاص مانند grid یا flexbox میشوند، رفتارهای پیشفرض متفاوتی دارند، اساساً برای جلوگیری از کشیده شدن عجیب آنها توسط طرحبندی.
عناصر فرم در مورد استایلبندی با CSS مشکلاتی دارند. ماژول افزونههای فرمهای وب، جنبههای پیچیدهتر استایلبندی انواع ورودیهای فرم را پوشش میدهد که در اینجا به آنها نمیپردازیم. با این حال، چند نکته اساسی کلیدی وجود دارد که ارزش برجسته کردن در این بخش را دارند.
بسیاری از کنترلهای فرم از طریق عنصر به صفحه شما اضافه میشوند - این عنصر فیلدهای فرم ساده مانند ورودیهای متنی را تعریف میکند و تا فیلدهای پیچیدهتری مانند انتخابگرهای رنگ و تاریخ را شامل میشود. برخی عناصر اضافی مانند برای ورودی متن چندخطی و همچنین عناصری مانند و برای نگهداری و برچسبگذاری بخشهایی از فرمها استفاده میشوند.
HTML همچنین شامل ویژگیهایی است که به توسعهدهندگان وب امکان میدهد فیلدهای مورد نیاز و حتی نوع محتوایی را که باید وارد شود، مشخص کنند. اگر کاربر چیزی غیرمنتظره وارد کند یا یک فیلد مورد نیاز را خالی بگذارد، مرورگر میتواند یک پیام خطا نشان دهد. مرورگرهای مختلف در میزان استایلبندی و سفارشیسازی که برای چنین مواردی مجاز میدانند، با یکدیگر متفاوت هستند.
استایلدهی به عناصر ورودی متن
عناصری که امکان ورود متن را فراهم میکنند، مانند ، عنصر خاصتر و عنصر ، به راحتی قابل سبکبندی هستند و معمولاً مانند سایر کادرهای صفحه شما رفتار میکنند. با این حال، سبکبندی پیشفرض این عناصر بسته به سیستم عامل و مرورگری که کاربر شما با آن از سایت بازدید میکند، متفاوت خواهد بود.
در مثال زیر، ما برخی از ورودیهای متن را با استفاده از CSS سبکبندی کردهایم. میتوانید ببینید که مواردی مانند حاشیهها، حاشیهها و فاصلهگذاری، همانطور که انتظار دارید اعمال میشوند. ما از انتخابگرهای ویژگی برای هدف قرار دادن انواع مختلف ورودی استفاده میکنیم.
سعی کنید مثال را ویرایش کنید تا با تنظیم حاشیهها، اضافه کردن رنگهای پسزمینه به فیلدها و تغییر فونتها و فاصلهگذاری، ظاهر فرم را تغییر دهید.
هنگام تغییر استایل عناصر فرم باید مراقب باشید تا مطمئن شوید که هنوز برای کاربر واضح است که آنها عناصر فرم هستند. میتوانید یک ورودی فرم بدون حاشیه و پسزمینه ایجاد کنید که تقریباً از محتوای اطراف آن قابل تشخیص نیست، اما این کار تشخیص و تعامل با آن را بسیار دشوار میکند.
بسیاری از انواع ورودیهای پیچیدهتر توسط سیستم عامل رندر میشوند و برای استایلبندی غیرقابل دسترسی هستند. بنابراین، همیشه باید فرض کنید که فرمها برای بازدیدکنندگان مختلف کاملاً متفاوت به نظر میرسند و فرمهای پیچیده را در تعدادی از مرورگرها آزمایش کنید.
عناصر فرم در مرورگرها و سیستم عاملهای مختلف رفتار متفاوتی دارند. این بخش به چند مورد از رایجترین مشکلات میپردازد و راهکارهایی برای مقابله با آنها ارائه میدهد.
در برخی از مرورگرها، عناصر فرم به طور پیشفرض سبک فونت را به ارث نمیبرند. بنابراین، اگر میخواهید مطمئن شوید که فیلدهای فرم شما از فونت تعریف شده در بدنه یا عنصر والد استفاده میکنند، باید این قانون را به CSS خود اضافه کنید.
عناصر فرم و اندازهبندی جعبهای
در مرورگرهای مختلف، عناصر فرم از قوانین اندازهبندی جعبهای متفاوتی برای ویجتهای مختلف استفاده میکنند. شما در درس مدل جعبهای ما در مورد ویژگی اندازهبندی جعبهای آموختید و میتوانید از این دانش هنگام استایلدهی فرمها استفاده کنید تا هنگام تنظیم عرض و ارتفاع روی عناصر فرم، از یک تجربه ثابت اطمینان حاصل کنید.
برای سازگاری، ایده خوبی است که حاشیهها و فاصلهگذاری را برای همه عناصر روی 0 تنظیم کنید، سپس هنگام استایلدهی کنترلهای خاص، این موارد را دوباره اضافه کنید:
علاوه بر قوانین ذکر شده در بالا، شما باید را نیز روی عناصر تنظیم کنید تا برخی از مرورگرهای قدیمی در صورت عدم نیاز به نوار اسکرول، آن را نمایش ندهند:
درست کردن همه چیز با "reset"
به عنوان مرحله آخر، میتوانیم ویژگیهای مختلف مورد بحث در بالا را در "تنظیم مجدد فرم" زیر جمعبندی کنیم تا یک پایه ثابت برای کار فراهم کنیم. این شامل تمام موارد ذکر شده در سه بخش آخر میشود:
بسیاری از توسعهدهندگان از شیوهنامههای نرمالسازی برای ایجاد مجموعهای از شیوهنامههای پایه برای استفاده در تمام پروژهها استفاده میکنند. معمولاً این stylesheetها کارهای مشابهی با موارد ذکر شده در بالا انجام میدهند و قبل از اینکه شما روی CSS کار کنید، مطمئن میشوند که هر چیز متفاوتی در مرورگرها روی یک پیشفرض ثابت تنظیم شده است. این stylesheetها دیگر به اندازه گذشته مهم نیستند، زیرا مرورگرها معمولاً نسبت به گذشته سازگارتر هستند. با این حال، اگر میخواهید به یک مثال نگاهی بیندازید، Normalize.css را بررسی کنید، که یک stylesheet بسیار محبوب است که به عنوان پایه توسط بسیاری از پروژهها استفاده میشود.
