سی‌اس‌اس؛ این Max و Min دوست‌داشتنی

الگوهای آبشاری یا سی‌اس‌اس روشی ساده برای نمایش چیدمان و جلوه‌های تصویری (مانند نوع قلم، رنگ و اندازه‌ها) در صفحه‌های وب است.

سی‌اس‌اس قابلیت‌های شخصی‌سازی خیلی خیلی زیادی داره، شما می‌تونید تقریبن همه‌ی عنصرهای صفحه‌ی وبتون رو توسط سی‌اس‌اس کنترل و شخصی سازی کنید.

با سی‌اس‌اس به راحتی می‌تونید اندازه‌ی Textarea*ها رو کنترل کنید. به این صورت که برای عرض از width و برای ارتفاع از height استفاده می‌کنیم تا در جاهای مختلف، اندازه‌های متنی متفاوتی برای وارد کردن متن وجود داشته باشه.
از دو دستور width و height برای تنظیم اندازه‌ی اِلمان‌های دیگه‌ی صفحه‌ی وب‌ِمون هم می‌تونیم استفاده کنیم.

اگه دقت کرده باشید از چند مدت پیش در مرورگر گوگل کروم(+ و +) و سافاریِ اپل، و جدیدن هم در نسخه چهار فایرفاکس (که البته هنوز در ورژن‌های آزمایشی به سر می‌بره!) این قابلیت اضافه شده که شما به راحتی بتونید این Textareaها رو تغییر اندازه بدید و مطابق اندازه‌ی متنتون اون رو هم تنظیم کنید.

در تصویر زیر می‌تونید این عملکرد رو ببینید؛

به این صورت که با نگه داشتن کلیک موس بر روی قسمت‌های مشخص شده می‌تونید به راحتی اندازه‌ی این محل‌های ورود متن رو تغییر بدید.

حالا این قابلیت هم ویژگی‌های خوب داره، هم معایب؛
+: از ویژگی‌های خوبش اینه که برای مثال موقعی که می‌خواهید متنی رو در فرمی بنویسید و ارسالش کنید، در صورت طولانی بودن متن نظرتون می‌تونید با بزرگ‌تر کردن این محل ورود متن به راحتی متن بلند خودتون رو بنویسید و در صورت نیاز ویرایشش کنید، در صورتی که اگه مرورگر شما این قابلیت رو نداشته باشه باید با اسکرول کردن متن رو مشاهده و ویرایش کنید**.
-: عیب این قابلیت هم اینه که بعضی پوسته‌ها برای کارکرد با این قابلیت بهینه نشدن که این باعث می‌شه با کوچیک‌تر کردن (در حال حاظر فقط در فایرفاکس ۴) و یا با بزرگ‌تر کردن (در فایرفاکس، کروم و سافاری) Textarea قسمتی از پوسته به‌خاطر کوچیک و بزرگ شدن این قسمت بهم می‌ریزه.

به دو نمونه‌ی زیر یه نگاه بندازید. البته گاهی می‌تونه خیلی بدتر از اینا بشه!

ایجاد نوار لغزنده (اسکرول) افقی یکی از بدترین حالت‌ها هستش که باعث می‌شه بخشی از متن به گوشه‌ی راست و یا چپ مرورگر فرو بره و قابل دیدن نباشه.

حالا ما می‌آیم، به وسیله‌ی CSS و با تعریف کردن دو دستور Max و Min برای ارتفاع و عرض این ناحیه‌های متنی کاری می‌کنیم که این انعطاف پذیری یه مقداری محدود بشه و دیگه قالب رو بهم نریزه.

روش استفاده از این دستورات رو تو یه نمونه‌ی زیر می‌تونید ببنید:

.textarea {
	width: 250px; /* اندازه عرض "فرم ورود متن" در حالت عادی */
	height: 200px; /* اندازه ارتفاع "فرم ورود متن" در حالت عادی */

	min-width: 150px; /* حداقل اندازه عرض "فرم ورود متن" در حالتی که تغییر اندازه داده شده */
	min-height: 50px; /* حداقل اندازه ارتفاع "فرم ورود متن" در حالی که تغییر اندازه شده */

	max-width: 500px; /* حداکثر اندازه عرض "فرم ورود متن" در حالی که تغییر اندازه داده شده */
	max-height: 700px; /* حداکثر اندازه ارتفاع "فرم ورود متن" در حالتی که تغییر اندازه داده شده */
}

*فرم ورود متن = Textarea = ?

از این دستور CSS می‌تونید برای جاهای دیگه هم استفاده کنید.
برای مثال می‌تونید از این تابع برای عکس‌های درون مطلب استفاده کنید تا پهنای عکس‌ها از یک مقدار مشخصی بیشتر نشه و از کادر بیرون نزنه و احتمالاً قالب رو بهم نریزه!

در خیلی از جاهای دیگه هم می‌تونید از این دستور استفاده کنید، اگه اهل فن باشید خودتون بهتر از من می‌دونید که از این دستور در کجاها می‌تونید استفاده کنید، این پست من فقط و فقط جهت یادآوری و تاکید بیشتر برای استفاد از این قابلیت بود :).

نکته: شما از قبل‌تر هم این قابلیت رو داشتید که از طریق CSS و یا جاوا اسکریپت کاری کنید که کاربرا به راحتی بتونن این textareaها رو تغییر اندازه بدن، حتی در مرورگرهایی مثل اینترنت اکسپلورر که از این قابلیت در حال حاظر به صورت پیش‌فرض پشتیبانی نمی‌کنن!

*: راستش را بخواهید معادل فارسی مناسبی برای کلمه‌ی Textarea پیدا نکردم که مفهوم رو به طور کامل و درست برسونه :)، اگه کلمه‌ای در نظر دارید ممنون می‌شم از قسمت نظرات برای من و بقییه به اشتراک بگذارید!

**: همون طور که در نکته‌ی بالا گفتم، شما به راحتی با جاوا اسکریپت و یا سی‌اس‌اس می‌تونید قابلیت تغییر سایز Textareaها رو به مرورگر اضافه کنید.