تكويد و تطوير

CSS4 – هل تكون أذكى من SASS ؟

   -   397

السلام عليكم , إن شاء الله تكونوا دايما بخير 😚

CSS4 – من فتره موش قصيره ابدا .. اعتقد ان اول مره اسمع عن الاصدار من سنين, و إحنا مستنين الاصدار دا خصوصا وسط منافسه CSS ك لغه بتكتبها بطريقة مباشره مع ال compiler الموجوده حاليا و بالاخص SASS لانها الافضل بلا منازع

بمنتهى الإختصارا لاى وقت ممكن تقرا فيه البوست علشان تفهمه , CSS4 هتخلى SASS اذكى و اذكى. لكن معنديش ادنى اعتقاد انها هتوصل ل 15% من SASS. ليه ؟ دا اللى هنتكلم فيه , بس الاول لو حابب تعرف SASS و مميزاتها و ازاى تقدر تستخدمها , تقدر تشوف البلوجز دى كنت كتبتها من فتره :

نبدأ بقى نشوف مع بعض إمكانيات CSS4 اللى لحد دلوقتى ظهرت للضوء 🤓

اولا .. CSS4 Selectors :

الجزء دا اتطور بشكل رائع , فى سليكتورز كتير فعلا كنا محتاجينها و دلوقتى هتكون متاحه فى الاصدار الرابع بشكل مباشر و من غير اى Tricks زى ما كنا بنحاول زمان .. زى Negation pseudo-class , NOT , Match , Relations و اكتر من 20 سليكتور ممتازين بصراحه.

ممكن تشوف السليكتورز الكامله و تاخد فكره عنهم من هنا ..  أو من خلال موقع تانى من هنا ..  الموقعين بيدوك شرح كامل عن هدف السليكتور و كذلك مثال عليه.

النقطه هنا هتكون فى صالح SASS موش CSS بس, لإن احنا هنستخدم السليكتورز دى فى اللغتين , و مع إمكانيات SASS هيكون الوضع رهيب فى التخصيصات اللى تقدر توصلها اكتر بكتير من CSS.

لو بصينا على CSS بشكل عام فى السليكتورز و مدى تأثيرها على طريقه كتابتنا للكود. فمثال لشغلى دايما بعمل Shared Class واحد بس للكل العناصر اللى موجوده مثلا فى ال Forms .. و ببدأ أخصص لكل عنصر حبه خصائص تانيه من غير Class او ID بس بنوعه و دا بيدى سهوله اكتر من ناحيه كتابه الكود فى ال CSS و بينعكس على ال HTML و بيخليه اقل بكتير فى الحجم لان مفيش كلاسز هتتكتب كتير .. قيس على كده تأثير السليكتورز دى هيكون ايه فى المستقبل.

ثانيا .. Presponsive Layout :

كلنا نعرف ال Responsive Web Design او ال RWS .. و هنا موض طفره كبيره ولا حاجه , الموضوع كله فكرته بتتمحور على ان ال RWS سرعه تحميله موش الكافية على حسب تقارير W3C ! و دا خلاهم يضيفوا ميزه بسيطه جديده وهى تحديد سرعه الاتصال زى ما بيحدد المقاسات بال Media Queries او بشكل قريب ليها لو هنتكلم بشكل ادق.

و على اساس تحديد سرعه الاتصال بتكون عامل Preload للسرعات دى تحديدا. الموضوع جميل لكن فى مشكله بسيطه “قاتلة”. انك هتحتاج flux processor chip و اللى حاليا موش بيوصل الا مع ال fibre-optic. يعنى موضوع منهى بالنسبه لاستخدامها لسنين لقدام كمان خصوصا فى منطقتنا.

خاصية زى دى اذا اتوجدت فعليا , هتكون مفيده جدا بس من رأيى انها محتاجه تطوير اكتر بكتير. نقدر نطورها من خلال الاعتماد على لغات تانيه فى اننا نعمل فيلترينج لليوزرس على اساس معلومات نجيبها بأى لغه تانيه. بس الافضل ثم الافضل انها تكون موجوده بالفعل فى CSS من غير اى حاجه.

ثالثا .. Server-side Stylesheets :

الاختصار – CLISS – هى حاجه موش هتفدينا بأى شكل من الاشكال من الاساس ك Designers. الا للى بيتعامل مع ال Terminal مننا مثلا. كل الموضوع انك هتقدر تعمل شكل ال Terminal من خلال خصائص قريبه فى الشكل جدا ل CSS. بتحدد مثلا خلفيه , لون الايرورز و غيرها. لكنها تبقى خصائص موش كتيره + انها اصلا موش مفيده لل Designers !! ادينى حاجه انتج بيها شغل للعالم موش رفاهية لنفسى !!

رابعا .. Proper Email Styling Support :

