Tween

اغلب دستورات اضافه شده مثل Box Shadow، GRBA، Gradients، و… به CSS3، امکان تعیین fallback رو دارند. مثلاً برای RGBA می شه این طور نوشت که:
background: #000000;
background: rgba(0,0,0,0.75);
و مرورگرهایی که از RGBA پشتیبانی می کنند دومی رو استفاده می کنند. اگر نه هم که بود و نبودشون به تجربه کاربری لطمه نمی زنه، مثل border-radius یا box-shadow. خیلی هم خوب. اما زمانی هست که مشتریان شما اصرار دارند طراحی در همه مرورگرها کاملاً یکسان نمایش داده بشه. خب، برای همون مثال RGBA، کد بالا رو به این صورت تغییر می دیم:
background: url(images/tran-black.png) repeat;
background: rgba(0,0,0,0.75);
ولی مشکل این جاست که مرورگرهایی که از RGBA پشتیبانی می کنند هم تصویر معرفی شده رو بارگذاری می کنند (کاملاً مطمئن نیستم البته. باید یه جستجویی انجام بدم.) که این به معنی یه درخواست HTTP اضافه و کاهش سرعت سایت هست.
یه کتابخونه جاوااسکریپتی هست به اسم Modernizr که فقط باید بندازیدش داخل کدتون و بعد کلاس هایی رو به صفحه اضافه می کنه که مشخص می کنه آیا فلان ویژگی پشتیبانی می شه یا نه. این کتابخانه بر اساس feauture detection هست نه User-Agent Sniffing یعنی میاد بررسی می کنه ببینم مثلاً border-radius پشتیبانی می شه یا نه، نه این که بگه الان مرورگرمون IE6 هست بنابراین فلان ویژگی هستش یا نیستش.
خب، حالا باید قبل از selectorتون در CSS، کلاس های مربوطه رو اضافه کنید.
اطلاعات بیشتر در وب سایتش: http://www.modernizr.com/