ربط DNA HTML مع محددات سمات CSS

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

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

في المستوى الأساسي ، تضع سمة HTML بين قوسين مربعين وتسميها محدد السمات كما يلي:

 [href] { color: chartreuse; }

نص أي عنصر يحتوي على href وليس له محدد أكثر تحديدًا سيتحول الآن بشكل سحري إلى المخطط. خصوصية محدد السمة هي نفسها الفئات.

ملاحظة : لمزيد من المعلومات حول تطابق القفص الذي يتعلق بخصوصية CSS ، يمكنك قراءة "خصوصية CSS: أشياء يجب أن تعرفها" أو إذا كنت تحب Star Wars: "CSS Specificity Wars".

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

تحديد السمة

يمكن أن تعيش محددات السمات بمفردها أو تكون أكثر تحديدًا ، أي إذا كنت بحاجة إلى تحديد جميع علامات div التي لها سمة title .

 div[title]

ولكن يمكنك أيضًا تحديد أبناء divs الذين لديهم عنوان عن طريق القيام بما يلي:

 div [title]

للتوضيح ، لا توجد مسافة بينهما تعني أن السمة موجودة على نفس العنصر (تمامًا مثل العنصر والفئة بدون مسافة) ، والمسافة بينهما تعني محددًا سليلًا ، أي اختيار أبناء العنصر الذين لديهم السمة.

يمكنك الحصول على مزيد من الدقة في كيفية تحديد السمات بما في ذلك قيم السمات.

 div[title="dna"]

ما ورد أعلاه يختار جميع divs مع العنوان الدقيق "dna". لن يتم تحديد عنوان "dna رائع" أو "dnamulation" ، على الرغم من وجود خوارزميات محددة تتعامل مع كل حالة من هذه الحالات (والمزيد). سنصل إلى هؤلاء قريبًا.

ملاحظة : علامات الاقتباس ليست مطلوبة في محددات السمات في معظم الحالات ، لكنني سأستخدمها لأنني أعتقد أنها تزيد الوضوح وتضمن عمل الحالات المتطورة بشكل مناسب.

إذا كنت ترغب في تحديد "dna" من قائمة مفصولة بمسافات مثل "my beautiful dna" أو "تغيير الحمض النووي أمر ممتع!" يمكنك إضافة تيلدا أو "متعرج" ، كما أحب أن أسميها ، أمام علامة التساوي.

 div[title~="dna"]

يمكنك تحديد عناوين مثل "dontblamemeblamemydna" أو "his-stupidity-is-from-upinging-not-dna" ثم يمكنك استخدام علامة الدولار $ لمطابقة نهاية العنوان.

 [title$="dna"]

لمطابقة مقدمة قيمة سمة مثل عناوين "dnamutants" أو "dna-splicing-for-all" استخدم علامة الإقحام.

 [title^="dna"]

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

 [title|="gene"]

أخيرًا ، هناك عامل تشغيل سمة بحث كامل يتطابق مع أي سلسلة فرعية.

 [title*="dna"]

لكن استخدمها بحكمة حيث أن ما ورد أعلاه سوف يتطابق مع "أنا - مثل - بلدي - مثل - لحمي - نادر" وكذلك "إيدنا" و "الاختطاف" و "إيكيدنا" (شيء لا ينبغي لإدنا فعله حقًا. )

ما يجعل محددات السمات أكثر قوة هو أنها قابلة للتكديس - مما يسمح لك بتحديد عناصر ذات عوامل مطابقة متعددة.

لكنك تحتاج إلى العثور a علامة لها عنوان ولها فئة تنتهي بـ "الجينات"؟ إليك الطريقة:

 a[title][class$="genes"]

لا يمكنك فقط تحديد سمات عنصر HTML ، بل يمكنك أيضًا طباعة جيناتها المحورة باستخدام "العلم" الزائف (بمعنى العناصر الزائفة وإعلان المحتوى).

 <span class="joke" title="Gene Editing!">What's the first thing a biotech journalist does after finishing the first draft of an article?</span>

 .joke:hover:after { content: "Answer:" attr(title); display: block; }

سيُظهر الكود أعلاه الإجابة على واحدة من أسوأ النكات التي تمت كتابتها على الإطلاق (نعم ، لقد كتبتها بنفسي ، ونعم ، وصفها بأنها "مزحة" يتم اعتبارها سخية).

آخر شيء يجب معرفته هو أنه يمكنك إضافة علامة لجعل عمليات بحث السمة غير حساسة لحالة الأحرف. تضيف i قبل قوس الإغلاق المربّع.

 [title*="DNA" i]

وبالتالي فإنه يتطابق مع "dna" و "DNA" و "dnA" وأي اختلاف آخر.

