هناك طرق متعددة لإخفاء عنصر في CSS ، ولكنها تختلف في الطريقة التي تؤثر بها على إمكانية الوصول والتخطيط والرسوم المتحركة والأداء ومعالجة الأحداث.
الرسوم المتحركة
بعض خيارات إخفاء CSS كلها أو لا شيء. العنصر إما مرئي تمامًا أو غير مرئي تمامًا وليس هناك حالة بينية. يمكن أن تحتوي قيم أخرى ، مثل الشفافية ، على مجموعة من القيم ، بحيث تصبح الرسوم المتحركة المقربة CSS ممكنة.
إمكانية الوصول
ستخفي كل طريقة موصوفة أدناه عنصرًا بصريًا ، ولكنها قد تخفي أو لا تخفي المحتوى من التقنيات المساعدة. على سبيل المثال ، لا يزال بإمكان قارئ الشاشة الإعلان عن نص شفاف للغاية. خصائص CSS إضافية أو سمات ARIA مثل aria-hidden="true" قد يكون من الضروري وصف الإجراء المناسب.
احذر من أن الرسوم المتحركة يمكن أن تسبب أيضًا الارتباك أو الصداع النصفي أو النوبات أو عدم الراحة الجسدية الأخرى لبعض الأشخاص. النظر في استخدام prefers-reduced-motion الاستعلام عن الوسائط لإيقاف الرسوم المتحركة عند تحديدها في تفضيلات المستخدم.
التعامل مع الحدث
سيؤدي الإخفاء إلى إيقاف تشغيل الأحداث على هذا العنصر أو لن يكون له تأثير - أي أن العنصر غير مرئي ولكن لا يزال من الممكن النقر عليه أو تلقي تفاعلات مستخدم أخرى.
الأداء
بعد أن يقوم المتصفح بتحميل وتحليل نموذج كائن HTML DOM و CSS ، يتم تقديم الصفحة على ثلاث مراحل:
- التخطيط: إنشاء الشكل الهندسي لكل عنصر وموضعه
- رسم: ارسم وحدات البكسل لكل عنصر
- التركيب: طبقات عنصر الموضع بالترتيب المناسب
التأثير الذي يتسبب فقط في تغييرات التكوين هو أكثر سلاسة بشكل ملحوظ من تلك التي تؤثر على التخطيط. في بعض الحالات ، يمكن للمتصفح أيضًا استخدام تسريع الأجهزة.
1. opacity و filter: opacity()
• opacity: N و filter: opacity(N) يمكن تمرير الخصائص برقم بين 0 و 1 ، أو نسبة بين 0٪ و 100٪ تشير إلى شفافية كاملة وغير شفافة تمامًا وفقًا لذلك.
انظر القلم
اخفاء مع التعتيم: 0 بواسطة SitePoint (SitePoint)
on CodePen.
على الرغم من ذلك ، هناك اختلاف عملي بسيط بين الاثنين في المتصفحات الحديثة filter يجب استخدامه إذا تم تطبيق تأثيرات متعددة في نفس الوقت (التمويه ، التباين ، التدرج الرمادي وما إلى ذلك)
يمكن أن تكون العتامة متحركة وتقدم أداءً رائعًا ، ولكن احذر من بقاء عنصر شفاف تمامًا على الصفحة ويمكن أن يؤدي إلى أحداث.
| متري | تأثير |
|---|---|
| دعم المتصفح | جيد ، ولكن IE يدعم فقط opacity 0 إلى 1 |
| إمكانية الوصول | لا تتم قراءة المحتوى إذا تم تعيين 0 أو 0٪ |
| تأثر التخطيط؟ | لا |
| العرض المطلوب | تركيب |
| أداء | أفضل ، يمكن استخدام تسريع الأجهزة |
| إطارات الرسوم المتحركة ممكن؟ | نعم فعلا |
| أثار الأحداث عندما كانت مخفية؟ | نعم فعلا |
2. color شفافية ألفا
opacity يؤثر على العنصر بأكمله ، ولكن من الممكن أيضًا تعيين color, background-colorو border-color الخصائص بشكل منفصل. تطبيق قناة ألفا صفر باستخدام rgba(0,0,0,0) أو ما شابه يجعل السلعة شفافة تمامًا:
انظر القلم
اختباء مع اللون ألفا بواسطة SitePoint (SitePoint)
on CodePen.
يمكن تحريك كل خاصية بشكل منفصل لخلق تأثيرات مثيرة للاهتمام. لاحظ أنه لا يمكن تطبيق الشفافية على العناصر ذات خلفيات الصور ما لم يتم إنشاؤها باستخدام linear-gradient أو مشابه.
يمكن تعيين قناة ألفا بـ:
transparent: شفاف بالكامل (بين الرسوم المتحركة غير ممكنة)rgba(r, g, b, a): أحمر وأخضر وأزرق وألفاhsla(h, s, l, a): الصبغة والتشبع والخفة وألفا#RRGGBBAAو#RGBA
| متري | تأثير |
|---|---|
| دعم المتصفح | جيد ، ولكن IE يدعم فقط transparent و rgba |
| إمكانية الوصول | المحتوى لا يزال يقرأ |
| تأثر التخطيط؟ | لا |
| العرض المطلوب | اللوحة |
| أداء | جيد ، ولكن ليس بالسرعة opacity |
| إطارات الرسوم المتحركة ممكن؟ | نعم فعلا |
| أثار الأحداث عندما كانت مخفية؟ | نعم فعلا |
3. transform
• transform يمكن استخدام الخاصية لترجمة عنصر (نقله) أو تغيير حجمه أو تدويره أو إمالته. أ scale(0) or translate(-999px, 0px) سيخفي العنصر خارج الشاشة العنصر:
انظر القلم
إخفاء مع التحويل: مقياس (0) ؛ بواسطة SitePoint (SitePoint)
on CodePen.
transform يقدم أداءً ممتازًا وتسريع الأجهزة لأن العنصر ينتقل بشكل فعال إلى طبقة منفصلة ويمكن تحريكه في ثنائي الأبعاد أو ثلاثي الأبعاد. تبقى مساحة التخطيط الأصلية كما هي ، ولكن لن يتم تشغيل أي أحداث بواسطة عنصر مخفي بالكامل.
| متري | تأثير |
|---|---|
| دعم المتصفح | خير |
| إمكانية الوصول | المحتوى لا يزال يقرأ |
| تأثر التخطيط؟ | لا - تبقى الأبعاد الأصلية |
| العرض المطلوب | تركيب |
| أداء | أفضل ، يمكن استخدام تسريع الأجهزة |
| إطارات الرسوم المتحركة ممكن؟ | نعم فعلا |
| أثار الأحداث عندما كانت مخفية؟ | لا |
4. clip-path
• clip-path تقوم الخاصية بإنشاء منطقة قطع تحدد أجزاء العنصر المرئية. باستخدام قيمة مثل clip-path: circle(0); ستخفي العنصر تمامًا.
انظر القلم
إخفاء مع مسار مقطع بواسطة SitePoint (SitePoint)
on CodePen.
clip-path يوفر نطاقًا للرسوم المتحركة المثيرة للاهتمام ، على الرغم من أنه يجب الاعتماد عليه فقط في المتصفحات الحديثة.
| متري | تأثير |
|---|---|
| دعم المتصفح | المتصفحات الحديثة فقط |
| إمكانية الوصول | المحتوى لا يزال يقرأ من قبل بعض التطبيقات |
| تأثر التخطيط؟ | لا - تبقى الأبعاد الأصلية |
| العرض المطلوب | طلاء |
| أداء | معقول |
| إطارات الرسوم المتحركة ممكن؟ | نعم ، في المتصفحات الحديثة |
| أثار الأحداث عندما كانت مخفية؟ | لا |
5. visibility
• visibility يمكن تعيين الخاصية إلى visible or hidden لإظهار وإخفاء عنصر:
انظر القلم
إخفاء مع الرؤية: مخفي بواسطة SitePoint (SitePoint)
on CodePen.
تبقى المساحة التي يستخدمها العنصر في مكانها ما لم يكن collapse يتم استخدام القيمة.
| متري | تأثير |
|---|---|
| دعم المتصفح | ممتاز |
| إمكانية الوصول | محتوى غير مقروء |
| تأثر التخطيط؟ | لا ، إلا إذا collapse ويستخدم |
| العرض المطلوب | التكوين ، ما لم collapse ويستخدم |
| أداء | خير |
| إطارات الرسوم المتحركة ممكن؟ | لا |
| أثار الأحداث عندما كانت مخفية؟ | لا |
6. display
display ربما تكون أكثر طريقة لإخفاء العناصر استخدامًا. قيمة none يزيل العنصر بشكل فعال كما لو أنه لم يكن موجودًا في DOM.
انظر القلم
إخفاء مع العرض: لا يوجد بواسطة SitePoint (SitePoint)
on CodePen.
ومع ذلك ، فمن المحتمل أن يكون أسوأ خاصية CSS للاستخدام في معظم الحالات. لا يمكن أن يكون متحركًا وسيؤدي إلى تخطيط الصفحة ما لم يتم نقل العنصر خارج تدفق المستند باستخدام position: absolute أو الجديد contain تم تبني الملكية.
display مثقلة أيضا مع خيارات مثل block, inline, table, flexbox, grid و اكثر. إعادة إلى القيمة الصحيحة بعد display: none; يمكن أن يكون مشكلة (على الرغم من unset قد يساعد).
| متري | تأثير |
|---|---|
| دعم المتصفح | ممتاز |
| إمكانية الوصول | محتوى غير مقروء |
| تأثر التخطيط؟ | نعم فعلا |
| العرض المطلوب | نسق |
| أداء | فقير |
| إطارات الرسوم المتحركة ممكن؟ | لا |
| أثار الأحداث عندما كانت مخفية؟ | لا |
7. HTML hidden السمة
HTML hidden السمة يمكن إضافتها إلى أي عنصر:
<p hidden> Hidden content
</p>
لتطبيق النمط الافتراضي للمتصفح:
[hidden] { display: none;
}
هذا له نفس الفوائد والعيوب display: none، على الرغم من أنه قد يكون مفيدًا عند استخدام نظام إدارة محتوى لا يسمح بتغييرات النمط.
8. مطلق position
• position تسمح الخاصية بنقل عنصر من عنصره الافتراضي static موضع داخل تخطيط الصفحة باستخدام top, bottom, leftو right. و absoluteلذلك يمكن نقل العنصر ذو الوضعية خارج الشاشة باستخدام left: -999px أو مشابه:
انظر القلم
إخفاء مع الموقف: مطلق بواسطة SitePoint (SitePoint)
on CodePen.
| متري | تأثير |
|---|---|
| دعم المتصفح | ممتاز ، ما لم تستخدم position: sticky |
| إمكانية الوصول | المحتوى لا يزال يقرأ |
| تأثر التخطيط؟ | نعم ، إذا تغير الوضع |
| العرض المطلوب | يعتمد |
| أداء | معقول إذا كان حذرا |
| إطارات الرسوم المتحركة ممكن؟ | نعم top, bottom, leftو right |
| أثار الأحداث عندما كانت مخفية؟ | نعم ، ولكن قد يكون من المستحيل التفاعل مع عنصر خارج الشاشة |
9. تراكب عنصر آخر
يمكن إخفاء عنصر ما بصريًا عن طريق وضع عنصر آخر على الجزء العلوي له نفس لون الخلفية. في هذا المثال ، أ ::after العنصر الزائف متراكب ، على الرغم من أنه يمكن استخدام أي عنصر تابع:
انظر القلم
إخفاء مع تراكب بواسطة SitePoint (SitePoint)
on CodePen.
على الرغم من أنه ممكن من الناحية التقنية ، إلا أن هذا الخيار يتطلب رمزًا أكثر من الخيارات الأخرى.
| متري | تأثير |
|---|---|
| دعم المتصفح | ممتاز |
| إمكانية الوصول | المحتوى لا يزال يقرأ |
| تأثر التخطيط؟ | لا ، إذا تم وضعه بشكل مطلق |
| العرض المطلوب | طلاء |
| أداء | معقول إذا كان حذرا |
| إطارات الرسوم المتحركة ممكن؟ | نعم فعلا |
| أثار الأحداث عندما كانت مخفية؟ | نعم ، عندما يتراكب عنصر زائف أو تابع |
10. تقليل الأبعاد
يمكن إخفاء عنصر عن طريق تقليل أبعاده باستخدام width, height, padding, border-width و / أو font-size. قد يكون من الضروري أيضًا التقديم overflow: hidden; لضمان عدم انتشار المحتوى.
انظر القلم
إخفاء مع العرض أو الارتفاع بواسطة SitePoint (SitePoint)
on CodePen.
من الممكن وجود تأثيرات متحركة مثيرة للاهتمام ، ولكن الأداء أفضل بشكل ملحوظ مع transform.
| متري | تأثير |
|---|---|
| دعم المتصفح | ممتاز |
| إمكانية الوصول | المحتوى لا يزال يقرأ |
| تأثر التخطيط؟ | نعم فعلا |
| العرض المطلوب | نسق |
| أداء | فقير |
| إطارات الرسوم المتحركة ممكن؟ | نعم فعلا |
| أثار الأحداث عندما كانت مخفية؟ | لا |
الخيارات المخفية
display: none كان الحل المفضل لإخفاء العناصر لسنوات عديدة ، ولكن تم استبداله بخيارات أكثر مرونة وحيوية. لا تزال صالحة ، ولكن ربما فقط عندما تريد إخفاء المحتوى نهائيًا عن جميع المستخدمين. transform or opacity هي خيارات أفضل عند النظر في الأداء.
انتقل بمهارات CSS إلى المستوى التالي مع ماجستير CSS. تعرف على بنية CSS ، وتصحيح الأخطاء ، والخصائص المخصصة ، وتقنيات التخطيط والرسوم المتحركة المتقدمة ، وكيفية استخدام CSS مع SVG ، والمزيد.
المصدر: https://www.sitepoint.com/hide-elements-in-css/؟utm_source=rss
