لذلك واحدة من الأشياء التي قد تكون لاحظتها عند المرور بكود آخر أنه في بعض الأحيان عندما تعبث في ارتفاع وعرض عنصر ما تكتشف أنه لم يعد كبيرًا بما يكفي لاحتواء كامل النص الذي أردت أن تعرضه. لذا، ماذا يمكنك أن تفعل عندما لا يصبح المحتوى داخل المربع الذي قمت بإنشائه باستخدام طولك وعرضك. حسنًا ، يمكنك استخدام خاصية إضافية لتحديد كيف سيستطيع الناس الوصول إلى هذا المحتوى، أو حتى إذا كان باستطاعتهم الوصول إليه دائمًا. القيم الأربعة للإضافة، تشمل مرئي، مما يعني شكل أساسي أنك قد رسمت مربعًا. وهناك مجموعة كاملة من النص بداخله، فسيذهب النص في الواقع خارج المربع. لذلك، بغض النظر عن أي شيء، سيكون المحتوى مرئيًا حتى لو كان خارج الخطوط. وينم عن المخفي خلاف ذلك تمامًا. تقول، [الصوت] إذا كان لديك شيء ما داخل هذا المربع وكان حجمه أكبر من اللازم، فسيختفي. شيء لا يمكنك أن تراه. الآن هذه ليست فكرة جيدة،حيث ستسبب مشاكل إذا زود المستخدم حجم الخط على المتصفح. لذلك إذا قمت بعمل مربع 600 × 800 بكسل، وتعتقد أنه سيكون رائعًا، فلا مشكلة. سيستطيع أي قراءة هذا. ماذا سيحدث إذا ذهب شخص ما وزود حجم الخط؟ لن يزيد حجم المربع الخاص بك،ولكن سيزيد النص، لذا قد لا يستطيعوا رؤية المحتوى. لذلك فإن الخيار الثالث هو تقديم قائمة إضافية. وكل ما سيفعله ذلك هو أن يمنحك شريط تمرير أفقي ورأسي للعنصر. حتى لو كانت مجرد فقرة، ففجأة ستصبح فقرتك بها شريط تمرير، لذا يمكن للناس رؤية كل شيء فيه. القيمة النهائية تلقائية، وكل ما تقوم به هو أن تقول، يا إلهي، لن أضيف أشرطة التمرير إلا عند الحاجة. وبناءً على كيفية عرض الأشخاص للموقع الآن. فسأمضي قدمًا وأضع قائمة ببعض المصادر لأبين لك بعض الأمثلة عن كيفية ظهور الإضافة. لكن في الوقت الحالي، سنمضي قدمًا ونواصل المضي قدمًا. لأن ما أردت مشاركته معك هو فكرة قيم العرض الأخرى هذه. ومرة أخرى تتغير المتصفحات دائمًا. يتغير HTML5 والإصدارات المستقبلية باستمرار وهم يحاولون إضافة دعم جديد. وتظهر المشكلة عندما ترى هذه الأدوات الرائعة الجديدة لا تعمل دائمًا على كل المتصفحات. حتى الأدوات المضمنة، والكتل المضمنة والكتل لن يعمل أيًا منها في كل الأماكن. ولكن فيما يلي بعض أكثر الأدوات التي بدأت في الحصول على القبول ببطء. وهي الجدول والشبكة وفلكس بوكس. بالنسبة للشبكة وفلكس بوكس سأترك الأمر لك للعمل عليه. لكنني أردت أن أضرب لك مثالًا على المكان الذي يجد فيه الكثير من طلابي عرض الجدول مفيد حقًا. تتمثل كيفية عرض الجدول في ألا تقوم بإعداد جدول فعلي باستخدام كود HTML، ولا أن تحصل على جدول علامات. لكنك تخبر متصفحك أنك تريد هيكلته كما لو كان جدولًا. لذلك، سوف تجعل أي نوع يتضمن عرض عنصر: الجدول. ثم أي شيء تريده وضعه في أعمدة مناسبة، فستستخدم العرض: خلية الجدول. لذلك يبدو هذا الأمر مربكًا للغاية أردت أن أتأكد من أنني أعطيتك مثالاً لتستعرضه معي. لذلك لدي هنا بعض الرموز التي هي مجرد قسم بشكل أساسي، قسمان يتضمنان بعض الفقرات. وما أردت القيام به هو التأكد من عدم وجود نفس المحتوى تمامًا عليهم جميعًا. كما ترى، كل الأقسام الآن بجوار بعضها البعض لأننا أخبرناها أننا لا نريدها أن تكون تحت بعضها البعض. ولكن ليس هذا ليس ما كنت تأمل أن يبدو عليه. لذلك دعونا نمضي قدمًا ونحاول إضافة ذلك التحرك إلى اليسار. حفظ ، سأذهب مباشرة هنا وأقم بالتحديث. ويمكنك أن ترى أنه يبدو أفضل قليلاً. لذلك، هذا شيء عظيم لأننا أردنا أن يكون كل شيء بجوار بعضه البعض. لكن ما سأفعله الآن هو أنني سأريك شيئًا لا يعمل ذلك حقًا. وهذه هي الفكرة عندما أقوم بتغيير حجمها. الآن يمكنك أن ترى هذه الفكرة بأن الفائض قد يكون مهمًا حقًا لأن الأشياء تسير خارج الأقسام نفسها الآن. بالإضافة إلى ذلك، ليس لدي أي نوع من الهوامش بينهما. لذلك دعونا نمضي قدما ونضيف الفائض أو المخفي أو شريط بالتمرير، فقط لإظهار ما كنت أتحدث عنه هناك منذ ثانية. سأذهب مباشرة وأقوم بالتحديث. والآن يمكنك أن ترى أن كل شي
موجود في مربع المحتوى، يمكنني فعلا الدخول هنا
وأستطيع التمرير بين كل واحد من هؤلاء. أنا في الواقع لست معجبة كبيرة بهذا، لأنني لا أحب أن يحتاج الناس
إلى معرفة أنه يمكنهم التمرير. لذا، سنحاول تجربة شيء جديد هنا، بدلاً من ذلك، فإن ما سأفعله هو تحديد العرض 30 ٪، وسأمضي قدمًا واستخدام كتلة مضمنة. ودعونا نلقي نظرة على ما يبدو عليه هذا الآن. أحتاج أن أتذكر، أنني أستخدم ورقة تصميم جديدة، لذلك أحتاج إلى الدخول وتغيير HTML الخاص بي
لذلك أستخدم ورقة التصميم هذه. عدد المرات التي كنت أعرض
فيها هذه الأمثلة عليك حيث نسيت تغيير ورقة التصميم أو نسيت وسميتها
تسمية خاطئة، كانت محرجة بالفعل. لذلك آمل أن تتجنب تلك المشاكل
التي واجهتها. والآن سأقوم بالتحديث. يمكنك أن ترى أن هذا ليس
هو الشكل الذي نأمله. يتم تغيير حجمها، لكنها لا تفعل ما نريد
لأن كل واحدة منها ذات ارتفاع خاص لأننا نريد حقا أن تناسب ذلك. وهذا هو المكان الذي
تظهر فيه خلية الجدول. سأغير عرضي من كتلة مضمّنة إلى خلية جدول. ولمرة واحدة، عندما أذهب للقيام بالتحديث، سأعرف حقيقة لماذا لا يعمل ذلك. لكنني أريد أن أريك، عندما اضغط
على تحديث، فإنه يبدو جيدًا تمامًا لأنها مصممة بحيث يعمل كل شيء. والآن ويناءً على المتصفح الذي
تستخدمه، قد لا يعمل هذا. لأن ما تريد قوله حقًا هو
ما إذا كنت سأمضي قدمًا وأجعلها تسُتخدم كخلية جدول، ولا تنسى أن تذهب إلى جهازك وتقول اعرض. اتفقنا وسأقوم بالتحديث
وسيظهر نفس الشيء، فلن تكون سوى نمط ترميز أفضل. والآن، سأحاول ضرب الكثير
من أمثلة الترميز هنا، في دورة CSS هذه، حتى يمكنك القيام بها. لكن، لا يمكنني أن أؤكد أكثر أنه في
بعض الأحيان قد لا تعمل بنفس الكفاءة تمامًا معك لأن قد تستخدم متصفحًا مختلفًا. وقد تستخدم نفس المتصفح
ولكن بإصدار مختلف. فالأمر المهم بالنسبة لك
هو الدخول إلى هناك، والاستمرار في تجربة هذه القيم الجديدة،
وتنظر فيما يحدث والتعامل معها. وعندما يحين وقت مشروعك النهائي،
وهو متى تكون محدد بالفعل بشأن التأكد من أن كل شيء يبدو جيدًا
في كل متصفح. الأمر الأخير الذي أود أن أذكره سريعًا
هو فكرة الرؤية. وهي تحدد ما إذا كان عنصر ما
سيكون مرئيًا لمستخدم. والآن لقد تحدثنا عن هذه سابقًا
عندما تحدثت عن عدم عرض أي شيء لكن ما يحدث في الرؤية هو أنه يمكنك أن ترى
فعليًا أن المساحة كانت متروكة لها. لا يوجد أي شيء هناك. لذا عندما تستخدم الرؤية،
يكون الخيار مرئيًا أو مخفيًا أو ساقطًا إذا كنت تستخدم الجداول. إذا رأيت هذا وتتساءل عن الفرق بين العرض و الرؤية. فتذكر أن أنه في العرض لا يعمل المتصفح كما لو كان غير موجود حتى. فأنت لا ترى أي شيء. وعند إخفاء الرؤية، يترك المتصفح المساحة التي سيأخذها العنصر، فهو لا يظهرها فحسب. لذلك وأخيرًا، دعنا نواصل ونراجع. العرض هو أداة واحدة فقط من
الأدوات العديدة التي سنستخدمها لوضع العناصر على صفحتك. التصميم المبكر، اتخاذ قرار بشأن ما تريد
أن تبدو صفحتك عليه قبل بدء الترميز، سيجعل الأمور أكثر سهولة. لا تقم بالترميز عند التفكير في
استخدام تصميم التحرك لليمين، ثم تقرر سأستخدم تصميم التحرك لليمين هنا. استعمل مختلف الأدوات التي لدينا، مثل فحص العنصر للنظر في مختلف الخيارات. وسيجعل ذلك حياة الترميز لديك أسهل كثيرًا. نريد أن نتفادى حفظ تحديث
حفظ تحديث فبدلًا من ذلك، استخدم تلك الأدوات وسترى أنك تتخذ قرارات جيدة حقًا
في تصميمك وترميزك. شكرًا.