الجانب السلبي الوحيد لذلك هو i فقط في Firefox و Chrome و Safari و Opera وعدد قليل من متصفحات الجوال.

الآن بعد أن رأينا كيفية التحديد باستخدام محددات السمات ، فلنلقِ نظرة على بعض حالات الاستخدام. لقد قسمتهم إلى فئتين: الاستخدامات العامة والتشخيصات .

الاستخدامات العامة

النمط حسب نوع الإدخال

يمكنك نمط أنواع الإدخال بشكل مختلف ، على سبيل المثال البريد الإلكتروني مقابل الهاتف.

 input[type="email"] { color: papayawhip; } input[type="tel"] { color: thistle; }

عرض روابط الهاتف

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

 span.phone { display: none; } a[href^="tel"] { display: block; }

الروابط الداخلية في مقابل الروابط الخارجية ، آمنة مقابل غير آمنة

يمكنك التعامل مع الروابط الداخلية والخارجية بشكل مختلف وتصميم الروابط الآمنة بشكل مختلف عن الروابط غير الآمنة.

 a[href^="http"]{ color: bisque; } a:not([href^="http"]) { color: darksalmon; } a[href^="https://"]:after { content: url(unlock-icon.svg); } a[href^="https://"]:after { content: url(lock-icon.svg); }

تحميل الأيقونات

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

 a[download]:after { content: url(download-arrow.svg); }

يمكنك أيضًا توصيل أنواع الملفات بأيقونات مختلفة مثل PDF مقابل DOCX مقابل ODF وما إلى ذلك.

 a[href$="pdf"]:after { content: url(pdf-icon.svg); } a[href$="docx"]:after { content: url(docx-icon.svg); } a[href$="odf"]:after { content: url(open-office-icon.svg); }

يمكنك أيضًا التأكد من أن هذه الرموز كانت فقط على روابط قابلة للتنزيل عن طريق تكديس محدد السمة.

 a[download][href$="pdf"]:after { content: url(pdf-icon.svg); }

