تسلط بر CSS @supports: تشخیص ویژگی برای طراحی وب قدرتمند

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

CSS @supports چیست؟

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

چرا از @supports استفاده کنیم؟ مزایای تشخیص ویژگی

تشخیص ویژگی با @supports چندین مزیت قابل توجه ارائه می دهد:

• بهبود تدریجی: می توانید با یک طراحی پایه شروع کنید که در همه مرورگرها کار می کند و سپس پیشرفت هایی را برای مرورگرهایی که از ویژگی های خاص پشتیبانی می کنند، لایه بندی کنید. این یک تجربه کاربردی را برای همه، صرف نظر از قابلیت های مرورگرشان، تضمین می کند.
• تنزل مرتب: اگر مرورگری از یک ویژگی خاص پشتیبانی نمی کند، استایل های موجود در بلوک @supports به سادگی نادیده گرفته می شوند. وب سایت همچنان کار خواهد کرد، البته بدون ویژگی های پیشرفته. این بسیار برتر از طراحی است که به دلیل CSS پشتیبانی نشده به طور کامل از بین می رود.
• بهبود تجربه کاربری: با تنظیم طراحی بر اساس قابلیت های هر مرورگر، می توانید تجربه کاربری را بهینه کنید. کاربران با مرورگرهای مدرن از آخرین ویژگی ها بهره مند می شوند، در حالی که کاربران با مرورگرهای قدیمی تر همچنان از یک وب سایت قابل استفاده و در دسترس لذت می برند.
• آینده نگری: با پذیرش ویژگی های جدید توسط مرورگرها، وب سایت شما به طور خودکار از آنها استفاده می کند. لازم نیست постоянно CSS خود را برای هر ویژگی جدید بازنویسی کنید. می توانید از @supports برای تشخیص و اعمال استایل های جدید در صورت وجود استفاده کنید.
• سازگاری بین مرورگرها: رسیدگی به مسائل سازگاری آسان تر می شود. می توانید به طور خاص مرورگرهای مختلف یا نسخه های مرورگر را بر اساس ویژگی های پشتیبانی شده آنها هدف قرار دهید.

نحوه استفاده از @supports

نحو برای قانون @supports ساده است:

            @supports (property: value) {
  /* CSS rules to apply if the browser supports the feature */
}

            

              
                Copy
              
            
          

در اینجا تجزیه ای از اجزای کلیدی آورده شده است:

• @supports: این کلمه کلیدی است که تشخیص ویژگی را آغاز می کند.
• (property: value): این شرطی است که شما در حال آزمایش آن هستید. این می تواند یک جفت ویژگی-مقدار واحد یا یک عبارت پیچیده تر باشد (بعداً توضیح داده می شود).
• { /* CSS rules */ }: قوانین CSS در داخل براکت های فرفری فقط در صورتی اعمال می شوند که مرورگر از ویژگی مشخص شده پشتیبانی کند.

نمونه هایی از استفاده از @supports

بیایید به چند نمونه عملی نگاهی بیندازیم تا نحوه عملکرد @supports را نشان دهیم:

مثال 1: بررسی پشتیبانی CSS Grid

CSS Grid Layout ابزاری قدرتمند برای ایجاد طرح بندی های پیچیده است. برای اطمینان از تنزل مرتب برای مرورگرهایی که از Grid پشتیبانی نمی کنند، می توانید از @supports استفاده کنید:

            
.container {
  display: flex; /* Fallback for browsers without Grid */
  flex-wrap: wrap;
}

@supports (display: grid) {
  .container {
    display: grid; /* Use Grid if supported */
    grid-template-columns: repeat(3, 1fr);
  }
}

            

              
                Copy
              
            
          

در این مثال، عنصر .container در ابتدا از یک طرح جایگزین با استفاده از flexbox استفاده می کند. اگر مرورگر از CSS Grid پشتیبانی کند، بلوک @supports طرح flexbox را لغو می کند و استایل های مبتنی بر Grid را اعمال می کند.

مثال 2: بررسی پشتیبانی از ویژگی `gap`

ویژگی `gap` در Flexbox و Grid برای تعریف فاصله بین عناصر استفاده می شود. در اینجا نحوه استفاده از `@supports` برای بررسی پشتیبانی از `gap` آمده است:

            
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* Fallback: add margins to the children */
  margin-left: -10px;
  margin-top: -10px;
}

.grid-item {
  padding: 10px;
  margin-left: 10px;
  margin-top: 10px;
}

@supports (gap: 10px) {
  .grid-container {
    margin: 0;
    gap: 10px; /* Use gap if supported */
  }
  .grid-item {
    margin: 0;
  }
}

            

              
                Copy
              
            
          

در این مثال، اگر مرورگر از ویژگی `gap` پشتیبانی کند، حاشیه ها حذف می شوند و با ویژگی `gap` برای فاصله بهتر جایگزین می شوند.

مثال 3: بررسی پشتیبانی از `aspect-ratio`

