آشوب

کسی رو می‌بینی که همه‌ی ایدهآل‌های تو رو داره و فکر می‌کنی که چقدر خوشبخته غافل از اینکه اون ایده‌آل‌های خودش رو داره، و مشکلات خودش رو…

آدم‌ها، اشتباه زیاد می‌کنند… برای فرار از تنهایی کسی رو وارد زندگی‌شون می‌کنن غافل از اینکه حالا باید علاوه بر تنهایی، یکی دیگه رو هم “تحمل” کنند…

اگر بلد نبودم، می‌تونستم یاد بگیرم. اگر بلد نبودم، می‌تونستی یادم بدی می‌تونستم از تو یاد بگیرم…

شهر را باران شست، کاش کدورت را هم…!

در این نوشته با چند مثال به معرفی CSS Expression پرداخته شده و به نیازهایی که این امکان می‌تواند برای یک طراح رفع کند اشاره شده است.

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

برای حل این مشکل البته راه‌های فراوانی هست. کنترل اندازه‌ی عکس هنگام 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>

این دقیقا همان چیزی‌ست که دنبالش بودیم. حالا می‌توان مشخص کرد همه‌ی تصاویر تا زمانی که عرض آنها کوچکتر از ۳۰۰px هستند با اندازه‌ی اصلی و تصاویر با عرض برزگتر از ۳۰۰px با اندازه‌ی ۳۰۰px نمایش داده شوند. اما خبر بد اینست که 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 اشاره دارد که اگر از ۳۰۰ کوچکتر باشد مقدار شناسه‌ی width در CSS برابر auto می‌شود (یعنی هرآنچه هست!) در غیر این صورت برابر ۳۰۰px می‌شود. و در هیچ حالتی بیشتر از ۳۰۰px نخواهد بود که مقصود ماست.

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

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

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

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

#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>

با استفاده از همین چند خط می‌توان کارهای دیگری نیز کرد که معمولا نیاز طراحان است. اگر مقاله‌ی “CSS Layout با استفاده از absolute positioning، مشکلات و راه حل‌ها” را دیده باشید به مشکلات موجود در قالب‌های CSS اشاره کردم و راه حل‌های ارائه شده را آوردم که فکر می‌کنم کسی تمایلی به استفاده از آنها را ندارد!
با همین چند خط کد می‌توان این مشکل را تا حدودی حل کرد. به این صفحه نگاه کنید.

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

با در نظر گرفتن حداقل اندازه‌ی ۶۰۰px برای ارتفاع، زیبایی بیشتری به صفحه داده می‌شود. البته تا زمانی متن از ۶۰۰px در صفحه تجاوز نکند!

در مقالات بعدی شاید به دیگر نیازهایی که با CSS extenssion می‌تواند آنها را جواب گفت خواهم پرداخت.

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

دیشب خواب دیدم در بازی اول جام‌جهانی شکست مفتضحانه‌ای از مکزیک می‌خوریم بعد بچه‌های تیم ملی به خودشون میان و با شکست دادن پرتغال و آنگولا به عنوان تیم دوم گروه صعوی می‌کنیم و در دور بعد با ناداوری مقابل آرژانتین شکست می‌خوریم و حذف می‌شویم…!