مرجع CSS فارسی
PSEUDO-CLASS
before::
before::
before:: یک شبه عنصر محتوایی است که توسط کامپایلر مرورگر تولید می شود. همچنین اولین فرزند انتزاعی هر المان است که قابلیت استایل دهی دارد. برای هر المان وجود دارد و اولین فرزند آن محسوب می شود.
محتوایی که با before:: ایجاد می شود، قبل از همه ی محتوا های دیگر داخل یک المان قرار خواهد گرفت. و به طور پیش فرض به صورت ” inline ” نمایش داده می شود . همچنین مقداری که به عنوان محتوا دریافت می کند، داخل خصوصیت ” Content ” مشخص می شود.
به عنوان مثال ،فرض کنید یک عبارت نقل قول متنی دارید.شما می توانید به پیش از متن خود با استفاده از before:: گیومه ایی اضافه کنید. گیومه ها نمایش داده می شنود اما داخل DOM قرار نمی گیرند.
<blockquote>
If you don’t like seeing pictures of violence towards animals being posted, you need to help stop the violence, not the pictures. ~ Johnny Depp
</blockquote>
تکه کد CSS زیر با استفاده از before:: گیومه ایی را به پیش از متن شما اضافه می کند. و به صورت ” inline ” در کنار متن نمایش داده می شود.
blockquote::before {
content: "\201C";
/* style the quote */
color: deepPink;
font-size: 3em;
position: relative;
top: 20px;
}
آیکون گیومه را داخل خصوصیت Content با استفاده از یونیکد ها اضافه کردیم . در واقع روش اضافه کردن آیکون ها در CSS با این نحو می باشد.
نتیجه ی تکه کد فوق :
See the Pen اضافه کردن گیومه به متن با ::before by alishooti (@alishooti) on CodePen.
با توجه به این موضوع که عناصر انتزاعی مانند after:: و before:: داخل کدهای HTML نوشته نمی شوند. در حالت عادی نمیتوان آن ها را با استفاده از ابزار dev tools مرورگر مشاهده کرد. به هر حال +chrome 32 و Firebug برای Firefox اجازه مشاهده ی المان های انتزاعی را داخل DOM می دهند . با استفاده از Dev tools مرورگر Chrome به نتیجه ایی که در تصویر زیر مشاهده می کنید رسیده ایم.
همچنین، تصویر فوق گویای این مطلب است که before:: به صورت ” inline ” بعد از متن داخل گیومه در حال نمایش است.
یک شبه عنصر می تواند انواع مختلفی از محتوا را نمایش دهد . مثل تصاویر (مثال فوق) ، متن ها و همچنین یونیکد ها ( ” \201C ” ) . مثال های زیر مقادیر صحیح قابل اجرا در before:: را نمایش می دهند.
.element::before {
content: url(path/to/image.png); /* an image, for example, an icon */
}
.element::before {
content: "Note: "; /* a string */
}
.element::before {
content: "\201C"; /* also counts as a string. Escaping the Unicode renders it as a character */
}
تصاویری که توسط شبه عناصر ها( عناصر انتزاعی pseudo-elements ها مثل before::) اضافه می شوند قابل تغییر اندازه نیستند. قبل از افزودن تصویر به یک شبه عنصر مانند before:: می بایست آن را به اندازه ی دلخواه تغییر دهید.
مقادیر before:: میتواند از نوع شمارنده ها (counter) و همچنین خالی باشند. شمارنده ها عموما به شکل تابع ()counter یا ()counters در لیست ها استفاده می شوند . شما می توانید اطلاعات بیشتری راجع به استفاده از شمارنده یا counter برای لیست ها در CSS کسب کنید.
شبه عناصر خالی همچنین می توانند برای از بین بردن حالت شناوری ( float ) استفاده شوند . برای مثال، از بین بردن float نوشته شده توسط Nicolas Gallagher از after:: و before:: برای از بین بردن حالت شناوری (clearfix) داخل المان هایی که از float استفاده شده را مطالعه کنید.
شبه عنصر before:: مثل تمام المان های دیگر قابل استایل دهی می باشد. خصوصیاتی همیچون ” float ” ، ” position ” و همینطور aniomation که البته این مورد در تمام مرورگرها قابل اجرا نیست که می بایست این مطلب را در انتهای همین مقاله بررسی کنید.
قابلیت استایل دهی به عناصر انتزاعی همچون سایر المان های یک صفحه باعث می شود که از آنها بیشتر برای اهداف طراحی استفاده شود. شبه عنصر before:: کاربرد فراوانی برای تولید اشکال هندسی با CSS دارد. کابرد مشهود این شبه عنصر در مثال زیر چشم گیر است. ستاره ی هشت پری رو با استفاده از یک المان و شبه عنصر before:: آن ایجاد کردیم. چهار پر اول رو با ساختن یک مربع ایجاد می کنیم و چهار پر دیگر را با استفاده از before:: همین المان.
/*
The element and its pseudo-element are both made translucent using the `opacity` property in order to better visualize how the two are positioned in the demo.
By removing the opacity values, you can see a fully opaque eight-point star
*/
.element {
width: 250px;
height: 250px;
background-color: #009966;
opacity: .8;
position: relative;
margin: 100px auto;
}
.element:before {
content: "";
position: absolute;
display: block;
width: 250px;
height: 250px;
background-color: #009966;
opacity: .8;
transform: rotateZ(45deg);
}
چون صرفا به منظور طراحی از before:: استفاده کردیم ، میتوانیم مقدار ” Content ” را خالی بگذاریم.
See the Pen ستاره با CSS by alishooti (@alishooti) on CodePen.
توجه داشته باشید که همین ستاره را با after:: نیز می توان ایجاد کرد.
تفاوت بین before: و before::
حتما راحت ترید که از یک “دو نقطه” به جای دو “دونقطه” استفاده کنید. در CSS1 و CSS2 برای شبه عناصر از یک”دونقطه” استفاده می شد(شبیه به کلاس های انتزاعی pseudo-classes مانند hover: ) . در CSS3 برای ایجاد تفاوت شبه عناصر از شبه کلاس ها ، از دو “دونقطه” برای شبه عناصر استفاد شد. تمام مرورگر هایی که ورژن قبلی را ساپورت میکنند ، ورژن جدید (before::) را نیز ساپورت می کنند(به جز حضرت Internet Explorer 8 😉 ).
در تمام دمو های استفاده شده در این بخش از before: استفاده کردیم برای پوشش دادن همه ی مرور گرها.
/* old CSS2 syntax */
.element:before {
/* content and styles here */
}
/* new CSS3 syntax */
.element::before {
/* content and styles here */
}
میزان دسترسی
محتوایی که توسط عناصر انتزاعی ایجاد می شوند ، داخل DOM نیستند( فقط قابل رویت هستند ). از این رو توسط Screen Reader ها (عموما برای افراد روشن دل) خوانایی ندارن . پس اکیدا توصیه میشود اطلاعات مهم (مثل متنی که برای فوتر در نظر گرفته شده است) را از طریق شبه عناصر ایجاد نکنید.
همانطور که اشاره شد برای اهداف طراحی استفاده می شوند . و نباید برای تکمیل یک جمله یا متن از آن استفاده شود . در غیر این صورت برای موتور های جست و جو ( SEO ) ادامه ی متن مورد نظر قابل فهم نیست.
و نکته ی مهم دیگر در این زمینه این است که با توجه به این که عناصر انتزاعی داخل DOM وجود خارجی ندارند، قابل استفاده با جاوا اسکریپت نیز نیستند.
موارد استفاده و مثال ها
عناصر انتزاعی ، همچنین before:: ، در بسیاری از موارد کاربرد دارند. در بخش زیر مثال هایی از این دست را معرفی خواهیم کرد.
دموی زیر مثال هایی از کاربرد before:: در CSS می باشد.
See the Pen VRdbXx by alishooti (@alishooti) on CodePen.
ساپورت مرورگر
before: با یک”دونقطه” در کروم ،فایرفاکس ،سافاری ،اپرا ،اینترنت اکسپلورر +8 و اندروید وآی او اس ، ساپورت می شود.
before:: با دو”دونقطه” در تمام مرورگر های فوق ساپورت می شود و از اینترنت اکسپلورر 9 به بالا.
انیمیت کردن شبه عناصر توسط کروم +26 ، فایرفاکس +4 ، سافاری +6.1 ، اپرا (post Blink) و اینترنت اکسپلورر +10 ساپورت می شوند.
یادداشت
اینترنت اکسپلورر z-index رو برای شبه عناصر ساپورت نمی کند.
استفاده از این متون آموزشی و کپی برداری از آن ها بلامانع می باشد. توجه شود که ذکر منبع به شدت روحیه دهنده است 😉 .
همچنین منتظر دیدگاه های شما هستیم.