ورژن جدیدی به نام CSS3

اعمال تغییرات جدید به مارک آپ های پیشین می تواند دریچه های جدیدی بر روی شما بگشاید که کاربر شما را از پیش هم بیشتر راضی کند. شاید با جادوی دیگری از جنس CSS3 بتوان این کار را انجام داد!

تفاوت بین CSS3 و CSS2

مانند بخش HTML5 در اینجا هم تاریخچه مختصری در رابطه با CSS3 خواهیم آورد. تا به این لحظه تمامی style های ما از جنس CSS2 بوده است (به طور دقیق هم 2 و هم 1). CSS3 امکانات جدیدی در زمینه بروزرسانی متون، رنگ ها، حاشیه ها و انواع سایه ها در اختیار ما قرار می دهد. علاوه بر این ها ماژول های کامل زیادی در CSS3 وجود دارند که استخوان بندی های چند ستونی، فونت ها، و بخش های مربوط به مدیا را به گونه ای پردازش می کند که با شناسایی دیوایسی که سایت بر روی آن بارگزاری شده ابزار مورد نیاز را مورد استفاده قرار می دهد.

CSS ای که تا اینجا آموختیم به شدت ایمن بود و به ما ضمانت می داد که به خوبی در تمامی مرورگرها و سیستم ها اجرا شود حتی در مرورگرهای بسیار قدیمی تر مانند IE6 همه چیز به خوبی رقم می خورد. در رابطه با CSS3 شاید به این صورت نباشد.

CSS3 هنوز به طور کامل پشتیبانی نمی شود

در زمان جمع آوری و نوشتن این کتاب در زمینه پشتیبانی از CSS3 مشکلات زیادی وجود دارد و هیچ مرورگری CSS3 را به طور کامل پشتیبانی نمی کند و پشتیبانی آن ها از CSS3 بر روی امکانات متنوع آن متغییر است.

به صورت عملی به این بخش خواهیم رسید اما باید بدانید که نحوه برخورد با این بخش به صورتی است که ممکن است یک style را بارها و بارها طراحی کنیم و بنویسیم تا به نتیجه مطلوبی بین تمامی مرورگرهای موجود برسیم. دلیل اصلی این امر vendor prefixes می باشد.

پشتیبانی از Vendor Prefixes

بعضی ها با vendor prefixes درون CSS به شدت مشکل دارند زیرا به معنی کار تکراری است. اما در آغاز باید بدانیم که vendor prefix چیست؟

متن کوچکی است که دقیقاً روبه روی CSS ما می نشیند و vendor مرورگر را شناسایی می کند. برای مثال Mozilla Firefox یک vendor prefix به صورت –moz- دارد. اگر قصد تنظیم یک border-radius (ابزاری که برای تنظیم گوشه های منحنی دار استفاده می شود) را دارید برای نسخه های قدیمی Firefox باید vendor prefix را بیان کنید:

-moz-border-radius: 5px;

این کار تضمین می کند که style مورد نظر تنها بر روی مرورگرهای بر پایه Mozilla پیاده می شوند. سایر prefixe ها شامل webkit، o و ms می باشند که به همین ترتیب وابسته به مرورگر های safari/Chrome (که با موتور WebKit کار می کنند)، Opera و Microsoft می باشند. پس زمانی که بخواهید گوشه ای با انحنایِ 5 پیکسلی بر یک blockquote با حاشیه ای 2 پیکسلی اعمال کنید باید کد خود را به صورت زیر بنویسید:

می‌بینید که دلیل همه پسند نبودن vendor prefixe ها چیست! اما هنوز جای خالی یک متغییر وجود دارد:

در عکس 10.8 می توانید نتیجه این کد را مشاهده نمایید، این تصویر از مرورگر Firefox4 درون سیستم عامل mac به دست آمده است:

عکس 10.8: گوشه های انحنا دار بر روی یک blockquote—همه به کمک CSS!

توجیه های در مورد Vendor

پیش از اینکه شروع به آه و ناله در رابطه با Vendor Prefix بکنید و از افزودن کدهای طولانی به سایت خود ابراز نارضایتی کنید بگذارید به شما توضیحی در این رابطه ارائه کنیم.

Vendor های مرورگرها بر اساس قوانین ارائه شده توسط W3C ساخته می شوند. هر vendor باید خوانده شده و به طور کامل این قوانین پایه را در خود داشته و فهمیده باشد؛ سپس این دانش را در مرورگر پیاده کند. اگر این قوانین اندکی پیچیده بوده یا قابلیت تغییر داشته باشند یا اگر دلایل دیگری برای درست نفهمیدن آن وجود داشته باشد به احتمال زیاد 4 یا 5 vendor مرورگرهای متفاوت با آن CSS به طور متفاوت برخورد خواهند داشت.

برای آنکه امکانات خوب و زیبای CSS را به دلیل این تفاوت در روند برخورد مرورگرها کنار نگذاریم باید از Vendor Prefixe ها استفاده کنیم.

پس برای مثال در استفاده از دستور border-radius در قدم اول هر مرورگر را با vendor prefix ها فراخوانی کرده و سپس از نام استاندارد متغییر خود استفاده می کنیم. به عنوان نمونه در Firefox در CSS زیر چنین اتفاقی می افتد: نسخه های قدیمی Firefox قانون اول را اعمال کرده و دومی را نادیده می گیرند، زمانی که نسخه جدیدی از مرورگر سایت را اجرا می کند در برخورد با این کد بخش اول را نادیده گرفته و مستقیماً بخش دوم را اجرا می کند:

لازم است که این مطلب را بدانید که این تکرارها در ادامه کتاب خواهند آمد اما در آینده ای نه چندان دور این مشکل رفع شده و شما می توانید بخش های تکراری را از CSS سایت خود حذف کنید.

خبرهای خوشِ CSS3

با پرهیز از دوباره‌گویی می‌توان با اطمینان گفت که ارزشمندترین ویژگی که در رابطه با CSS3 وجود دارد این است که مرورگرهای مدرن به خوبی از آن پشتیبانی می‌کنند. با روی کار آمدن IE9 فهرست مرورگرهایی که از CSS3 پشتیبانی می‌کنند طولانی‌تر از همیشه خواهد شد (معمولا یکی از عوامل مهمی که استفاده از استایل‌های CSS3 را محدود می‌کرد عدم پشتیبانی آن به وسیله IE بود).

خوب، حالا که می‌دانیم مرورگرهایی هستند که به ما اجازه استفاده از امکانات CSS3 را می‌دهند بیایید اندکی از کدهای جدید CSS3 را به سایت خود اضافه کنیم.