سازگاری کامل با استانداردها و Backward Compatibility
اول اینکه ادعای تیم توسعه IE مبنی بر اجرای درست آزمون، به این معنی نیست که همه مشکلات IE برطرف شده باشه. همونطور که خودشون اشاره کردند، آزمون Acid2 همه جوانب استانداردهای وب رو پوشش نداده و اجرای صحیحش نمیتونه تضمینی برای انطباق کامل با استانداردها باشه.
IE مشکلات ریز و درشت بسیاری در موتور Rendering خودش داره که اصلاح برخی از این مشکلات به معنی از دست دادن Backward Compatibility هست که توسعه‌دهندگانش با امیدواری خبرش رو میدند.
مشکل IE فقط عدم پشتیبانی از استانداردها نیست. که این موارد به خودی خود مشکل آفرین نیستند. چون با اضافه شدن امکاناتی جدید به مرورگر، سایتهایی که قبلا بدون در نظر گرفتن این امکان طراحی شدند تغییری نخواهند کرد. مشکل، درست جایی شکل میگیره که IE طرز تفسیر و نمایش غلط و متضاد با استانداردها داره. این موارد (که کم هم نیستند) برای رفع شدن، Backward Compatibility را زیر سوال میبرند. چون سایتی که سابق بر این به اشتباه و غیر استاندارد، تنها متکی بر نمایش صحیح در IE از شکل خاصی از کدنویسی استفاده کرده، در نسخه جدید با تغییر رویه تفسیر و نمایش اون کد (استاندارد شدن تفسیر) به شکل دیگه‌ای نمایش داده میشه و باعث میشه به هم بریزه.
برای مثال، در IE نسخه 6 و قدیمی‌تر، قابلیت hover فقط برای عنصر لینک (a) تعریف شده بود. در حالی که در CSS2 برای هر عنصری میشه hover (و سایر pseudo selectorها) را تعریف کرد.
این قابلیت در IE7 اضافه شد. سایتهایی که قبل از انتشار IE7 طراحی شدند یا از hover برای عناصر غیر از لینک استفاده نکردند. یا در صورت استفاده جزئی و تزئینی بوده. همین سایتها با IE7 -که این قابلیت تازه اضافه شده را داره- اغلب مشکلی نخواهند داشت و شاید کمی بهتر هم به نظر برسند. اما همه موارد به این شکل نیست. خیلی از مشکلات IE نظیر box model، تفسیرهای نادرست float و موارد متعدد دیگری هستند که به سادگی و با حفظ سازگاری با نسخه‌های قبلی قابل اصلاح نیستند.
ممکنه بازهم توسعه دهندگان IE دست به شیرین‌کاری‌هایی مثل hasLayout یا Conditional Comments بزنند. اما به هر حال سایتهای غیر استاندارد قدیمی، (همونطور که با تغییرات اندک IE7 دیده شد) اغلب بدون تغییر، درست نمایش داده نمیشوند.

