एक्सेसिबिलिटी / एसईओ फ्रेंडली CSS छिपाना - सीएसएस-ट्रिक्स

Anonim
.screen-reader-text ( position: absolute; top: -9999px; left: -9999px; )

यह वर्ग पृष्ठ से एक आइटम को निकाल सकता है, इसे प्रवाह से बाहर निकालता है और अतिप्रवाह स्क्रॉल का कारण नहीं बनता है।

यह तब display: none;या उससे भी बेहतर है visibility: hidden;जब लक्ष्य तत्व को नेत्रहीन रूप से छिपाने के लिए है लेकिन स्क्रीन पाठकों के लिए इसे सुलभ है।

स्नूक में अधिक स्थितियों को ध्यान में रखते हुए एक अधिक मजबूत वर्ग का एक पूर्वाभ्यास है।

.element-invisible ( position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px, 1px, 1px, 1px); )

वर्डप्रेस एक और भी अधिक मजबूत वर्ग का उपयोग करता है जिसमें यह दिखाया गया है कि तत्व को ध्यान में रखना चाहिए।

.screen-reader-text ( border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important; ) .screen-reader-text:focus ( background-color: #eee; clip: auto !important; clip-path: none; color: #444; display: block; font-size: 1em; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; /* Above WP toolbar. */ )