Advertisement
  1. Web Design
  2. HTML/CSS
  3. CSS

درس صغير: لا تستخدم بادئات الـ css مره اخرى (Vendor Prefix)

Scroll to top
Read Time: 2 min

() translation by (you can also view the original English article)

ان تعرف ما عليك فعله هو امر رائع. تريد أن تعطي قسم ما في الموقع بعض الزوايا باستخدام الـ CSS3؟ اذا ستحتاج الى احد البادئات الثلاثة : webkit, moz ،W3C. أليس هذا هدر للوقت -- ناهيك عن مساحة الشاشة؟ ماذا لو بدلاً من ذلك استخدمنا ملف كلاس؟ حسنا، يمكننا! سوف تتعرف على هذا اليوم.


الحل

إذا كنت تستخدم أدوات مثل LESS او SASS، فيمكنك إنشاء كلاسات بسهولة تامة. ليس لديك أي فكرة عما أتحدث عنه؟ حسنا، أولاً، اقرا هذا الدرس البسيط،. سوف على كيفية استخدام اداة Less.


ملف الكلاسات

بعد ذلك، نحن بحاجة إلى إنشاء ملف كلاس سوف نستخدمه في كل مشروع. احفظ هذا الملف في أي مكان ترغب به، على الرغم من ذلك، في شريط الفيديو المذكور أعلاه، أنا استخدم التطبيق المشهور Structurer .

سوف نقوم بعمل الاولى معا، لكن شاهد اولا الدرس المصور لمزيد من التفاصيل.

1
2
.border-radius( @radius: 3px ) {
3
  -webkit-border-radius: @radius;
4
  -moz-border-radius: @radius;
5
  border-radius: @radius;  	
6
}

فيما يتعلق بإصطلاحات التسمية، لقد وجدت أنه من الاصح استخدام الاسماء الموصى بها رسميا كاسم للكلاس --في هذه الحالة، "border-radius" لتعريف متغيرات باستخدام اداة ،Less نستخدم الرمز @ في البداية. وفي هذه الحالة، نحن نعين قيمة افتراضية 3px، على الرغم من ذلك، ينبغي أن نتغاضى عن هذه القيمة في مشروعنا، هذا سهل جدا!

1
2
#someElement {
3
   .border-radius(10px);
4
}

بعض الامثلة

عند هذه النقطة، قم بتكرار هذا لكل خاصية تتطلب البادئات المتعددة (Vendor Prefix). هذه بعض الامثلة المتعدده:

ظل المربع

1
2
.box-shadow( 
3
	@x : 2px, 
4
	@y : 2px, 
5
	@blur : 5px, 
6
	@spread : 0, 
7
	@color : rgba(0,0,0,.6) 
8
) {
9
	-webkit-box-shadow: @x @y @blur @spread @color;
10
	   -moz-box-shadow: @x @y @blur @spread @color;	
11
			box-shadow: @x @y @blur @spread @color;	
12
}

Transition

1
2
.transition(
3
	@what : all,
4
	@length : 1s,
5
	@easing : ease-in-out
6
) {
7
	-webkit-transition: @what @length @easing;
8
	   -moz-transition: @what @length @easing;
9
	     -o-transition: @what @length @easing;
10
		  	transition: @what @length @easing;			
11
}

المربع

1
2
.box(
3
	@orient : horizontal,
4
	@pack : center,
5
	@align : center
6
) {
7
	display: -webkit-box;
8
	   display: -moz-box;	
9
	        display: box;
10
11
	-webkit-box-orient: @orient;
12
	   -moz-box-orient: @orient;
13
	   		box-orient: @orient;
14
	   		
15
	-webkit-box-pack: @pack;
16
	   -moz-box-pack: @pack;
17
	        box-pack: @pack;		
18
	        
19
	-webkit-box-align: @align;
20
	   -moz-box-align: @align;
21
			box-align: @align;		
22
}

Flex

1
2
.flex( @val : 1 ) {
3
	-webkit-box-flex: @val;
4
	   -moz-box-flex: @val;
5
	        box-flex: @val;
6
}

الخلاصة

اود ان اعرف رايك بالدرس. اذا اعجبتك الفكره فقم بتنفيذها في المشروع القادم

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.