لدينا العديد من خصائص CSS ، ويمكن أن يمثل إتقان كل ذلك تحديًا. تعد رؤية CSS إحدى الخصائص المهمة التي يجب عليك إتقانها إذا كنت تريد أن تصبح مطور ويب ماهرًا.

في هذه المقالة ، سأقوم بتعريف CSS Visibility ، وسأشرح أهميتها ، وسأقوم بإدراج وشرح قيم رؤية CSS المختلفة.

ما هي رؤية CSS؟

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

ومع ذلك ، إذا كان العنصر مخفيًا ، فسيظل يشغل مساحة ولكن سيتم إخفاؤه من متصفح / شاشة النهاية.

رؤية CSS مهمة في الحالات التالية ؛

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

قيم رؤية CSS مختلفة

رؤية CSS لها خمس قيم محتملة. سأخوض في التفاصيل من خلال كتل التعليمات البرمجية ولقطات الشاشة. إذا كنت تنوي المتابعة ،

• قم بإنشاء مجلد على جهازك المحلي.
• أضف ملفين index.html و styles.css.
• افتح المشروع في محرر الكود المفضل لديك (أنا أستخدم VS Code)

يمكنك استخدام هذا الأمر ؛

mkdir -p CSS-visibility && cd CSS-visibility && touch index.html styles.css

التالي هو ربط ملفات index.html و styles.css. في قسم من ملف index.html ، أضف هذا ؛

<link rel="stylesheet" href="https://wilku.top/how-css-visibility-enhances-your-web-design-with-hidden-gems/styles.css">

يجب أن يكون لديك الآن شيء مشابه لهذا في محرر التعليمات البرمجية الخاص بك ؛

مرئي

عندما تقوم بتعيين قيمة عنصر على أنه visibility: مرئي ، سيظهر على صفحة الويب. هذه الرؤية موجودة بشكل افتراضي. يمكن أن يكون لدينا ثلاثة مربعات في مستند HTML الخاص بنا لفهم هذا المفهوم بشكل أفضل. في قسم في index.html ، أضف ما يلي ؛

<div class="container">

      <div class="box1"> Box 1 </div>

      <div class="box2"> Box 2 </div>

      <div class="box3"> Box 3 </div>

    </div>

يمكننا الآن تصميم divs (المربعات) باستخدام كود CSS التالي ؛

.container {

    padding: 15px;

    width: max-content;

    display: flex;

    border: 1px solid black;

  }

  .box1,

  .box2,

  .box3 {

    height: 30px;

    width: 100px;

  }

  .box1 {

    background-color: rgb(224, 49, 209);

    margin-right: 15px;

  }

  .box2 {

    background-color: rgb(95, 234, 77);

    margin-right: 15px;

  }

  .box3 {

    background-color: rgb(154, 43, 12);

  }

عندما يتم عرض الصفحة الأخيرة ، سيكون لديك شيء مثل هذا ؛

إذا قمت بتعيين الرؤية على المربعات على أنها رؤية: مرئية ، فلن يكون لها أي تأثير لأن جميع المربعات مرئية بشكل افتراضي.

ومع ذلك ، يمكننا توضيح كيفية عمل الخاصية المرئية باستخدام العرض: لا توجد خاصية في أحد المربعات. يمكننا تحديد box3 كمثال لدينا. قم بتغيير كود CSS على class .box3 كما يلي ؛

.box3 {

    background-color: rgb(154, 43, 12);

    display: none

  }

عندما تعيد تصيير الصفحة ، ستلاحظ أن لدينا مربعين فقط ، واحد ومربعان.

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

مختفي

عندما نطبق خاصية visibility: hidden CSS على عنصر ، فسيتم إخفاؤها عن المستخدم النهائي. ومع ذلك ، فإنها ستظل تحتل مساحة. على سبيل المثال ، يمكننا إخفاء Box2 باستخدام هذه الخاصية.