روند توسعه روبه‌جلو یا بازی تبلیغاتی؟
اما از جنبه دیگه‌ای هم میشه به این موضوع نگاه کرد. مایکروسافت طی سالهای اخیر به خاطر انحصار نسبی در بازار مرورگرها (سهم حدودا 90 درصدی) نیاز چندانی به رقابت و نوآوری در مرورگر قدیمی و کهنه و خارج از رده خودش (IE6) نمیدید. با ظهور فایرفاکس و فشارهای بیشتر شرکتهایی مثل Opera، مایکروسافت IE7 را به عنوان یک مُسکن موضعی منتشر کرد. چیزی که تقریبا میشه بهش مجموعه patchهای IE6 گفت! اما طی چند ماه اخیر اتفاقات دیگه‌ای افتاده که باعث شده مایکروسافت مجددا خودش را وارد جنگ مرورگرها بکنه و به هر ترفندی جایی بین رقبا باز کنه.
در نیمه نوامبر 2007 شرکت Apple نسخه جدید موتور Rendering مرورگر Safary، یعنی Webkit را معرفی کرد. با امکانات جدید و پیشرفت‌های زیادی در زمینه کیفیت و امنیت و انطباق با استانداردهای وب. در همین روزها اولین نسخه بتا از نسخه جدید مرورگر Firefox بنیاد Mozilla منتشر میشه. که همراه خودش امکانت جدید و بهبود چشمگیری در بازده و کیفیت داشته و همچنین موتور Renderingش را ارتقا داده. بعد از اینها به شکایت شرکت Opera از مایکروسافت میرسیم که درست چند روز قبل از اعلام خبر IE8 و Acid2 طرح شده.
شرکت Opera شکایتی در اتحادیه اروپا علیه مایکروسافت طرح کرده که به دو موضوع اصلی اشاره میکنه. یکی همان دعوای قدیمی برای جدا کردن IE از ویندوز یا حذف IE به عنوان مرورگر پیش‌فرض سیستم عامل مایکروسافت. و دیگری اعتراض به استاندارد نبودن مرورگر IE. هر چند که Opera مورد دوم (استانداردهای وب) را بهانه و دست آویزی برای پافشاری بر ادعای اول خودش قرار داده. ولی به هر حال عامل تحریک کننده مایکروسافت هست.
عده‌ای انتشار این خبر از جانب مدیر تیم توسعه IE را واکنشی مستقیم به شکایت Opera میدونند. که باعث میشه مایکروسافت در این دعوا در جایگاه بهتری قرار بگیره. ولی منهم مثل Joe Wilcox، عقیده دارم این اقدام مایکروسافت پاسخی به همه عوامل ریز و درشت جنگ مرورگرها بوده. در واقع ممکنه این ادعای تیم توسعه IE در حد یک بازی تبلیغاتی باشه یا حداقل در خوشبینانه ترین حالت منجر به تغییرات نه چندان اصولی مثل IE7 بشه. من قصدم این نیست که کل این موضوع را زیر سوال ببرم، بلکه فکر میکنم این ادعا (یا واکنش) کمی اغراق شده و آرمانیه، تا اجرا شده و دست یافتنی!

از IE8 هنوز هیچ جزئیاتی منتشر نشده و انتشار اولین نسخه بتای IE8 در نیمه اول سال 2008 وعده داده شده، چیزی که با توجه به سابقه مایکروسافت ممکنه به اواخر 2008 هم برسه. به همین خاطر هنوز نمیشه اطمینان داشت ادعای پشتیبانی از استانداردهای وب (یا حتی ادعای اجرای موفقیت آمیز Acid2) به واقعیت نزدیک باشه.
به هر حال آرزوی تمام طراحان وتوسعه دهندگان وب اینه که استانداردهای وب به طور گسترده در مرورگرها و ابزارهای طراحی پشتیبانی بشه تا مدت زمانی که همواره صرف رفع ایراد طراحی در مرورگرهای مختلف میشه، صرف پرداختن به خلاقیتها و نوآوری‌های طراح بشه.
من هم به امید اون روز، چشم به جنگ مرورگرها دارم. شاید روند کاهش کاربران IE یا شکایتها، قلقلکی به مایکروسافت بده.

  <ul id="nav">
     <li><a href="/home">خانه</a></li>
     <li><a href="/hosting/">میزبانی وب</a></li>
     <li><a href="/support/">پشتیبانی</a></li>
     <li><a href="/web-develop/">توسعه وب</a></li>
     <li><a href="/web-design/">طراحی وب</a></li>
     <li><a href="/about-us/">درباره ما</a></li>
  </ul>

