تغییر آن با آخرین کنترل HTML - مجله Smashing

وب با گرفتن عناصر HTML و تبدیل آنها به شکلی کاملاً متفاوت، غریبه نیست. یک مثال رایج در این مورد، سوئیچ، یا ضامن، جزء است. ما یک چک باکس را در زیر چندین لایه سبک پنهان می کنیم، نقش ARIA را به عنوان «سوئیچ» تعریف می کنیم و سپس ارسال می کنیم. با این حال، این رویکرد مسائل مربوط به قابلیت استفاده را در مورد وضعیت های نامشخص ایجاد می کرد و همیشه احساس می کرد که نسبتاً ناخوشایند بود. بالاخره به قول معروف بهترین ARIA بدون ARIA است.

خوب، امید جدیدی برای سوئیچ HTML بومی وجود دارد که بتواند به آن توجه کند.

Safari Technology Preview (TP) 185 و Safari 17.4 با یک ویژگی زیر رادار، یک کنترل سوئیچ HTML بومی منتشر شدند. این از رویکرد جعبه چک مخفی تکامل یافته و هدف آن این است که دسترسی و قابلیت استفاده کنترل را سازگارتر کند.

<!-- This will render a native checkbox --//><input type="checkbox" /><!-- Add the `switch` attribute to render a switch element --//><input type="checkbox" switch /><input type="checkbox" checked switch />

توجه داشته باشید: با توجه به وبلاگ WebKit می توانیم استفاده کنیم @supports(::thumb) برای بررسی پشتیبانی مرورگر که گفت ::thumb یک ویژگی آزمایشی است که به "::thumb و::track شبه عناصر» پرچم ویژگی های فعال در سافاری. در غیر این صورت، ممکن است در جایی که اعلامیه پشتیبانی در نسخه نمایشی نمایش داده می شود، یک علامت مثبت کاذب مشاهده کنید.

سبک های پیش فرض در سافاری، بدون تعجب، مانند یک سوئیچ iOS هستند. خوشبختانه علاوه بر جدید switch ویژگی، ما همچنین با شبه عناصر جدید برای استایل کردن سوئیچ خود به عنوان زیباترین سوئیچ در وب رفتار می کنیم.

یک ظاهر طراحی شده با عناصر شبه

همراه با رونمایی از switch ویژگی جدید پشتیبانی می شود ::thumb و ::track شبه عناصر ما می توانیم از این شبه عناصر نه تنها برای استایل خود، بلکه برای بررسی مشروط پشتیبانی در CSS استفاده کنیم. اما بیایید از خودمان جلوتر نگیریم، یک چیز در یک زمان.

طراحی ظاهر.

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

سبک های ورودی پایه

شما باید اضافه کنید appearance: none به سوئیچ قبل از یک ظاهر طراحی شده.

input(type="checkbox")(switch) {  appearance: none;}

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

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

input(type="checkbox")(switch) {  /* Required to override and style the switch */  appearance: none;  display: inline-grid;  position: relative;  background-color: var(--color-aux-400);  block-size: 2rem;  inline-size: 4rem;  border-radius: var(--border-radius-pill);  transition: background 0.25s ease;  padding-inline: var(--spacing-1x);}

با افزودن انعطاف پذیری بیشتر به ترکیب، سبک کردن خود کنترل به ما امکان می دهد به کنترل خود دسترسی داشته باشیم ::after و ::before شبه عناصر نیز.

این ::thumb عنصر شبه

جدید ::thumb شبه عنصر به ما اجازه می دهد تا دسته سوئیچ را سبک کنیم. این به طور کلی عنصری است که فرد هنگام تغییر دادن کنترل با آن تعامل دارد. انگشت شست دایره ای ممکن است رایج ترین باشد، اما سبک های ما محدود به آنجا نیست. اما دوباره، بیایید روی یک چیز در یک زمان تمرکز کنیم.

input(type="checkbox")(switch) {  appearance: none;  display: inline-grid;  position: relative;  background-color: var(--demo-color-aux-400);  block-size: 2rem;  inline-size: 4rem;  border-radius: var(--demo-border-radius-pill);  transition: background 0.25s ease;  padding-inline: 0.25rem;    /* Style the thumb */  &::thumb {    block-size: 1.5rem;    inline-size: 1.5rem;    border-radius: var(--border-radius-circle);    background: var(--color-aux-600);    transition: translate 0.25s ease;  }    /* Define styles for the \'on\' state of the switch */  &:checked {    background: var(--color-blue-400);  }    &:checked::thumb {    /* We are responsible for moving the thumb between states */    translate: 2rem 0;  }}

این نسخه آزمایشی با اعمال انتقال و انیمیشن در ::thumb عنصر چون درخواست appearance: none ما را مسئول قرار دادن انگشت شست برای حالت های مختلف آن می کند، ما همچنین این آزادی را داریم که هر طور که می خواهیم بین این حالت ها جابه جا شویم.

