تیم برنامه نویسی و طراحی کلوپ

با سلام!

این آموزش به کلوپ پشتیبانی Phpfox تعلق دارد.

حتما میدانید که کدهای CSS توسط مرورگرها شناسائی و اجرا میشوند، و اگر احیانا شما صفحه و یا قالبی طراحی کرده باشید که از CSS های جدید استفاده کنید، و کاربران شما از مرورگر قدیمی استفاده کنند، این یعنی تمام زحمات شما بر باد رفته است.

پس چه باید کرد؟ چگونه صفحه و یا قالبی با ویژگی ها و تکنولوژی های جدید طراحی کنیم که خود کد، مرورگر کاربر را شناسائی کرده و نسبت به ورژن مرورگر کدی را اجرا کند؟

ما در زبان های برنامه نویسی خیلی راحت هستیم، می توانیم برای یک عمل شرطی قرار دهیم، مثلا در زبان PHP داریم:

if ($x) {
	...
}

این دستور به موتور PHP میفهماند که اگر شرط: $x برقرار بود، بقیه مراحل که کدها را جایگزین ... نکته می کنیم، انجام بده، و این کار ما را راحتتر می کند.

خوب، ما می توانیم با PHP صحبت کنیم. ولی CSS چطور؟

PHP چون یک زبان برنامه نویسی سرور ساید هست، یعنی کدها در سرور اجرا میشوند، و جای دیگر نمی توانند اجرا شوند، پس با استفاده از جاوا اسکریپت، اینکار ممکن میباشد:

if ("backgroundColor" in document.body.style) {
    document.body.style.backgroundColor = "red";
}

ما با استفاده از کد جاوا اسکریپت می توانیم بررسی کنیم که یک ویژگی از CSS توسط مرورگر پشتیبانی میشود یا نه؟

ولی این هم به دانش برنامه نویسی، و نوشتن کدهای زیاد نیاز دارد.

با گذشت زمان، و بوجود آمدن تکنولوژی های جدید، و آپدیت مرورگرها، کدهای CSS هم تبدیل به یک باهوش تر میشوند که می توانند، خودشان بدون نیاز به زبان برنامه نویسی ثالث، خودشان را اجرا کنند و یا اجرا نکنند.

جالبه نه؟

تازه، با استفاده از خود CSS اصلا و ابدا نیاز به نوشتن کدهای زیاد ندارید و تنها با یک کلمه از دستور می توانید ویژگی ها را بررسی کنید و یا اینکه قالب خود را بصورتی طراحی کنید که کدهای شما اگر کاربر شما از مرورگرهای ورژن جدید استفاده میشوند، اجرا شوند و اگر مرورگر کاربر شما قدیمی بود، کد دیگری اجرا شود. به این دستور ساده CSS و خیلی آسان توجه کنید:

div {
	color: red;
}

این یک کد خیلی ساده CSS میباشد، یعنی فونت های div به رنگ قرمز نمایش داده شوند. ولی طبق توضیحات بالا باید اول بدانیم که مرورگر کاربر ویژگی color با مقدار red را پشتیبانی می کند یا نه؟ طبق توضیحات بالا، با استفاده از جاوا اسکریپت، نیاز به نوشتن کدهای زیادی داریم، و همچنین باید دانش برنامه نویسی داشته باشیم، ولی، یک نکته جالب و خنده دار بگم، که با استفاده از کدهای CSS اصلا نیازی به جاوا اسکریپت ندارید، برای مثال، کافیست، همان کد CSS بالا را داخل دستور: @supports قرار دهیم:

مثال:

@supports (color: red) {
	div { color: red; }
}

این یک شرط است:

@supports (color: red)

یعنی اگر مرورگر کاربر، ویژگی color با مقدار red را پشتیبانی می کند، دستور را اجرا کن.

مثالی دیگر:

@supports (display: flex) {
  .element {
      display: flex;
  }
}

در اینجا نیز باز، دستور CSS رو می بینیم که میگه اگر ویژگی display با مقدار flex توسط مرورگر کاربر پشتیبانی میشود، کلاس element را اجرا کن.

توجه: شما می توانید داخل supports کدهای زیادی را قرار دهید، مثل:

@supports (...) {
  .element {
      ...
  }
  .christ {
	...
  }
  .amir {
	...
  }
}

یعنی تنها با استفاده از دستور support می توانید کلی ویژگی را بررسی کنید.

حال به دستور پائین نگاه کنید:

@supports not (mix-blend-mode: overlay) {

  .example {
    opacity: .5;
  }

}

خوب، ما اینجا یک not و دستور جدیدی را می بینیم. این چیه؟

not یک کلمه کلیدی است که می توانید برای دستورات خود بکار ببرید. یعنی میگه که اگر این ویژگی در مرورگر کاربر پشتیبانی نمیشود، بجای آن، این یکی دستور را بکار ببر.

همچنین شما می توانید چند ویژگی را با استفاده از and و یا or یکجا بررسی کنید.

مثال and:

/* 'and' operator on @supports rule */
@supports ((border-width: 3px) and (border-color: green) and (border-style: solid)) {
    div { border-width:3px; border-color: green; border-style: solid; }
}

مثال or:

/* 'or' operator on @supports rule */
@supports ((width: 400px) or (height: 40px)) {
    div { width: 400px; height: 40px; }
}

مثال هر دو or و and:

/* 'and' and 'or' operator together */
@supports ((margin-left: 0px) or (float:left)) and (background-color: yellow) {
    div { background-color: yellow; margin-left: 0px; float: left; }
}

تفاوت or و یا and در چیست؟

اگر برنامه نویسی بلد باشید، اگر بخواهید دو شرط را همزمان استفاده کنید، ولی اگر یکی از شرط ها، هم درست بود، فرقی نمی کند، دستور شما اجرا شود، که برای این از OR استفاده می کنند، و یا برای اینکه اگر بخواهید موقعی دستورات شما اجرا شود که هر دو شرط نتیجه درست باشند، باید حتما از AND استفاده کنید.

دستور زیر درست نیست:

@supports (transform: rotate3d(1, 1, 0, 30deg) and (transition: transform 2s) or (animation: my-3d-animation 2s alternate forwards) {
    ...
}

چون ترتیب قرار گیری or و and مثل زبان های برنامه نویسی باید رعایت شوند، و همچنین داخل پرانتز قرار بگیرند، مثال:

@supports (transform: rotate3d(1, 1, 0, 30deg) and 
          ( (transition: transform 2s) or (animation: my-3d-animation 2s alternate forwards) ) {
            ...
}

توجه:باید سمت چپ not و دو طرف or و and فضای خالی باشد، و به بقیه گزینه ها نچسبانید.

با تشکر از شما عزیزان: امیر بصیر