در ادامه به سراغ شیوه نامه میرویم و به این لیست نامرتبمان شکل میدهیم.
اول باید لیست عمودی خود را به صورت افقی نمایش دهیم پس یکراست به سراغ تگ UL رفته و آنرا با نام topmenu هدف قرار میدهیم. کمی ریزه کاری به خرج میدهیم، مکان و موقعیت لیست نامرتب خود را مشخص میکنیم و سپس یک پس زمینه به آن اختصاص میدهیم. این پس زمینه میله ای به اندازه یک پیکسل و به ارتفاع منوی ما (در اینجا 30 پیکسل) میباشد که به طور افقی در طول لیست تکرار میشود.
توصیه میکنم با تنظیم padding بر روی صفر مقادیر Margin راست و چپ روی auto منوی خود را در وسط بخش مورد نظر قرار دهید و همچنین کنترل li ها را به خود آنها واگذار کنیم !
برای نمایش افقی کافیست مقدار display را برای liها روی inline قرار دهیم. که در نهایت کدهای اولیه به این شکل خواهد بود :

ul#topmenu  {
	height: 30px;
	margin: 0 auto;
	padding: 0; 	list-style-type: none;
	text-align: center;
	background-image: url(images/tp_bg.gif);
 	background-repeat: repeat-x;
 	background-position: center;
}
ul#topmenu li  {
	margin: 0;
	padding: 0;
	display: inline;
}

و حالا نوبت به بخشهای اصلی یعنی لینکها میرسد. برای اینکه لینکها تمامی سطح مورد نظر ما یعنی سطح کلید را پوشش دهد باید به یک عنصر بلوکی یا Block Level تبدیل شود. که در اینجا دقیقا بر عکس li باید مقدار display روی block قرار داده شود. همانطوریکه میدانید عناصر بلوکی در حالت عادی در زیر هم قرار میگرند. در نتیجه برای اینکه لینکها در کنار هم و به صورت افقی قرار بگیرند از خاصیت float استفاده میکنیم و مقدار float را برای لینک روی right قرار میدهیم.
حالا ما یک لیست افقی برای کنترل بهینه عناصر و یکسری لینک بلوکی در کنار هم داریم که میتوانیم به این لینکها مقادیر عرض و ارتفاع نسبت دهیم.
نکته باقیمانده متنی است که به عنوان لینک در صفحه قرار دارد که در حالت عادی این متن روی عکس با رنگ پس زمینه عنصر لینک قرار میگیرد. برای اینکه از شر این حروف و کلمات هم خلاص شویم با یک ترفند آنها را به بیرون صفحه میفرستیم و از دید بینندگان مخفی میکنیم ! (با استفاده از text-indent)
در واقع این کار یک حرکت حرفه ای برای افزایش دسترس پذیری (Accessibility) و بهینه سازی برای موتورهای جستجو (SEO) نیز میباشد و همچنین گامی موثر برای پشتیبانی از مرورگرهای قدیمی. چرا که اگر به هر علتی مانند قدیمی بودن مرورگر ، عدم پشتیبانی از CSS یا … فایل CSS اجرا نشود این متنها به درستی و در جای خود نمایش داده میشوند و همچنین در مورد Spiderها ی موتورهای جستجو که فقط با متن و ساختار پایه ای صفحات سر و کار دارند و همچنین برای دستگاههای Screen Reader که افراد نابینا استفاده میکنند موثر است. ( یک تیر و چند نشان ! )
مورد آخر برای لینک تعیین موقعیت عکس پس زمینه با ویژگی background-position است که در حالت معمولی باید در جای اصلی خود یعنی به فاصله 0 پیکسل از پایین لینک باشد و همواره تصویر در وسط کادر لینک قرار گیرد ، هر چند که ما ابعاد لینک را دقیقا به اندازه تصویر انتخاب میکنیم.
حال ما کدی شبیه به این برای لینکها داریم :

ul#nav li a  {
 	display:block;
 	text-indent:-9000px;
	text-decoration:none;
	background-position: center 0px;
	height: 30px;
 	float: right;
}

