استبدال الصور باستخدام CSS

استبدال الصور باستخدام CSS هو أسلوب قديم في تصميم مواقع الويب ، يعتمد على أوراق الأنماط المتتالية (CSS ) - على عكس تقنيات أخرى مثل فلاش - لاستبدال النص في صفحة الويب بصورة تحتوي على ذلك النص. يهدف هذا الأسلوب إلى إبقاء الصفحات متاحة لمستخدمي قارئات الشاشة ، ومتصفحات الويب النصية فقط ، أو المتصفحات الأخرى التي لا تدعم الصور أو أوراق الأنماط، مع السماح للصورة بالاختلاف بين الأنماط. من بين هذه الأساليب، تقنية استبدال الصور "فارنر" ، نسبةً إلى تود فارنر، الذي يُنسب إليه الفضل في فكرة استبدال الصور عام 2003. ^{[ 1 ]}

مع إدخال دعم خطوط الويب CSS في جميع متصفحات الويب الرئيسية، أصبح استبدال الصور باستخدام CSS نادر الاستخدام.

الطريقة المعتادة لإدراج صورة في مستند HTML هي عبر عنصر <img>. ومع ذلك، فإن لهذه الطريقة عيوبها فيما يتعلق بسهولة الوصول والمرونة.<img>

• على الرغم من أن altالسمة مصممة لتوفير تمثيل نصي لمحتوى الصورة، إلا أن هذا يمنع استخدام ترميز HTML في التمثيل النصي.
• يُعدّ استخدام العنصر لعرض النصوص أمرًا عرضيًا. ويرى العديد من مصممي المواقع الإلكترونية أنه ينبغي فصل العناصر العرضية عن محتوى HTML بوضعها في ورقة أنماط CSS.<img>
• لا يمكن تغيير الصور المشار إليها باستخدام عنصر بسهولة عبر CSS، مما يتسبب في مشاكل مع العروض التقديمية البديلة.<img>

تم ابتكار تقنيات استبدال الصور مثل استبدال صور فارنر لمعالجة هذه المشكلات.

استخدم تطبيق استبدال الصور الأصلي ^{[ 1 ]} الذي وصفه دوغلاس بومان عنوانًا، بداخله عنصر يحتوي على نص العنوان:<span>

< h3 id = "firHeader" > <span> عنوان نموذجي < / span > </h3>

باستخدام أوراق الأنماط، تم بعد ذلك إعطاء العنوان خلفية تحتوي على الصورة المطلوبة، وتم إخفاؤه عن طريق ضبط خاصية CSS الخاصة به على :<span>displaynone

#firHeader { العرض : 300 بكسل ؛ الارتفاع : 50 بكسل ؛ الخلفية : #fff url ( firHeader.gif ) أعلى اليسار بدون تكرار ؛ }# firHeader span { display : none ; }

لكن سرعان ما اكتُشف أن هذه الطريقة تسببت في تجاهل بعض برامج قراءة الشاشة للعنوان تمامًا، لأنها لم تكن تقرأ أي نص يحتوي على displayخاصية معينة . أما طريقة Pharknone اللاحقة ، التي طورها مايك راندل عام 2003، فقد استخدمت هذه الخاصية لدفع النص خارج مساحة الصورة، ما عالج هذه المشكلة.text-indent

# firHeader { width : 300 px ; height : 50 px ; text-indent : -5000 px ; /* ← Phark */ }

لكن طريقة Phark كانت لها مشاكلها الخاصة؛ ففي المتصفحات المرئية حيث كان CSS قيد التشغيل ولكن الصور معطلة، لم يكن يتم عرض أي شيء.

وفي عام 2003 أيضاً، حلت طريقة شيا التي تحمل اسم ديف شيا المشكلتين المذكورتين سابقاً، ولكن بتكلفة إضافية :<span>

< h3 id = "header" > <span> </span> استبدال الصورة المعدل < / h3 >

بوضع عنصر فارغ فوق عنصر النص بشكل مطلق، يُخفى النص فعليًا. إذا لم يتم تحميل الصورة، فسيظل النص الموجود خلفها ظاهرًا. لهذا السبب، لا يمكن استخدام الصور الشفافة مع طريقة شيا.<span>

# header { width : 329 px ; height : 25 px ; position : relative ; }#header span { background : url ( firHeader.gif ) no - repeat ; position : absolute ; width : 100 % ; height : 100 % ; }

تم تطوير أكثر من اثنتي عشرة طريقة مختلفة منذ ذلك الحين بدرجات متفاوتة من التوافق والتعقيد. ^{[ 2 ]}

• استبدال الصور المنقح  - نظرة عامة على تقنيات FIR المختلفة بقلم ديف شيا
• استبدال الصور الأمثل  – تقنية شاملة لاستبدال الصور من تأليف جيسي شوبيرج
• تسع تقنيات لاستبدال الصور باستخدام CSS  - نظرة عامة على التقنيات من مجلة تصميم المواقع الإلكترونية CSS-Tricks، صدرت عام 2008