ویژگی `aspect-ratio` به شما این امکان را می دهد که به راحتی نسبت های یک عنصر را حفظ کنید. در اینجا نحوه بررسی پشتیبانی از آن آورده شده است:

            
.image-container {
  width: 100%;
  /* Fallback: Use padding-bottom for aspect ratio.  May not be as precise.*/
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  position: relative;
}

.image-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@supports (aspect-ratio: 16 / 9) {
  .image-container {
    padding-bottom: 0;  /* Reset fallback padding */
  }

  .image-container {
    aspect-ratio: 16 / 9; /* Use aspect-ratio if supported */
  }
}

            

              
                Copy
              
            
          

در اینجا، مثال یک جایگزین با استفاده از `padding-bottom` برای حفظ نسبت تصویر برای مرورگرهای قدیمی تر ارائه می دهد و در صورت وجود از `aspect-ratio` استفاده می کند.

تکنیک های پیشرفته @supports

@supports محدود به بررسی های ساده ویژگی-مقدار نیست. می توانید شرایط پیچیده تری را با استفاده از عملگرهای منطقی ایجاد کنید:

عملگرهای منطقی

• and: دو شرط را ترکیب می کند که هر دو باید درست باشند.
• or: دو شرط را ترکیب می کند که حداقل یکی از آنها باید درست باشد.
• not: یک شرط را نفی می کند.

در اینجا چند مثال آورده شده است:

            
/* Check if both display: grid and gap are supported */
@supports (display: grid) and (gap: 10px) {
  /* Styles to apply if both conditions are met */
}

/* Check if either display: grid or display: flex is supported */
@supports (display: grid) or (display: flex) {
  /* Styles to apply if either condition is met */
}

/* Check if the browser *doesn't* support display: grid */
@supports not (display: grid) {
  /* Styles to apply if the browser does NOT support grid */
}

            

              
                Copy
              
            
          

استفاده از ویژگی های سفارشی (متغیرهای CSS) با @supports

همچنین می توانید از ویژگی های سفارشی CSS (متغیرها) در پرس و جوهای @supports خود استفاده کنید و درجه بالایی از انعطاف پذیری را ارائه دهید.

            
:root {
  --my-grid-columns: repeat(3, 1fr);
}

@supports (display: grid) {
  .container {
    display: grid;
    grid-template-columns: var(--my-grid-columns);
  }
}

            

              
                Copy
              
            
          

این رویکرد به شما امکان می دهد به راحتی استایل های خود را در یک مکان مرکزی تنظیم کنید و تعمیر و نگهداری و به روز رسانی را کارآمدتر می کند.

ملاحظات عملی و بهترین روش ها

در اینجا برخی از بهترین روش ها برای پیروی هنگام استفاده از @supports آورده شده است:

• با یک خط پایه محکم شروع کنید: یک وب سایت کاربردی و در دسترس طراحی کنید که بدون هیچ ویژگی پیشرفته CSS کار کند. این یک تجربه خوب را برای همه کاربران، حتی کسانی که مرورگرهای قدیمی تر دارند، تضمین می کند.
• عملکرد اصلی را اولویت بندی کنید: اطمینان حاصل کنید که ویژگی های اساسی وب سایت شما به درستی در همه مرورگرها کار می کنند. سپس، از @supports برای بهبود تجربه کاربری با ویژگی های پیشرفته استفاده کنید.
• به طور کامل آزمایش کنید: وب سایت خود را در مرورگرها و دستگاه های مختلف آزمایش کنید تا بررسی کنید که قوانین @supports شما مطابق انتظار کار می کنند. از ابزارهای توسعه دهنده مرورگر برای بررسی استایل های اعمال شده استفاده کنید و اطمینان حاصل کنید که طراحی شما سازگار است. برای کمک به آزمایش بین مرورگرها، از ابزارهای تست خودکار استفاده کنید.
• در نظر گرفتن عوامل کاربر: در حالی که @supports به طور کلی ترجیح داده می شود، ممکن است همچنان نیاز داشته باشید که از بوییدن عامل کاربر در برخی سناریوهای بسیار خاص استفاده کنید (به عنوان مثال، مقابله با یک اشکال مرورگر خاص یا یک تجربه کاربری بسیار سفارشی). با این حال، از بوییدن عامل کاربر به ندرت استفاده کنید، زیرا می تواند غیرقابل اعتماد و نگهداری آن دشوار باشد.
• از جایگزین های خاص ویژگی استفاده کنید: جایگزین های مناسبی ارائه دهید که برای ویژگی خاصی که استفاده می کنید منطقی باشد. به عنوان مثال، اگر از CSS Grid استفاده می کنید، از یک طرح Flexbox به عنوان جایگزین استفاده کنید.
• کد خود را مستند کنید: نظراتی را به CSS خود اضافه کنید تا توضیح دهید که چرا از @supports استفاده می کنید و چه ویژگی هایی را هدف قرار می دهید. این باعث می شود کد شما آسان تر قابل درک و نگهداری شود.
• ملاحظات عملکرد: در حالی که @supports به طور کلی حداقل تأثیر عملکردی دارد، از استفاده بیش از حد از آن خودداری کنید. قوانین پیچیده یا عمیقا تودرتوی @supports می توانند به طور بالقوه بر عملکرد رندر تأثیر بگذارند. همیشه CSS خود را پروفایل و بهینه کنید.
• دسترسی: اطمینان حاصل کنید که استفاده شما از @supports بر دسترسی تأثیر منفی نمی گذارد. همیشه وب سایت خود را با صفحه خوان ها و سایر فناوری های کمکی آزمایش کنید. در صورت لزوم، محتوا یا عملکرد جایگزین ارائه دهید تا از فراگیری اطمینان حاصل شود.
• به روز باشید: برای استفاده موثر از آخرین قابلیت ها، با به روز رسانی های پشتیبانی مرورگر و ویژگی های جدید CSS به روز باشید. به طور منظم کد خود را بررسی کنید و با تغییر پشتیبانی مرورگر، جایگزین های خود را به روز کنید.

