CSS3 محدد السمة الذي يستهدف نوع الملف
ال محددات السمة هي ميزة مفيدة حقا لتحديد عنصر دون إضافة لزوم لها هوية شخصية أو الطبقات. طالما أن العنصر المستهدف لديه سمة مثل أ href, SRC و نوع ليس لدينا للقيام بذلك.
محددات السمة موجودة بالفعل منذ CSS 2.1, والآن مع عدد قليل من أنواع محددات السمات المضافة في مواصفات CSS3 ، يمكننا استهداف سمة العنصر بشكل أكثر تحديدًا.
وفي هذا المنشور ، سنستخدم أحد بناء الجملة لتحديد نوع الملف التي يتم إدراجها كجزء من قيمة السمة.
بناء الجملة ودعم المستعرض
ال نوع الملف هو دائما في نهاية اسم الملف. لذلك ، لتحديد ذلك نوع الملف يمكننا استخدام بناء الجملة التالي [ATTR $ = "قيمة"]. يستخدم بناء الجملة هذا $ = عامل التشغيل الذي سيستهدف نهاية قيمة السمة ، على سبيل المثال:
a [href $ = ". pdf"]: قبل background: url ('... /images/document-pdf-text.png') بلا تكرار ؛ سيحدد المقتطف أعلاه كل رابط تنتهي به قيمة السمة .قوات الدفاع الشعبي وأدخل كلمة وثيقة أيقونة في :قبل شبه عنصر.
مصدر أيقونة PDF: أيقونات fugue
في حين أن هذا استخدام شائع لهذا المحدد ، فمن المؤكد أننا نستطيع تجاوز ذلك.
فيما يتعلق بتوافق المتصفح ؛ على الرغم من تقديم بناء الجملة هذا رسميًا كمواصفات CSS3 ، إلا أنه تم دعمه بالفعل منذ ذلك الحين انترنت اكسبلورر 7, حتى تتمكن من تطبيقها بأمان من خلال جميع التصميمات الخاصة بك.
المثال
لن تعرف ابدا ان لم تجرب. نحتاج فقط إلى تجربة شيء جديد للحصول على فهم أفضل لشيء لا نفهمه بعد. هنا ، سنشرح كيف يمكن أن يكون بناء الجملة هذا مفيدًا جدًا ومفيدًا لاستهداف عنصر في بنية HTML معينة كان من الصعب تطبيقه قليلاً باستخدام CSS البسيط فقط.
أدناه ، لدينا هيكل HTML5 لسرد ثلاث صور مع شرحها. إنه لغرض العرض التوضيحي فقط ، لا يجب أن تكون العلامات الخاصة بك تمامًا مثل المقتطف التالي (على سبيل المثال ، قد يكون لديك صورة واحدة فقط أو حتى ثلاث صور أخرى) ، ولكن النقطة المهمة هي أنك تعرف كيف يمكن تطبيق بناء الجملة هذا في بنية HTML معينة.
-
JPG -
بابوا نيو غينيا -
GIF
كل صورة من الصور المذكورة أعلاه لها التنسيقات أو الامتدادات التالية, JPG, بابوا نيو غينيا, و GIF. لديهم أيضًا تعليق يمثل امتداد الصورة الخاص به ؛ ستعمل هذه التسمية التوضيحية بعد ذلك كصورة للصورة.
لذلك ، هذه هي الخطة ، سنقدم ألوانًا خلفية مختلفة للتعليق لكل امتداد صورة مختلف. ستحصل صورة JPG على أخضر لون التسمية التوضيحية ، سوف تحصل على بابوا نيو غينيا أزرق, وأخيرا سوف تحصل على GIF أرجواني.
أولاً ، دعونا نضع موضع علامة الرقم نسبيًا ، لأننا سنطبق مطلق موقف للتعليق.
شخصية موقف: نسبي؛
أضف زخرفة صغيرة للصور ذات الحدود والظلال.
img border: 5px solid #ccc؛ -webkit-box-shadow: 1px 1px 3px 0px rgba (0، 0، 0، .5)؛ box-shadow: 1px 1px 3px 0px rgba (0، 0، 0، .5)؛
وبعد ذلك ، قمنا بتعيين النمط الافتراضي وتحديد المواقع للتعليق. سيكون للصورة التوضيحية أو التسمية مساحة 50 بكسل.
img + figcaption color: #fff؛ الموقف: مطلق ؛ أعلى: 0 ؛ اليمين: 0 ؛ العرض: 50 بكسل ؛ الارتفاع: 50 بكسل ؛ ارتفاع الخط: 50 بكسل ؛ محاذاة النص: المركز ؛
الآن حان الوقت لإضافة لون الخلفية. للقيام بذلك ، يمكننا دمج محدد السمة مع محدد الأخوة المجاور, +.
img [src $ = ". jpg"] + figcaption background-color: # a8b700؛
سيستهدف المقتطف أعلاه كل صورة مع انتهاء سمة المصدر بـ .JPG, ثم سيجد المحدد المجاور العنصر المجاور له. في هذه الحالة figcaption ستضاف مع # a8b700 لون الخلفية.
وهنا جميع الرموز لبقية تنسيقات الصور ، بابوا نيو غينيا و. gif.
img [src $ = ". png"] + figcaption background-color: # 389abe؛ img [src $ = ". gif"] + figcaption background-color: # 8960a7؛
الآن ، دعونا نرى كيف يتم تشغيله مباشرة من الرابط التوضيحي أدناه ، وإلا يمكنك تنزيل المصدر لفحصه في وضع عدم الاتصال.
- عرض
- تحميل المصدر
مصادر الصورة هي على النحو التالي: MacPro 1 و MacPro 2 و MacPro 3
استنتاج
نأمل أن تتمكن من رؤية الجانب الأنيق من التصميم باستخدام محدد خاص ، مثل ما حاولنا إظهاره أعلاه باستخدام محدد السمة. لذلك ، في المرة القادمة التي تقوم فيها بتصميم HTML الخاص بك ، نوصي بشدة بإجراء بعض الأبحاث حول ما إذا كان يمكن تطبيق التصميم الخاص بك باستخدام بعض محدد خاص ، بدلاً من تخريب العلامات منظم بشكل صحيح مع اضافية الطبقات أو هوية شخصية.
يوجد في الواقع اثنان من المنتقيين الجدد من هذا النوع سنقوم بتغطيتهما في المنشورات التالية ، لذلك تابعونا.