بدون اى مبالغه , قولى اعمل ويب سايت كامل , و متقوليش اعمل Email Template. دى حاجه بتحاول W3C حلها من فتره طويله مع اكتر من مزود خدمه فى الوقت الحالى بحيث انها تتيح لينا اننا نكتب كود مفهوم اكتر و نستخدم HTML Tags افضل زى Header , Footer إلخ + اننا نكتب CSS بالطريقه العاديه موش Inline CSS زى الوضع الحالى على كل Tag منفرد.

اتمنى فعلا الموضوع دا يتعمم لانه هينعكس على الاكسبرينس الكامله لاى مستخدم لاى منتج. الموضوع هيطور حجات كتير جدا خصوصا البيع الالكترونى و المتاجر و طريقه تسويقها لمنتجاتها.

خامسا .. تغييرات الخصائص :

كتير من الخصائص متعودين انها تتلغى و يتضاف بدلها خصائص تانيه على اساس تطور الاجهزه اللى بنستهدفها من الاساس. الموضوع دا CSS4 مركز فيه إلى حد ما و دا ظاهر فى دعم خصائص جديده للشاشات اللى جودتها عاليه زى Ratina مثلا .. + انها بدأت تدخل خصائص جديده زى Background-sound! ايون .. خلفيه صوتيه , و الموضوع دا هيخلينا نقدر ندى اكسبرينس كامله للمستخدمين فى عده مجالات. يعنى مثلا اى شركه فيها قسم دعم فنى , لما تدخل خدمه العملاء فيه بتلاقى موسيقى بتريح اعصابك ! الموضوع دا هتقدر تعمله اونلاين كمان !

طبعا انت هتقدر تستخدم اى خاصية جديده فى CSS فى SASS لان فى الاول و الاخير SASS موش لغه بحد ذاتها بتقراها المتصفحات , هنا انت بتتكلم عن layer بيخلق layer تانى. و هو معتمد على كل خصائصه من الاساس.

سادسا .. Variables :

برغم انى بشوف طريقتها فى الكتابه موش منطقيه لحد دلوقتى على الاقل ! و دا اللى ممكن تشوفه و تعرف عنه اكتر من هنا. لكن على الاقل هتبقى موجوده. خاصيه مميزه , لكن نرجع ونقول انها موجوده من قرن من الزمن فى Less , Sass و فى كل اللغات من الاساس !!

سابعا .. Grids :

أكتر خاصية مميزه , و اللى فى الغالب هتقلل و هتغير طريقه ال Teams اللى بتنتج من الاساس فريمات شهيرة زى Foundation و Bootstrap و غيرها!

تقدر تعرف اكتر عن إمكانيات ال Grid فى CSS4 من هنا.  بمجرد القرايه السريعه للموضوع , تخيل انك هتحدد عنصر ما , و هتحدد حجمه بالنسبه لل Container الخارجى ليه , و هتحدد ال Rows الداخليه اللى فيه .. بمجرد خصائص بسيطه. الموضوع فعلا هيكون مميز و هيسهل كتير جدا سواء بتشتغل علىFramework او حتى من غيره.

ثامنا .. Snap Scrolling :

سواء اعتبرتها ميزه اساسية او حاجه رفاهية. فهى بتسهل عليك الابداع فى تجربه المستخدم عن طريق تحديد اكتر و اكتر لاكسبرينس الاسكرولينج فى الصفحات اللى بتنشئها .. و اللى اكيد هيأثر كتير جدا اذا استغليته بشكل سليم على قدره المستخدم فى الوصول لمحتوى الصفحات.

تقدر تعرف اكتر عن خاصية Snap Scrolling من هنا ..

 

الختام ؟

ببساطه , لو انت منتظر من CSS4 انها تعمل لغه Smart بشكل منافس لادوات تانيه معموله بلغات فعلا Smart تبقى واهم جدا. دا موش هيحصل ولا خلال 10 سنين من دلوقتى حتى و لولا انى اخاف اكون مبالغ فى كلامى , كنت قولتلك موش هيحصل اصلا !

بس دا موش معناه ان اللى شغالين على تطوير اللغه تايهين او رايحين فى داهيه ! لا بالعكس .. هما بيعملوا الصح و المطلوب منهم. اذا كانت اللغه موش ذكيه , فحاليا فى حلول اتوفرت تخلينا نكتب كود بطريقه ذكيه و ننتج بيه CSS. لكن اللى محتاج منهم تركيز اكتر و اكتر , هى الخصائص , السليكتورز , خصوصا فى الوقت اللى بنشوف فيه كميه اجهزه ضخمه كل سنه ! كميات مهوله .. فدا اللى فعلا لازم يركزوا عليه اكتر و اكتر ..

 

فى النهاية اتمنى تكونوا استفدوا من البوست 🤕 ..

دمتم سالمين 🙏🏻

المناقشة و النشر