ویژگی های واسط کاربری جدید CSS3
ویژگی های واسط کاربری جدید CSS3
CSS3 دارای چند ویژگی جدید رابط کاربری مانند عناصر تغییر اندازه resizing، outline و box sizing می باشد.
ویژگی های زیر را در اینجا بحث خواهیم کرد:
► resize
► outline-offset
► box-sizing
پشتیبانی مرورگرها از ویژگی های user interface جدید در css3
اولین نسخه های مرورگرهایی که بطور کامل از ویژگی resize پشتیبانی کرده اند، بصورت زیر می باشد:
► مرورگر chrome : نسخه 4.0
► مرورگر internet Explorer : پشتیبانی نمی شود
► مرورگر FireFox : ورژن 5.0
► مرورگر Opera : نسخه 15
► مرورگر safari : نسخه 4
اولین نسخه های مرورگرهایی که بطور کامل از ویژگی outline-offset پشتیبانی کرده اند، بصورت زیر می باشد:
► مرورگر chrome : نسخه 4.0
► مرورگر internet Explorer : پشتیبانی نمی شود
► مرورگر FireFox : ورژن 5.0
► مرورگر Opera : نسخه 9.5
► مرورگر safari : نسخه 4
اولین نسخه های مرورگرهایی که بطور کامل از ویژگی box-sizing پشتیبانی کرده اند، بصورت زیر می باشد:
► مرورگر chrome : نسخه 10
► مرورگر internet Explorer : نسخه 8.0
► مرورگر FireFox : ورژن 29.0
► مرورگر Opera : نسخه 9.5
► مرورگر safari : نسخه 5.1
ویژگی resizing در CSS3
خاصیت resizing مشخص میکند که عنصر توسط کاربر قابل تغییر اندازه باشد یا خیر.
مثال زیر به کاربر اجازه می دهد که تنها عرض عنصر div را بتواند تغییر دهد:
resize: horizontal;
overflow: auto;
}
و مثال زیر قابلیت تغییر ارتفاع عنصر div را برای کاربر فراهم میکند:
resize: vertical;
overflow: auto;
}
مثال زیر نیز امکان تغییر عرض و ارتفاع عنصر را فراهم میکند:
resize: both;
overflow: auto;
}
خاصیت Outline Offset در سی اس اس3
این خاصیت فضایی را بین طرح کلی و حاشیه عنصر اضافه میکند.
خطوط کلی به سه روش از حاشیه جدا می شوند:
► طرح کلی یک خط کشیده شده در اطراف عناصر خارج از حاشیه است.
► یک طرح کلی ممکن است غیر مستطیلی باشد.
► outline فضایی را نمی گیرد.
در مثال زیر از ویژگی outline-offset برای ایجاد فاصله ای به اندازه 15 پیکسل بین حاشیه و طرح کلی استفاده شده است.
border: 1px solid black;
outline: 1px solid red;
outline-offset: 15px;
}
ویژگی های user interface در CSS3
در زیر لیست تمامی خواص واسط کاربری CSS3 را مشاهده می کنید:
► box-sizing : اجازه می دهد که در عرض و ارتفاع کلی عناصر پد و حاشیه را لحاظ کنید.
► nav-down : مشخص میکند که در صورت فشردن کلید جهتی پایین، به کجا حرکت کنید.
► nav-index : نتیجه فشردن کلید tab روی کد را تعیین میکند.
► nav-left : تعیین میکند در صورت فشردن کلید چپarrow صفحه برنامه به کجا هدایت شود.
► nav-right : تعیین میکند در صورت فشردن کلید جهتی سمت راست، صفحه برنامه به کجا هدایت شود.
► nav-up : : تعیین میکند در صورت فشردن کلید جهتی سمت بالا، صفحه برنامه به کجا هدایت شود.
► outline-offset : فضایی بین طرح کلی و حاشیه عناصر مشخص میکند.
► resize : قابلیت تغییر اندازه عناصر توسط کاربر را تعیین میکند.
ویژگی Box Sizing در CSS3
خاصیت Box Sizing امکان اضافه کردن لایه و حاشیه در مجموع عرض و ارتفاع عناصر را فراهم میکند.
بدون وجود ویژگی Box Sizing در CSS3
به طور پیش فرض، عرض و ارتفاع یک عنصر مانند این محاسبه می شود:
عرض + padding + حاشیه = عرض واقعی یک عنصر
ارتفاع + padding + حاشیه = ارتفاع واقعی یک عنصر
این یعنی، وقتی شما عرض/ ارتفاع یک عنصر را تنظیم میکنید، عنصر اغلب بزرگتر از اندازه ای که شما تعیین کرده اید، نمایش داده می شود به این دلیل که اندازه پد و حاشیه عنصر نیز به عرض و ارتفاع آن اضافه خواهد شد. بنابراین برای مدت طولانی توسعه دهندگان وب، مقدار کمتری از عرضی که می خواستند در نظر می گرفتند و اندازه لایه و حاشیه اطراف عنصر را از آن کم می کردند.
ویژگی box-sizing در CSS3 این مشکل را حل کرده است.
استفاده از ویژگی Box Sizing در CSS3
اگر شما دستور box-sizing: border-box; را روی عنصری تنظیم کنید، اندازه پد و حاشیه عنصر نیز در عرض و ارتفاع محاسبه می شوند.
در مثال زیر خاصیت Box Sizing در عنصر div اضافه شده است.
width: 300px;
height: 100px;
border: 1px solid blue;
box-sizing: border-box;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
box-sizing: border-box;
}