لتحقيق ذلك ، قم بتعديل كود Box2 CSS على النحو التالي ؛

.box2 {

    background-color: rgb(95, 234, 77);

    margin-right: 15px;

    visibility: hidden

  }

التغيير الوحيد الذي قمنا به هو إضافة هذا الخط ؛

visibility: hidden

ستكون الصفحة الأخيرة كما هي معروضة ؛

يمكننا أن نرى مسافة بين المربع 1 والمربع 3 لأن عنصر المربع 2 مخفي فقط.

يمكننا أن نرى أن المربع 2 لا يزال على DOM إذا فحصنا صفحتنا المقدمة.

ينهار

الانهيار هو قيمة رؤية تُستخدم في العناصر الفرعية. تعد جداول HTML مثالًا رائعًا على المكان الذي يمكننا فيه تطبيق سمة visibility: collapse.

يمكننا إضافة الكود التالي لإنشاء جدول في ملف HTML الخاص بنا ؛

<table>

        <tr>

          <th>Programming Language</th>

          <th>Framework</th>

        </tr>

        <tr>

          <td>JavaScript </td>

          <td>Angular </td>

        </tr>

        <tr class="hidden-row">

          <td>Ruby </td>

          <td>Ruby on Rails</td>

        </tr>

        <tr>

          <td>Python </td>

          <td>Django </td>

        </tr>

   </table>

يمكننا الآن تصميم طاولتنا بحد 1 بكسل على جميع خلاياه. أضف هذا إلى ملف CSS الخاص بك ؛

table {

    border-collapse: collapse;

    width: 50%;

  }

  th, td {

    border: 1px solid black;

    padding: 8px;

  }

عندما نعرض الجدول ، سيكون لدينا ما يلي ؛

سنخفي الآن الصف الثاني لتوضيح كيفية عمل سمة visibility: collapse. أضف هذا إلى كود CSS الخاص بك ؛

.hidden-row {

    visibility: collapse;

  }

عند عرض الصفحة ، سيختفي الصف الذي يحتوي على Ruby و Ruby on Rails.

أولي

الرؤية: الخاصية الأولية تعيد تعيين عنصر HTML إلى قيمته الأولية. على سبيل المثال؛

• بدأنا بعرض جميع الصفوف في طاولتنا.
• لقد انهارنا قيمة الصف 2 ، وبالتالي أخفيناها.
• يمكننا الآن العودة إلى القيمة الأولية (عرضها)

سنضيف زرًا يبدل بين قيم العرض والطي لإثبات ذلك.

أضف هذا الزر القابل للنقر إلى كود HTML الخاص بك ؛

<button onclick="toggleVisibility()">Click Me!!</button>

يمكننا بعد ذلك إضافة وظيفة JavaScript التي تبحث عن فئة الصف المخفي وتبديل الصف المرئي عند النقر فوق الزر.

<script>

    function toggleVisibility() {

      const hiddenRow = document.querySelector('.hidden-row');

      hiddenRow.classList.toggle('visible-row');

    }

  </script>

Add this code to your CSS file;

.visible-row {

    visibility: initial;

  }

ستتحول قيمة الرؤية ذهابًا وإيابًا عند النقر فوق الزر المعروض ؛

يرث

الرؤية: ترث الخاصية تسمح لعنصر فرعي أن يرث خاصية العرض من الأصل.

يمكننا الحصول على هذا الرمز البسيط لشرح كيفية عمل هذه الخاصية ؛

<h1>Inherit Demo</h1>

   <div style="visibility: hidden">

     <h2 style="visibility: inherit"> Hidden</h2>

   </div>

   <p>Visible (not inside a hidden element) </p>

 </p>

سيتم عرض المحتوى الموجود داخل علامتي h1 والفقرة فقط إذا قمت بعرض الصفحة. ومع ذلك ، ستوجد مسافة تمثل العناصر المخفية بين علامتي

و

.

لدينا div واحد وضعناه مخفيًا. لدينا علامة

