نگاهی به Combinator ها در Css                    

بعد از مدت ها بلاخره فرصتی پیش اومد تا مجددا مقاله ای بنویسم. این بار قصد دارم با مقاله ای در خصوص CSS اما خارج از دنیای طراحی و ساخت آیتم های مختلف در خدمت شما باشم.

شاید تا به حال کمتر نام Combinator  ها را در CSS شنیده باشید، اما مطمئنا به وفور از برخی از آن ها استفاده کرده اید. در واقع همانطور که از نام Combinator بر می آید، تنها یک ترکیب کننده است، ترکیب کننده ی چند گزینشگر ساده مثل Tag Selector و یا Class Selector که به عنوان تعیین کننده ی ارتباط بین دو آن ها ایفای نقش می کند. به طور کلی Combinator ها به چهار گروه مختلف تقسیم می شوند که در ادامه به بررسی هر کدام خواهیم پرداخت.

Descendant Selector

از این نوع گزینشگر یکی از پر کاربرد ترین نوع گزینشگر هایی است که بدون شک از آن استفاده کرده اید، کد html زیر را در نظر بگیرید:

1 2 3 4 5 6 7 8 9

<ul>   <li>Item 1li>   <li>     <ol>       <li>Sub-item Ali>       <li>Sub-item Bli>     ol>   li> ul>

و فرض کنید استایل زیر را به li ها نسبت داده ایم:

1 2 3 4

ul li {       background-color: Red; }

همانطور که واضح است کلیه ی li ها به رنگ قرمز در می آیند. این نوع گزینشگر تمام عناصر مورد نظر را در هر عمقی، صرف نظر از عنصر والد آن ها تحت تاثیر قرار می دهد، به همین دلیل به آن Descendant (نوادگان) گفته می شود. در واقع در اینجا ترکیبی از دو Tag Selector را داریم که حد واسط آن ها کاراکتر Space قرار گرفته است. درسته! Space در اینجا یک Combinator محسوب می شود.

حال فرض کنید بخواهیم  تنها li های درون ul را انتخاب کنیم، بدیهی است که با Descendant Selector چنین کاری ممکن نیست، به این منظور لازم است از Child Selector استفاده کنیم.

Child Selector

Child Selector یا گزینشگر فرزندی امکان انتخاب فرزندان یک عنصر را در اختیار قرار می دهد، توجه داشته باشید که عناصر فرزند عناصری هستند که مستقیما داخل یک عنصر قرار دارند یا به عبارتی در عمق اول نسبت به عنصر والد خود قرار دارند. در مثال بالا Item 1 فرزند ul محسوب می شود، در حالی که Sub-item A، descendant عنصر ul به حساب می آید. با این تفاسیر برای انتخاب فرزندان از علامت > به عنوان Combinator استفاده می کنیم:

1 2 3 4

ul > li {       background-color: Red; }

Adjacent Sibling Selector

این نوع selector که شاید کاربردی کمتر از دو نوع قبل داشته باشد، برای انتخاب عنصر sibling (برادر) یک عنصر کاربرد دارد. در واقع sibling به دو عنصری گفته می شود که دارای parent های یکسان باشند و adjacent به معنی عنصری است که دقیقا بعدا از عنصر مورد نظر به عنوان sibling ظاهر می شود. برای درک بهتر مثال زیر را مشاهده بفرمایید:

1 2 3

<h2>Headingh2> <p>The selector above matches this paragraph.p> <p>The selector above does not match this paragraph.p>

1 2 3 4

h2 + p {       background-color: Red; }

دو تگ p به عنوان sibling های عنصر h2 شناخته می شوند، اما رنگ قرمز تنها به تگ p اول نسبت داده خواهد شد، به دلیل اینکه مستقیما پس از h2 قرار گرفته و به عبارتی adjacent محسوب می شود.

General Sibling Selector

این selector بر خلاف نوع قبل کلیه ی sibling های قرار گرفته پس از عنصر مورد نظر را تحت پوشش قرار می دهد و به همین دلیل از آن به عنوان General یاد می شود. Combinator مورد استفاده در این گزینشگر علامت ~ می باشد:

1 2 3 4

h2 ~ p {       background-color: Red; }

با توضیحات داده شده در قسمت قبل فکر نمی کنم نیاز به بیان جزئیات بیشتری باشد، تنها نکته ی قابل ذکر این است که 3 selector ای که پیش تر توضیح داده شد از گزینشگر های موجود در CSS 2.1 بودند در حالی که این گزینشگر در نسخه ی سوم به CSS اضافه شد.

---

طراحی و سازگاری قالب سایت ها با اینترنت اکسپلورر، به خصوص نسخه های 6 و 7 آن، همواره یکی از معضلاتی بوده است که طراحان وب با آن دست و پنجه نرم می کنند، البته ie9 را از این مورد مستثنی کنید، چون تا حد زیادی مشکلات ورژن های قبل در آن رفع شده است. به دلیل استفاده زیاد از نسخه های قبل همچون 6، 7 و 8 و عدم پشتیبانی این نسخه ها از css3، ابزار های متفاوتی برای پیاده سازی خصوصیات ورژن سوم css در ie طراحی شده اند. یکی از این ابزار ها که قصد معرفی آن را دارم، PIE نام دارد.

