تطبيق قاعدة واضحة CSS: بسيطة ومريحة

أدى استخدام الأجهزة المختلفة لعرض المعلومات إلى الحاجة إلى عرضها بشكل مناسب دون الرجوع إلى أوضاع ومعايير وظروف عرض محددة.

الأفكار الشائعة سابقًا عن القوالب والجداولالتصميم المطاطي والتكيفي (وخيارات أخرى) أصبح شيئًا من الماضي. في الوقت الحاضر ، يجب ببساطة عرض المعلومات قدر الإمكان ، وبجودة عالية ونفس الشيء على أي جهاز.

متطلبات بسيطة لتقديم المعلومات

يجري الإنسان حوارًا بالكلمات ويفهمونه. لكن يمكنه استخدام المواد المرئية وتوضيح ما قيل بالإيماءات أو الصور أو المصطلحات أو تركيز انتباه المستمع (المستهلك). نتيجة لذلك ، يصل إلى الهدف بشكل أسرع.

الموقع ملزم بتقديم المعلومات بنفس الطريقة ،يجب ألا تكون هناك متطلبات ترميز إضافية على مستوى HTML أو CSS أو JavaScript أو PHP على وجه الخصوص. يجب أن تحقق النتيجة الهدف ويتم توفيرها على جهاز كمبيوتر شخصي وعلى أي جهاز محمول أو ثابت آخر.

تستخدم لغات النص التشعبي ليس فقط من قبل المتصفحات ، ولكن أيضًا بواسطة أدوات أخرى. يجب أن يؤدي توفير المعلومات إلى تحييد أي اختلافات قائمة.

الأدوات التي توفرها CSS

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

على وجه الخصوص ، يمكن أن تكون القواعد العائمة والواضحةيتم تطبيقها في علامات HTML وأوصاف CSS ولا تتحمل أي تكلفة إضافية ، وسيكون التأثير مناسبًا. عند استخدامها في عنصر ، تسمح قاعدة CSS الواضحة له بالتناسب بشكل صحيح ، بغض النظر عن حجم منطقة العرض والجهاز الذي تحدث هذه العملية.

CSS ليست معقدة للغاية وتسعى جاهدة لتحقيق أكبر قدر ممكن من البساطة. باستخدام القاعدة float: left or float: يمينًا في عنصر ما ، يمكنك الضغط عليه إلى جانب واحد من الكتلة المتدفقة ، والعنصر التالي بقاعدة CSS - مسح: كلاهما - ضع المعلومات حوله.

حالات الاستخدام لقاعدة CSS الواضحة

هناك ثلاث قيم محتملة لهذه القاعدة:

• يسار - لا تلتف حول اليسار ؛
• الحق - لا تلتف حول اليمين ؛
• كلاهما - لا تلف على كلا الجانبين.

يمكنك أيضًا استخدام قيم بلا ورثبالنسبة إلى قاعدة CSS الواضحة ، والتي لا تختلف أساسًا عن الوظيفة المقدمة: سيتم حرمان العنصر (أو العناصر) السابقة من الالتفاف إلى اليسار أو اليمين أو كلا الجانبين. في الواقع ، هذا هو خط التغذية. ستظهر جميع العناصر التالية في كتلة المعلومات التالية. ما هي المعلومات التي سيتم عرضها قبل تحديد العنصر مع قاعدة CSS واضحة من قبل المطور. يتم عرض العناصر ذات المواضع المطلقة على الصفحة في الموقع المحدد بواسطة خصائصها.

في الواقع ، تسمح قاعدة CSS الواضحةهيكل (مجموعة) عناصر المعلومات. يعرض الجهاز المعلومات في تدفق عام ، وعندما يكتشف قاعدة واضحة في عنصر أو آخر ، فإنه يعرض محتوياته وفقًا لذلك.

ممارسة التطبيق

كما يحدث عادةً في التقنيات الأخرى ، مر التصميم الموصوف بعدة مراحل وانقسم في النهاية إلى فئتين كبيرتين:

• القدرة على العمل بشكل جميل وفعال (ولكن ، ربما ، لفترة طويلة) ؛
• سريع وبأسعار معقولة.

كل مطور يفسر ما يقالبطريقتي الخاصة. ظل البعض مخلصًا لمصطلحات "التصميم المتجاوب". يقول آخرون إنهم يقومون بعمل مواقع مطاطية. لا يزال البعض الآخر يقنع العميل بالحاجة إلى تخطيط كتلة أو جدول ... لا يهم كيفية تسمية العملية أو الأداة أو أي طريقة أخرى لتحقيق النتيجة.

فقط وقت التطوير والنتيجة مهمان دائمًاعمل. في الحالة الأولى ، لن يكون استخدام قاعدة CSS الواضحة منطقيًا ، تمامًا كما تختفي قاعدة الطفو باعتبارها غير ضرورية. ستشكل خوارزمية JavaScript صعبة أو مجموعة من أنماط CSS المرتبطة ارتباطًا وثيقًا بـ HTML divs الصفحة وتنشر المعلومات وتأخذ في الاعتبار خصوصيات الأجهزة المختلفة.

في الحالة الثانية ، بفضل القواعد العائمة والواضحة ، يتيح لك وصف CSS ببساطة تكوين مجموعة من عناصر الصفحة. سيتم تحقيق نتيجة مقبولة بسرعة وكفاءة.