این ::track عنصر شبه

در حالی که شبیه به یک ظاهر طراحی شده خود کنترل است ::track شبه عنصر می تواند به عنوان مسیر پس زمینه ای باشد که شست در امتداد آن حرکت می کند. البته، در مد کلاسیک وب، این آهنگ اینطور نیست دارند به این شکل استایل داده شود و این عنصر اضافی می تواند خلاقانه به روش های دیگر استفاده شود.

مسلماً، این مثال ها نسبتاً ابتدایی هستند. اما امید این است که پتانسیل در کنترل استایل بسیار زیاد که اکنون برای این کنترل داریم قابل مشاهده باشد. البته، همه این حالت ها فوق العاده است، اما ابتدا باید قبل از قرار دادن تمام تخم مرغ هایمان در یک سبد ضرب المثل، پشتیبانی را بررسی کنیم.

شناسایی آن برای پشتیبانی سوئیچ

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

تشخیص با CSS

ما می توانیم از CSS برای شناسایی پشتیبانی از آن استفاده کنیم switch ویژگی، اما نه به طور مستقیم که من ترجیح می دهم. زیرا عنصر سوئیچ همراه با ::thumb و ::track شبه عناصر، ما می توانیم پشتیبانی آنها را بررسی کنیم تا بفهمیم که آیا خود سوئیچ پشتیبانی می شود یا خیر.

@supports selector(::thumb) {  /* The switch is supported. Style away! */}

یا اگر می خواهید به طور پیش فرض استایل های پشتیبانی شده از سوییچ را تنظیم کنید، می توانید به صورت مشروط با استفاده از عبارت معکوس را بررسی کنید not کلمه کلیدی.

@supports not selector(::thumb) {  /* The switch is _not_ supported. Fallback styles go here. */}

تشخیص با جاوا اسکریپت

ممکن است نیاز به تشخیص استفاده از switch ویژگی خارج از CSS برای این کار، می توانیم یک عنصر ورودی ایجاد کنیم و آن را بررسی کنیم switch پین صفت جاوا اسکریپت. اگر ویژگی وجود داشته باشد، بعداً یک کلاس به عنصر اصلی سند برای استایل سازی CSS اضافه می کنیم.

