ما هو الهدف في المغلق. حدث نقر CSS خالص بدون: الهدف. كيفية إنشاء ارتباط تشعبي في HTML باستخدام href

اليوم سوف نتحدث عن الوظائف الرئيسية ذات الصلة مع فئة زائفة : استهدافوكيف يمكنك استخدامه لإنشاء تأثيرات CSS نقية مذهلة ، وتعلم كيفية إنشاء عروض شرائح باستخدام css وغير ذلك الكثير.

ما هو الهدف؟

h1 (الخط: bold 30px / 1.5 "Helvetica Neue"، Arial، Helvetica، Geneva، sans-serif؛) h1: target (font-size: 50px؛ text-decoration: underline؛ color: # 37aee4؛)

أضف الرسوم المتحركة

دعنا نزيد من تأثيرنا ونضيف بعض الرسوم المتحركة ، مثل انتقال صغير لطيف لتغيير اللون. انظر كيف يعمل.

h1 (الخط: غامق 30 بكسل / 1.5 "Helvetica Neue"، Arial، Helvetica، Geneva، sans-serif؛ -webkit-transfer: color 0.5s easy؛ -moz-transfer: color 0.5s easy؛ -o-transfer: color 0.5 سهولة s ؛ - مللي ثانية: انتقال اللون 0.5 ثانية ؛ الانتقال: اللون 0.5 ثانية ؛) h1: الهدف (حجم الخط: 50 بكسل ؛ زخرفة النص: تسطير ؛ اللون: # 37aee4 ؛)

إدارة الكائن غير الهدف

لنفترض أننا نريد تغيير أنماط الفقرة التي تلي العنوان المحدد.

من السهل جدًا القيام بذلك باستخدام الكود التالي. انظر العرض.

h1: الهدف + p (الخلفية: # f7f7f7 ؛ الحشو: 10 بكسل ؛)

إنشاء عرض شرائح بسيط باستخدام CSS

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

لنقم بإنشاء قائمة غير مرتبة. سيحتوي كل عنصر في القائمة على علامة ربط تشير إلى معرف القصاصة وصورة بالمعرف المقابل.

واحد

اثنين

ثلاثة

أربعة

خمسة

الآن دعنا نضيف أنماطنا:

* (margin: 0px؛ padding: 0px؛) #slideshow (margin: 50px auto؛ position: dynamic؛ width: 400px؛) ul (list-style: none؛) li (float: left؛ overflow: hidden؛ margin: 0 20px 0 0 ؛) li a (اللون: # 222 ؛ زخرفة النص: لا شيء ؛ الخط: 15 بكسل / 1 Helvetica ، sans-serif ؛ -webkit-transfer: color 0.5s easy؛ -moz-transfer: color 0.5s easy؛ -o-transfer: color 0.5s easy؛ -ms-transfer: color 0.5s easy؛ الانتقال: color 0.5s easy؛) li a: hover (color: # 50b0df؛) li img (الوضع: مطلق ؛ أعلى: 50 بكسل ؛ اليسار: 0 ؛ z-index: -1 ؛ -webkit-transfer: العتامة 1s سهولة في الخروج ؛ -moz-transfer: العتامة 1s سهولة في الخروج ؛ -o-Transition: العتامة 1s سهولة في الخروج ؛ -ms-transfer: opacity 1s easy-in-out ؛ الانتقال: opacity 1s easy-in-out ؛) li img: target (z-index: 1 ؛) li img: not (: target) (عتامة: 0 ؛)

أولا دعونا نضيف تعويم: اليساركل عناصر قائمتنا. استخدمنا تحديد المواقع المطلق والنسبي للعناصر.

بعد ذلك ، قم بتثبيت الفهرس z: -1لجميع الصور ثم قم بتعيينها الفهرس z: 1للصور المستهدفة. سيؤدي هذا إلى تغيير الصورة عند النقر فوق عنصر القائمة. لجعل الانتقال أكثر سلاسة ، سنقوم بتعيين قيمة التعتيم للصور الأخرى. 0 .

شاهد عرض شرائح CSS نقي.

التوافق عبر المستعرضات

فئة زائفة : استهدافهو محدد CSS من المستوى 3 ، مما يعني أنه مدعوم في كل متصفح تقريبًا باستثناء (لن تخمن) ... IE. يدعم الحمار القديم الجيد محددات CSS3 فقط في الإصدارين 9 و 10.

كما هو الحال مع أي مشكلة في عرض محدد CSS3 في IE ، من السهل إصلاح ذلك باستخدام Selectivizr.

بفضل هذا البرنامج المساعد وسحر الفودو ، سيتم دعم محددات CSS3 المطلوبة حتى في IE6.

استنتاج

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

: استهدافهو مثال جيد. فقط تأكد من عدم المبالغة في الأنماط.

حالة استخدام أخرى مثيرة للاهتمام : استهداف

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

بناء الجملة

...

السمة المطلوبة

القيم

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

فارغ يقوم بتحميل الصفحة في نافذة متصفح جديدة. _self يقوم بتحميل الصفحة في النافذة الحالية. _parent يقوم بتحميل الصفحة إلى الإطار الأصلي ، إذا لم تكن هناك إطارات ، فإن هذه القيمة تعمل مثل _self. _top يلغي كل الإطارات ويحمل الصفحة في نافذة متصفح كاملة ، إذا لم تكن هناك إطارات ، فستعمل هذه القيمة مثل _self.

القيمة الافتراضية

تصديق

يتم إهمال استخدام هذه السمة من خلال مواصفات HTML ؛ ولا يتم الحصول على التعليمات البرمجية الصالحة إلا باستخدام عنصر مؤقت .

HTML5 IE Cr Op Sa Fx

علامة ، سمة الهدف

افتح في نافذة جديدة

فئة: target pseudo class هي إحدى ميزات CSS3 الرائعة. إنه يطابق العنصر المشار إليه بواسطة المعرف في المستند URI.

يحتوي المعرف في URI على حرف "#" متبوعًا باسم المعرف الذي يطابق قيمة السمة هوية شخصيةعنصر في المستند.

الدعم

نظرًا لأننا نتحدث عن CSS3 ، فإن الفئة الزائفة مدعومة من قبل جميع المتصفحات الحديثة باستثناء IE 6 إلى 8. لا ينبغي أن يمنعك الإحباط المعتاد من اتخاذ قرار باستخدام: target. يدعم IE9 بالفعل: الفئة الزائفة الهدف.

كيف يمكنني استخدام: الهدف؟

يمكن أن يكون لهذه الفئة الزائفة أسلوبها الخاص ، تمامًا مثل الفصول الزائفة. : يحوم, : نشيطأو : التركيزللروابط. وكذلك الفصول الزائفة المذكورة أعلاه : استهدافالمستخدمة في إجراءات معينة مع الموقع. خاصة عند استخدام معرف جزء مثل هذا: http://example.com/index.html#lorem-ipsum.

برهنة

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

ترميز HTML

يوجد أدناه مثال من العرض التوضيحي. لدينا 4 روابط ونفس عدد الكتل. كل مجموعة لها معرفها الفريد.

كتلة 1
القالب 2
القالب 3
القالب 4

Lorem ipsum dolor sit amet، consectetur adipiscing elit. Donec tempus ، felis في varius eleifend ، neque orci porta magna ، التالي aliquam ligula velit quis erat. Aenean porttitor pellentesque risus ، eu tincidunt ipsum blandit in.

Sed lobortis placerat elit tincidunt tempor. نام كريمينسيم euismod quam nec tempor. سيد تورتور لوريم ، ألتريتيسز موصل نيك ، موصل أوت نيكي. Aenean varius ، urna eget adipiscing feugiat ، nunc ligula molestie massa ، id accumsan turpis metus ac ante. Cum sociis natoque penatibus et magnis dis parturient montes، nascetur ridiculus mus.

Pellentesque quis Tortor vitae elit cursus vulputate et vel dui. Nunc Commodo premium arcu in ultricies. Nunc velit enim، et tincidunt leo. فئة ملائمة taciti sociosqu ad litora torquent لكل conubia nostra ، per inceptos himenaeos.

Quisque eget tempor sapien. Cras convallis tim orci pulvinar scelerisque. Nullam et erat eu nibh sollicitudin congue sit amet id Diam. Sed in lectus ut augue euismod porta. Quisque non lacus odio. Nunc ornare adipiscing egestas.

CSS

يتيح لك رمز CSS التالي تحقيق التأثير المطلوب ، والذي يتم من خلاله تحديد الكتلة ذات المعرف المقابل (يظهر ظل حول المستطيل).

/ * أضف بعض المساحة * / ul ، div (margin-bottom: 10px ؛) / * نمط الكتلة الافتراضي * / div (الحشو: 10 بكسل ؛ الحد: 1 بكسل صلب #eaea ؛ -moz-border-radius: 5px ؛ الحدود- نصف القطر : 5px؛) / * غيّر عرض الإخراج إذا كان يطابق * / div: target (border-color: # 9c9c9c؛ -moz-box-shadow: 0 0 4px # 9c9c9c؛ -webkit-box-shadow: 0 0 4px # 9c9c9c ؛ مربع الظل: 0 0 4px # 9c9c9c ؛)

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

هل هناك طريقة للتعامل مع أحداث النقر في CSS بدون استخدام JavaScript. يمكنك استخدام الطريقة مع : استهداف... ولكن ماذا لو كان لا يمكن استخدامها؟ هناك طريقة أخرى.

شاهد العرض التوضيحي. تم إجراؤه بالكامل في CSS ، وليس سطرًا واحدًا من JavaScript. يعتمد على الاستخدام الأصلي لمحددي: active و: hover.

وصف

أولاً ، تحتاج إلى إنشاء حاوية تحتوي على الزر والكتل التي يتم عرضها بالنقر بالماوس. ستكون بنية الترميز مثل هذا:

أبجد هوز دولور الجلوس امات.

Consectetur adipiscing النخبة.

زر

تحتاج إلى جعل المحتوى غير مرئي حتى يتم الضغط على زر الماوس على الغلاف. لحل المشكلة ، اضبط العرض: لا شيء خاصية لـ .content. ثم عند النقر فوق .wrapper ، سنقوم بتمكين خاصية display: block لـ .content. للقيام بذلك ، قم بتعيين العرض: خاصية الحظر لـ .wrapper: active .content. في هذه الحالة ، سيكون المحتوى مرئيًا فقط عند الضغط على زر الماوس. إذا تركته ، يختفي المحتوى مرة أخرى. للإصلاح ، سنقوم بإجراء ذلك بحيث عندما ينتهي مؤشر الماوس .content ، يتم تعيين خاصية display: block إلى العنصر. وهذا يعني أننا قمنا بتعيين خاصية العرض: block لـ .content: hover. سيبدو كود CSS بالشكل التالي:

المحتوى (عرض: لا شيء ؛). الغلاف: نشط .content (عرض: كتلة ؛) .content: hover (display: block؛)

يبقى فقط "تمشيط" المظهر وإعطائه الوضوح:

الغلاف (الموضع: نسبي ؛). الزر (الخلفية: أصفر ؛ الارتفاع: 20 بكسل ؛ العرض: 150 بكسل ؛). المحتوى (الموضع: مطلق ؛ الحشو العلوي: 20 بكسل ؛). المحتوى لي (الخلفية: أحمر ؛)

سيكون لنص الزر في الكود أعلاه خلفية صفراء ، وستكون للمعلومات المعروضة عند الضغط على زر الماوس خلفية حمراء.

الفئة الزائفة الهدف: تحدد العنصر في المستند المشار إليه بجزء عنوان URL. على سبيل المثال ، هذا الجزء من النص ملفوف بعنصر مع ID # target-test. إذا اتبعت الرابط ، يصبح هذا العنصر هو الهدف وستصبح أنماط الفئة الزائفة الهدف سارية المفعول.

في العام الماضي ، كتبت عن: الفئة الزائفة المستهدفة في 5 محددات CSS غير مستغلة (وتطبيقاتها). كان المثال الأول يستخدم: target pseudo-class لتمييز قسم الصفحة التي تم التنقل إليها. يمكن أن يكون هذا ، على سبيل المثال ، إضافة لون الخلفية أو الحدود ، كما في المثال مع.

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

المثال الأول: إخفاء المحتوى وإظهاره

مثال بسيط على استخدام الفئة الزائفة الهدف هو إخفاء وإظهار المحتوى الذي نستهدفه. في المدونة ، يمكننا بالتالي إظهار قسم بالتعليقات بعد نقر المستخدم. يتم ذلك ببساطة عن طريق إخفاء العنصر حتى يتطابق مع: target.

إظهار التعليقات # التعليقات: not (: target) (display: none؛) #comments: target (display: block؛)

المثال رقم 2: التنقل للخارج

المثال التالي هو إنشاء شريط تنقل منزلق للخارج. نضع شريط التنقل في شكل ثابت بالنسبة إلى النطاق لضمان عدم وجود قفزة بعد نقر المستخدم.

#nav (موضع: ثابت ؛ أعلى: 0 ؛ ارتفاع: 100٪ ؛ عرض: 80٪ ؛ أقصى عرض: 400 بكسل ؛) # nav: not (: target) (right: -100٪؛ transfer: right 1.5s؛) #nav: الهدف (يمين: 0 ؛ الانتقال: حق 1s ؛)

المثال رقم 3: المنبثقة مشروطة

بأخذ هذه الفكرة إلى أبعد من ذلك ، يمكننا إنشاء نموذج يملأ الصفحة بأكملها.

# حاوية نمطية (الموضع: ثابت ؛ أعلى: 0 ؛ يسار: 0 ؛ عرض: 100٪ ؛ ارتفاع: 100٪ ؛ الخلفية: rgba (0،0،0،0.8) ؛ العرض: فليكس ؛ justify-content: center ؛ محاذاة العناصر: المركز ؛). النموذج (العرض: 70٪ ؛ الخلفية: #fff ؛ الحشو: 20 بكسل ؛ محاذاة النص: المركز ؛) # حاوية الوسائط: لا (: الهدف) (العتامة: 0 ؛ الرؤية: مخفية ؛ الانتقال: عتامة 1 ثانية ، رؤية 1 ثانية ؛) # حاوية نمطية: الهدف (عتامة: 1 ؛ الرؤية: مرئية ؛ الانتقال: عتامة 1 ثانية ، رؤية 1 ثانية ؛)

المثال الرابع: تغيير الأنماط العامة

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

#body: not (: target) (main (width: 60٪؛) جانبًا (width: 30٪؛) .show-sidebar-link (display: none؛)) #body: target (main (width: 100٪؛ ) جانبًا (عرض: لا شيء ؛) رابط إخفاء الشريط الجانبي (عرض: لا شيء ؛))

ماذا عن الدلالات وإمكانية الوصول؟

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

بقدر ما أستطيع أن أقول ، فإن هذه الطريقة لها عيبان محتملان:

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

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