‫ن‬

‫المرسلي سيدنا محمد ﷺ‬ ‫بسم هللا الرحمن الرحيم والصالة السالم عل ر‬

‫أشف‬ ‫ي‬
How CSS Works Behind The Scenes
‫ن‬
‫الل بتشوفه دا كدا‬
‫ بالشكل ي‬web Pages ‫ الـ‬Display ‫ عشان تـ‬browser ‫ بتشتغل يف الـ‬CSS ‫أزاي الـ‬

Table Of Contents
Three Pillars of Writing Good HTML and CSS (Never Forget Them!)

How CSS Works Behind the Scenes : An Overview

How CSS is Parsed, Part 1: The Cascade and Specificity

Specificity in Practice

How CSS is Parsed, Part 2: Value Processing

How Units Are Converted From Relative To Absolute (px) - Value Processing

How CSS is Parsed, Part 3: Inheritance

How CSS Renders a Website: The Visual Formatting Model

‫الخاتمة وشوية فضفضة‬

♥ ‫اذكر هللا‬
♥ ‫الزموا ذكر هللا ففيه العون عل متاعب الحياة‬
‫َ ا ُ َ َّ ا‬ ً ّ ًْ ً ً َ َُ ّ‫َّ َّ ن‬
.‫ وعمًل متقبًل‬،‫ورزقا طيبا‬ ِ ،‫ا‬‫نافع‬ ‫ا‬‫لم‬ ‫ع‬
ِ ‫ك‬ ‫ل‬ ‫أسأ‬ ‫إن‬
‫اللهم ي‬
َ َ َ ْ ُ َ َ ْ ُ َ َ ْ َ َ ّ‫َّ ُ َّ َ ن‬
.‫ وحس ِن ِعباد ِتك‬،‫ وشك ِرك‬،‫اللهم أ ِع ين عل ِذك ِرك‬
‫صل وسلم وزد وبارك عل نبينا محمد ﷺ‬ ّ ‫اللهم‬

‫ال تنسونا من دعواتكم‬