داخل div. لقد قمنا بتعيين رؤية

على أنها موروثة ، مما يعني أنها ترث من والدها ، div.

ومع ذلك ، إذا قمنا بتعيين خاصية div على أنها مرئية ، فإن

(التابع لها) سيرث ذلك أيضًا.

<h>Inherit Demo</h>

    <div style="visibility: visible">

      <h2 style="visibility: inherit"> Hidden</h2>

    </div>

    <p>Visible (not inside a hidden element) </p>

رؤية CSS: مخفي مقابل عرض: لا شيء

يتمثل الاختلاف الرئيسي بين display: none و visibility: hidden في أن الأول يزيل عنصرًا من التخطيط بالكامل بينما يخفي الأخير عنصرًا ولكنه لا يزال يشغل مساحة.

يمكننا استخدام هذا الرمز لتوضيح الفرق بين الاثنين ؛

<!DOCTYPE html>

<html>

<head>

    <style>

        .box {

          display: inline-block;

          width: 100px;

          height: 100px;

          background-color: lightgray;

          margin-right: 20px;

        }

        .box1 {

          background-color: lightblue;

        }

        .box2 {

          background-color: black;

        }

        .container {

            padding: 10px;

            border :2px solid black;

            padding-left: 20px;

            width: 250px;

        }

      </style>

    </head>

    <body>

      <div class="container">

        <div class="box box1"></div>

        <div class="box box2"></div>

      </div>

</body>

</html>

إذا عرضنا صفحتنا ، فسيكون لدينا مربعان جنبًا إلى جنب ؛

العرض: لا يوجد عرض

أضف هذا إلى فئة .box1 ؛

display: none;

عند تقديم الصفحة ، ستلاحظ أنه لن يتم عرض .box1 بعد الآن. يتحرك المربع الثاني (أسود) أيضًا إلى اليسار ليحتل المساحة التي كان يشغلها سابقًا مربع lightblue.

الرؤية: عرض خفي

بدلاً من العرض: لا شيء ، أضف فئة .box1 هذه ؛

visibility: hidden

تترك هذه الخاصية بعض المساحة للمربع 1 ولكنها لا تعرضها. من ناحية أخرى ، يظل المربع 2 في مكانه.

display: nonevisibility: hidden يزيل عنصرًا من صفحة الويب تمامًا يخفي عنصر HTML ولكنه لا يزال يشغل مساحة على صفحة الويب يمكنك تصميم عنصر تم ضبط عرضه على لا شيء يمكنك وضع وتصميم عنصر تكون رؤيته مخفية لا يمكن الوصول إليها بواسطة قارئات الشاشة يمكنك الوصول عنصر تم ضبط رؤيته على أنه مخفي باستخدام برامج قراءة الشاشة

تحسين إمكانية الوصول مع رؤية CSS

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

يمكننا الحصول على هذا الرمز لتوضيح كيف يمكنك تحسين الرؤية ؛

<!DOCTYPE html>

<html>

  <head>

    <title>Homepage</title>

    <style>

      .login-form {

        display: none;

      }

      .login-text:hover + .login-form {

        display: block;

      }

      .login-form label {

        display: block;

        margin-bottom: 5px;

      }

      .login-form input {

        width: 30%;

        margin-bottom: 10px;

      }

    </style>

  </head>

  <body>

    <p class="login-text">Login</p>

    <form class="login-form">

      <label for="username">Username:</label>

      <input type="text" id="username" name="username" required />

      <label for="password">Password:</label>

      <input type="password" id="password" name="password" required />

      <button type="submit">Submit</button>

    </form>

  </body>

</html>

يصبح نموذج تسجيل الدخول مرئيًا فقط عند التمرير فوق العنصر الأول.

خاتمة

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

تحقق من أدلة وموارد CSS الخاصة بنا لمعرفة المزيد حول خصائص CSS التي يمكنك دمجها مع رؤية CSS.