[echessdesign]

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

برای حل این مشکل البته راه‌های فراوانی هست. کنترل اندازه‌ی عکس هنگام upload (بالاگذاری!) آن اولین راه حلی است که به ذهن می‌رسد (در اینجا فرض می‌کنیم سیستم مدیریت برای سایت در نظر گرفته شده که امکان آپلود کردن فایل را به مشتری می‌دهد. مثلا یک CMS). اما اعمال چنین محدودیتی برای همه‌ی تصاویر که قرار است توسط سیستم آپلود شود زیاد جالب نیست چرا که مشخص نیست کدام تصویر قرار است در کجا قرار بگیرد و حداکثر اندازه مجاز برایش چقدر خواهد بود و پیاده سازی سیستمی برای مدیریت همه‌ی حالت‌ها مثل یک کابوس خواهد بود. ضمن آنکه اگر مشتری بخواهد طراحی سایت را تغییر بدهد باید برای تنظیم مجدد اندازه‌ها به شما مراجعه کند که خوشایند مشتری نیست هرچند که شما را خوشحال می‌کند!
مشکلات دیگری هم هست. ممکن است تصویر از راه‌‌های دیگری (مثلا با FTP) به سرور فرستاده شده باشد یا اصلا روی سرور دیگری باشد.

راه دیگر اینست که با استفاده از شناسه‌ی width برای تگ‌های img در CSS همه‌ی تصاویر را با اندازه‌ای متوسط نمایش دهیم!!! به صورت زیر.

.cntnt img { width: 300px; }
<div class="cntnt"><img src="pic.jpg" /></div>

اما راه حل بهتر با استفاده از CSS:
در CSS شناسه‌ای وجود دارد که به وسیله‌ی آن می‌توان حداکثر یا حداقل اندازه‌ی طول یا عرض عناصر را مشخص کرد.

max-width, min-width, max-height, min-height

.cntnt img { max-width: 300px; }
<div class="cntnt"><img src="pic.jpg" /></div>

این دقیقا همان چیزی‌ست که دنبالش بودیم. حالا می‌توان مشخص کرد همه‌ی تصاویر تا زمانی که عرض آنها کوچکتر از 300px هستند با اندازه‌ی اصلی و تصاویر با عرض برزگتر از 300px با اندازه‌ی 300px نمایش داده شوند. اما خبر بد اینست که Internet Explorer اصلا این شناسه‌ها را در نظر نمی‌گیرد و کار خود را می‌کند! برعکس FireFox به‌خوبی با این کدها مشکل را حل می‌کند.
پیش از آنکه طرفداران FireFox خوشحال شوند از این همه برتری FireFox و حماقت IE، به نکته‌ای که دلیل اصلی نوشته شدن این نوشته است اشاره می‌کنم: CSS expression.

CSS expression امکانی‌ست که IE ورژن ۵ به بعد از آن پشتیبانی می‌کند به‌وسیله‌ی این امکان می‌توان در فایل‌های CSS از کدهای JavaScript برای داشتن تنظیمات هوشمندتر استفاده کرد البته FireFox از امکان درک و تحلیل این expressionها عاجز است! به صورت زیر:

width: expression( javascript code);

برگردیم به مسئله‌ی اصلی. مشکل را در FireFox حل کردیم. برای حل مشکل در IE با استفاده از expressionهای گفته شده، خط زیر را هم به CSS اضافه می‌کنیم.

.cntnt img {
max-width: 300px;
width : expression(this.width < 300 ? "auto":"300px");
}
<div class="cntnt"><img src="pic.jpg" /></div>

جمله‌ی مشخص شده یک عبارت (اپراتور؟) شرطی است که JavaScript آنرا از زبان C قرض گرفته! A?B:C به این صورت است که اگر A درست باشد B برگردانده می‌شود در غیر این صورت C. کلمه کلیدی this هم در JavaScript به شی یا المان جاری اشاره می‌کند. در خط بالا this.width در واقع به شناسه‌ی width از المان img اشاره دارد که اگر از 300 کوچکتر باشد مقدار شناسه‌ی width در CSS برابر auto می‌شود (یعنی هرآنچه هست!) در غیر این صورت برابر 300px می‌شود. و در هیچ حالتی بیشتر از 300px نخواهد بود که مقصود ماست.

اگر مرورگرهای دیگر هم CSS expressionها پشنیبانی کامل می‌کردند می‌شد با آن معجزات فراوانی کرد که در حالت عادی نیاز به کدنویسی فراوان با DHTML دارد.

http://javascript.echessdesign.com/img/index008.gif

مثلا برای متمایز کردن سطرهای یک جدول از یکدیگر (شکل بالا) سمت کلاینت به‌جای سمت سرور می‌توان از CSS expression استفاده کرد. البته فقط در IE کار می‌کند.

.t1 tbody tr {
background-color: expression(this.sectionRowIndex % 2 == 0 ? "#cccccc" : "#e5e5e5");
}

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

#mybox {
position: absolute;
width: 100px;
height: 100px;
padding: 10px;
left: expression(document.body.offsetWidth - 130 + "px");
top: expression(document.body.offsetHeight - 130 + "px");
background: red;
}
<div id="mybox">my box here</div>

البته برای این کار راه حل ساده‌تر و عمومی‌تری هم هست! این نکته فقط به عنوان یک نمونه گفته شد.

#mybox {
position: absolute;
width: 100px;
height: 100px;
padding: 10px;
right: 25px;
bottom: 25px;
background: red;
}
<div id="mybox>my" box here</div>

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

min-height:600px;
height:expression(this.scrollHeight > 600 ? "auto":"600px");

منابع: ashoob.net , حل مشکل max width در IE