ساده کردن سبک های فرم با رنگ لهجه-مجله سر و صدا

من در مورد شما اطلاعی ندارم ، اما وقتی ویژگی های جدید CSS ظاهر می شود که زندگی روزمره ما را به عنوان توسعه دهندگان ساده تر می کند و ما را قادر می سازد تا تعداد زیادی کد اضافی را حذف کنیم ، از شما مطلع هستم. aspect-ratio یکی از این ویژگیها است (اخیراً نیاز به بالشتک هک) accent-color فقط ممکن است نفر بعدی باشد

یکپارچه سازی ورودی های فرم

بیایید چک باکس ها را برداریم. در هر مرورگر ، این شیوه ها توسط شیوه نامه نماینده کاربر (مسئول سبکهای پیش فرض مرورگر) متفاوت است.

از لحاظ تاریخی هیچ روش واقعی برای سبک سازی این ورودی ها وجود نداشته است. در عوض ، بسیاری از توسعه دهندگان وب به یک هک معروف متوسل می شوند ، که شامل پنهان کردن بصری (اما در دسترس) ورودی خود ، و سپس ایجاد یک عنصر شبه روی برچسب است. (همه اینها در مورد دکمه های رادیویی نیز صدق می کند.)

این در واقع نسبت به راه حل های قبلی کم حرف است. ModernSSS دارای یک آموزش دقیق در مورد نحوه پیاده سازی چک باکس های سفارشی و دکمه های رادیویی با استفاده از این تکنیک است.

این تکنیک در مرورگرهای مختلف کار می کند و در صورتی که کادرهای تأیید نیاز به سفارشی سازی کامل (همراه با انیمیشن ها و غیره) داشته باشند ، همچنان ضروری خواهد بود. اما در بسیاری از موارد ما نیازی به یک ظاهر طراحی فانتزی نداریم – ما فقط باید بتوانیم رنگ یک نام تجاری را اعمال کرده و حرکت کنیم. آیا از بین بردن آن همه CSS ناخوشایند عالی نخواهد بود؟ وارد accent-color!

استفاده ساده

برای ساده ترین مورد استفاده ، می توانیم مقدار را تنظیم کنیم accent-color اموال در :root عنصر و در همه جای صفحه وب ما اعمال شود:

:root {
  accent-color: rgba(250, 15, 117);
}

این رنگ انتخاب شده را برای (در زمان نوشتن) کادرهای تأیید ، دکمه های رادیویی ، محدوده و عناصر پیشرفت اعمال می کند.

دسترسی

یک ویژگی بسیار جالب این است که مرورگر به طور خودکار بهترین رنگ را برای علامت چک تعیین می کند تا تضمین رنگ کافی را با استفاده از الگوریتم های داخلی خود انجام دهد. این بدان معناست که برای اطمینان از دسترسی به چک باکس های ما تا آنجا که می توان ، نیازی به یک ظاهر طراحی کد اضافی نیست.

در نسخه ی نمایشی زیر ، ما از دو رنگ متفاوت لهجه استفاده می کنیم. اگر این مورد را در Chrome مشاهده می کنید ، باید ببینید که علامت تیک یکی در سمت چپ سفید است ، در حالی که یکی در سمت راست سیاه است. مرورگرها از الگوریتم های متفاوتی برای این کار استفاده می کنند ، بنابراین ممکن است نتایج متفاوتی را در Chrome در مقابل Firefox تجربه کنید.

ویژگی های سفارشی

اگر بخواهیم همان رنگ را برای سایر عناصر UI اعمال کنیم ، می توانیم از یک ویژگی سفارشی استفاده کنیم. ما می توانیم رنگ خود را به عنوان یک ویژگی سفارشی روی عنصر ریشه تنظیم کنیم ، سپس آن را در (برای مثال) سرفصل ها یا سایر عناصر فرم اعمال کنیم:

:root {
  --brand: rgba(250, 15, 117);
  accent-color: var(--brand);
}

ما حتی می توانیم برخی جلوه های سرگرم کننده ایجاد کنیم. در نسخه ی نمایشی زیر ، ما به هر گروه چک باکس یک ویژگی سفارشی اختصاص می دهیم که با نمایه عنصر مطابقت دارد (--i) با استفاده از style ویژگی در HTML سپس از آن در CSS خود برای محاسبه مقدار رنگ در یک تابع رنگ HSL برای تعیین رنگ تأکید استفاده می کنیم. چک باکس رنگین کمان!

سایر عناصر فرم