اکنون باید به فکر حالتهای دیگر یعنی Hover و Active باشیم. برای حالتهای Hover و Active تنها کافیست محل قرار گیری عکس پس زمینه خود را به اندازه لازم (در اینجا هر با 30 پیکسل) به پایین حرکت دهیم. پس داریم :

ul#nav li a:hover  {
  	text-decoration:none;
	background-position: center -30px;
}
ul#nav li a:active  {
  	text-decoration:none;
 	background-position: center -60px;
}

حال باید به هر لینک عکس پس زمینه مربوطه را اختصاص دهیم. برای اینکار به li مربوط به هر لینک نام لینک را به عنوان ID اختصاص میدهیم :

  <ul id="nav">
     <li id="home"><a href="/home">خانه</a></li>
     <li id="host"><a href="/hosting/">میزبانی وب</a></li>
     <li id="supp"><a href="/support/">پشتیبانی</a></li>
     <li id="webdev"><a href="/web-develop/">توسعه وب</a></li>
     <li id="webdes"><a href="/web-design/">طراحی وب</a></li>
     <li id="about"><a href="/about-us/">درباره ما</a></li>
  </ul>

و در CSS به این شکل از این IDها استفاده میکنیم و عکس پس زمینه را برای هر لینک مشخص میکنیم و همچنین عرض تصویر پس زمینه هر لینک را به عنوان خاصیت width مشخص میکنیم :

ul#nav li#home a  {
 	background-image: url(images/home.gif);
 	width: 52px;
}
ul#nav li#host a  {
 	background-image: url(images/host.gif);
 	width: 98px;
}
ul#nav li#supp a  {
 	background-image: url(images/supp.gif);
	width: 83px;
}
ul#nav li#webdev a  {
 	background-image: url(images/webdev.gif);
 	width: 92px;
}
ul#nav li#webdes a  {
 	background-image: url(images/webdes.gif);
 	width: 90px;
}
ul#nav li#about a  {
 	background-image: url(images/about.gif);
 	width: 76px;
}

الان ما یک منوی افقی با افکت Rollover با حداقل کدنویسی و حجم و حداکثر بازده و سازگاری داریم !

نکته اول : از آنجاییکه حالت active عموما در مرورگرهای مختلف حالتی ناپایدار و سطحی است توصیه میکنم این حالت را با استفاده از یک برنامه سمت سرور (Server Side) کنترل کنید و مثلا با استفاده از یک ساختار شرطی در برنامه مدیریت محتوای خود به لینک فعال خود کلاس active را نسبت دهید . به این شکل :

...
     <li id="home" class="active"><a href="/home">خانه</a></li>
...

و برای CSS داریم :

ul#nav li.active a  {
  	text-decoration: none;
	background-position: center -60px;
}

نکته دوم : شاید مایل باشید حالت بازدید شده یا Visited را نیز کنترل کرده و شکل دهید که با توجه به توضیحات بالا کار سختی نیست ! اما برای منوهای شبیه آنچه ساختیم توصیه نمیشود.

و اما نکته آخر اینکه این حالت تقریبا سخت ترین و پیچیده ترین حالت ایجاد چنین افکتی بود. اگر قادر به اجرای این حالت هستید قطعا ایجاد منوهای عمودی و ساده تر برای شما مثل آب خوردن است !

یک نمونه منوی افقی را میتوانید در این آدرس مشاهده کنید : DigitalDreamers.Biz
و یک نمونه از منوی عمودی را در اینجا : OrderedList.Com

مراحل کلی از این قرار است :

1. نمایش و دسته بندی بخشهای مختلف سایت
2. جدا کردن عناصر دربرگیرنده مطالب
3. مخفی کردن کردن عناصر و بخشهای اضافی توسط CSS
4. شکل دهی صفحه و تعیین فواصل ، فونتها و رنگهای مناسب با CSS

که در ادامه به شرح هر مورد میپردازیم.

