خانه / مقالات اموزشی / css / شبه عناصر before و after در CSS

شبه عناصر before و after در CSS

before یک محتوای element تولید شده است که نشانگر اولین child یک abstract styleable در element مربوطه است.
محتوای وارد شده با استفاده از ::before قبل از محتوای دیگری در element وارد میشود و بطور default بصورت درون خطی نشان داده میشود. ارزش محتوا با استفاده از content property تعیین میشود.
برای مثال، فرض کنید که شما یکblockquote با چند متن دارید. شما میتوانید با استفاده از ::before چند علامت چنگک (علامت نقل قول) را قبل از متن اصلی وارد کنید. چنگک ها بر روی صفحه نشان داده خواهند شد ولی داخل DOM به blockquote اضافه نخواهند شد.

css
css

کد زیر چند علامت چنگک را به blockquote اضافه میکنند با استفاده از ::before . علامات چکیده در داخل blockquote اضافه خواهند شد، قبل از متن نقل قول و بصورت درون خطی با ان است.

css
css

نقل قول در داخل content property معرفی میشود با گریختن از Unicode value وی. بدین صورت glyphها معمولا نشان داده و اضافه میشوند با استفاده از CSS.
نتیجه ی کد بالا بصورت ذیل است:

css
css

چون محتوایی که با استفاده از pseudo-element وارد میشود در داخل DOM وارد نمیشود، این بطور عادی ممکن نخواهد بود که با استفاده از dev tool یک مرورگر محتوای وارد شده را مشاهده و بازرسی کرد.
اگرچه Chrome 32+ یا Firebug و Firefox اجازه مشاهده موقعیت pseudo-elementها در DOM را میدهند، و با انتخابش سبکهای مربوط با وی را در CSS panel مشاهده کنید. بازرسی demo بالایی در dev tool مربوط به Chrome نتایج ذیل را نشان میدهد.

css
css
Demo بالا این را نیز نشان میدهد که محتوای اضافه شده با ::before بحالت درون خطی با بقیه محتوا و قبل از انها در درون blockquote واقع شده است.
زیرا که محتوای ::before قبل از محتوای دیگر در داخل element وارد شده است، این بدین معنا نیز است که pseudo-element زیر بقیه elementها انباشته میشود که بعدا در source tree می آیند.
یک pseudo-element میتواند برای وارد نمودن تقریبا هر نوع محتوا به کار برده شود. اینها شامل characterها، stringهایی از متن و image میشود. مثلا بیانهای ::before که در ذیل امده اند صحیح اند با محتوای صحیح.
css
css

تصاویری که با استفاده از pseudo-element وارد میشوند را نمیتوان تغییر اندازه داد. آنها بصورتی که هستند وارد میشوند و شما باید از قبل اندازه تصویر را درست کنید.
Snippet ذیل پاراگرافهایی از متن را با استفاده از class .note به سبک در می آورد. با استفاده از pseudo-element, هر یک از این پاراگرفها string “Note:” در آنها وارد خواهد شد. تمامی کاری که شما باید انجام دهید این است که یک پاراگرافی از متن بدهید که note بحساب آید و .note class و با استفاده از CSS اون پاراگراف بطور اتوماتیک یک پیشوند “Note: ” بهش اضافه خواهد شد.

css
css

شما میتوانید demo زنده برای این مثال را در قسمت live demo زیر مشاهده کنید.
محتوای ::before میتواند counter باشد. یک counter بشکل function counter() یا counters() می اید و برای سبک دادن به لیستها استفاده میشود. شما میتوانید در مورد سبک دادن به لیستها با استفاده از counters در این مقاله اقای Roger Johansson بخوانید.
محتوای ::before را میتوان خالی رها کرد. Pseudo-elementهای خالی بدرد صاف کردن floatها در یک element میخورند. مثلا micro clearfix hack آقای Nicholas Gallagher از ::before و ::after برای صاف کردن float در داخل ظرفهای float استفاده میکند. شما میتوانید درباره صاف کردن floatها و چگونگی کار hack در قسمت float entry بیشتر بخوانید.
Pseudo-element ::before را میتوان مثل بقیه محتواها سبک داد. آن را میتوان float کرد، position کرد و حتی animate کرد. (َAnimate کردن pseudo-elements در تمامی مرورگرها ممکن نیست. ببینید قسمت browser support زیر را برای اطلاعات بیشتر).
توانایی سبک دادن به pseudo-elements جوری که انگار elementهای واقعی روی صحفه هستند باعث شده که انها را بیشتر برای استفادهای آرائشی بکار برند. Pseudo-elementها بطور عمده برای ایجاد کردن اندامهای هندسی در CSS بکار میروند. نمایش ان را در demo زیر میتوانید مشاهده کنید. یک ستاره هشت نقطه ای را میتوان ایجاد کرد با استفاده از یک element و pseudo-element وی. چهار نقطه ی اول را از خود element که بشکل یک مربع در امده میتوان ایجاد کرد. بعدا pseudo-element ان element را سبک میدهیم تا همان ارتفاع و عرض parent خود را، او را کاملا بالای parent موقعیت داده ایم و سپس ۴۵ درجه چرخاندیم، تا یک ستاره هشت نقطه ای بدست آوریم.