تجاوز أو إعادة تطبيق رمز قديم / موقوف

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

 <div bgcolor="#000000" color="#FFFFFF">Old, holey genes</div> div[bgcolor="#000000"] { /*override*/ background-color: #222222 !important; } div[color="#FFFFFF"] { /*reapply*/ color: #FFFFFF; }

تجاوز الأنماط المضمنة المحددة

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

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

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

 <divTeenage Mutant Ninja Myrtle</div> div[style*="margin: 8px"] { margin: 1em !important; }

ملحوظة : يجب استخدام هذا الأسلوب بحذر شديد كما لو كنت بحاجة إلى تجاوز هذا النمط ، فسوف تقع في حرب !important وتموت القطط.

إظهار أنواع الملفات

قائمة الملفات المقبولة لإدخال ملف غير مرئية بشكل افتراضي. عادةً ما نستخدم عنصرًا زائفًا لفضحها ، وعلى الرغم من أنه لا يمكنك عمل عناصر زائفة في معظم علامات input (أو على الإطلاق في Firefox أو Edge) ، يمكنك استخدامها في مدخلات الملفات.

 <input type="file" accept="pdf,doc,docx"> [accept]:after { content: "Acceptable file types: " attr(accept); }

قائمة الأكورديون HTML

details غير المعلنة جيدًا وعلامة summary الثنائية هي طريقة لعمل قوائم قابلة للتوسيع / ​​أكورديون باستخدام HTML فقط. تلتف التفاصيل كلاً من علامة summary والمحتوى الذي تريد عرضه عندما يكون الأكورديون مفتوحًا. يؤدي النقر فوق الملخص إلى توسيع علامة detail وإضافة سمة مفتوحة. تسهل السمة open من تصميم علامة details مفتوحة بشكل مختلف عن علامة details مغلقة.

 <details> <summary>List of Genes</summary> Roddenberry Hackman Wilder Kelly Luen Yang Simmons </details>

 details[open] { background-color: hotpink; }

روابط الطباعة

أدى عرض عناوين URL في أنماط الطباعة إلى السير في هذا الطريق لفهم محددات السمات. يجب أن تعرف كيف تبنيها بنفسك الآن. يمكنك ببساطة a جميع العلامات التي تحتوي على href وإضافة عنصر زائف وطباعتها باستخدام attr() content .

 a[href]:after { content: " (" attr(href) ") "; }

تلميحات مخصصة

يعد إنشاء تلميحات أدوات مخصصة أمرًا ممتعًا وسهلاً باستخدام محددات السمات (حسنًا ، ممتع إذا كنت مهووسًا مثلي ، ولكن سهل في كلتا الحالتين).

ملاحظة : يجب أن يجعلك هذا الرمز في المنطقة المجاورة العامة ، ولكن قد تحتاج إلى بعض التعديلات على التباعد والحشو ونظام الألوان اعتمادًا على بيئة موقعك وما إذا كان لديك ذوق أفضل مني أم لا.

 [title] { position: relative; display: block; } [title]:hover:after { content: attr(title); color: hotpink; background-color: slateblue; display: block; padding: .225em .35em; position: absolute; right: -5px; bottom: -5px; }

مفاتيح الوصول

أحد الأشياء الرائعة في الويب هو أنه يوفر العديد من الخيارات المختلفة للوصول إلى المعلومات. إحدى السمات التي نادرًا ما يتم استخدامها هي القدرة على تعيين مفتاح accesskey بحيث يمكن الوصول إلى هذا العنصر مباشرة من خلال مجموعة مفاتيح والحرف الذي تم تعيينه بواسطة accesskey الوصول (تعتمد تركيبة المفاتيح الدقيقة على المتصفح). ولكن لا توجد طريقة سهلة لمعرفة المفاتيح التي تم تعيينها على موقع الويب.

سيظهر الكود التالي تلك المفاتيح على :focus . لا أستخدمه في hover لأن الأشخاص الذين يحتاجون إلى accesskey في معظم الأوقات هم أولئك الذين يواجهون مشكلة في استخدام الماوس. يمكنك إضافة ذلك كخيار ثانٍ ، ولكن تأكد من أنه ليس الخيار الوحيد.

 a[accesskey]:focus:after { content: " AccessKey: " attr(accesskey); }

التشخيص

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

صوت بدون ضوابط

لا أستخدم العلامة audio كثيرًا ، ولكن عندما أستخدمها ، غالبًا ما أنسى تضمين سمة controls . النتيجة: لا شيء معروض. إذا كنت تعمل في Firefox ، يمكن أن يساعدك هذا الرمز في اكتشاف ما إذا كان لديك عنصر صوتي مخفي أو إذا كانت البنية أو مشكلة أخرى تمنعه ​​من الظهور (إنه يعمل فقط في Firefox).

 audio:not([controls]) { width: 100px; height: 20px; background-color: chartreuse; display: block; }

لا يوجد نص بديل

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

ملاحظة : أنا أستخدم outline بدلاً من border لأن الحدود يمكن أن تضيف إلى عرض العنصر وتفسد التخطيط. لا يضيف outline عرضًا.

 img:not([alt]) { /* no alt attribute */ outline: 2em solid chartreuse; } img[alt=""] { /* alt attribute is blank */ outline: 2em solid cadetblue; }

ملفات جافا سكريبت غير متزامنة

يمكن أن تكون صفحات الويب عبارة عن تكتل من أنظمة إدارة المحتوى والمكونات الإضافية والأطر والرموز التي كتبها تيد (جالسًا ثلاث مقصورات) في إجازة لأن الموقع كان معطلاً وهو يخشى رئيسك في العمل. يمكن أن يساعدك اكتشاف ما يتم تحميل JavaScript بشكل غير متزامن وما لا يتم تحميله في التركيز على مكان تحسين أداء الصفحة.

 script[src]:not([async]) { display: block; width: 100%; height: 1em; background-color: red; } script:after { content: attr(src); }

عناصر أحداث جافا سكريبت

يمكنك أيضًا تمييز العناصر التي لها سمة حدث JavaScript لإعادة تشكيلها في ملف JavaScript الخاص بك. لقد ركزت على سمة OnMouseOver هنا ، لكنها تعمل مع أي من سمات حدث JavaScript.

 [OnMouseOver] { color: burlywood; } [OnMouseOver]:after { content: "JS: " attr(OnMouseOver); }

العناصر المخفية

إذا كنت بحاجة إلى معرفة مكان وجود العناصر المخفية أو المدخلات المخفية ، فيمكنك إظهارها باستخدام:

 [hidden], [type="hidden"] { display: block; }

ولكن مع كل هذه القدرات المذهلة تعتقد أنه لا بد من وجود مشكلة. بالتأكيد يجب أن تعمل محددات السمات فقط أثناء وضع علامة عليها في Chrome أو في الإنشاءات الليلية لـ Fiery Foxes على حافة Safari. هذا فقط جيد جدا ليكون صحيحا ولسوء الحظ ، هناك مشكلة.

إذا كنت ترغب في العمل مع محددات السمات في أكثر المتصفحات المحبوبة - أي ، IE6 - فلن تكون قادرًا على ذلك. (لا بأس ، دع الدموع تسقط. لا أحكام.) إلى حد كبير في كل مكان آخر يمكنك الذهاب إليه. تعد محددات السمات جزءًا من مواصفات CSS 2.1 ، وبالتالي فهي موجودة في المتصفحات منذ أكثر من عقد.

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