1 نمایش و دسته بندی بخشهای مختلف سایت
شما باید بخشهای مختلف سایت را از لحاظ کاربرد و محتوا دسته بندی کنید ما برای نمونه یک وبلاگ را در نظر میگیریم. به عنوان مثال وبلاگ بخشهایی مثل سرآیند (Header) ، منوی کناری (Side Menu) ، بخش مطالب و بخش پاورقی (Footer) دارد که در بین هر مطلب هم یک کادر تبلیغاتی وجود دارد.
شما لازم است که که به این شکل دسته بندی کنید و مواردی که لازم است حذف شوند را مشخص کنید.
در این مثال عناصر گرافیکی بخش سرآیند ، منوی کناری ، بخش پاورقی و تبلیغات مابین مطالب باید حذف شوند.
2 جدا کردن عناصر دربرگینده مطالب
در این مرحله باید از لحاظ ساختاری عناصر دربرگینده مطالبتان را پیدا کنید. که معمولا یک Div یا Table cell هستند. همانطور که گفته شد اگر طراحی سایت استاندارد باشد این کار را به آسانی و به کمک نوارابزار Web Developer’s Toolbar مخصوص مرورگر FireFox میتوانید انجام دهید.
برای این کار کافی است که نوارابزار مورد نظر را دریافت کرده و بر روی فایرفاکس نصب کنید. و با استقاده از قسمت Outline و با انتخاب گزینه Outline block level elements تمامی عناصر بلوکی صفحه را مشاهده کنید در آخر با استفاده از قسمت Information و گزینه Display ID & Class Details میتوانید به راحتی ID یا Class عنصر مورد نظر را پیدا کنید !
و اگر برای طراحی از CSS استفاده نکردید متاسفانه باید وقت بیشتری بگذارید و با مرور کردن Source صفحه قسمتهای مورد نظر را پیدا کنید.
3 مخفی کردن عناصر بخشهای اضافی توسط CSS
الان که به وضوح از مشخصات عنصر حاوی مطالب آگاهی دارید میتوانید به سادی توسط CSS بخشهای دیگر را مخفی کنید. شما باید تک تک عناصر اضافی را حذف کنید :

#header, #sidemenu, #footer , .ads {
display: none;
}

و این برای حالتی بود که شما از CSS استفاده کردید ! و اگر غیر از این است کار شما کمی پیچیده تر میشود و باید با استفاده زیرکانه از CSS Selectorها عناصر مورد نظر را تحت تاثیر قرار بدهید :
مثلا این Selector دومین سلول جدول در اولین ردیف از سومین جدول داخل صفحه را در حالی که اولین و دومین سلولهای جدول قابل نمایش و سومین سلول مخفی هستند را تحت تاثیر قرار میدهد !

html body table+table+table tr td+td {
visibility: visible;
}
html body table+table+table tr td+td+td {
visibility: hidden;
}

4 شکل دهی صفحه و تعیین فواصل ، فونتها و رنگهای مناسب با CSS
حالا نوبت شکل دهی صفحه است. شما میتوانید با سلیقه خود نسخه مخصوص چاپی ایجاد کنید.
واگر این موارد را در نظر بگیرید نسخه چاپ شده زیباتر و بهتر خواهد بود.
سعی کنید برای نوشته ها عرض مشخصی تعیین کنید مثلا با درصد 80% صفحه و یا با مقادیر ثابت 6.5 اینچ تا متن شما از کناره های کاغذ چاپ فاصله مناسبی داشته باشد.
بهتر است رنگ پس زمینه مطالب سفید و رنگ متنها مشکی باشد.
در صورت نیاز اندازه فونت ها را کمی درشت تر کنید.

بله ، الان شما نسخه قابل چاپی برای سایت دارید پس امتحان کنید !

نکات قابل توجه :