برای استفاده از این ابزار ابتدا آن را از اینجا دانلود کنید: PIE
یکی از فایل های موجود در بسته ی دانلود شده، فایلیست به نام PIE.htc که عمل رندر دستورات css3 را برای اینترنت اکسپلورر انجام می دهد. البته قابل ذکر است که تنها برخی از خصوصیاتی که کاربرد بیشتری دارند توسط pie پشتیبانی  می شوند، نه همه خصوصیات css3. خصوصیات پشتیبانی شده به صورت زیر می باشند:

• border-radius

• box-shadow

• border-image

• CSS3 Background

• Gradients

• RGBA Color Values

حال استفاده از برخی از خصوصیات را در قالب یک مثال ساده بیان می کنم.   فرض کنید خصوصیات زیر را به یک div نسبت داده ایم:

1 2 3 4 5 6 7 8

.elm {     border: 1px solid #000;     border-radius: 10px;     width: 200px;     height: 200px;     background-color: #fff; }

برای رندر کردن خصوصیت border-radius در ie تنها کافیست خط زیر را به خصوصیات بالا اضافه کنید:

1 2 3 4 5

.elm {     ...     behavior: url("PIE.htc"); }

خصوصیت behavior خصوصیتی است که تنها در اینترنت اکسپلورر شناخه می شود و توسط این خصوصیت فایل htc را به کلاس elm نسبت می دهیم(در واقع لازم است که این خط را برای تک تک selector های خود که در آن از دستورات css3 استفاده کرده اید بنویسید). با اختصاص این فایل به کلاس خود، pie دستورات css3 را parse و رندر می کند. توجه کنید که فایل PIE.htc را باید نسبت به صفحه ی html جاری آدرس دهی کنید، نه فایل css ضمیمه شده به صفحه.

 

در ادامه box-shadow را هم به خصوصیات موجود اضافه می کنیم:

1 2 3 4 5

.elm {     ...     box-shadow: 10px 10px 5px #acacac; }

pie از خصوصیت چند تصویر زمینه برای یک المان که در css3 به خصوصیت background اضافه شد نیز پشتیبانی می کند، اما چون این خصوصیت در نسخه css 2.1 نیز موجود می باشد، برای جلوگیری از تداخل با آن، از پیشوند –pie استفاده شده است. همچنین pie از شیب رنگ خطی یا همان  linear-gradient نیز پشیبانی به عمل آورده است:

1 2 3 4 5

.elm {     ...     -pie-background: url("up.png") no-repeat center center, linear-gradient(#eee, #ccc); }

همانطور که مشاده می کنید از یک تصویر به همراه gradient استفاده کردم.

بعد از اعمال موارد ذکر شده چیزی شبیه به تصویر زیر را در ie مشاهده خواهید کرد:

 

 

این اسکریپت از rbga نیز برای رنگ ها پشتیبانی می کند، البته نه در همه جا. توسط pie تنها در خصوصیت background و به جای قسمت background-color آن، و همچنین در box-shadow در صورتی که میزان blur صفر باشد می توان از rbga برای رنگ استفاده کرد. به مثال زیر دقت کنید:

1 2	box-shadow: 10px 10px 0 rgba(118,246,211,0.4); -pie-background: rgba(118,246,211,0.4) url("up.png") no-repeat center center;

و به عنوان آخرین نکته عرض کنم که pie مشکل رندر تصاویر png که در ie6  وجود دارد را نیز حل کرده است. در صورتی که استایل های نوشته شده توسط pie رندر شوند، اتوماتیک این مشکل حل خواهد شد، همانند تصویر png ای که در مثال ذکر شده به عنوان تصویر زمینه در نظر گرفتم، اما در مواردی که المان مورد نظر توسط pie رندر نمی شود، می توان از دستور –pie-png-fix استفاده کرد. به عنوان مثال کلاس زیر را در نظر بگیرید:

1 2 3 4 5

.test {     background: url("up.png") no-repeat left top;     border: 1px solid #000; }

خصوصیاتی که در کلاس test استفاده شده است، از خصوصیات شناخته شده برای pie نیست، بنابراین توسط pie رندر نمی شود و تصویر png ی استفاده شده به صورت صحیح نمایش نمیابد.  برای رفع این مشکل از دستور –pie-png-fix استفاده می کنیم:

1 2 3 4 5 6 7

.test {     background: url("up.png") no-repeat left top;     border: 1px solid #000;     -pie-png-fix: true;     behavior: url("PIE.htc"); }

خصوصیات دیگری نیز در pie همچون  -pie-watch-ancestors ، -pie-png-fix ، -pie-lazy-init ، -pie-poll وجود دارند که در این مقاله در مورد آن ها صحبتی نمی کنم. برای اطلاعات بیشتر به سایت اصلی آن مراجعه کنید.

                    CSS 3.0 را با اینترنت اکسپلورر تجربه کنید