نمونه ها و ملاحظات جهانی

اصول استفاده از @supports به طور جهانی قابل اجرا هستند. با این حال، هنگام توسعه برای مخاطبان جهانی، این نکات را در نظر بگیرید:

• محلی سازی: به این نکته توجه داشته باشید که استایل چگونه بر ارائه محتوای محلی شده تأثیر می گذارد (به عنوان مثال، جهت های مختلف متن، مجموعه کاراکترها). از @supports برای اعمال استایل های خاص بر اساس زبان یا منطقه کاربر، به ویژه در مورد طرح بندی و تایپوگرافی استفاده کنید.
• بین المللی سازی: برای طول های مختلف محتوا و جهت های متن طراحی کنید. برخی از زبان ها مانند عربی یا عبری از راست به چپ (RTL) هستند، بنابراین ممکن است از `@supports` برای تنظیم طرح بندی ها استفاده کنید.
• عملکرد در مناطق مختلف: تشخیص دهید که سرعت اینترنت در سراسر جهان به طور قابل توجهی متفاوت است. با به حداقل رساندن اندازه فایل و استفاده از تکنیک های ذخیره سازی، ارائه CSS را بهینه کنید. عملکرد وب سایت خود را در مناطقی با اتصالات اینترنتی کندتر آزمایش کنید. برای ارائه فایل های CSS خود به کاربران در سراسر جهان، از یک شبکه تحویل محتوا (CDN) استفاده کنید.
• تنوع دستگاه: طیف گسترده ای از دستگاه های مورد استفاده در سطح جهان را در نظر بگیرید. با در نظر گرفتن نیازهای دسترسی، روی اندازه صفحه نمایش، وضوح تصویر و سیستم عامل های مختلف آزمایش کنید. از @supports برای تنظیم طرح بندی ها و طرح های واکنش گرا بر اساس قابلیت های دستگاه استفاده کنید.
• حساسیت فرهنگی: طراحی بصری می تواند بخش مهمی از حساسیت فرهنگی باشد. از معانی رنگ ها و قراردادهای بصری که ممکن است بین فرهنگ ها متفاوت باشد آگاه باشید.
• تغییرات سهم بازار مرورگر: مرورگرهای غالب در مناطق مختلف متفاوت هستند. به عنوان مثال، در برخی از مناطق آسیا، برخی از مرورگرها ممکن است سهم بازار قابل توجهی داشته باشند. چشم انداز مرورگر را برای مخاطبان هدف تحقیق کنید و سازگاری را بر اساس آن اولویت بندی کنید.

نتیجه گیری

CSS @supports یک ابزار ضروری برای توسعه دهندگان وب مدرن است. این به شما امکان می دهد وب سایت هایی بسازید که هم انعطاف پذیر و هم مقاوم هستند و بهترین تجربه کاربری ممکن را در طیف گسترده ای از مرورگرها و دستگاه ها ارائه می دهند. با درک و اجرای موثر @supports، می توانید اطمینان حاصل کنید که وب سایت های شما بدون توجه به مرورگری که کاربر استفاده می کند، کاربردی و از نظر بصری جذاب باقی می مانند.

تشخیص ویژگی را در آغوش بگیرید، CSS با ساختار خوب بنویسید و طرح های خود را به طور کامل آزمایش کنید. با تکامل مرورگرهای وب، رویکرد شما به توسعه وب نیز باید تکامل یابد. استفاده از @supports گامی به سوی ساخت وب سایت هایی است که نه تنها از نظر بصری خیره کننده هستند، بلکه قوی، قابل اعتماد و آینده نگر نیز هستند.

با پیروی از بهترین روش های ذکر شده در این راهنما، می توانید تجربیات وب جذابی را برای مخاطبان جهانی ایجاد کنید و یک تجربه کاربری یکپارچه و لذت بخش را برای همه، در همه جا ارائه دهید.