متاسفانه accent-color برای عناصر دیگری که ممکن است انتظار داشته باشیم اعمال نمی شود ، مانند منوی کشویی انتخابی. ممکن است بخواهیم رنگ انتخابی خود را روی عناصر فرم با سبک قبلی مانند دکمه ها و ورودی های متن نیز اعمال کنیم. ویژگی سفارشی در اینجا مفید است ، زیرا می توانیم آن را در مرز ورودی های متن خود و پس زمینه دکمه ها اعمال کنیم ، به عنوان مثال:

این مستندات Web.dev بر accent-color شامل این قطعه مفید توسط آدام آرگیل برای حالت دادن به عناصر دیگر منحصر به فرمها ، از جمله نشانگرهای لیست ، نکات برجسته انتخاب متن و حلقه فوکوس است:

html { 
  --brand: hotpink;
  scrollbar-color: hotpink Canvas;
}

:root { accent-color: var(--brand); }
:focus-visible { outline-color: var(--brand); }
::selection { background-color: var(--brand); }
::marker { color: var(--brand); }

:is(
  ::-webkit-calendar-picker-indicator,
  ::-webkit-clear-button,
  ::-webkit-inner-spin-button, 
  ::-webkit-outer-spin-button
) {
  color: var(--brand);
}

طرح های رنگی

برای اینکه عناصر فرم خود را بیشتر بسازیم ، color-scheme ویژگی می تواند به ما کمک کند تا آنها را با توجه به ترجیح کاربر برای حالت روشن یا تاریک تنظیم کنیم. در حال حاضر ، ما می توانیم سبک های حالت تاریک را با توجه به ترجیحات سیستم کاربر با prefers-color-scheme پرس و جو رسانه ای:

/* 
    If the user's preference is set to 'dark', this renders white text on a black background
*/
@media (prefers-color-scheme: dark) {
  body {
    background-color: #000000;
    color: #ffffff;
  }
}

اگر آن را کنار بگذاریم ، چک باکس های ما همچنان دارای یک پس زمینه روشن در حالت کنترل نشده خود هستند.

ما میتوانیم استفاده کنیم color-scheme برای اطمینان از اینکه چک باکس های ما مطابق ترجیحات دارای سبک روشن یا تیره هستند. با قرار دادن آن روی عنصر ریشه در CSS ما اطمینان حاصل می شود که در کل صفحه اعمال می شود:

:root {
  color-scheme: light dark;
}

این طرح رنگها را به ترتیب اولویت بیان می کند. متناوباً می توانیم آن را با استفاده از متا تگ در HTML خود پیاده سازی کنیم:

<meta name="color-scheme" content="light dark">

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

در نسخه نمایشی جعبه چک رنگین کمان ، ممکن است توجه داشته باشید که مرورگر هنگام تغییر رنگ ، رنگ برخی از علامت های چک را تنظیم می کند ، در حالی که کنتراست کافی را حفظ می کند. خیلی باحال!

color-scheme بر سبکهای نماینده کاربر تأثیر می گذارد. اگر از آن بدون ارائه سایر رنگهای پس زمینه یا رنگهای متن برای صفحه استفاده کنیم ، اگر کاربر رنگی تیره را انتخاب کند ، رنگهای پیش فرض صفحه معکوس می شوند – بنابراین رنگ پیش فرض پیش زمینه سیاه و رنگ متن خواهد بود سفید. در عمل ، به احتمال زیاد ما می خواهیم این موارد را با CSS نادیده بگیریم. ما میتوانیم استفاده کنیم color-scheme در کنار prefers-color-scheme پرس و جو رسانه ای در این نسخه ی نمایشی ، من از آن استفاده می کنم prefers-color-scheme برای تنظیم رنگ متن فقط در صورتی که طرح تیره ترجیح داده شود.

color-scheme همچنین می تواند بر روی عناصر جداگانه تنظیم شود ، که در صورت وجود مناطقی در طراحی ما که می خواهیم یک رنگ بندی مشخص را حفظ کنیم ، صرف نظر از اینکه حالت روشن یا تاریک تغییر حالت داده است ، مفید است. در این نسخه ی نمایشی ، ما فرمی با پس زمینه تیره داریم حتی وقتی رنگ کلی روشن است. ما می توانیم یک طرح رنگ تیره را مشخص کنیم تا مطمئن شویم چک باکس های ما همیشه با رنگ تیره طراحی شده اند:

.dark-form {
  color-scheme: dark;
}

محدودیت ها