• با مطالعه مراجعی چون مرجع CSS در W3C میتوانید از امکانات حرفه ای تری استفاده کنید و کنترل بهتری روی اجزای صفحه داشته باشید.
• اگر هنوز در طراحی سایت خود از CSS و مدلهای استاندارد استفاده نمیکنید باید به فکر نیروهای اضافی و هزینه بیشتر و وقت زیادی برای مدیریت و نگه داری سایت خود باشید !
• از مزایای این روش برای ایجاد نسخه قابل چاپ سهولت ویرایش و آماده کردن برای شما و سرعت در انجام کار برای کاربر نهایی خواهد بود ! زیرا برای چاپ محتوا نیازی به ارتباط مجدد با سایت شما و دریافت نسخه قابل چاپ از یک برنامه سمت سرور نیست.

> اگر امکانات پیشرفته تری میخواهید :
ما اغلب حالتهایی که برای نسخه چاپ بی مورد بودند را حذف و ویرایش کردیم ولی برای لینکها و حروف اختصاری چه طور ؟!
فکر نمیکنید کلمه ای که در مطلب شما به مرجع دیگری از طریق لینک متصل شده است برای نسخه قابل چاپ نا مفهوم میشود ؟! بله ، ولی شما میتوانید این مشکل را با CSS حل کنید !
شما میتوانید آدرس لینکهای داخل صفحه را در کنار مطلب خود داشته باشید و یا عنوان کامل کلمه اختصاری را . به این مثال توجه کنید :

…

some texts as paragraph text here

…

و یا

…

Tim Berners lee is the inventor of web and the main W3C Leader

…

شما میتوانید از طریق CSS به این شکل متن را برای چاپ اصلاح کنید :

acronym:after, abbr:after {
content: " ( " attr(title) " ) ";
font-size: smaller;
color: #666666;
}
a:after {
content: " ( " attr(href) " ) ";
font-size: smaller;
color: #666666;
}


و میتونید این آدرس را کمی کوچکتر از متن اصلی و کمرنگتر نمایش بدهید.
که متنی شبیه به این خواهید داشت :

