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

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

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

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

الحل

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

ملف الكلاسات

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

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


.border-radius( @radius: 3px ) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;  	
}

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

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

بعض الامثلة

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

ظل المربع


.box-shadow( 
	@x : 2px, 
	@y : 2px, 
	@blur : 5px, 
	@spread : 0, 
	@color : rgba(0,0,0,.6) 
) {
	-webkit-box-shadow: @x @y @blur @spread @color;
	   -moz-box-shadow: @x @y @blur @spread @color;	
			box-shadow: @x @y @blur @spread @color;	
}

Transition


.transition(
	@what : all,
	@length : 1s,
	@easing : ease-in-out
) {
	-webkit-transition: @what @length @easing;
	   -moz-transition: @what @length @easing;
	     -o-transition: @what @length @easing;
		  	transition: @what @length @easing;			
}

المربع


.box(
	@orient : horizontal,
	@pack : center,
	@align : center
) {
	display: -webkit-box;
	   display: -moz-box;	
	        display: box;

	-webkit-box-orient: @orient;
	   -moz-box-orient: @orient;
	   		box-orient: @orient;
	   		
	-webkit-box-pack: @pack;
	   -moz-box-pack: @pack;
	        box-pack: @pack;		
	        
	-webkit-box-align: @align;
	   -moz-box-align: @align;
			box-align: @align;		
}

Flex


.flex( @val : 1 ) {
	-webkit-box-flex: @val;
	   -moz-box-flex: @val;
	        box-flex: @val;
}

الخلاصة

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