همانطور که گفته شد ، چندین عنصر وجود دارد که در حال حاضر تحت تأثیر آنها قرار نمی گیرد accent-color، که این قابلیت برای آن مفید خواهد بود. نکته دیگر این است که ما در حال حاضر تنها به حالت دادن به حالت بررسی شده چک باکس یا دکمه رادیویی – صرف نظر از استفاده ، محدود شده ایم color-scheme، که تا حدودی بر روی مرز چک باکس تأثیر می گذارد ، اما اجازه سفارشی سازی کامل را نمی دهد. بسیار خوب است که بتوانیم رنگ و ضخامت حاشیه را برای ورودی در حالت کنترل نشده قرار دهیم یا حتی یک ظاهر طراحی سفارشی تر را اعمال کنیم ، مانند تغییر شکل کلی ، اما هنوز به آن نرسیده ایم. حداقل ، اجازه دادن به مرز چک باکس برای به ارث بردن رنگ متن اصلی ترجیح داده می شود.

همچنین می تواند استفاده از آن را گسترش دهد accent-color به عناصر دیگر فراتر از اشکال ، مانند کنترل های ویدئویی. در حال حاضر برای توسعه دهندگان ایجاد کنترل های سفارشی مستلزم کار قابل توجهی است تا دسترسی مجدد کنترل های بومی را دوباره ایجاد کند. این مقاله عالی توسط استفانی استیماک جزئیات کار انجام شده توسط UI را باز کنید استانداردسازی عناصر UI به منظور سهولت ایجاد سبک سازی برای توسعه دهندگان.

جایگزین، گزینه ها

یک روش جایگزین برای حالت دادن به چک باکس یا دکمه رادیویی ، پنهان کردن حالت دهی پیش فرض با است -webkit-appearance: none و تصویر پس زمینه را جایگزین آن کنید. (دیدن این نسخه ی نمایشی.) مرورگرهای مدرن از این امر به خوبی پشتیبانی می کنند ، اما در مقایسه با اولین روش استفاده از عنصر شبه (که در ابتدای این مقاله توضیح داده شد) ، محدودیت هایی دارد ، زیرا نمی توانیم مستقیماً با CSS تصویر پس زمینه را دستکاری کنیم (به عنوان مثال تغییر رنگ یا کدورت) ، یا انتقال تصویر.

CSS Paint API – بخشی از مجموعه برنامه های کاربردی CSS Houdini – گزینه های بیشتری را برای سفارشی سازی باز می کند و به ما اجازه می دهد تا خصوصیات سفارشی را برای دستکاری تصویر پس زمینه منتقل کنیم. وارسی این دموی دوست داشتنی (و کارکت همراه) توسط ماتئو. پشتیبانی در حال حاضر محدود به مرورگرهای Chromium است.

دسترسی

هنگام استفاده از پنهان کردن ظاهر پیش فرض کنترل های فرم ، باید مراقب ارائه سبک های تمرکز در دسترس باشیم. مزیتی از accent-color این است که پیش فرض مرورگر را پنهان نمی کند و دسترسی را حفظ می کند.

پشتیبانی از مرورگر

accent-color در حال حاضر در آخرین نسخه های Chrome و Edge پشتیبانی می شود. می توان آن را در Firefox با استفاده از layout.css.accent-color.enabled flag ، و قرار است در نسخه بعدی پشتیبانی شود. متأسفانه ، در حال حاضر هیچ پشتیبانی از Safari وجود ندارد. این به شما نمی گویم نمی تواند بلافاصله شروع به استفاده از آن کنید – مرورگرهایی که پشتیبانی نمی کنند accent-color به سادگی پیش فرض مرورگر را دریافت می کند ، بنابراین به عنوان پیشرفت پیشرفته عالی عمل می کند.

نتیجه

ما بیشتر در مورد چک باکس ها و دکمه های رادیویی در اینجا صحبت کرده ایم ، زیرا آنها از رایج ترین عناصر فرم هستند که نیاز به سفارشی سازی دارند. ولی accent-color پتانسیل ارائه ظاهر سریع و آسان برای بسیاری از عناصر فرم ما را دارد ، به ویژه در مواردی که به سفارشی سازی گسترده احتیاج ندارید ، و همچنین اجازه می دهد مرورگر بهترین گزینه ها را برای دسترسی انتخاب کند.

خواندن بیشتر

برخی منابع در accent-color، color-scheme، و فرم دهی ورودی های فرم:

(vf ، yk ، he)