tabindex و data-

[ali-akbarian]

سلام :
دوستان میشه اینو واسه من توضیح بدید ؟
1-tabindex
2- -data
3- یک فایل جاوااسکریپتی بنام modernizr-2.6.2 است که من همیشه تو 90 درصد قالب ها می بینم ؟ این فایل کارش چیه ؟

اگه ممکنه با یک مثال توضیح بدید / ممنون

[ali-akbarian]

سلام دوستان ... دمتون گرم یکیتون جواب بدید.....

[بهزاد علی محمدزاده]

سلام .
tabindex یه attribute هست که ترتیب المان ها رو برای فشرده شدن کلید tag کیبورد رو مشخص می کنه . یعنی کاربری tab رو که زد اول کدام انتخاب بشه و دوم کدام و ...

data- این در نسخه html 5 اضافه شده و به شما این امکان رو میده که attribute خودت رو تعریف کنی. خیلی هم پر کاربرد هست. به عنوان مثال :



<ul>
<li data-tooltip="عنوان یک"></li>
<li data-tooltip="عنوان دو"></li>
<li data-tooltip="عنوان سه"></li>
</ul>

بعد با دستورات css استایل میدیم به tooltip . و خلاصه خیلی کاربردی هست.

[ali-akbarian]

سلام بهزاد خان بینهایت سپاسگزارم
می تونید یه توضیح در مورد این فایل هم بدید :
یک فایل جاوااسکریپتی بنام modernizr-2.6.2 است که من همیشه تو 90 درصد قالب ها می بینم ؟ این فایل کارش چیه ؟

و تو css چطوری به data-tooltip دسترسی داریم ..

ممنون

[بهزاد علی محمدزاده]

تو css چطوری به data-tooltip دسترسی داریم

مثل بقیه سلکتور ها میشه به data- هم دسترسی داشت و بهش استایل داد . تو این لینک (http://codepen.io/cbracco/pen/qzukg) یه نمونه رو انجام داده.



یک فایل جاوااسکریپتی بنام modernizr-2.6.2 است

این کتابخانه برای شناسایی ویژگی های HTML5 در مرورگر هست. هم بصورت جاوااسکریپتی میشه باهاش کار کرد و هم css . این کتابخانه به تگ html کلاس هایی موقع اجرا اضافه می کنه که اون کلاس ها معادل همون ویژگی ها هستند. اگر در اون مرورگر پشتیبانی نشده باشه یه no- به ابتداش اضافه می کنه.


js no-touch postmessage history multiplebgs boxshadow opacity cssanimations csscolumns cssgradients csstransforms csstransitions fontface localstorage sessionstorage svg inlinesvg no-blobbuilder blob bloburls download formdata



الان من no-touch دارم و با همین کلاس ها میشه در دستورات css تصمیم گیری کرد , توضیح : ترتیب اجرای دستور زیر مشخص می کنه که modenizr چطور کار می کنه :


.user{}.user .user-profile{
background:red;
}

بلاک .user-profile در صورتی اجرا میشه که کلاس user قبلش قرار گرفته باشه. من این دستور رو طوری نوشتم که در صورتی این بلاک اجرا بشه که تگ والد اون کلاس user داشته باشه . اینجا (http://jsfiddle.net/behzadam/0kvv1of6/) این موضوع رو تست کن. user رو حذف کن و RUN و اجرا کن برای تست.

حالا modernizr این کلاس ها رو والد همه تگ ها یعنی html اضافه می کنه و من تصمیم می گیرم اگر no-touch هست بیا فرضا مشخصات کاربر رو با hover موس رو عکس نشون بده . وگرنه این سیستم تاچ رو پشتیبانی می کنه و این یعنی hover موس دیگه نداریم , و استایل رو مطابق اون تنظیم می کنیم.

اما بصورت جاوا اسکریپت هم این امکانات و در اختیار دارید. فرضا می خواید از تگ video استفاده کنید اما نمی دونید مرورگر کاربر این و پشتیبانی می کنه یا نه و اگر نکرد اونوقت چطور تشخیص بدین و براش تصمیم دیگه ایی بگیرید ؟ نمونه :


if (Modernizr.video) { // support
} else {
// flash!
}