some texts as paragraph (http://example.com) text here

و

Tim Berners lee is the inventor of web and the main W3C (World Wide Web Consortium) Leader

در این مطلب سعی شد که شما با اصول کار آشنا شده و یک نمونه ساده از نسخه مخصوص چاپ داشته باشید. ادامه کار به سلیقه شما بستگی دارد. CSS یاد بگیرید و بهترین نسخه چاپ را درست کنید.

برای نمونه در همین وبلاگ برای نسخه قابل چاپ از همین روش استفاده شده است ، امتحان کنید !

دقیقا مثل محیط واقعی خودمون ما در محیط مجازی هم چنین استانداردهایی رو داریم و یا باید داشته باشیم ..
همونطور که شما موقع خریدن کنسرو ماهی تن چند بار چک میکنید که شرکت معتبر باشه، پروانه ساخت داشته باشه و از همه مهمتر آرم استاندارد داشته باشه… به همون نسبت باید حساس باشید که آیا سایتی که میبینید استاندارد هست یا خیر!
البته ممکنه که شکل ظاهری و سوری دو محصول استاندارد و غیر استاندارد کاملا مشابه باشند. همونظور که میبینیم برخی سایتهایی که به صورت استاندارد طراحی نشدند هم درست نمایش داده میشند… و به همون نسبت کنسرو ماهی سالم و کنسرو فاسد (حاوی سم بوتولیسم) هم از لحاظ ظاهر به هم شبیه هستند …ولی این کجا و آن کجا!
خب حالا فرض میکنیم شما قبول کردید که همچین استانداردی لازمه و باید رعایت بشه …چه فایده ای برای ما داره؟!
شما وقتی آرم استاندارد و پروانه ساخت رو رویه قوطی کنسرو ماهی میبینید خیالتون از بابت چند مسئله مهم راحت میشه …

1. شما مطمئنید که فرایند ساختش بهداشتی بوده و میکروب نداره!
2. شما مطمئن هستید از لحاظ بسته بندی درسته!
3. شما اطمینان دارید که این کنسرو از بهترین و سالمترین نوع ماهی تن تهیه شده.

و مواردی مشابه …
و حالا شما در مورد سایتی که استاندارد طراحی شده باشه چه اطمینان خاطری میتونید داشته باشید؟!
(البته که من تسلط و اشراف کاملی نسبت به تمام ابعاد استانداردهای وب ندارم و مطمئنا این بخشی از اثرات و فوایدش خواهد بود!)

1. شما مطمئن هستید که این سایت رو با هر مرورگر وب و هر سیستم عامل و با هر مقدار وضوح تصویری که ببینید درست نمایش داده میشه!
2. شما مطمئن هستید که این سایت با حداکثر سرعت ممکن بارگذاری و ارائه خواهد شد!
3. شما مطمئن خواهید بود که با تغییر مقدار محتوای سایت تغییر در ساختار کلی سایت اجاد نخواهد شد! (با دوتا عکس بزرگ و … به هم نمیریزه!)
4. شما اطمینان دارید که مطالب و محتوای سایتتون به بهترین شکل ممکن در دسترد موتورهای جستجو خواهد بود!
5. شما اطمینان دارید که برای تغییر و یا گسترش سایت با مشکلی مواجه نخواهید شد و وقت شما هدر نمیرود!

و مواردی به این شکل ….
از موارد بالا مثالهایی رو براتون میگم:
مثلا شما شرکتی تجارتی دارید که برای معاملات با طرفهای خارجی در ارتباط هستید و خب قطعا برای بهبود ارتباطتتون از اینترنت استفاده میکنید قطعا برای ارائه محصول در این فضا نیاز به یک سایت دارید…
تا اینجا همه چیز درسته … شماا میتونید محصولاتتون رو در سایتتون معرفی بکنید و آدرس سایت رو به طرفهای خارجی بدید! حالا فرض کنیم که سایت شما غیر استاندارد و با طراحی ضعیفی کار شده باشه …جدای از زیبایی های بصری (که اغلب تاثیر گذاره) وقتی به طور مثال مشتری آمریکایی شما که با سیستم Apple و مرورگر Safari کار میکنه نتونه سایت شما رو به اون شکلی که خودتون طراحی کردید ببینه قطعا تمایلی به ادامه همکاری نخواهد داشت … واینجاست که ایجاد یک سایت نه تنها به بهبود ارتباطات شما و رونق معاملات کمک نکرده …بلکه ضرر هم داشته …
و یا شما به عنوان مثال سایت شخصی یا وبلاگی دارید که توسط شرکت یا .. براتون طراحی شده …
اگر طراحی استاندارد انجام شده باشه شما با اندک دانشی درباره طراحی شایت میتونید مثلا با استفاده از تغییرات جزئی در CSS رنگبندی سایتتون رو تغییر بدید!
و مثالهایی به این شکل!
حالا با این صحبتهای آیا اهمیت نداره که ما به عنوان طراح چطور طراحی کنیم یا به عنوان مشتری چه انتظاراتی از طراحمون داشته باشیم؟!
انشاالله در بحثهای بعدی وارد جزئیات میشیم و روشها و چگونگی انجام رو بررسی میکنیم …
لطفا اگر بین مطالبم اشکال و ایرادی میبینید بگید تا برطراف کنم …
موفق و پیروز باشید….

.menu ul li {
background: #CCCCCC;
height: 18px;
margin: 3px 0px 2px;
padding: 0px 5px 0px 5px;
border-right: 7px solid #666666;
font: normal 12px Georgia, "Times New Roman", Times, serif;
}

و برای قسمت Hover :

.menu ul li:hover {
font: normal 12px Georgia, "Times New Roman", Times, serif;
color: #000066;
background: #FFFFCC;
border-right: 7px solid #FF9900;
padding-left: 7px;
}

و داخل صفحتون کد HTML به این شکل :

…
<ul>Menu 1
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
…

قرار میگیره !
نمونه این منوها رو تویه این صفحه میتونید ببینید . هم افقی هم عمودی .
به همین شکل شما میتونید این افکت رو برای جدولها ، متنها و … استفاده کنید …
و اما بخش مهمتر موضوع IE و سازگاری با اون هست …
معمولا اگر بخواید همچین افکتی رو برای IE داشته باشیم باید از Event های onmouseover و onmouseout و .. استفاده کنیم که در واقع برنامه نویسی جاوا هست …
ولی مشکل اینجاست برای صفحات بزرگ و بخشهای مختلف استفاده زیاد از این موارد برای افکتمون خیلی جالب نیست و علاوه بر بالا بردن حجم ، سرعت Rendering صفحه هم پایین میاره و کدهامونو شلوغ میکنه !
حالا راه حل اینجاست !
خیلی ساده میشه با استفاده از یک فایل جاوا اسکریپت خارجی و CSS این مشکل رو حل کرد ..
و در واقع این فایل هم دقیقا از همون Event هایی که گفتم استفاده میکنه ولی احتیاجی به تکرار اونها برای هر مورد نیست !
و تنها نکتش برای استفاده اینه که شما تویه فایل CSS تون دقیقا اون خواص مورد نظرتون رو که میخواید در حالت Hover داشته باشید رو به صورت کلاسی به همون نام تکرار میکنید !
برای مثال برای منویی که بالا گفتم میشه :

.menu ul li.hover {
font: normal 12px Georgia, "Times New Roman", Times, serif;
color: #000066;
background: #FFFFCC;
border-right: 7px solid #FF9900;
padding-right: 7px;
}

و به همین صورت .
که اون فایل جاوا میاد و از تویه CSS تون این کلاسهایی که با .hover ختم میشه را به عنوان Event ه onmouseover قرار میده و مشکل حل میشه !

دریافت فایلهای نمونه و فایل جاوا
امیدوارم به دردتون بخوره …
موفق و پیروز باشید…
علی

1. افزودنی موسوم به URLid رو باید رویه فایرفاکستون نصب کنید !
2. بعد فایل CSS مربوطه رو بگیرید و با سلیقه خودتون ویرایش کنید !
3. با استفاده از راهنمای خوده موزیلا مسیر شاخه پروفایلتونو پیدا کنید : profile folder
4. فایل CSS مذکور رو در شاخه chrome داخل فولدر پروفایل کپی کنید و اسمشو به userContent.css تغییر بدید *
5. فایرفاکس رو ببندید و دوباره باز کنید !
6. به سایت Gmail برید و حال کنید !

* اگر که همچین فایلی در اون فولدر موجود بود میتونید ایندوتا فایل رو با هم قاطی کنید یعنی محتویات یکی رو به انتهای بعدی اضافه کنید !
من خودم الان این تغییرات رو اعمال کردم و دارم با جیمیلم حال میکنم …
شما هم امتحان کنید جالبه !
منبع اصلی من : Presistent
موفق باشید …

اگر علاقه مند شدید که چجوری این کار انجام میشه و ایضا از Source صفحه هم چیزی دستگیرتون نشد بگید تا توضیح بدم !
منبع اصلی : BinaryBonsai و با تشکر از Root !
موفق و پیروز باشید …

همدان هم شهر با صفایی بود …

خیلی زیبا . خنک و پاکیزه …. جای شما خالی خوش گذشت …

حالا قضیه مقاله راه راه چیه ؟!

مدتها بود که دنبال یک راه میگشتم برای لیستها و ستونهای راه راه و کم و بیش چیزهایی پیدا کردم …

ولی بهترین و کاملترین مقاله در این مورد مقاله آقای David F.Miller هست که به نام Zebra Tables نوشتن و در سایت AListApart موجوده ….

من سعی میکنم توضیحاتی رو به زودی دربارش بدم و در آینده ترجمه کاملش رو …

امیدوارم مفید باشه …

موفق باشید….