By: Amr Elsayed

 ‫)!‪Three Pillars of Writing Good HTML and CSS (Never Forget Them‬‬

‫ن‬ ‫ن‬
‫وع بيهم‬
‫عل ي‬
‫والل الزم تكون ي‬
‫والل هما ي‬
‫ي‬ ‫خلينا يف البدية نتكلم عن اهم تلت مبادئ يف الـ ‪CSS‬‬
‫‪Responsive Design -1‬‬
‫‪Maintainable and Scalable Code -2‬‬
‫‪Web Performance -3‬‬

‫‪Responsive Design‬‬
‫ن‬ ‫ن‬ ‫ودي ببساطة معناها ن ن‬
‫يعن قابل للعرض يف جميع مختلف الشاشات‬
‫أبن ‪ Web Page‬بشكل ‪ Responsive‬ي‬ ‫أن ي‬‫ي‬
‫وعل الـ ‪Large Screens‬‬ ‫عل الـ ‪ Laptops‬يتعرض بشكل مناسب‬ ‫ن‬
‫ي‬ ‫يعن ع الـ ‪ Mobile‬يتعرض بشكل مناسب و ي‬ ‫ي‬
‫الل هيتعرض فيها‬‫يتعرض بشكل مناسب وهكذا ‪ ...‬تصميم الـ ‪ layout‬يتناسب مع حجم الشاشة ي‬

‫ن‬
‫جميل جدا ‪ ...‬هل يف حاجات الزم اراعيها عشان استخدم أو اعمل ‪ Responsive Design‬بشكل سليم ؟‬
‫قالك ايون فيه حاجات تراعيها لدا زي مثال‬
‫‪Fluid Layouts‬‬ ‫‪-1‬‬
‫‪Media Queries‬‬ ‫‪-2‬‬
‫‪Responsive Images‬‬ ‫‪-3‬‬
‫‪Correct Units‬‬ ‫‪-4‬‬
‫‪Desktop First vs Mobile First Strategy‬‬ ‫‪-5‬‬

‫‪Maintainable and Scalable Code‬‬

‫ن‬
‫ومعن النقطة دي انك تكتب ‪ Clean Code‬وحاجات تانيه‬ ‫الل الزم تكون عارفها‬
‫ي‬ ‫ودي من أهم النقاط والمبادئ ي‬
‫تعال نشوف‬
‫ي‬ ‫تيج نشوف ‪..‬‬‫ي‬ ‫كتي الزم تعمل حسابها ‪..‬‬
‫‪Clean Code‬‬ ‫‪-1‬‬
‫‪Easy To Understand‬‬ ‫‪-2‬‬
‫‪Growth‬‬ ‫‪-3‬‬
‫‪Reusable‬‬ ‫‪-4‬‬
‫‪How To Organize Files‬‬ ‫‪-5‬‬
‫‪How To Name Classes‬‬ ‫‪-6‬‬
‫‪How To Structure HTML‬‬ ‫‪-7‬‬

‫‪By: Amr Elsayed‬‬

 ‫‪Web Performance‬‬
‫ن‬
‫اعل مستوي من الـ ‪performance‬‬
‫عل ي‬‫اع ان الـ ‪ web App‬بتاعك يكون ي‬ ‫يف النقطة دي انت الزم تر ي‬
‫أعل مستوي الزم يكون شيـ ــع ويكون صغي من حيث الحجم‬ ‫عل ي‬ ‫وعشان يكون ي‬
‫ن‬
‫عل الـ ‪Performance‬‬ ‫ي‬ ‫بتأثر‬ ‫جدا‬ ‫كتي‬ ‫حاجات‬ ‫ف‬‫ي‬
‫‪Less HTTP Requests‬‬ ‫‪-1‬‬
‫‪Less Code‬‬ ‫‪-2‬‬
‫‪Compress Code‬‬ ‫‪-3‬‬
‫‪Use a CSS Performance‬‬ ‫‪-4‬‬
‫‪Less Images‬‬ ‫‪-5‬‬
‫‪Compress Images‬‬ ‫‪-6‬‬
‫تعل‬
‫فكل ما تقلل حجم الصور وتستخدم ‪ preprocess‬زي الـ ‪ sass‬مثال وتكتب كود قليل وفعال فدا يساعدك ي‬
‫من الـ ‪ Performance‬بتاع الموقع‬

‫اذكر هللا ♥‬
‫الزموا ذكر هللا ففيه العون عل متاعب الحياة ♥‬
‫اللهم ّ‬
‫صل وسلم وزد وبارك عل نبينا محمد ﷺ‬
‫سبحان هللا وبحمده عدد خلقه ورضا نفسه وزنة عرشه ومداد كلماته‬
‫ن‬ ‫ن‬
‫الظالمي‬ ‫ان كنت من‬‫ال إله اال انت سبحانك ي‬
‫ينبغ لجالل وجهك ولعظيم‬‫كثيا مبارًكا فيه كما ن‬ ‫حمدا ً‬
‫طيبا ً‬ ‫ً‬
‫اللهم لك الحمد‬
‫ي‬
‫ن‬
‫العالمي‬ ‫سلطانك يا رب‬
‫العل العظيم‬
‫ي‬ ‫ال حول وال قوة اال باهلل‬
‫ْ َّ َ ْ َ نُّ ْ ُ ُ ُ‬ ‫َ‬
‫اَّلل تطم ِي القلوب‬
‫أال ِب ِذك ِر ِ‬

‫ال تنسونا من دعواتكم‬

‫‪By: Amr Elsayed‬‬
 ‫‪How CSS Works Behind the Scenes: An Overview‬‬
‫ن‬
‫اثناء تحميل صفحة الويب يف حاجات كتي بتحصل خلف الكواليس زي ‪ http request‬و الـ ‪right Domain‬‬
‫و الـ ‪ name Services‬و حاجات تانيه كتي‬
‫عل الـ ‪ Computer‬لما الـ ‪ user‬بيفتح الموقع‬ ‫ر‬ ‫ن‬
‫الل بيحصل للـ ‪ Browser‬ي‬‫بس احنا هيكز اكي عن ي‬
‫ن‬
‫يعن ملف الـ ‪ HTML‬المبدأي كدا اول‬
‫أول حاجة بمجرد ما الـ ‪ page‬تحمل بيحصل ‪ load‬للـ ‪ initial HTML File‬ي‬
‫حاجة بتحمل‬
‫وبعد ما يتحمل بيحصل عمليه ‪ parse‬او تحليل سطر بسطر اثناء العملية دي ما بتحصل الـ ‪ Browser‬ن‬
‫بيبن‬
‫ي‬
‫ه عبارة عن ‪ Web Document‬بيكون‬ ‫والل ي‬
‫ي‬ ‫حاجة اسمها )‪Document Object Model (DOM‬‬
‫ن‬
‫االتني ‪ Divs‬دول فيهم عنارص والعنارص دي جواها‬ ‫ن‬
‫تان وجوا‬ ‫ن‬
‫يعن ‪ div‬جنبه ‪ div‬ي‬
‫فيها ‪ family Tree‬للعنارص ي‬
‫عنارص دي الـ ‪ Tree‬بتاعته‬
‫الل جوا الـ ‪Divs‬‬
‫والل هما العنارص ي‬
‫ي‬ ‫والل هما هنا الـ ‪ two divs‬و الـ ‪Childrens‬‬
‫ي‬ ‫ببساطة بيتقال عليهم ‪Parents‬‬
‫الل راسها براس بعض‬ ‫ن‬
‫الل جنب بعض ي‬ ‫يعن العنارص ي‬
‫دي والـ ‪ Siblings‬االشقاء ي‬

‫ن‬
‫تضمي او ‪ link‬بملف‬ ‫بعد ما بيحصل ‪ parse‬للـ ‪ HTML File‬الـ ‪ Browser‬بيالحظ وجود لسطر كدا مكتوب فيه‬
‫‪CSS‬‬
‫ن‬
‫يعن بيـ ‪ load‬الـ ‪ css File‬وزي ما حصل للـ ‪ HTML File‬برضو‬
‫اول ما بيالحظ دا بيعمل للملف دا ‪ load‬ي‬
‫الل احنا‬ ‫ر‬
‫الـ ‪ CSS File‬دا بيحصله ‪ Parse‬او تحليل هو كمان ولكن الـ ‪ parse‬دا بيكون مقعد بعض الش ودا ي‬
‫عا ن‬
‫ملي الملخص دا عشان نناقشه اصال‬

‫ن‬ ‫ن‬ ‫ن‬ ‫ن‬ ‫ن‬

‫اساسيتي بيحصلو‬ ‫خطوتي‬ ‫حاجتي او‬ ‫خلين اقولك ان اثناء عملية الـ ‪ parsing‬دي يف‬
‫ي‬ ‫بس‬
‫وه ‪ Conflicting CSS Declarations‬بيحصلها ‪ - Resolving‬حل ودا هنناقشه بالتفصيل قدام‪.‬‬ ‫أول واحدة ي‬
‫مسم وهو الـ ‪ Cascade‬اول حرف ن يف الـ ‪CSS‬‬
‫ي‬ ‫ي‬
‫ن‬
‫خلين أقولك ان العملية دي ليها‬ ‫و‬

‫وه ‪Process Final CSS Values‬‬ ‫دي‬ ‫‪parsing‬‬ ‫ـ‬ ‫ل‬ ‫ا‬ ‫عملية‬ ‫اثناء‬ ‫بتحصل‬ ‫بقا‬ ‫حاجة‬ ‫تان‬ ‫ن‬
‫ي‬ ‫ي‬
‫يعن اي برضو ؟!‬‫ن‬ ‫ن‬
‫يعن الـ ‪ margins‬بيتم قرأتها وتحويل قيمها لـ ‪ percentage units to px‬ي‬ ‫ي‬
‫ن‬ ‫يعن تخيل معايا ن‬ ‫ن‬
‫ان عامل ‪ margin-left: 50%‬مثال ! بس الـ ‪ 50%‬دي مختلفه يف الشاشات الصغية عن‬ ‫ي‬ ‫ي‬
‫ن‬ ‫ن‬
‫الـشاشات الكبية يف عملية التحليل دي بيتم ترجمتها او تحليلها لـلـ ‪ px unit‬الستخدمها يف مختلف الـ ‪Devices‬‬

‫ن‬
‫ه ‪ tree‬برضو زي‬
‫بعد ما الـ ‪ parsing‬دا بيحصل للـ ‪ CSS‬بيتم تخزينة يف (‪ CSS Object Model )CSSOM‬ي‬
‫الـ ‪ HTML‬كدا الـتخزين دا بيكون اسمه ‪CSSOM‬‬

‫‪By: Amr Elsayed‬‬

 ‫بعد ما التحليل دا كله بيحصل بقا بيحصل عمليه اسمها ‪ Rendering‬للـ ‪ Trees‬دي كلها مع بعض و عملية‬
‫الل الـ ‪ browser‬بيستخدم فيها حاجة اسمها ‪Visual Formatting‬‬‫بتسم بالـ ‪ formatting‬ي‬
‫ي‬ ‫الـ ‪ Render‬دي‬
‫ر‬
‫‪ Model‬وبرضو هنتكلم عنها قدام بالتفصيل اكي‬

‫بعد الـ ‪ Formatting‬دا ما يحصل بيحصل حاج اسمها ‪ Final Rendered Website‬وهنا انت بتقدر تشوف بقا‬
‫عل المتصفح قدامك‬
‫فعل ي‬
‫ي‬ ‫الشكل بتاع الموقع بشكل‬

‫اذكر هللا ♥‬
‫الزموا ذكر هللا ففيه العون عل متاعب الحياة ♥‬
‫ن‬
‫الظالمي‪.‬‬ ‫ن‬ ‫ن‬
‫إن كنت من‬
‫إن أستغفرك واتوب إليك‪ ،‬ال إله اال انت سبحانك ي‬‫اللهم ي‬
‫حسن هللا ال إله اال هو عليه توكلت وهو رب العرش العظيم‪.‬‬
‫ي‬
‫ْ َّ َ ْ َ نُّ ْ ُ ُ ُ‬ ‫َ‬
‫اَّلل تطم ِي القلوب‬
‫أال ِب ِذك ِر ِ‬

‫‪By: Amr Elsayed‬‬

 ‫ل♥‬
‫ي‬ ‫♥راقت‬

‫قبل ما تقول معنديش وقت شوف فعليا الوقت المتاح قدامك اي وشوف انت بتقضيه ازاي هتالحظ ان كل‬
‫فيات الوقت رايحة نف ر‬
‫اليفيه وجزء قليل جدا ألعمالك المهمة‬ ‫وقتك او اهم ر‬
‫ي‬

‫اذكر هللا ♥‬
‫سبحان هللا وبحمده ‪ ..‬سبحان هللا العظيم‬
‫الج القيوم و أتوب إليــه‬
‫أستغفر هللا العظيم الذي ال الـه اال هو ي‬
‫حسن هللا ال الـه اال هو عليه توكلت وهو رب العرش العظيم‬
‫ي‬

‫ال تنسونا من دعواتكم‬

‫‪By: Amr Elsayed‬‬
 ‫‪How CSS is Parsed, Part 1: The Cascade and Specificity‬‬
‫ن‬ ‫ن‬
‫الل فات خدنا ‪ overview‬عن ازي الـ ‪ HTML‬و الـ ‪ CSS‬بيحصلهم ‪ Process‬يف المتصفح‬ ‫يف الدرس ي‬
‫ن‬
‫يف الدرس دا هنشوف عملية تحليل ملف الـ ‪ CSS‬بتتم ازاي‬
‫ن‬ ‫ن‬
‫متفقي كلنا ان الـ ‪ Css‬بيكون ليه ‪ Rules‬معينة يف طريقة الكتابة زي مثال‬ ‫خلينا‬

‫‪Selector‬‬ ‫‪Declaration Block‬‬

‫‪Declaration‬‬
‫‪Property‬‬ ‫‪Declared Value‬‬

‫ن‬
‫الل هو يف حالتنا دي‬
‫عل وجود ‪ Selector‬ي‬ ‫والمقصود بالـ ‪ rules‬دي هو ان طريقة كتابة الـ ‪ css‬بتكون معتمدة ي‬
‫الل هتتكتب‬ ‫الل هديها التنسيقات ي‬
‫الل عندي ي‬
‫والل بكتبه عشان احدد اي عنارص الـ ‪ HTML‬ي‬‫ي‬ ‫الـ ‪.my-class‬‬
‫ه الخواص المكتوبة والقيم بتاعتها (تنسيقات العنرص)‬
‫والل ي‬
‫ي‬ ‫عل وجود الـ ‪Declaration Block‬‬ ‫كمان معتمد ي‬
‫فزي ما انت شايف كدا‬

‫ن‬
‫وه الـ ‪Conflicting CSS Declarations‬‬
‫ي‬ ‫فوق‬ ‫قولت‬ ‫لما‬ ‫تفتكر‬ ‫لو‬ ‫‪CSS‬‬ ‫ـ‬ ‫ل‬ ‫ل‬ ‫‪parsing‬‬ ‫ـ‬ ‫ل‬ ‫ا‬ ‫عملية‬ ‫ف‬ ‫ي‬ ‫اول حاجة‬
‫ن‬ ‫ن‬
‫وه الـ ‪Process Final CSS Values‬‬
‫ي‬ ‫فوق‬ ‫قولت‬ ‫برضو‬ ‫تفتكر‬ ‫لو‬ ‫‪CSS‬‬ ‫ـ‬ ‫ل‬ ‫ل‬ ‫‪Parsing‬‬ ‫ـ‬ ‫ل‬ ‫ا‬ ‫عملية‬ ‫ف‬‫وتان حاجة ي‬ ‫ي‬

‫‪By: Amr Elsayed‬‬

 ‫مسم وهو الـ ‪Cascade‬‬
‫ي‬ ‫والل ليها‬
‫ي‬ ‫طيب خلينا نتكلم عن الـ ‪Conflicting CSS Declarations‬‬

‫بي جميع ملفات الـ ‪ CSS‬المختلفة وحل الـ ‪ conflicts‬او التعارض‬‫الـ ‪ cascade‬ه العملية الل بيتم فيها دمج ن‬
‫ن‬ ‫ي‬ ‫ي‬
‫بي كل الـ ‪ Declarations‬الموجودة يف كل الملفات دي لو كانت متكررة لعنرص واحد‬ ‫الموجود ن‬

‫ن‬ ‫ن‬ ‫ن‬

‫معي مسكته يف الـ ‪ CSS‬و حطيت فيه بعض التنسيقات‬ ‫يعن ببساطة شديدة جدا لو انت عندك عنرص‬ ‫ي‬
‫ن‬ ‫ن‬ ‫ن‬
‫تان‬
‫تان او يف نفس الملف برضو تحت شوية مسكت نفس العنرص واديته نفس التنسيقات دي ي‬ ‫وروحت لملف ي‬
‫عل كل عنرص وتنسيقاته ولو متكررة بياخد منها نسخة‬
‫الـ ‪ cascade‬بقا بيكون عامل زي مراقب كدا بيبص ي‬
‫واحدة‬
‫الل تم اختياره دا‬
‫عل العنرص ي‬‫بس ويطبقها ي‬
‫لنفيض انك مسكت ‪ class‬اسمه ‪ .my-class‬مثال وحطيتله ‪font-size: 20px‬‬ ‫ر‬
‫حن غيت قيمته‬ ‫ر‬
‫ونزلت تحت شوية مسكت نفس العنرص دا وحطيتله نفس الـ ‪ font-size: 20px‬او ي‬
‫الل‬
‫الل بيحصل هنا عملية اسمها ‪ Conflicting CSS Declarations‬او ‪ Cascade‬بتصلح االختالفات ي‬
‫فـ ـ ي‬
‫حصلت دي ويطبق أخر حاجة اتكتب‬

‫ه المصادر دي ؟!‬ ‫ن‬ ‫ن‬ ‫ر‬

‫معن الكالم دا ؟ واي ي‬ ‫يج من أكي من مصدر ‪ ..‬طيب ي‬
‫يعن اي بقا ي‬ ‫الـ ‪ CSS‬ممكون ي‬
‫اقولك انا‬
‫اول مصدر‪:‬‬
‫بيتسم‬
‫ي‬ ‫الل اتكتب من خاللك انت كـ ‪ Developer‬والمصدر دا‬
‫بيكون الـ ‪ Declarations‬ي‬
‫الـ ‪Author Declarations‬‬
‫ن‬
‫تان مصدر ‪:‬‬
‫ي‬
‫ن‬
‫معي يغي الـ ‪ Default font-size‬من الـ ‪Browser‬‬ ‫عل سبيل المثال لما ‪User‬‬
‫بتيج من الـ ‪ User‬ي‬
‫ي‬ ‫الل‬
‫ي‬

‫وتالت مصدر‪:‬‬
‫تلقان من المتصفح نفسه‬
‫ي‬ ‫الل بتتحط بشكل‬
‫ه التنسيقات ي‬
‫والل ي‬
‫ي‬ ‫وهو الـ ‪Default Browser Declaration‬‬
 ‫عل بعض العنارص والمصدر دا بيكون اسمه الـ ‪user agent stylesheet‬‬
‫ي‬
‫عل سبيل المثال الـ ‪ <a></a> Anchor tag‬مش بيكون له تنسيقات من المتصفح زي خط تحته ولون ازرق ؟!‬ ‫ي‬

‫بس فيه سؤال هنا ازاي فعليا الـ ‪ Cascade‬دا بيتم او بيحصل او بيعمل اي عشان يعالج الـ ‪ Conflicts‬دي كلها ؟!‬
‫بيمش عليها عشان يحل االختالفات دي وال ال ؟!‬‫ر‬ ‫ن‬ ‫ر‬
‫ي‬ ‫وييي يف قواعد معينه‬

‫وه الـ ‪!important flag‬‬ ‫اول حاجة بيبص عليها الـ ‪ cascade‬دا اول ما ي‬
‫يج يشتغل ي‬
‫الل بتحصل منك انت كـ ‪Developer‬‬
‫بعد كدا الـ ‪ specificity‬بعد كدا الـ ‪ )conflicts( Source order‬ي‬
‫باليتيب كدا‬ ‫ر‬

‫تعال نشوف الـ ‪ !Important flag‬دا عبارة عن اي‬

‫ي‬ ‫طيب‬
‫بص معايا الكود دا كدا‬

‫ن‬ ‫ر‬
‫الل هيتطبق هل كلمة ‪ Box‬هيكون الـ ‪ Background‬بتاعها لونها أزرق وال المفروض‬‫ييي اي ‪ Style‬يف دول ي‬
‫هيكون لونها ن‬
‫أخرص عشان انا اخر حاجة كتبتها للـ ‪ Box‬دا ;‪background-color: green‬‬
‫الل تتطبق ؟!‬
‫ه ي‬ ‫وبعدين مش المفروض أخر حاجة اكتبها للعنرص ي‬
‫تعال نشوف‬
‫ي‬

‫‪By: Amr Elsayed‬‬

 ‫ن‬
‫األخرص اتكتب تحته هنا دا اول حاجة بيبص عليها‬ ‫الل حصل ! دا طبق أول خاصية اللون االزرق مع ان‬
‫اي ي‬
‫الـ ‪ Cascade‬وهو بيحلل ملف الـ ‪ CSS‬بيشوف العنارص وتنسيقتها ويبص ع الـ ‪ !important Flag‬ويطبقه‬
‫الل هتشتغل ؟!‬ ‫ن‬
‫انه خاصية ي‬‫طيب لو الـ ‪ !important Flag‬دا متطبق يف العنرصين هحدد ازي ي‬

‫أو األقوي بص معايا ع الكود دا كدا‬ ‫والل يه الـ ‪specificity‬‬ ‫مرحلة‬ ‫وهنا يج دور ن‬
‫تان‬
‫ي‬ ‫ي‬ ‫ي‬

‫ن‬
‫واالتني مطبق عليهم الـ ‪!important Flag‬‬ ‫بتوع فيه ‪Background-color‬‬ ‫ر‬
‫دلوقن انا عندي العنرصين‬
‫ي‬ ‫ي‬
‫الل هو الـ ;‪ background-color: blue‬النه أخر حاجة اتكتب‬ ‫ن‬ ‫ر‬
‫الل هيشتغل أكيد االخي ي‬
‫ييي مي فيهم ي‬
‫تعال نشوف‬
‫ي‬ ‫الل قبله !‪...‬‬
‫عل ي‬‫الل هيعمل ‪ overwrite‬ي‬ ‫وهو ي‬

‫الل اطبق ؟! ودا حصل بسبب ‪specificity‬‬ ‫ن‬

‫الل حصل ؟! دا اللون االخرص ي‬
‫الل فوق هو ي‬ ‫اي ي‬
‫األول‬
‫ي‬ ‫وه ‪ Class‬كدا اضعف من الحالة‬
‫االول أقوي عشان فيه ‪ ID‬و ‪ Class‬مع بعض لكن الـ ‪ .box‬بس لوحدها ي‬
‫ن‬
‫ألخرص والمفروض هو‬ ‫ن‬
‫ألخرص بسبب قوة الـ ‪ specificity‬مع ان اللون األزرق جاي بعد ا‬ ‫لذلك هو طبق اللون ا‬
‫الل يـ ‪ overwrite‬عليه لكن دا محصلش بسبب الـ ‪ specificity‬زي ما قولنا‬
‫ي‬

‫‪By: Amr Elsayed‬‬

 ‫ن‬
‫يعن انت حاطط التنسيقات‬
‫هتكون أقوي حاجة لو الـ ‪ style‬معمول ‪ inline-style‬ي‬
‫ن‬
‫والحظ ان الـ ‪specificity‬‬
‫ن‬
‫ن ن‬
‫يعن عندك‬
‫يف الـ ‪ HTML‬نفسه مع العنرص يف حالة انك مش عامل ‪ !important‬لتنسيق معي ي‬
‫ن‬
‫يعن انا قصدي التال بص ع الكود دا عشان تعرف ن‬
‫مي الـ ‪ specificity‬األقوي‬ ‫ي‬ ‫ي‬

‫االقوي هنا هو الـ ‪inline-style‬‬

‫‪By: Amr Elsayed‬‬

 ‫تعال ناخد مثال ر‬
‫اكي تعقيدا ع الـ ‪specificity‬‬ ‫ي‬

‫ن‬
‫بتاع‬
‫ي‬ ‫العنرص‬ ‫ع‬ ‫هتطبق‬ ‫الل‬
‫ي‬ ‫دول‬ ‫االربعة‬ ‫ف‬‫ي‬ ‫ياتري انهو ‪background-color‬‬
‫اليتيب كدا االولية بتكون للـ ‪ inline-style‬ثم الـ الـ ‪ ID‬ثم الـ ‪ class‬ثم الـ ‪element‬‬‫الـ ‪ specificity‬بتتحسب ب ر‬
‫ر‬ ‫ن‬
‫يبق كدا المجموع )‪(0 inline-style, 0 id, 1 class, 0 element‬‬
‫يف العنرص االول مفيش غي ‪ class‬واحد بس ي‬

‫الل هو الـ ‪ div‬وعندي‬ ‫كمان‬ ‫‪Element‬‬ ‫وعندي‬ ‫‪#nav‬‬ ‫‪ID‬‬ ‫عندي‬ ‫و‬ ‫‪nav‬‬ ‫‪element‬‬ ‫ـ‬ ‫ل‬ ‫ا‬ ‫عندي‬ ‫نف العنرص ن‬
‫التان‬
‫ي‬ ‫ي‬ ‫ي‬
‫الل هو الـ ‪.button‬‬
‫الل هو ‪ .pull-right‬وعندي ‪ class‬كمان ي‬ ‫‪ class‬ي‬
‫يبق المجموع )‪(0 inline-style, 1 id, 2 classes, 2 elements‬‬ ‫ر‬
‫ي‬

‫نف العنرص التالت عندي ‪ element‬واحد بس الل هو الـ ‪ a‬ر‬

‫يبق المجموع‬
‫ي‬ ‫ي‬ ‫ي‬
‫)‪(0 inline-style, 0 id, 0 class, 1 element‬‬

‫‪By: Amr Elsayed‬‬

 ‫ن‬
‫يف العنرص الرابع عندي ‪ #nav id‬وعندي ‪ a element‬وعندي ‪ .button class‬وعندي ‪hover: class‬‬
‫ر‬
‫يبق المجموع )‪(0 inline-style, 1 id, 2 classes, 1 element‬‬
‫ي‬

‫الل الـ ‪ specificity‬بتاعته‬ ‫لو بصيت ع المجموع بتاع كل ‪ Selector‬هتالحظ ان ن‬

‫التان هو أقوي واحد فيهم هو ي‬
‫ي‬
‫ن‬
‫االخرص‬ ‫الل هيطبق هو اللون‬
‫أعل لذلك ي‬
‫ي‬

‫طيب لو كل حاجة متساوية كل الـ ‪ Selectors‬نفس الـ ‪ specificity‬وكلهم نفس الـ ‪ !important Flag‬ومفيش‬
‫ه الـ ‪Source order‬‬‫الل ي‬
‫يج اخر حاجة بيبص عليها الـ ‪ Cascade‬و ي‬ ‫اي ‪ inline-style‬هنا بقا ي‬

‫الـ ‪Source order‬‬

‫ن‬
‫الل بتحصل منك لو كل الـ ‪ Selectors‬زي بعض يف كل حاجة هنا الـ ‪Cascade‬‬
‫ودي ببساطة الـ ‪ conflicts‬ي‬
‫ن‬
‫الباقي‬ ‫عل‬ ‫ن‬
‫يعن أخر حاجة مكتوبه هتعمل ‪ overwrite‬ي‬ ‫هيشوف أخر حاجة اتكتب ويطبقها ي‬

‫‪By: Amr Elsayed‬‬

 ‫الل فات كله‬ ‫ع‬ ‫جدا‬ ‫ـع‬ ‫ـ‬ ‫ـ‬ ‫ي‬
‫ش‬ ‫ملخص‬ ‫ر‬
‫يبق‬
‫ي‬ ‫ي‬
‫وه الـ ‪!important flag‬‬
‫يج يشتغل ي‬
‫اول حاجة بيبص عليها الـ ‪ cascade‬دا اول ما ي‬
‫الل بتحصل منك انت كـ ‪Developer‬‬
‫بعد كدا الـ ‪ specificity‬بعد كدا الـ ‪ )conflicts( Source order‬ي‬

‫ن‬
‫لو عندي عنرص يف الـ ‪ HTML‬حطيت جواه ‪ inline-style‬باللون األحمر‬
‫ن‬ ‫ر‬ ‫ن‬ ‫ن‬
‫الخرص‬‫يبق اللون ا‬
‫ومسكت نفس العنرص دا يف الـ ‪ CSS‬اديته لون أخرص وحطيت معاه الـ ‪ !important Flag‬ي‬
‫الل هيتطبق النه أقوي حاجة ودي أول حاجة بيبص عليها الـ ‪ Cascade‬ويطبقها ودي مرحلة‬‫هو ي‬
‫الـ ‪!important Flag‬‬

‫ن‬ ‫ن‬
‫لو عندي عنرص يف الـ ‪ HTML‬وملهوش اي ‪ inline-style‬وانا مش مستخدم الـ ‪ !important Flag‬بس يف الـ ‪CSS‬‬
‫عل العنرص‬ ‫ر‬
‫محدد العنرص دا بأكي من طريقةالـ ‪ Cascade‬هيشوف انهو تحديده األقوي فيهم ويطبقها ي‬ ‫ن‬
‫انا‬
‫وه‬ ‫ن‬
‫تان مرحلة بعد الـ ‪ Important‬ي‬
‫وفوق يف المثال الكبي عرفنا ازي بيحدد انهو ‪ Selector‬األقوي ودي ي‬
‫الـ ‪specificity‬‬

‫ن‬
‫لو عندي عنرص يف الـ ‪ HTML‬ليه ‪ inline-style‬او ملوش وانا مستخدم الـ ‪ !important Flag‬وكلهم زي بعض‬
‫ن‬
‫عل العنرص ودي المرحلة‬
‫يف الـ ‪ specificity‬الـ ‪ Cascade‬هياخد أخر حاجة اتكتب للـ ‪ Selector‬دا ويطبقها ي‬
‫الل بيكون اسمها الـ ‪)conflicts( Source order‬‬
‫ي‬

‫يبق األولوية ديما ربيوح للـ ‪!important‬‬

‫ي‬
‫ر‬

‫ثم الـ ‪ specificity‬والل بيبص فيها لو فيه ‪ Inline-style‬لو مفيش بيبص عل الـ ‪ ID‬النه بيكون ن‬
‫تان اقوي حاجة‬
‫ي‬ ‫ي‬ ‫ي‬
‫بعد الـ ‪ inline-style‬وبعدها بيبص ع الـ ‪ class‬ودا بيكون تالت أقوي حاجة وبعدين بيبص ع الـ ‪element‬‬
‫الل بيكون رابع أقوي حاجة‬ ‫ي‬
‫ن‬
‫ثم لو كل حاجة زي بعض يف كل حاجة نفس الـ ‪ !important‬ونفس الـ ‪ specificity‬يروح ألخر حاجة‬
‫ن‬
‫بمعن انه هيشوف أخر حاجة اتكتب للـ ‪ Selector‬ويطبقها ويكون‬ ‫ه الـ ‪)conflicts( Source order‬‬
‫ي‬ ‫ن‬ ‫والل ي‬
‫ي‬
‫ليها األولوية يف الظهور‬

‫ن‬
‫ملحوظة مهمة جدا‪ :‬ي‬
‫خل أستخدامك للـ ‪ !important‬يف أضيق الحدود الممكنة لو بس بتصلح كود بتاع‬
‫تان وتنسيقاتك مش راضيه تتطبق لسبب ما استخدم الـ ‪ !Important‬الن زي ما قولنا بيكون اول واحد‬ ‫شخص ن‬
‫ني‬
‫له األولوية يف التطبيق أن وجد‬

‫‪By: Amr Elsayed‬‬

Some Notes in English
• CSS declarations marked with !important have the highest priority;
• But only use !important as a last resource. It's better to use correct specificities –
more maintainable code!
• Inline styles will always have priority over styles in external stylesheets;
• A selector that contains 1 ID is more specific than one with 1000 classes;
• A selector that contains 1 class is more specific than one with 1000 elements;
• The universal selector * has no specificity value )0 ,0 ,0 ,0(
• Rely more on specificity than on the order of selectors;
• But, Rely on Order When using 3rd-party stylesheets – always put your author
stylesheet last.

♥ ‫اذكر هللا‬
♥ ‫الزموا ذكر هللا ففيه العون عل متاعب الحياة‬
‫سبحان هللا وبحمده سبحان هللا العظيم‬
ُ ُ ُ ْ ُّ‫ْ َّ َ ْ َ ن‬ َ
‫اَّلل تطم ِي القلوب‬
ِ ‫أال ِب ِذك ِر‬

By: Amr Elsayed

 ‫‪Specificity in Practice‬‬
‫تعال ناخد تمرين عل الـ ‪ Specificity‬عشان نعمق فهمه ر‬
‫اكي ونوضح بعض حاجات برضو‬ ‫ي‬ ‫ي‬
‫شوف الكود دا معايا‬

‫الل فيه ؟!‬ ‫ن‬

‫والل هيطبق الـ ‪ Declarations‬ي‬
‫مي األقوي هنا ي‬
‫تان بحسبة بسطية جدا‬ ‫ن‬
‫تعال نحسبها ي‬
‫ي‬

‫‪By: Amr Elsayed‬‬

 ‫تخيل ان عندي اربــع حاجات هما اطراف المقارنة وهما (‪)inline-style, ID, Class, Element‬‬
‫عل‬ ‫ر‬
‫عل كل ‪ Block‬عندي فوق واشوف الـ ‪ Selector‬بيحتوي ي‬ ‫الل فوق دا هبص ي‬‫يبق االربــع حاجات ي‬
‫ي‬
‫ايه من االربــع حاجات دي‬

‫ن‬
‫قبل ما ابدأ المقارنة انا معنديش اي ‪ inline-style‬لذلك هو ديما هيكون بـصفر ‪ 0‬يف المقارنة دي‬

‫ر‬
‫كالتال ‪:‬‬
‫ي‬ ‫يبق المقارنة‬ ‫اول ‪ Selector‬عندي ي‬
‫الل هو الـ ‪ .button‬عبارة عن ‪ class‬واحد ي‬
‫)‪(0 inline-style, 0 id, 1 class, 0 element‬‬

‫ر‬ ‫ن‬
‫كالتال ‪:‬‬
‫ي‬ ‫يبق المقارنة‬ ‫تان ‪ Selector‬عندي ي‬
‫الل هو الـ ‪ a‬عبارة عن ‪ Element‬واحد ي‬ ‫ي‬
‫)‪(0 inline-style, 0 id, 0 class, 1 element‬‬

‫التال‬
‫ي‬ ‫تالت ‪ Selector‬عندي فيه‬
‫‪ #nav‬ادي كدا أول ‪ID‬‬ ‫‪-1‬‬
‫‪ div Element‬أدي كدا أول ‪Element‬‬ ‫‪-2‬‬
‫‪ .pull-right‬أدي كدا أول ‪Class‬‬ ‫‪-3‬‬
‫تان ‪Element‬‬‫ن‬
‫‪ a Element‬ادي كدا ي‬ ‫‪-4‬‬
‫تان ‪Class‬‬‫ن‬
‫‪ .button‬أدي كدا ي‬ ‫‪-5‬‬
‫كالتال ‪:‬‬ ‫ر‬
‫يبق المقارنة‬
‫ي‬ ‫ي‬
‫)‪(0 inline-style, 1 id, 2 class, 2 element‬‬

‫ن‬ ‫ر‬
‫الل هيطبق‬
‫يبق بشكل مبدأي كدا اللون الـ ‪ orangered‬يف تالت ‪ Selector‬هو ي‬ ‫ي‬
‫الل هطبق وقولنا ليه ؟!‬ ‫ر‬
‫عل بعضه فوق هو برضو ي‬
‫حن لو نقلت الـ ‪ Selector‬دا او الـ ‪ Block‬دا كدا كله ي‬‫ي‬
‫عشان الـ ‪ Specificity‬بتاعته أقوي واحد فيهم‬

‫‪By: Amr Elsayed‬‬

 ‫طيب ليه لما جيت أعمل ‪ Hover‬تأثي الـ ‪ Hover‬مظهرش ؟! واتحول لـ اللون االصفر ؟!‬

‫ن‬
‫الل فوق‬
‫ي ي‬ ‫الل‬ ‫من‬ ‫أضعف‬ ‫‪Hover‬‬ ‫ـ‬ ‫ل‬ ‫ا‬ ‫بتاع‬ ‫‪block‬‬ ‫ـ‬ ‫ل‬ ‫ا‬ ‫ف‬
‫عشان برضو هنا تأثي الـ ‪ Specificity‬ي‬
‫هتقول ازاي ؟!‬
‫ي‬
‫هقولك تعال نعمل مقارنة تانن‬
‫ي‬ ‫ي‬

‫التال‬
‫ي‬ ‫تالت ‪ Selector‬عندي فيه‬
‫‪ #nav‬ادي كدا أول ‪ID‬‬ ‫‪.1‬‬
‫‪ div Element‬أدي كدا أول ‪Element‬‬ ‫‪.2‬‬
‫‪ .pull-right‬أدي كدا أول ‪Class‬‬ ‫‪.3‬‬
‫تان ‪Element‬‬‫ن‬
‫‪ a Element‬ادي كدا ي‬ ‫‪.4‬‬
‫تان ‪Class‬‬ ‫ن‬
‫‪ .button‬أدي كدا ي‬ ‫‪.5‬‬
‫كالتال ‪:‬‬ ‫يبق المقارنة‬‫ر‬
‫ي‬ ‫ي‬
‫)‪(0 inline-style, 1 id, 2 class, 2 element‬‬

‫رابع ‪ Selector‬عندي فيه‬

‫‪ #nav‬ادي كدا أول ‪ID‬‬ ‫‪-1‬‬
‫‪ a Element‬ادي كدا أول ‪Element‬‬ ‫‪-2‬‬
‫‪ .button‬أدي كدا أول ‪Class‬‬ ‫‪-3‬‬
‫تان ‪Class‬‬‫ن‬
‫‪ :hover‬أدي كدا ي‬ ‫‪-4‬‬
‫كالتال ‪:‬‬ ‫ر‬
‫يبق المقارنة‬
‫ي‬ ‫ي‬
‫)‪(0 inline-style, 1 id, 2 class, 1 element‬‬
‫ن‬
‫وبالمناسبة الـ ‪ Pseudo Class‬تصنف كـ ‪ Class‬وبيتم احتسابها يف مقارنة الـ ‪Specificity‬‬

‫ن‬ ‫ر‬
‫حن الـ ‪ Hover‬مش هيتم تطبيقه غي لو بقا مساوي لتالت ‪ Selector‬يف القوة‬
‫كدا مازال تالت ‪ Selector‬أقوي ي‬

‫‪By: Amr Elsayed‬‬

 ‫بالتال تأثي الـ ‪ Hover‬هيتم تطبيقه‬
‫ي‬ ‫كدا كافة المقارنة رجحت لحساب رابع ‪Selector‬‬

‫ن‬
‫الحظ انك ممكن لو استخدمت الـ ‪ !Important‬هيكون ليه األولوية يف التنفيذ والتطبيق ألنه زي ما قولنا فوق‬
‫ن‬
‫الل قبل دا أول حاجة فوق خالص ان الـ ‪ Cascade‬أول حاجة بيبص عليها أو بيديها‬‫ي‬ ‫الدرس‬ ‫ف‬‫ي‬
‫ه الـ ‪ !important Flag‬لو تفتكر انا برضو هجبلك اسكرين من الجزء دا عشان تفتكر‬ ‫األولوية ي‬

‫ن‬ ‫ن‬
‫بس انا واي حد عموما مش بيفضل أستخدام الـ ‪ !important Flag‬غي يف ظروف طارئة جدا والسبب يف دا‬
‫بيجع الن الكود بتاعك يكون ‪ maintainable‬أو قابل للصيانة ديما مع استخدامك للـ ‪!important Flag‬‬
‫بيكون‬
‫ر‬
‫الوضع صعب شوية خصوصا لو التطبيق كبي جدا وعندك اكي من عنرص ليهم نفس الـ ‪Specificity‬‬
‫الل بتكتب الـ ‪ Code‬بايدك‬
‫فبالش استخدام الـ ‪ !important Flag‬كتي خصوصا لو انت كـ ‪ Developer‬ي‬

‫‪By: Amr Elsayed‬‬

 ‫ن‬
‫يعن‬
‫الل فوق بس الـ ‪ Concept‬ي‬
‫توضيج أفضل فيها بعض االختالفات عن الكود ي‬
‫ي‬ ‫صورة مخترصة للمقارنة بشكل‬

‫اذكر هللا ♥‬
‫الزموا ذكر هللا ففيه العون عل متاعب الحياة ♥‬
‫شء قدير‪.‬‬‫ر‬ ‫ر‬
‫ال إله اال هللا وحده ال شيك له ‪ ..‬له الملك وله الحمد وهو عل كل ي‬
‫الج القيوم واتوب اليه‪.‬‬
‫استغفروا هللا العظيم الذي ال إله اال هو ي‬
‫صل وسلم وزد وبارك عل نبينا محمد ﷺ‪.‬‬ ‫اللهم ّ‬
‫ن‬
‫الظالمي‪.‬‬ ‫ن‬
‫إن كنت من‬
‫ال إله اال انت سبحانك ي‬
‫ْ َّ َ ْ َ نُّ ْ ُ ُ ُ‬ ‫َ‬
‫اَّلل تطم ِي القلوب‬
‫أال ِب ِذك ِر ِ‬

‫أفتكرونا بدعوة طيبة‬

‫‪By: Amr Elsayed‬‬

 ‫‪How CSS is Parsed, Part 2: Value Processing‬‬
‫ن‬ ‫ن‬
‫يف الدرس دا هنفهم ازي الـ ‪ Values‬بتاعت الـ ‪ Properties‬بيحصلها تحليل يف الـ ‪ CSS‬كمان هنعرف ازاي‬
‫ن‬ ‫الـ ‪ Percentage %‬و الـ ‪ CSS Units‬زي و الـ ‪ em‬و الـ ‪ rem‬و الـ ‪ vh‬ر‬
‫بتيجم او بتتحسب ازاي يف الـ ‪CSS‬‬
‫ن‬
‫بيقول ليه انا محتاج اعرف الـ ‪ units‬دي بتتحسب‬
‫ي‬ ‫الل واقف هناك دا‬
‫طيب يف سؤال حلو انا سامعه من االستاذ ي‬
‫ازاي ؟!‬
‫ر‬ ‫ن‬
‫تبق فاهم ان الـ ‪ units‬دي‬
‫بتستخدم فيها ‪ unit‬غي الـ ‪ px‬وليكن بتستخدم الـ ‪ rem‬و الـ ‪ em‬ي‬ ‫عشان يف كل مرة‬
‫ن‬
‫الل‬
‫بتتحول للـ ن ‪ px‬برضو يف النهاية بس السؤال هنا بقا المهم جدا هو ازاي بتتحسب وازاي بتتحول للـ ‪ px‬ودا ي‬
‫هنناقشه يف الدرس دا ‪ ..‬يال بينا‬

‫ر‬ ‫ن‬
‫هيتشح لحد ما قبل الجدول دا‬ ‫الل‬
‫وف أخر الدرس انا هعملك جدول المم كل ي‬
‫عل األكواد دي ي‬
‫بص معايا كدا ي‬

‫‪By: Amr Elsayed‬‬

 ‫ر‬
‫الل هما ‪ font-size‬و ‪ width‬و ‪background-color‬‬
‫ي‬ ‫‪Declaration‬‬ ‫‪6‬‬ ‫عندي‬ ‫انه‬ ‫هالف‬
‫ي‬ ‫بالنظر كدا للـ ‪CSS‬‬
‫تان و ‪ width‬تالت مرة‬ ‫ن‬ ‫ن‬
‫تان و ‪ background-color‬ي‬ ‫و ‪ width‬ي‬
‫ن‬
‫تعال نشوف بقا ازاي بيحصلهم ‪ analysis‬يف الـ ‪CSS‬‬‫ي‬

‫الل فيه‬
‫تعال نبدأ بالـ ‪ p‬ونشوف الـ ‪ width‬ي‬
‫ي‬
‫ان عملت ‪ Select‬للـ ‪ p‬وعملت ‪ Select‬للـ ‪.amazing‬‬ ‫ن‬
‫عندي هنا ‪ conflict‬حاصل بسبب ي‬‫ن‬
‫بشكل مبدأي كدا انا‬
‫الل هو اصال ‪ Class‬الـ ‪ P‬يف الـ ‪HTML‬‬ ‫ي‬
‫وتيجمها هقولك صح‬ ‫انهو ‪ width‬الل هيطبق ؟! لو قولت الـ ‪ .amazing‬عشان هو أخر حاجة الـ ‪ css‬هتشوفها ر‬
‫ي‬
‫!‬
‫بس لو انا نقلت الـ ‪ class‬دا فوق الـ ‪ p‬هل هتكون دي اجابتك برضو ؟ اعتقد ال‬
‫ن‬ ‫ن‬
‫تان لو ركزت شوية هتالحظ هنا ان الـ ‪ specificity‬بتاعت الـ ‪ class‬أقوي من الـ ‪ element‬لو تفتكر‬ ‫الن يف سبب ي‬
‫الل حدد دا هل انا او انت ؟! ال الـ ‪ Cascade‬بالـ ‪Rules‬‬ ‫ن‬ ‫ر‬
‫عل الـ ‪ P‬مي ي‬
‫الل هيطبق ي‬‫يبق الـ ‪ width: 66%‬هو ي‬ ‫ي‬
‫بتاعته‬
‫ن‬ ‫ن‬ ‫حدد ن‬
‫ومي ليه األولوية يف التطبيق‬ ‫مي األقوي‬

‫ن‬ ‫ن‬ ‫طيب الـ ‪ 66%‬دي زي ما اتفقنا هتتحول للـ ‪ px‬ازاي دا بيتم بقا ‪ ..‬دا بيتم ع ر‬
‫اكي من مرحلة او يف مراحل يف النص‬
‫كدا بتحصل زي اي‬
‫‪Declared Value (Author Declarations) -1‬‬
‫‪Cascaded Value (After The Cascade) -2‬‬
‫‪Specified Value (Defaulting Value If There Is No Cascaded Value) -3‬‬
‫‪Computed Value (Converting Relative Values To Absolute) -4‬‬
‫‪Used Value (Final Calculations, Based On Layout) -5‬‬
‫‪Actual Value (Browser And Device Restrictions) -6‬‬
‫ن‬ ‫ر‬ ‫ر‬
‫بتمش عليها عشان تحول أي ‪ unit‬للـ ‪ pixel‬يف النهاية وطبعا هنفصصهم‬
‫ي‬ ‫‪CSS‬‬ ‫ـ‬ ‫ل‬ ‫ا‬ ‫الل‬
‫ي‬ ‫‪process‬‬ ‫ـ‬ ‫ل‬ ‫ا‬ ‫كل‬ ‫دي‬ ‫يبق‬
‫ي‬
‫واحدة واحدة‬

‫الل انت كـ ‪ author‬او كـ ‪Developer‬‬

‫الل بيكون فيها القيمة ي‬ ‫أول مرحلة‪ :‬الـ ‪ Declared Value‬ودي المرحلة ي‬
‫ن‬ ‫ن‬ ‫ن‬
‫ه الـ ‪ 66%‬يف الـ ‪ .amazing class‬و الـ ‪ 140px‬يف الـ ‪p‬‬
‫وف حالتنا دي ي‬
‫كتبتها ي‬

‫ن‬
‫تان مرحلة‪ :‬الـ ‪ Cascaded Value‬ودي المرحلة ي‬
‫الل الـ ‪ CSS‬بتحل فيها الـ ‪ Conflicts‬واول ما تشوف ‪Conflict‬‬ ‫ي‬
‫ن‬ ‫ن‬
‫حصل بي الـ ‪ .amazing‬و الـ ‪ p‬بتشوف مي األقوي وتختارة وبناءا عليه الـ ‪ 66%‬هتتطبق‬

‫لحد كدا انت معايا وسليم وتمام وكله زي الفل ؟! فاهم صح ؟ تمام‬
‫‪By: Amr Elsayed‬‬
 ‫تالت مرحلة‪ :‬الـ ‪Specified Value‬‬
‫ن‬
‫بتيج او‬
‫ي‬ ‫يف المرحلة دي لو مفيش اي ‪ Declared Value‬بيتحط حاجة اسمها ‪ initial Value‬وهنعرف ازاي دي‬
‫مني لما نخلص الخاصية دي بمراحلها الـ ‪ 6‬ونشوف خاصية تانية‬‫ن‬ ‫بتيج‬
‫ي‬
‫ر‬ ‫ر‬ ‫ن‬
‫هيبق‬
‫ي‬ ‫يبق الـ ‪ 66%‬هتتطبق مدام فيه ‪Cascaded Value‬‬
‫يف حالتنا وبما ان انا حطيت ‪ value‬كـ ‪ Developer‬ي‬
‫ه كمان‬ ‫ر‬
‫وهتبق الـ ‪ Specified Value‬بـ ‪ 66%‬ي‬
‫ي‬ ‫هتطبق‬

‫رابع مرحلة‪ :‬الـ ‪Computed Value‬‬

‫ن‬
‫الل بتكون ‪ Relative‬او نسبية ببتحول للـ ‪ px‬بحيث يتم توريثها وهنتكلم بالتفصيل‬‫ي‬ ‫يف المرحلة دي الـ ‪values‬‬
‫ن‬
‫والل زيــها‬
‫ي‬ ‫عن التوريث او الـ ‪ .. inheritance‬كمان يف المرحلة دي الـ ‪ CSS keywords‬زي ‪orange, bolder‬‬
‫ن‬
‫بيحصل ‪ Compute‬وبتتبدل يف المرحلة دي‬

‫ه برضو‬ ‫ن‬
‫ـق الحالة دي هتفضل ‪ %66‬زي ما ي‬
‫تكنيكال مش ‪ unit‬ايون زي ما بقولك كدا ف ي‬
‫ي‬ ‫بس عشان الـ ‪%‬‬
‫وهثبتلك حاال ان الـ ‪ %‬مش ‪ unit‬فعلية‬

‫لينك‬

‫لينك أخر‬

‫خامس مرحلة‪ :‬الـ ‪Used Value‬‬

‫ن‬ ‫ن‬
‫فعل من الـ ‪ %‬للـ ‪ px‬يف حالتنا احنا عندنا الـ ‪ .section‬األب يف الكود‬
‫ي‬ ‫الل بيحصل فيها تحويل‬
‫ودي بقا المرحلة ي‬
‫يعن بتساوي ‪184.8px‬‬ ‫ن‬
‫ه ‪ %66‬من الـ ‪ 280px‬دول ي‬ ‫فوق كان فيه ‪ width‬بالقيمة ‪ 280px‬لذلك الـ ‪ .amazing‬ي‬
‫الل هو الـ ‪ .section‬األب‬
‫ه استمدت قيمتها من الـ ‪ Parent Element‬ي‬
‫ي‬

‫سادس مرحلة‪ :‬الـ ‪Actual Value‬‬

‫ن‬
‫يف المرحلة دي الـ ‪ CSS‬بتكون محددة جدا او ‪ specific‬بتقرب القيمة دي للـ ‪185px‬‬

‫ن‬ ‫ر‬
‫الل هتتحط يف النهاية‬
‫ي‬ ‫الفعلية‬ ‫ـقيمة‬ ‫ل‬‫ا‬ ‫ه‬
‫ي‬ ‫‪185px‬‬ ‫ـ‬ ‫ل‬ ‫ا‬ ‫يبق‬
‫ي‬

‫‪By: Amr Elsayed‬‬

 ‫تعال نشوف خاصية تانيه ونشوف الـ ‪ value‬بتاعتها بيحصلها ‪ parse‬ازاي‬
‫ي‬

‫ن‬ ‫ن‬
‫استن بس انا مكتبتش ‪ padding‬اصال‬‫ي‬ ‫هتقول‬
‫ي‬ ‫تعال نشوف الـ ‪ padding‬يف المثال بتاعنا‬
‫ي‬ ‫وليكون‬
‫ن‬
‫هقولك صحيح بس انا عايز تعرف ان يف خواص انت مش بتكتبها بيتحطلها قيم معينة فعليا بشكل ‪default‬‬
‫الل عندي فوق‬‫عل الـ ‪ 6‬مراحل ي‬
‫الل مش موجود دا اصال ي‬ ‫فتعال نعدي الـ ‪ padding‬ي‬
‫ي‬

‫ر‬ ‫ن‬ ‫ن‬

‫حن لو‬
‫السبب يف الكالم دا ان كل ‪ element‬يف الصفحة بيكونله كل ‪ CSS property‬محتاجه يكون ليها ‪ Value‬ي‬
‫انت معملتهاش ‪Declaration‬‬
‫الل احنا متكبتنهوش دا مع الـ ‪ 6‬مراحل بتوعنا‬
‫فتعال نشوف الـ ‪ padding‬ي‬
‫ي‬

‫أول مرحلة‪ :‬الـ ‪ Declared Value‬مفيش خالص اي ‪Declared Value‬‬

‫ن‬
‫تان مرحلة‪ :‬الـ ‪ Cascaded Value‬مفيش خالص اي ‪ Cascaded Value‬الن مفيش ‪ declaration‬حصل‬
‫ي‬

‫ن‬
‫تالت مرحلة‪ :‬الـ ‪ Specified Value‬ااااه يف هنا بقا ‪ Specified Value‬او الـ ‪default‬‬
‫ودا بسبب ان كل واي ‪ CSS property‬بيكون ليها ‪ initial value‬وببساطة دي بتكون الـ ‪ Value‬الفعلية‬
‫ن‬
‫الل‬
‫الل انا قولتلك هنجيلها كمان شوية فوق لما كنت بتكلم يف الخاصية ي‬ ‫لو مفيش ‪ Cascaded Value‬ودا ي‬
‫وبين وبينك التوريث بيكون ليه عامل هنا بس‬ ‫فاتت ف نق الحالة دي ( الـ ‪ initial Value‬هتكون بـ ـ ـ ـ ـ ـ ـ ‪ ) 0px‬ن‬
‫ي‬ ‫ي‬
‫عل دا بالتفصيل قدام‬
‫هنتعرف ي‬

‫ن‬
‫يعن هو ‪ 0px‬والـ ‪ unit‬بتاعته ‪px‬‬ ‫رابع مرحلة‪ :‬الـ ‪ Computed Value‬بشكل‬
‫ه ‪ absolute unit‬ي‬
‫فعل الـ ‪ 0px‬ي‬
‫ي‬
‫فعليا‬
‫والل بعدها هتفضل ‪ 0px‬او خالص مش محتاجينهم‬
‫ي‬ ‫لذلك المرحلة دي‬
‫خامس مرحلة‪ :‬الـ ‪ Used Value‬هتكون ‪0px‬‬
‫سادس مرحلة‪ :‬الـ ‪ Actual Value‬هتكون ‪0px‬‬

‫‪By: Amr Elsayed‬‬

 ‫ن‬
‫تعال نناقش‬
‫ي‬ ‫دي‬ ‫نشوف‬ ‫ما‬ ‫قبل‬ ‫بس‬ ‫‪1.5rem‬‬ ‫هو‬ ‫والل‬
‫ي‬ ‫‪.section‬‬ ‫ـ‬ ‫ل‬ ‫ا‬ ‫ف‬
‫ي‬ ‫الل موجود‬
‫ي‬ ‫تعال نشوف الـ ‪font-size‬‬
‫ي‬
‫ن‬ ‫ن‬
‫الل موجود يف الـ ‪.section‬‬ ‫حاجة تانيه وهيج للـ ‪ font-size‬ي‬

‫تلقان زي ما انا وانت والدنيا كلها‬ ‫ن‬

‫محتاجي نعرف الـ ‪ font-size‬بتاع الـ ‪ root‬بتاعنا بتكون ‪ 16px‬بشكل‬ ‫احنا‬
‫ي‬
‫عارفه‬
‫ان الـ ‪ Browsers‬بتحط ‪ Default Font-Size‬بالقيمة ‪16px‬‬
‫يبق الـ ‪ root‬الـ ‪ font-size‬بتاعه بيكون ‪ 16px‬ودا برضو هيعدي ع الـ ‪ 6‬مراحل بتوعنا‬‫ر‬
‫ي‬

‫أول مرحلة‪ :‬الـ ‪ Declared Value‬مفيش خالص اي ‪ Declared Value‬النها ‪ 16px‬من الـ ‪ browser‬نفسه‬

‫ن‬
‫تان مرحلة‪ :‬الـ ‪ Cascaded Value‬هنا الحالة دي مختلفة عن الـ ‪ padding‬هنا فيه ‪ Cascaded Value‬طيب‬ ‫ي‬
‫هتقول ازاي ؟!‬
‫ي‬
‫الل هو الـ ‪user agent‬‬ ‫ر‬
‫بتيج من أكي من مصدر ؟ من ضمن المصادر دي ي‬ ‫ي‬ ‫هقولك فاكر لما قولنا ان الـ ‪CSS‬‬
‫ه هنا فرضت الـ ‪ font-size‬للـ ‪ page‬بـ ‪ 16px‬كـ ‪default Value‬‬ ‫والل ي‬
‫ي‬ ‫‪stylesheet‬‬

‫تالت مرحلة‪ :‬الـ ‪ Specified Value‬بتتحط كـ ‪ initial value‬لو مفيش ‪ Cascaded value‬وبما ان فيه‬
‫ه كمان‬ ‫‪16px‬‬ ‫ـ‬ ‫ب‬ ‫هتكون‬ ‫‪Specified‬‬ ‫‪Value‬‬ ‫ـ‬ ‫ل‬ ‫ا‬ ‫‪ Cascaded Value‬جاية من الـ ‪ user agent stylesheet‬ر‬
‫يبق‬
‫ي‬ ‫ي‬

‫رابع مرحلة‪ :‬الـ ‪ Computed Value‬هتكون ‪16px‬‬

‫خامس مرحلة‪ :‬الـ ‪ Used Value‬هتكون ‪16px‬‬
‫سادس مرحلة‪ :‬الـ ‪ Actual Value‬هتكون ‪16px‬‬

‫‪By: Amr Elsayed‬‬

 ‫ن‬
‫والل هو ‪ 1.5rem‬بعدنا ما عرفنا الـ ‪ font-size‬للـ‬
‫ي‬ ‫‪.section‬‬ ‫ـ‬ ‫ل‬ ‫ا‬ ‫ف‬
‫الل موجود ي‬
‫تعال بقا نشوف الـ ‪ font-size‬ي‬
‫ي‬
‫‪root‬‬

‫يال نعديه ع الـ ‪ 6‬مراحل‬

‫ه ‪ Relative unit‬لذلك هتتحول للـ ‪px‬‬
‫ه ‪ 1.5rem‬و الـ ‪ rem‬ي‬
‫والل ي‬
‫ي‬ ‫أول مرحلة‪ :‬الـ ‪Declared Value‬‬

‫ن‬
‫ه هيتم قرأتها كـ ‪ 1.5rem‬برضو‬
‫والل ي‬
‫ي‬ ‫تان مرحلة‪ :‬الـ ‪Cascaded Value‬‬
‫ي‬

‫ر‬
‫تالت مرحلة‪ :‬الـ ‪ Specified Value‬هتكون ‪ 1.5rem‬مدام فيه ‪ Cascaded Value‬ي‬
‫يبق الـ ‪Specified value‬‬
‫هتكون زي الـ ‪Cascaded Value‬‬

‫ن‬
‫سيبن‬ ‫ن‬
‫سألتن ازاي‬ ‫تعال اقولك مش انت‬ ‫رابع مرحلة‪ :‬الـ ‪ Computed Value‬هتكون ‪ ... 24px‬ازاااي بقا ‪..‬‬
‫ي‬ ‫ي‬ ‫ي‬
‫أجاوب بقا سعتك ‪D":‬‬
‫ه بتستمد قيمتها من الـ ‪ root‬وبما ان‬ ‫ن‬
‫يعن ي‬
‫الـ ‪ rem unit‬بتكون نسبية او ‪ Relative‬للـ ‪ root font-size‬ي‬
‫الـ ‪ root‬له ‪ Font-size‬بشكل ‪ default‬بـ ‪16px‬‬
‫يبق الـ ‪ .section‬الـ ‪ Font-size‬بتاعه هيكون ‪ 16px * 1.5‬بـتساوي ‪24px‬‬‫ر‬
‫ي‬

‫خامس مرحلة‪ :‬الـ ‪ Used Value‬هتكون ‪24px‬‬

‫سادس مرحلة‪ :‬الـ ‪ Actual Value‬هتكون ‪24px‬‬

‫‪By: Amr Elsayed‬‬

 ‫حن‬‫تعال نشوف الـ ‪ font-size‬الل موجود نف الـ ‪ p‬هتقول بس انا محطتش ‪ font-size‬للـ ‪ p Element‬وال ر‬
‫ي‬ ‫ي‬ ‫ي‬ ‫ي‬ ‫ن‬ ‫ي‬
‫الل هو الـ ‪ .amazing‬هقولك انا ثانية واحدة بس انت سألت نفسك األول ازاي الـ ‪p‬‬
‫الل يف الـ ‪ p‬ي‬
‫للـ ‪ class‬ي‬
‫الل فيه ليه ‪ font-size‬او ظاهر اصال مع انك فعليا مكتبتش اي ‪ Font-size‬؟!‬
‫الـ ‪ text‬ي‬
‫صح مش كدا وال اي ؟!‬

‫ن‬
‫يف الحالة دي بقا دا ال هو فيه ‪ default value‬محطوطة للـ ‪ p‬عشان يظهر كدا وال فيه اي ‪initial Value‬‬
‫ن‬
‫هتقول هللا !! انا كدا احتارت اومال الـ ‪ p‬دا واخد ‪ Font-size‬وظاهر كدا مني وليه هو الـ ‪ font-size‬بتاعه ي‬
‫الل‬ ‫ي‬
‫ن‬
‫يعن ليه هو مش اصغر من كدا وليه مش أكي من كدا ليه هو شكله كدا تحديدا‬ ‫محطوطله مخليه شكله كدا؟! ي‬
‫؟!‬
‫الل هو فيه‬ ‫ر‬ ‫ن‬
‫صديق ورث حجم الخط ي‬ ‫ي‬ ‫تان اسمه الـ ‪ inheritance‬او التوريث الـ ‪ p‬دا يا‬
‫دا حصل بسبب ميكانزيم ي‬
‫الل فعليا بتساوي ‪24px‬‬ ‫الل هو قيمته بـ ‪ 1.5rem‬ي‬
‫الل الـ ‪ .section‬ي‬
‫دا من األب بتاعه ي‬
‫ر‬
‫هتالف اي تغي حصل‬
‫ي‬ ‫عل الـ ‪ p‬دا حطله ‪ font-size‬بالقيمة ‪ 24px‬من عندك مش‬ ‫كالم روح ي‬
‫ي‬ ‫عل‬
‫اكي دليل ي‬
‫الل هو الـ ‪.section‬‬‫ليه؟ عشان هو ورث حجم الخط دا من األب بتاعه ي‬

‫طيب ليه بيحصل الميكانزيم دا ؟! الن ببساطة تخيل انك عندك ر‬

‫اكي من ‪ p‬جوا األب بتاعهم انك تديهم كلهم‬
‫ه فيه وهنتكلم عن التوريث‬ ‫ر‬
‫الل ي‬
‫ه بيث من االب ي‬‫‪ font-size‬حاجة مش عملية خالص ورخمة لذلك ي‬
‫بالتفصيل وازاي بتم برضو متقلقش‬

‫تيج نبص ع الـ ‪ 6‬مراحل بتوعنا‬

‫ما ي‬
‫أول مرحلة‪ :‬الـ ‪ Declared Value‬مفيش اي ‪Declared Value‬‬

‫ن‬
‫بالتال مفيش اي‬
‫ي‬ ‫تان مرحلة‪ :‬الـ ‪ Cascaded Value‬مفيش اي ‪ Declared value‬عشان يحصلها ‪Cascade‬‬
‫ي‬
‫‪Cascaded Value‬‬

‫تالت مرحلة‪ :‬الـ ‪ Specified Value‬هتكون ‪ 24px‬بطريقة الـ ‪ inheritance‬من األب‬

‫رابع مرحلة‪ :‬الـ ‪ Computed Value‬نفس الـ ‪ Value‬بـ ‪24px‬‬

‫خامس مرحلة‪ :‬الـ ‪ Used Value‬نفس الـ ‪ Value‬بـ ‪24px‬‬

‫سادس مرحلة‪ :‬الـ ‪ Actual Value‬نفس الـ ‪ Value‬بـ ‪24px‬‬

‫‪By: Amr Elsayed‬‬

 ‫الل فات دا‬
‫الل هلملك فيه كل الكالم ي‬
‫تعال بقا أعملك الجدول ي‬
‫ي‬

width padding font-size font-size font-size

(paragraph) (paragraph) (root) (section) ( paragraph)
1- Declared Value 140px - - 1.5rem -
(Author Declarations)
66%
2- Cascaded Value 66% - 16px 1.5rem -
( After The Cascade) (Browser
default)
3- Specified Value 66% 0px 16px 1.5rem 24px
(Defaulting Value If (initial value)
There Is No Cascaded Value)

4- Computed Value 66% 0px 16px 24px 24px

( Converting Relative Values (1.5 * 16px)
To Absolute)

5- Used Value 184.8px 0px 16px 24px 24px

( Final Calculations,
Based On Layout)

6- Actual Value 185px 0px 16px 24px 24px

( Browser And
Device Restrictions)

‫ن‬ ‫ن‬ ‫ن‬

‫كلمتي كدا هنا برضو‬ ‫الل فات دا يف‬
‫خلين الخصلك كل ي‬
‫ي‬ ‫و‬
‫ او مفيش اي‬Declared values ‫ بيتم اللجوء اليها لو مفيش اي‬initial value ‫ بيكون ليها‬Property ‫ كل‬-
inheritance
16px ‫ بالقيمة‬Page ‫ للـ‬Default font-size ‫ بتخصص‬Browsers ‫ الـ‬-
pixels ‫ بيتم تحويلها للـ‬Relative Units ‫ وكل الـ الواحدات النسبية او الـ‬% ‫ النسبة المئوية‬-

‫أفتكرونا بدعوة طيبة‬

By: Amr Elsayed
 ‫ن‬
‫تحفيية♥‬ ‫♥عبارات‬

‫لو أن الناس كلما استصعبوا أمرا تركوه ماقام للناس دنيا والدين‬
‫‪-‬عمر بن عبدالعزيز‬

‫اذكر هللا ♥‬
‫الزموا ذكر هللا ففيه العون عل متاعب الحياة ♥‬

‫سبحان هللا و الحمد هلل و ال الـه اال هللا و هللا أكي و ال حول وال قوة اال باهلل‬
‫صل وسلم وزد وبارك عل نبينا محمد ﷺ‬ ‫اللهم ّ‬
‫ن‬ ‫ن‬ ‫ن‬
‫الظالمي‬ ‫إن كنت من‬
‫إن أستغفرك واتوب إليك‪ ،‬ال إله اال انت سبحانك ي‬
‫اللهم ي‬
‫ْ َّ َ ْ َ نُّ ْ ُ ُ ُ‬ ‫َ‬
‫اَّلل تطم ِي القلوب‬
‫أال ِب ِذك ِر ِ‬

‫‪By: Amr Elsayed‬‬

 ‫‪How Units Are Converted From Relative To Absolute (px) - Value Processing‬‬
‫تعال بقا نفهم بالتفصييييل الشديد ازاي الـ ‪ Engine‬بتاع الـ ‪ CSS‬بيحول الـ ‪ Relative Units‬زي الـ ‪rems‬‬
‫ي‬
‫ن‬
‫و الـ ‪ ems‬والـ ‪ vw‬والـ ‪ vh‬للـ ‪ Pixels‬يف المرحلة الرابعة و الخامسة (الـ ‪ )Computed Value‬و (الـ ‪)Used value‬‬

‫بص معايا ع الكود دا كدا‬

‫بشكل مبدأي عايز أقولك انه فيه فرق ن‬

‫بي استخدام النسب المئوية ‪ %‬للخطوط و استخدامها لقياسات الطول‬
‫والعرض والمسافات وهنفهم دا حاال بالتفصييل الشديد‬

‫وخلين افكرك ان الـ ‪ %‬مش ‪ unit‬بشكل تيكنيكال ه مش ‪ unit‬بس عايزك تعتيها كدا المرادي عشان ر‬
‫الشح‬ ‫ن‬
‫ي‬ ‫ي‬

‫‪By: Amr Elsayed‬‬

 ‫ن‬
‫خلين امسك الـ ‪ header‬انا فيه عملت ‪ declaration‬للـ ‪ font-size‬بـ ‪150%‬‬ ‫اول حاجة‬
‫ر‬ ‫ي‬
‫هالف الـ ‪ font-size‬بـ ‪16px‬‬
‫ي‬ ‫الل هو الـ ‪ body‬و الـ ‪html‬‬
‫ودا معناه انه الـ ‪ header‬هيبص ع األب بتاعه ي‬
‫فدا معناه ان ‪ 16px * 150%‬بيساوي ‪24px‬‬
‫ر‬
‫يبق الـ ‪ header‬الـ ‪ font-size‬بتاعه هيكون ‪24px‬‬
‫ي‬

‫بي استخدام النسب المئوية ‪ %‬للخطوط ‪fonts‬‬ ‫ولو تفتكر من خمس ست سطور قولتلك انه فيه فرق ن‬
‫ن‬
‫و استخدامها لقياسات الطول والعرض ‪ ....‬ف ي‬
‫ق الـ ‪ header‬انا استخدمت النسبة المئوية مع الـ ‪fonts‬‬

‫تعال نشوف الفرق بقا اثناء استخدمها للـطول والعرض‬

‫ي‬

‫ملحوظة‪ :‬لما بنستخدم الـ ‪ %‬مع الـ ‪ length‬زي الـ ‪ height‬والـ ‪ width‬والـ ‪ padding‬و الـ ‪margin‬‬
‫كالتال‬
‫ي‬ ‫بيكون التعامل هنا مختلف عن استخدام الـ ‪ %‬مع الـ ‪ fonts‬الفرق هنا بيكون‬
‫وه بتحسب الـ ‪ computed Value‬بيكون المرجع بتاعها الـ ‪ width‬بتاع‬
‫الـ ‪ length‬لما بتستخدم فيه الـ ‪ %‬ي‬
‫الل الـ ‪ Element‬دا نفسه موجود فيه‬
‫الـ ‪ - parent‬االب ي‬

‫ر‬
‫دلوقن بالتفصيل‬ ‫اكيد انت مش فاهم حاجة وانا ر‬
‫هشحلك‬
‫ي‬

‫ن‬
‫الل هو بالقيمة ‪%10‬‬
‫الل موجود يف الـ ‪ .header-child‬ي‬
‫تعال نشوف الـ ‪ padding‬ي‬
‫ي‬

‫الل هو الـ ‪1000px‬‬

‫هيحسب قيمة الـ ‪ padding‬دا من الـ ‪ width‬بتاع الـ ‪ Parent‬بتاعه ي‬

‫فدا معناه ان ‪ 1000px * 10%‬بيساوي ‪100px‬‬

‫ن‬ ‫ومرة تانية بأكد فيه فرق ن‬

‫بي استخدامك للـ ‪ %‬و الـ ‪ units‬كلها عموما يف الـ ‪ fonts‬زي الـ ‪font-size‬‬
‫وبي استخدامك ليهم نف الـ ‪ length‬زي الـ ‪ padding‬و الـ ‪ margin‬والـ ‪ height‬و هكذا هتفهم ر‬
‫اكي قدام‬ ‫ن‬
‫ي‬

‫‪By: Amr Elsayed‬‬

 ‫ن‬
‫يعن ديما بتبص ع حجم الـ ‪ font-size‬هو دا مرجعها‬
‫الـ ‪ ems‬والـ ‪ rems‬هما ‪ font-based units‬ي‬

‫اي الفرق ن‬
‫بي الـ ‪ em‬و الـ ‪rem‬‬
‫ن‬
‫الـ ‪ em‬بيكون الـ ‪ reference‬بتاعها الـ ‪ element‬نفسه يف بعض الحاالت او الـ ‪ parent‬بتاع الـ ‪ element‬دا‬
‫الـ ‪ rem‬بيكون الـ ‪ reference‬بتاعها الـ ‪root font-size‬‬

‫ن‬ ‫ن‬
‫الل اتكتب فوق فيه ‪ em‬موجودة يف الـ ‪ font-size‬بتاع الـ ‪.header-child‬‬
‫عندي يف الكود ي‬

‫الـ ‪ css‬هتحسبها ازاي ؟! اتفقنا ان الـ ‪ em‬بيكون المرجع بتاعها يا العنرص نفسه يا االب ي‬
‫الل هو فيه‬
‫كالتال‬ ‫ر‬
‫يبق الـ ‪ 3em‬هتكون‬
‫ي‬ ‫الل العنرص دا فيه الـ ‪ font-size‬بتاعه ‪ 150%‬اي ‪ 24px‬ي‬ ‫وبما ان االب ي‬
‫ر‬
‫يبق الـ ‪ .header-child‬الـ ‪ font-size‬بتاعه بـ ‪72px‬‬
‫‪ 24px * 3em‬بيساوي ‪ 72px‬ي‬

‫ن‬
‫فيه ‪ em‬موجودة يف الـ ‪ padding‬بتاع الـ ‪header‬‬

‫الـ ‪ padding‬دا ‪ length‬هنا بتكون فيه حسابات تانيه عن الـ ‪ fonts‬هنا الـ ‪ padding‬بـ ‪ 2em‬هيكون المرجع‬
‫بتاعه هو الـ ‪ font-size‬بتاع الـ ‪ element‬دا نفسه هنا المرجع بتاعها هيكون العنرص نفسه تحديدا الـ ‪font-size‬‬
‫بتاع العنرص‬
‫كالتال‬ ‫ر‬
‫يبق الـ ‪ 2em‬هتكون‬
‫ي‬ ‫وبما ان العنرص دا فيه الـ ‪ font-size‬بـ ‪ 150%‬اي ‪ 24px‬ي‬
‫‪ 24px * 2em‬بيساوي ‪48px‬‬
‫ه ‪ 24px‬كان الـ ‪ 2em‬دي هتتحسب‬ ‫الل ي‬
‫هتقول طيب افرض الـ ‪ header‬دا مكنش فيه الـ ‪ font-size‬بـ ‪ 150%‬ي‬ ‫ي‬
‫ازاي ؟!‬
‫ن‬ ‫ن‬ ‫ن‬
‫األول لو فيه ‪ font-size‬يف‬
‫ي‬ ‫الحالة‬ ‫حالتي‬ ‫ف‬‫هقولك يا معلم ركز الـ ‪ em‬بيعتمد ع الـ ‪ font-size‬بس ي‬
‫يبق هو هيعتمد عليه لو مفيش بيوح يعتمد ع الـ ‪ font-size‬بتاع الـ ‪ parent‬بتاعه‬ ‫ر‬
‫الـ ‪ element‬نفسه ي‬

‫لو بقا الـ ‪ header‬مفهوش ‪ font-size‬كان الـ ‪ 2em‬دي ر‬

‫هيوح تشوف الـ ‪ root‬او الـ ‪ Body‬الـ ‪ font-size‬فيه بكام‬
‫عل اساسه‬
‫وتحسب ي‬

‫‪By: Amr Elsayed‬‬

 ‫ن‬
‫وفيه ‪ rem‬موجودة يف الـ ‪ margin-bottom‬بتاع الـ ‪header‬‬

‫ن‬
‫زي ما قولنا الـ ‪ rem‬بيكون الـ ‪ reference‬بتاعه الـ ‪ font-size‬بتاع الـ ‪ root‬يف الحالة دي هو ‪16px‬‬
‫ً‬
‫اذا ‪ 16px * 10rem‬بيساوي ‪160px‬‬

‫تعال اديك مثال عشان تفهم قصدي‬

‫ي‬ ‫الل فوق دول انا هنا كان قصدي اي ؟!‬
‫فاكر لما قولتلك السطرين ي‬
‫ن‬ ‫ر‬
‫الل يف الـ ‪ .header-child‬دا من ‪ 10%‬لـ ‪2em‬‬
‫لنفيض ان هغي الـ ‪ padding‬ي‬

‫الـ ‪ padding‬هنا هيتحسب ازاي ؟!‬

‫ن‬
‫حاجتي الـ ‪ ems‬بتعتمد ع الـ ‪ font-size‬وقولتلك ان المرجع بتاعها بيكون يا الـ‬ ‫انا قولتلك اي ‪ ..‬قولتلك‬
‫ن‬ ‫ن‬
‫‪ element‬نفسه يف حالة وجود ‪ font-size‬فيه ‪ ...‬يالـ ‪ .. parent‬هنا مدام فيه ‪ font-size‬يف الـ ‪ element‬ي‬
‫الل‬
‫عل الـ ‪ font-size‬بتاع الـ ‪ element‬نفسه‬ ‫ه فيه هتبص ي‬ ‫ي‬
‫كالتال‬ ‫يبق الـ ‪ padding‬هنا هيكون‬ ‫ر‬
‫ن‬ ‫ي‬ ‫ي‬
‫الل هو‬
‫الـ ‪ font-size‬بتاع الـ ‪ element‬هو ‪ 3em‬و الـ ‪ 3em‬بتاعته دي يف الحالة دي اعتمدت ع الـ ‪ parent‬ي‬
‫‪ 150%‬اي ‪ 24px‬فالـ ‪ Font-size‬هنا كان ‪ 24px * 3em‬بـ ‪72px‬‬
‫يبق الـ ‪ padding‬بالـ ‪ em‬هيكون المرجع بتاعها الـ ‪ font-size‬دا‬ ‫ر‬
‫وبما ان الـ ‪ font-size‬بتاع الـ ‪ element‬بـ ‪ 72px‬ي‬
‫يبق الـ ‪ 72px * 2em‬بيساوي ‪144px‬‬ ‫ر‬
‫ي‬
‫ثوان كدا‬‫عارف انا لو شيلت الـ ‪ font-size‬الل نف الـ ‪ element‬دا الـ ‪ padding‬هيتسحب ازاي ؟! فكر ن‬
‫ي‬ ‫ي ي‬
‫الل هو ‪ 150%‬اي ‪24px‬‬ ‫الـ ‪ padding‬بالقيمة ‪ 2em‬هيكون المرجع بتاعه الـ ‪ font-size‬بتاع الـ ‪ parent‬ي‬
‫كالتال ‪ 24px * 2em‬بتساوي ‪ .... 48px‬انت فاهم صح اكيد فاهم مفيهاش نقاش‬ ‫ي‬ ‫فهتكون الحسبة‬

‫‪By: Amr Elsayed‬‬

 ‫عل‬ ‫ر‬
‫وه معتمدة ي‬‫بتسأل نفسك سؤال مهم جدا ليه استخدام الـ ‪ rems‬و الـ ‪ ems‬ي‬ ‫ن‬
‫دلوقن ممكن تكون‬
‫ي‬ ‫انت‬
‫الـ ‪ Font-Size‬؟! ‪ ...‬عشان يف الـ ‪ layouts‬المعقدة والكبية بمجرد ما تغي الـ ‪ font-size‬لعنرص ما‬
‫بيخل‬
‫ي‬ ‫تلقان النه معتمد ع الـ ‪ font-size‬ودي‬
‫ي‬ ‫الـ ‪ padding‬والـ ‪ margin‬والـ ‪ length‬بتاعه هيتغي بشكل‬
‫التصميم‬
‫بيخل التصميم مرن‬ ‫عل بعضه واي تغي بتعمله‬ ‫ن‬
‫ي‬ ‫ومبن كله ي‬
‫ي‬ ‫بتاعك فيه ‪ flexibility‬كبية جدا وجامد جدا جدا‬

‫الل هما الـ ‪ vh‬و الـ ‪vw‬‬ ‫ن‬

‫واخيا عندنا اخر اتني ‪ Relative units‬ي‬
‫بشكل مبدأي الـ ‪ 1vh‬بيساوي ‪ 1%‬من الـ ‪ viewport height‬بتاع الشاشة‬

‫ه بمثابة ‪ 90%‬من الـ ‪current viewport height‬‬

‫فدا معناه ان الـ ‪ 90vh‬دي ي‬
‫‪ 1% * 90vh‬بيساوي ‪90%‬‬

‫والـ ‪ 1vw‬بيساوي ‪ 1%‬من الـ ‪ viewport width‬بتاع الشاشة‬

‫ه بمثابة ‪ 80%‬من الـ ‪current viewport width‬‬

‫فدا معناه ان الـ ‪ 80vw‬دي ي‬
‫‪ 1% * 80vh‬بيساوي ‪80%‬‬

‫الـ ‪ viewport‬دا بيتحدد من الـ ‪ browser‬نفسه‬

‫‪By: Amr Elsayed‬‬

 ‫الل فات‬
‫دي صورة المملك فيها الدنيا كلها بمجرد ما تقراها هتفهم كل ي‬

‫ن‬ ‫ن‬ ‫ن‬

‫كلمتي كدا هنا برضو‬ ‫الل فات دا يف‬
‫خلين الخصلك كل ي‬
‫ي‬ ‫و‬
‫‪ -‬كل ‪ Property‬بيكون ليها ‪ initial value‬بيتم اللجوء اليها لو مفيش اي ‪ Declared values‬او مفيش اي‬
‫‪inheritance‬‬
‫‪ -‬الـ ‪ Browsers‬بتخصص ‪ Default font-size‬للـ ‪ Page‬بالقيمة ‪16px‬‬
‫‪ -‬النسبة المئوية ‪ %‬وكل الـ الواحدات النسبية او الـ ‪ Relative Units‬بيتم تحويلها للـ ‪pixels‬‬
‫ن‬ ‫ن‬
‫‪ -‬النسبة المئوية ‪ %‬يف الـ ‪ child‬لو بتستخدمها يف الـ ‪ font-size‬بيكون قياسها ‪ relative‬للـ ‪ Font-size‬بتاع‬
‫األب‬
‫النسبة المئوية ‪ %‬بتكون ‪ Relative‬للـ ‪ Width‬بتاعاع األب لو بتستخدمها مع اي ‪ lengths‬زي الـ ‪padding‬‬ ‫‪-‬‬
‫ن‬ ‫ا‬
‫الـ ‪ em‬بيتم قياسها نسبة للـ ‪ font-size‬بتاع األب لو بتستخدمها يف خاصية الـ ‪ font-size‬للـ ‪child‬‬ ‫‪-‬‬
‫ا‬
‫الـ ‪ em‬بتيم قياسها نسبة للـ ‪ current font-size‬بتاع الـ ‪ element‬نفسه لو بتستخدمها مع الـ ‪lengths‬‬ ‫‪-‬‬
‫ا‬
‫الـ ‪ rem‬ديما وابدا بتكون ‪ Relative‬او بيتم قياسها نسبة للـ ‪ font-size‬بتاع الـ ‪root element‬‬ ‫‪-‬‬
‫يعن بيتم تحديدهم ً‬
‫بناءا‬ ‫ن‬
‫الـ ‪ vh‬و الـ ‪ vw‬هما ببساطة الـ ‪ view port's height and width respectively‬ي‬ ‫‪-‬‬

‫الل بيحددها‬
‫عل الـ ‪ viewport‬بتاع الشاشة نفسها والمتصفح ي‬
‫ي‬

‫‪By: Amr Elsayed‬‬

 ‫‪How CSS is Parsed, Part 3: Inheritance‬‬
‫ن‬
‫الل فاتت وجيه الوقت عشان نشوف الـ ‪ css‬بتتعامل ازاي مع الـ ‪inherit‬‬
‫اتكلمنا عن الـ ‪ inheritance‬يف الدروس ي‬
‫ه طريقة بيتم فيها توريث بعض الخصائص والقيم من األباء لألبناء‬
‫الـ ‪ inheritance‬أو التوريث ي‬

‫وتعال نشوف الـ ‪ line-height‬الـ ‪ .child‬هيورثه ازاي من الـ ‪.parent‬‬

‫ي‬ ‫شوف معايا الكود دا كدا‬

‫ن‬ ‫ن‬
‫محتاجي ندرسهم األول‬ ‫يف كذا سيناريو‬
‫كل ‪ CSS Property‬الزم يكون ليها ‪Value‬‬
‫السيناريو األول وهو ان الـ ‪ CSS‬بتسأل سؤال هل فيه ‪ Cascaded Value‬؟!‬
‫ر‬
‫ه الـ ‪Cascaded Value‬‬ ‫لو أه =< فيه ي‬
‫يبق الـ ‪ specified Value‬هتكون ي‬
‫ه بتكون الـ ‪ init value‬لو مفيش ‪Cascaded Value‬‬
‫الل ي‬
‫وخل بالك الـ الـ ‪ specified Value‬ي‬
‫ي‬
‫والـ ‪ Cascaded Value‬بتتوجد لما يكون فيه ‪ Declared Value‬منك انت كـ ‪Developer‬‬

‫لو أل =< هيحصل سيناريوهات تانية‬

‫السيناريو األول‪ :‬لو مفيش ‪ .... Cascaded Value‬هل الـ ‪ Property‬دي ‪ inherited‬؟!‬
‫ر‬ ‫ر‬
‫هتبق الـ ‪ Computed Value‬بتاعت الـ ‪Parent‬‬
‫ي‬ ‫=< ي‬
‫يبق الـ ‪specified Value‬‬ ‫لو أه‬
‫ر‬
‫=< ي‬
‫يبق الـ ‪ specified Value‬هتتحط بالـ ‪init value‬‬ ‫لو أل‬

‫‪By: Amr Elsayed‬‬

 ‫ن‬ ‫ن‬
‫الل فوق‬
‫ي‬ ‫الكود‬ ‫ف‬
‫ي‬ ‫بتاعنا‬ ‫المثال‬ ‫ف‬
‫ي‬ ‫طيب‬
‫الـ ‪ CSS‬هتسأل فيه ‪ Cascaded Value‬هنا للـ ‪ line-height‬ن يف الـ ‪ .child‬؟!‬
‫ال مفيش‬
‫الل ممكن تتورث عادي ؟!‬ ‫ن‬ ‫ر‬
‫تان هو الـ ‪ line-height‬دا خاصية من الخواص ي‬
‫يبق هنسأل سؤال ي‬ ‫ي‬
‫لو االجابة أه ي‬
‫وه أه فعال‬
‫يبق الـ ‪ .child‬دا هيكون الـ ‪ line-height‬بتاعه بـ ‪30px‬‬ ‫ر‬
‫ي‬

‫الل بـ ‪ 150%‬لما يتحول للـ ‪px‬‬

‫ودا حصل من خالل أن الـ ‪ line-height‬بتاع االب ي‬
‫الل هو ‪20px‬‬‫عل الـ ‪ Font-size‬بتاع االب ي‬
‫هيتعمد ي‬
‫كتال ‪ 20px * 150%‬بتساوي ‪30px‬‬ ‫فيبق المعادلة‬‫ر‬
‫ي‬ ‫ي‬
‫يبق الـ ‪ line-height‬بتاع الـ ‪ .parent‬بـ ‪30px‬‬ ‫ر‬
‫ي‬
‫ر‬
‫يبق الـ ‪ line-height‬بتاع الـ ‪.child‬‬
‫الل بيتم توريثها عادي والـ ‪ .child‬هيورثها ي‬
‫والـ ‪ line-height‬من الخواص ي‬
‫هيكون هو كمان بـ ‪30px‬‬

‫الل نقشناها فوق‬

‫توضيج للفكرة ي‬
‫ي‬ ‫مخطط‬

‫‪By: Amr Elsayed‬‬

 ‫ملحوظات مهمة‪:‬‬
‫ن‬
‫وف المثال بتاعنا الـ ‪.child‬‬
‫‪ -‬الـ ‪ .child‬بيكون فيه كل خواص الـ ‪ css‬عادي بس بالـ ‪ init value‬بتاعتها ي‬
‫الل بتتورث عادي‬
‫موجود فيه الـ ‪ line-height‬بالـ ‪ init value‬بـ ‪ 0‬بس عشان الـ ‪ line-height‬بقا من الخواص ي‬
‫الل بـ ‪ 0‬هتتشال‬ ‫‪ line-height‬هيتم توريثته للـ ‪ .child‬فهنا الـ ‪ init value‬ي‬ ‫من االباء لألبناء فـ الـ‬
‫ن‬
‫ه ‪ 30px‬وحسبناها فوق‬ ‫الل ي‬‫الل يف الـ ‪ .parent‬ي‬ ‫ويتحط مكانها نفس القيمة ي‬
‫ن‬
‫الل بيتم‬
‫ي‬ ‫الخواص‬ ‫تشوف‬ ‫وتقدر‬ ‫كتي‬ ‫تانيه‬ ‫وخصائص‬ ‫مثال‬ ‫‪padding‬‬ ‫ـ‬ ‫ل‬ ‫ا‬ ‫زي‬ ‫توريثها‬ ‫مبيتمش‬ ‫كتي‬ ‫خواص‬ ‫ف‬
‫‪ -‬ي‬
‫الل ال‬
‫توريثتها والخصائص ي‬
‫‪ -‬الـ ‪ inheritance‬هو امداد االبناء ببعض الخواص من األباء لو الخواص دي قابلة انها تتورث ودا بشكل أو بأخر‬
‫ن‬ ‫ر‬ ‫ر‬
‫وه ان الكود‬
‫الل اتكلمنا عليها يف أول صفحة من الملخص ي‬ ‫بيخليك تكتب كود اقل وبيحقق شط من الشوط ي‬
‫بتاعك يكون ‪more maintainable code‬‬
‫الل متعلقة بالـ ‪ text‬بتكون ‪ inherited‬زي الـ ‪ font-size‬والـ ‪ color‬و الـ ‪ font-family‬وكدا‬
‫‪ -‬كل الـ ‪ properties‬ي‬
‫وكل الخواص زي الـ ‪ padding‬والـ ‪ margins‬مش بيتم توريثها النه فقط تخيل انك عندك ‪ Section‬مديله‬
‫‪ padding‬بـ ‪ 60px‬فتخيل لو كل عنرص جو الـ ‪ section‬دا ورث الـ ‪ padding‬دا !! رش فظيع جدا طبعا ‪D":‬‬
‫ن‬
‫الل بيتم توريثها وليس‬ ‫ه‬
‫ي ي ي‬ ‫النهان‬ ‫شكلها‬ ‫ف‬‫الل القيمة بتاعتها بالـ ‪ px‬ي‬
‫خل بالك ان الـ ‪ computed value‬ي‬
‫‪ -‬ي‬
‫الـ ‪declared values‬‬
‫ن‬ ‫ن‬
‫يعن لو انت‬
‫الل تم توريثها دي ي‬ ‫‪ inheritance‬بيشتغل يف االبناء لو مفيش ‪ Declared value‬للخاصية ي‬ ‫‪ -‬الـ‬
‫ن‬
‫كتبت يف الـ ‪ parent‬خاصية بيتم توريثها وروحت لالبن كتبت نفس الخاصية بقيم تانيه هنا الـ ‪inheritance‬‬
‫مش هيشتغل‬
‫ن‬
‫‪ -‬ممكن تستخدم الـ ‪ inherit keyword‬عشان تجي اي خاصية مكتوبة يف االبن انها تورث من األب‬

‫‪ -‬ممكن تستخدم الـ ‪ initial keyword‬عشان تعمل ‪ reset‬ألي ‪ property‬للـ ‪ init value‬بتاعتها‬

‫أفتكرونا بدعوة طيبة‬

‫‪By: Amr Elsayed‬‬
 ‫ل♥‬
‫ي‬ ‫♥راقت‬

‫اذكر هللا ♥‬
‫الزموا ذكر هللا ففيه العون عل متاعب الحياة ♥‬
‫ر‬ ‫ر‬
‫ال إله اال هللا وحده ال شيك له ‪ ..‬له الملك و له الحمد وهو عل كل ي‬
‫شء قدير‬
‫ْ َّ َ ْ َ نُّ ْ ُ ُ ُ‬ ‫َ‬
‫اَّلل تطم ِي القلوب‬
‫أال ِب ِذك ِر ِ‬

‫ال تنسونا من دعواتكم‬

‫‪By: Amr Elsayed‬‬
 How CSS Renders a Website: The Visual Formatting Model
code ‫ للـ‬CSS ‫ او مرحلة تحليل الـ‬Parsing Phase ‫بعد ما اتكلمنا عن الـ‬
‫ بشكله المرحلة دي‬Website ‫ أو مرحلة ظهرو الـ‬Website Render Phase ‫دلوقن نتكلم فيه عن الـ‬ ‫ر‬
‫ي‬
Visual Formatting Model ‫بيتم استخدام فيه ألية عمل اسمها‬

Visual Formatting Model ‫ماهو الـ‬

‫ دي لكل عنرص‬boxes ‫ لكل الـ‬layout ‫ و تحديد الـ‬Boxes ‫ بيستخدم لحساب الـ‬algorithm ‫هو ببساطة‬
‫بيحصله‬
box-model ‫الل بيحسب قياسات الـ‬ ‫ن‬
‫يعن هو ي‬ ‫ ي‬final layout of the page ‫ باالضافة لتحديد الـ‬render
‫ بشكل عام‬layout ‫ والـ‬positions ‫ و الـ‬flex ‫ و الـ‬Floats ‫والـ‬

In summary, the Visual Formatting Model provides the foundation for rendering and positioning
elements on a web page, enabling developers to create visually appealing and well-structured web
layouts.

The layout of these boxes is governed by:

• Box dimensions (the box model)
• Box type (inline, block, inline-block)
• Positioning scheme (normal flow, float, and absolute positioning).
• Stacking-context
• Relationships between elements in the document tree.
• External information (e.g., viewport size, intrinsic dimensions of images, etc.).
‫ر‬
‫ بوظيفة هو حساب كل النقاط ي‬Visual Formatting Model ‫يبق الـ‬
‫الل اتذكرت فوق دي وهنتعرف‬ ‫ي‬
‫ر‬
‫دلوقن‬ ‫عليهم واحد واحد‬
‫ي‬

By: Amr Elsayed

 ‫)‪Box dimensions (the box-model‬‬
‫الـ ‪ Box-model‬هو واحد من أهم مبادئ لغة الـ ‪ CSS‬وهو حاجة الزم تتقنها لتصميم صفحة ويب‪.‬‬
‫الل بتحدد ازاي بيتم عرض العنارص عل صفحة الويب وكيفية تحديد‬
‫الـ ‪ Box-model‬هو أحد العوامل ي‬
‫حجمها‪.‬‬
‫ً‬
‫وفقا للـ ‪ ،Box-model‬يمكن اعتبار كل عنرص عل صفحة الويب عبارة عن مربــع مستطيل‪.‬‬
‫ويمكن لكل مربــع أن يحتوي عل ‪ width‬و ‪ height‬و ‪ padding‬و ‪ margins‬و ‪border‬‬

‫ومع ذلك‪ ،‬الحظ أن كلهم ممكن يتوجدو بشكل اختياري‪ ،‬عشان ممكن يكون فيه عنارص او ‪ boxes‬بدون‬
‫‪ margins‬أو ‪ padding‬او‪border‬‬
‫ومن خالل فهم واستخدام الـ ‪ ، Box-model‬يمكنك إنشاء ‪ layouts‬متجاوبة وجذابة من الناحية البرصية‪.‬‬
‫ن‬
‫عشان بيمكنك من التحكم يف حجم العنارص وتحديد مواقعها وتباعدها‪ ،‬وتنفيذ ‪ layouts‬مرنة بتتكيف مع‬
‫مقاسات الشاشات المختلفة‪.‬‬

‫أزاي الـ ‪ Box-model‬بيحسب الـ ‪ width‬و الـ ‪ height‬بتاع العنرص‬

‫‪total width = right border + right padding + specified width + left padding + left border‬‬
‫‪total height = top border + top padding + specified height + bottom padding + bottom‬‬
‫‪border‬‬
‫‪Example: calculate height‬‬
‫=‬
‫‪0px top border + 20px top padding + 100px specified height +‬‬
‫‪20px bottom padding + 0px bottom border‬‬
‫=‬
‫‪140px‬‬

‫‪By: Amr Elsayed‬‬

 ‫ن‬ ‫ن‬ ‫ن‬
‫الل يف المثال بنالحظ ان‬
‫مش مالحظ حاجة اننا لو حددنا ‪ width‬معي أو ‪ height‬معي زي الـ ‪ 100px‬ي‬
‫الـ ‪ padding‬و الـ ‪ border‬ن‬
‫بيودو من حجم الـ ‪ height‬دا وبيتحسبوا معاه ؟! بس دا بشكل ما مش حاجة كويسة‬

‫الل بنسخدمه عشان نمنع الموضوع دا هو خاصية الـ ‪ box-sizing‬بالقيمة ‪border-box‬‬

‫عشان كدا الحل ي‬
‫معي وليكن ‪ 100px‬وتزود عليه ‪ padding-top‬و ‪ padding-bottom‬بـ ‪ 20px‬لكل‬ ‫ن‬ ‫النك لما تحدد ‪height‬‬
‫واحد‬

‫بيخل الـ ‪height‬‬

‫ي‬ ‫بخل الـعنرص دا دا الـ ‪ height‬بتاعه ككل بالـ ‪ 100px‬النه‬
‫ي‬ ‫لما بتستخدم الـ ‪ box-sizing‬هو‬
‫الكل للعنرص دا ‪ 100px‬فقط‬
‫ي‬ ‫الفعل بـ ‪ 60px‬وبيحسب الـ ‪ padding‬بـ ‪ 40px‬فيكون المجموع‬‫ي‬

‫‪Example: calculate height after using box-sizing‬‬

‫=‬
‫‪0px top border + 20px top padding + 100px specified height +‬‬
‫‪20px bottom padding + 0px bottom border‬‬
‫=‬
‫‪100px‬‬

‫‪By: Amr Elsayed‬‬

 ‫)‪Box type (inline, block, inline-block‬‬
‫الـ ‪ type‬او نوع الـ ‪ box‬بيتحدد من خالل خاصية الـ ‪ display‬وكل عنرص الـ ‪ html‬بيكون عليه ‪default display‬‬
‫زي الـ ‪ div‬بيكون ‪ block‬وزي الـ ‪ span‬بيكون ‪ inline‬وهكذا‬
‫اشحلك الفرق‬‫وبيود معلوماتك مفيش داع ر‬ ‫وطبعا انت مدام بتقرا الملخص دا فانت شخص فاهم ‪ CSS‬كويس ر ن‬
‫ي‬
‫ن‬
‫يعن‬ ‫ر‬ ‫ن‬
‫ابق أقراها ي‬
‫هكتق بصورة فقط فيها مقارنة بينهم ي‬
‫ي‬ ‫بينهم انا‬

‫‪By: Amr Elsayed‬‬

 ‫‪Positioning scheme (normal flow, float, and absolute positioning).‬‬
‫الـ ‪normal flow‬‬
‫الل هو ‪ position relative‬او ‪position static‬‬
‫بيكون الـ ‪ default flow‬بتاع الـ ‪ element‬ي‬
‫مش بيكون ‪ Floated‬ومش بيكون ‪absolute‬‬
‫الطبيغ من المصدر‬
‫ي‬ ‫الـ ‪ element‬نفسه بيظهر بشكل‬

‫الـ ‪Floats‬‬
‫الـ ‪ element‬مع الـ ‪ Float‬بتشال من حالة الـ ‪ normal flow‬بتاعته‬
‫ن‬
‫حولي الـ ‪floated element‬‬ ‫الـ ‪ text‬و الـ ‪ inline elements‬بتكون متحاوطة‬
‫الـ ‪ floated element‬مش بيكون عندي وع بحساب الـ ‪ height‬المناسب ليه او انه يفصل بينه ن‬
‫وبي العنارص‬ ‫ي‬
‫الل تحته وفوقه لذلك بنستخدم الـ ‪ clear property‬بالـقيمة ‪both‬‬‫ي‬

‫الـ ‪absolute positioning‬‬

‫الـ ‪ element‬مع الـ ‪ absolute positioning‬بتشال من حالة الـ ‪ normal flow‬بتاعته‬
‫عل العنارص المحيطة بيه‬ ‫عل المحتوي وال ي‬ ‫مش بيأثر ي‬
‫بتقدر تستخدم معاه الـ ‪ top‬و الـ ‪ bottom‬و الـ ‪ left‬و الـ ‪ right‬عشان تحدد موقع للـ ‪ element‬والحاجات دي‬
‫بتحدد نسبة لكون االب بتاعه ‪relative‬‬

‫ن‬ ‫ن‬
‫بتيج فوق عنارص فالـ ‪ CSS‬بتستخدم حاجة اسمها ‪Stacking-context‬‬
‫ي‬ ‫يف الـ ‪ absolute positioning‬يف عنارص‬
‫‪By: Amr Elsayed‬‬
 Stacking-context
‫ بتظهر فوق بعض ازاي‬Elements ‫الل بيحدد ازاي الـ‬
‫ ببساطة شديدة هو ي‬Stacking-context ‫الـ‬
‫ودا تعريفه بشكل دقيق‬
determines how elements are layered and displayed on top of each other within the document. It
manages the order, visibility, and appearance of overlapping elements. Stacking contexts are
created when specific CSS properties are applied to an element or its descendants.

‫عل شكل ظهور العنارص دي فوق بعض زي‬

‫ ي‬control ‫ بيخليك تعمل‬Stacking-context ‫استخدامك بقا للـ‬
‫ مثال‬z-index ‫استخدامك للـ‬
‫ن‬
‫ودا تلخيص شيـ ــع ليها يف تلت نقاط عن بتساعدنا ازاي وبتحل اي‬
Stacking contexts help solve several problems in CSS layout and rendering, including:
1- Z-index control: Stacking contexts allow you to control the vertical stacking order of elements
using the z-index property. Elements within a stacking context can be layered above or below
other elements based on their assigned z-index values.

2- Controlling overlap and visibility: Stacking contexts allow you to control the visibility and
appearance of overlapping elements. Elements within different stacking contexts can be
positioned and displayed independently, preventing unintended overlap or interference.

3- Isolation and encapsulation: Stacking contexts provide a level of isolation and encapsulation
for elements and their descendants. Styles applied within a stacking context do not affect
elements outside of that context, preventing unintended style cascades and conflicts.

By: Amr Elsayed

 ‫ن‬
‫تحفيية♥‬ ‫♥عبارات‬

‫اذكر هللا ♥‬
‫الزموا ذكر هللا ففيه العون عل متاعب الحياة ♥‬
‫ْ َّ َ ْ َ نُّ ْ ُ ُ ُ‬ ‫َ‬
‫اَّلل تطم ِي القلوب‬
‫أال ِب ِذك ِر ِ‬
‫ن‬
‫العالمي‬ ‫كثيا مبارًكا فيه كما ن‬
‫ينبغ لجالل وجهك ولعظيم سلطانك يا رب‬ ‫حمدا ً‬
‫طيبا ً‬ ‫ً‬
‫اللهم لك الحمد‬
‫ي‬
‫ا‬ ‫ا‬ ‫ً‬
‫ورزقا ً‬ ‫علما ً‬ ‫اللهم نان أسألك ً‬
‫طيبا وعمًل متقبًل‬ ‫نافعا‬ ‫ي‬

‫ال تنسونا من دعواتكم‬

‫‪By: Amr Elsayed‬‬
 ‫الخاتمة وشوية فضفضة‬
‫ن‬
‫المرسلي سيدنا محمد‬ ‫بسم هللا الرحمن الرحيم والصالة والسالم عل ر‬
‫أشف‬ ‫ي‬
‫❖ استكماال للمشوار وبعد تلخيص الـ ‪ HTML‬و الـ ‪ CSS‬و الـ ‪ SASS‬و الـ ‪ JS‬وفقنا هللا لعمل هذا الملخص تحت عنوان‬
‫‪ .. How CSS Works Behind The Scenes‬ارجوا من هللا عز وجل ان يكون ذا نفع للجميع ‪ ..‬و ارجوا من هللا عز‬
‫ميان حسناتنا جميعا – كل الملخصات هنا ‪ ..‬أضغط‬ ‫خالصا لوجهه الكريم وان يجعله نف ن‬
‫ً‬ ‫وجل ان يجعل هذا العمل‬
‫ي‬
‫❖ الملخص دا مينفعش تشوفه لو مش دارس ‪ CSS‬كويس وفاهم خصائص كتي فيها وبتعرف تستخدمها بشكل كويس‬
‫ن ُ‬ ‫ر‬
‫تبق فاهم حاجات كتي بتتكتب يف النص‬
‫الزم تكون فاهم ‪ CSS‬وطبقت بيها مشاريـ ــع كتي عشان ي‬
‫ن‬
‫تعزمن ع كوباية قهوة‬ ‫ن‬
‫تدعمن ولو مبلغ بسيط او زي ما بيقولو‬ ‫❖ الملخصات كلها طبعا مجانية بالكامل بس لو حابب‬
‫ي‬ ‫ي‬
‫الل تحبه‬ ‫ن‬ ‫رقم فودافون كاش ‪ 01005074554‬تقدر لو حابب وعندك قدرة‬
‫تدعمن بالمبلغ ي‬
‫ي‬ ‫فدا ي‬
‫ن‬ ‫ر‬ ‫ن‬ ‫ن‬
‫الباف هيكون يف‬
‫ي‬ ‫دعمون والجزء‬
‫ي‬ ‫الل‬
‫عن وعن ي‬ ‫هيجيل باذن هللا هخصص منه جزء يخرج كصدقات ي‬
‫ي‬ ‫❖ اي دعم مادي‬
‫ر‬ ‫ر‬
‫الل بشتغل عليها وشاء كورسات اكي للتعلم وتلخيصها للجميع باذن هللا‬
‫تطوير الحاجات ي‬
‫❖ باذن هللا الملخصات الجاية هتكون عن الـ ‪ Bootstrap‬بالتفصيل و الـ ‪ Tailwind‬وبرضو هنلخص‬
‫بإذن‬ ‫ن‬
‫يعن الـ ‪ TypeScript‬و الـ ‪React js‬‬
‫والـ ‪ Git and GitHub‬و طبعا طبعا ي‬ ‫الـ ‪Command line‬‬
‫هللا‬
‫❖ بعتذر عن وجود أي أخطاء امالئية او أخطاء نف أي كود فالكمال هلل وحده ولو لقيت أي خطأ نف ر‬
‫الشح تواصل معايا‬ ‫ي‬ ‫ي‬
‫ن‬
‫❖ خصصت يف الملخص دا تلت أجزاء ‪ ..‬الجزء األول لذكر هللا عشان متخليش حاجه ابدا تشغلك عن ذكر هللا‬
‫ن‬
‫التحفيية و جمل‬ ‫ن‬
‫جزئي العبارات‬ ‫الل قادر ينجيك ويفتحلك ابواب الرزق ويرزقك ويسهل عليك الفهم و‬ ‫ي‬
‫ن‬
‫رئيش يف تكبي حجم الملخص‪ ،‬ولكن وهللا حبيت انهم يكشوا ملل‬
‫ي‬ ‫وعبارات راقت يل اه هما يعتيوا سبب‬
‫المذاكرة والقراءة وربما يكون فيهم نفع او الهام لحد‬
‫ن‬
‫المحارص ‪ – Jonas Schmedtmann‬من ‪ Udemy‬واي صور فيه كانت من‬ ‫❖ الملخص دا كان مصدره كورس‬
‫الـ ‪ .. Course‬كورس بعنوان !‪Advanced CSS and Sass: Flexbox, Grid, Animations and More‬‬

‫❖ مش عايزك تتضايق الي سبب لو مفهمتش أي جزء انا حولت ابسط المفاهيم قدر المستطاع وان شاء هللا هتفهم‬
‫ر‬
‫فبقيح عليك انك تعيد قراءة الحاجة دي وتجرب تكتب ‪ code‬بإيدك وتجرب بنفسك‬ ‫يعن هتفهم‬‫ن‬
‫ي‬
‫ن‬
‫تفتكرن بدعوة‬ ‫❖ ألي حد هيوصله الكالم دا مش طالب منك غي طلب واحد وامانة عليك الزم تنفذه و هو إنك‬
‫ي‬
‫ر‬
‫بين‬
‫طيبة لوجه هللا أنا وأهل ي‬

‫‪LinkedIn Account‬‬ ‫‪GitHub Account‬‬ ‫‪Codepen Account‬‬

‫‪Twitter Account‬‬ ‫‪Mail Me‬‬ ‫‪Facebook Account‬‬
‫ن‬
‫افتكرون بدعوة طيبة لوجه هللا واشوفكم ان شاء هللا مع حاجه أفضل وأفضل مستقبال‬
‫ي‬
‫شكرا لكم ♥‬
‫‪By: Amr Elsayed‬‬