css
css
چون آن pseudo-element فقط بطور یک element ارایشی بکار میرود، میتوان محتوایش را خالی نگه داشت.
css
css
این demo را میتوان با استفاده از ::after به همین شکل ایجاد کرد.
یادداشتها:
نمادهای مختلف: (:) و (::)
به احتمال زیاد شما با نماد :before مواجه شده اید که بجای دو colon از یک colon استفاده میکند.
در CSS1 و CSS2، pseudo-elementهایی متعارف شده بودند که با یک colon شروع میشدند، کاملا مثل pseudo-classes (مثلا :hover) . در CSS3، نماد colon دوتایی متعارف شد برای pseudo-elements تا بتوان انها را از pseudo-classes فرق نمود.
css
css

تمام مرورگرهایی که نماد دو colon را پشتیبانی میکنند نماد یک colon را نیز پشتیبانی میکنند. گرچه Internet Explorer 8 نماد دو colon را پشتیبانی نمیکند. پس مگر اینکه بخواهید Internet Explorer 8 را پشتیبانی کنید، شما میتوانید از نماد دو colon استفاده کنید بدون نگرانی از پشتیبانی مرورگرتان.
در تمامی demoها در این فقره، syntax یک colon استفاده شده تا پشتیبانی مرورگر عریضتری برای خوانندگانی که در حال مشاهده demoها در IE8 هستند میسر سازد.
امکان دسترسی:
محتوایی که از طریق pseudo-elementها اضافه میشوند در DOM وارد نمی شود- انها فقط بطور دیدنی نمایش داده میشوند. پس screen-readerها قادر به خواندن و دسترسی یافتن به محتوای ایجاد شده با استفاده از pseudo-elementها نیستند. پس این توصیه میشود که شما از وارد نمودن محتوای مهم در صفحه با استفاده از pseudo-elementها پرهیز کنید (مثل یادداشتهای footer که در مقالات زیاد بکار میروند).
Pseudo-elementها بیشتر برای وارد نمودن و سبک دادن به محتواهای ارایشی بکار میروند، و نباید به انها تکیه کرد برای وارد نمودن محتوایی که مربوط به معنی و تمامیت محتوا بر روی صفحه است.
همچین، چون محتوای وارد شده با استفاده از pseudo-elementها وارد DOM نمی شوند، این بدین معناست که شما نمیتوانید هر event handler را به ان ضمیمه کنید با استفاده از Javascript.
مثالها:
Pseudo-elementهایی بشمول ::before را میتوان بکار برد برای خیلی از کارها و ایجاد کردن effectهای زیادی.
بعلاوه ی مثالهای بالایی، مقاله های ذیل مثالهای زیادی دارند که از حالتهای مختلف برای pseudo-elementها استفاده میکنند که ما پیشنهاد میدهید که با دقت انها را مشاهده کنید.
Demo زنده:
Demo زیرا را مشاهده کنید:

css
css

پشتیبانی مرورگر:
نماد یک colonی در مرورگرهایی مثل Chrome، Safari، Firefox، Opera، Internet Explorer 8+ و بر Android و IOS پشتیبانی میشود.
نماد دو colonی در تمامی مرورگرهای بالای پشتیبانی میشود ولی در Internet Explorer در نسخه های بالای ۹ پشتیبانی میشود.
انیمیشن کردن pseudo-elementها در تمامی نسخه های جدید مرورگرهای مدرن پشتیبانی میشود. Chrome
تغییرات CSS را بر محتوای ایجاد شده از ۲۶ به بالا را پشتیبانی میکند. Safari 6 به پایین تغییرات و انیمیشن های بر pseudo-elementها را پشتیبانی نمیکند.
یادداشتها:
Internet Explorer استفاده از z-index را بر pseudo-elementها پشتیبانی نمیکند.

اموزش طراحی سایت

آموزش طراحی سایت

اموزش طراحی وب سایت

آموزش طراحی سایت

درباره آموزشگاه نوین آی تی

همچنین ببینید

محاسبه وزن خود در دیگر سیارات با لستفاده از operator های جاوا

سناریویی که در این جلسه قرار است بر آن اساس یک برنامه بنویسیم به این ...

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

علی طاهری آموزشگاه طراحی سایت نوین آی تی 021-88283800 info(@)novin-it.net