function checkForSwitchSupport() {  const input = document.createElement(\'input\');  input.type="checkbox"    if (\'switch\' in input) {    return true;  }  return false}if (checkForSwitchSupport()) {  document.documentElement.classList.add(\'has-switch\');}.has-switch input\\(type="checkbox"\\)(switch) {  accent-color: var(--brand-color-accent-primary);}

تغییر ملاحظات

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

چک باکس ها: همان اما متفاوت

افزودن a switch ویژگی ورودی چک باکس خوب و راحت است، اما با برخی فرضیات همراه است. در اصل، من معتقدم که این نحو بیانگر این است که یک سوئیچ و چک باکس یک چیز هستند، فقط از نظر بصری متفاوت هستند. هرچند که اینطور نیست.

دو تفاوت نشانه گذاری اصلی بین این دو ورودی وجود دارد.

1. یک چک باکس را می توان روی یک تنظیم کرد حالت نامشخص - سوئیچ نمی تواند.
2. یک سوئیچ می تواند باشد به عنوان مورد نیاز علامت گذاری شده است - یک چک باکس نمی تواند.

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

با این حال، تفاوت ها در قراردادهای نشانه گذاری متوقف نمی شود. نحوه ارتباط فناوری های کمکی با چک باکس ها و سوئیچ ها نیز متفاوت است. وضعیت چک باکس ها به صورت مخابره می شود "تیک خورده" یا "برگزیده". در همین حال، یک سوئیچ به عنوان ارتباط برقرار می شود "بر" یا "خاموش". این ممکن است تفاوت زیادی به نظر نرسد - و شاید هم نیست - اما گروه بندی این دو کنترل با هم جای ابهام را باقی می گذارد. این در استایل ما هنگام هدف قرار دادن سوئیچ های «روشن» مشهود است :checked انتخابگر شبه این یک تمایز ظریف است، اما با این وجود یک تمایز است.

سوئیچ ها و چک باکس ها مشابه هستند، بله، اما آیا جفت کردن این دو کنترل رویکرد درستی است؟

دسترسی (A11y): درک تفاوت ها

هر زمان که روی یک چک باکس استایل می زنیم تا یک سوئیچ ایجاد کنیم، (امیدوارم) آن را نیز پیوست می کنیم role="switch" به جزء انجام این کار به طور سنتی به فناوری های کمکی اجازه می دهد تا کنترل را بهتر درک کنند. بنابراین، چگونه است جدید کنترل سوئیچ توسط فن آوری های کمکی تفسیر شده است؟

در این ویدیو، نحوه برقراری ارتباط VoiceOver با کنترل سوئیچ در حین استفاده از Safari در مک را می آموزیم. اما VoiceOver تنها یک - و نه دقیقاً نماینده - صفحه خوان است و آزمایش را می توان و باید با دیگران انجام داد.

آدریان روزلی قبلاً دور آزمایش کامل ترکیب های مختلف مرورگرها و صفحه خوان ها را از سال 2022 منتشر کرده است، اما با به روزرسانی های پلتفرم در طول مسیر حفظ شده است. هشدار اسپویلر: نتایج کاملاً مخلوط هستند و سوئیچ باید در حال حاضر خارج از تولید بماند. آدریان زمینه عمیق تری را ارائه می دهد:

برای زمینه بیشتر، یک عنصر سوئیچ با WHATWG HTML در سال 2018 پیشنهاد شد، گوگل مدتی روی آن کار کرد، همراه با برخی بحث های WICG، سپس آن را رها کرد. Open-UI بحثی را در سال 2021 آغاز کرد، اما به غیر از اظهار نظر در مورد موارد استفاده نامشخص معتبر، بیشتر در آنجا مرده است.

سپس در ژوئیه 2023 (...) یک مشارکت کننده جدید یک WHATWG PR برای اضافه کردن یک switch به یک چک باکس نسبت دهید و ما اینجا هستیم. توجه داشته باشید که در WHATWG HTML ادغام نشده است، بنابراین Apple Safari انتخاب کرده است که از این یکی جلوتر باشد.

- آدریان روزلی

عجیب است، در حالی که VoiceOver سوئیچ را به عنوان «روشن» یا «خاموش» اعلام می کند، اگر سوئیچ را بررسی کنیم و ویژگی های دسترسی آن را در ابزارهای توسعه دهنده Safari بررسی کنیم، همچنان ارجاعی به «بررسی شده» خواهیم دید.

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

این switch ویژگی به نظر می رسد که نیازهای دسترسی را در نظر می گیرد. با این حال، این ما را از استفاده از آن در راه های غیرقابل دسترس و غیرقابل استفاده باز نمی دارد. همانطور که گفته شد، مخلوط کردن required و indeterminate ویژگی های بین سوئیچ ها و چک باکس ها می تواند باعث رفتار غیرمنتظره برای افرادی شود که سعی در پیمایش کنترل ها دارند. یک بار دیگر، آدریان همه چیز را به خوبی خلاصه می کند:

" switch نقش حالت های مختلط را نمی دهد. اطمینان حاصل کنید که سوئیچ شما هرگز روی حالت مختلط تنظیم نمی شود. در غیر این صورت، خوب، مشکلات.

- آدریان روزلی

بین المللی سازی (I18N): کدام راه در راه است؟

فراتر از قابلیت دسترسی کنترل سوئیچ، وقتی سوئیچ با حالت های مختلف نوشتن در تعامل است، چه اتفاقی می افتد؟

هنگام ایجاد سوئیچ، باید از استفاده از CSS منطقی برای پشتیبانی از حالت ها و جهت های مختلف نوشتن اطمینان حاصل می کردیم. این به این دلیل است که سوئیچ در سمت راست ترین موقعیت خود (یا لبه انتهایی درون خطی) در برخی محیط ها به معنای روشن نیست. در برخی از زبان ها - به عنوان مثال، زبان هایی که از راست به چپ نوشته می شوند - سمت چپ ترین موقعیت (یا لبه شروع خطی) روی سوئیچ احتمالاً به حالت "روشن" دلالت دارد.

در حالی که اکنون باید به طور پیش فرض CSS منطقی بنویسیم، کنترل سوئیچ جدید این نیاز را برطرف می کند. این به این دلیل است که کنترل با نزدیکترین خود سازگار می شود writing-mode و direction خواص این به این معنی است که در محیط های چپ به راست، سمت راست ترین موقعیت سوئیچ، حالت روشن و در محیط های راست به چپ، سمت چپ ترین حالت سوئیچ، حالت روشن است.

قلم (کنترل سوئیچ سافاری - استایلینگ (چنگال شده)) (https://codepen.io/smashingmag/pen/YzbWdGv) توسط @DanielYuschick را ببینید.

افکار نهایی

همانطور که ما به جلو بردن وب ادامه می دهیم، طبیعی است که ابزارهای ما در کنار ما تکامل پیدا کنند. کنترل سوئیچ یک افزودنی خوش آمد به HTML برای حذف هک های چک باکس است که سال ها به آن متوسل شده ایم.

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

در نهایت، داشتن یک رویکرد بومی برای سوئیچ کردن اجزا می تواند دسترسی و قابلیت استفاده کنترل را بسیار سازگارتر کند - با فرض اینکه همیشه برای استفاده گسترده پشتیبانی و پذیرفته شده است.

(gg, yk)