اعداد جادویی در CSS

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

اعداد جادویی در CSS به ارزشهایی اشاره می کنند که تحت برخی شرایط "کار می کنند" اما با تغییر این شرایط ، ضعیف و مستعد هستند. آنها معمولاً همیشه به نوعی یا دیگری مربوط به قلم ها هستند. آنها توسط نویسنده ای ایجاد شده اند که احتمالاً فقط در مرورگر خود در شرایط ایده آل آزمایش کرده اند. بیایید به چند نمونه نگاهی بیندازیم ، بنابراین همه ما می دانیم که آنها چه هستند و امیدوارم بتوانیم در آینده از آنها جلوگیری کنیم.

به این مجموعه ساده از برگه ها نگاه کنید:

هر یک از زبانه ها به عرض: 100px تنظیم شده است. بشردر این مثال 100px "شماره جادویی" ما است. تعداد مواردی وجود دارد که می تواند با این کار اشتباه کند. به سادگی اضافه کردن برگه دیگر با متن طولانی تر نشان می دهد که:

کمی بی دست و پا و احتمالاً نامطلوب. ما می توانیم از بسته بندی با فضای سفید جلوگیری کنیم: Nowrap ؛اما این احتمالاً بدتر است:

اگر به جای آن از Width استفاده کنیم ، برگه های ما کمتر مستعد شکستگی خواهند بود:

یا شاید اصلاً عرض ندارد:

اگر در داشتن تمام زبانه ها به همان اندازه مرده بودید ، می توانید سرریز را انجام دهید: پنهان. و متن بیش از حد: بیضی ؛شاید:

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

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

این مثال خاص کمی متناقض است ، اما من مطمئن هستم که همه شما فونت های سفارشی را دیده اید که دارای ارتفاع و چیزهای فوق العاده دیوانه وار هستند.

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

خوب سلام اگر همه آنها همان ارتفاع بودند ، این مشکلی نخواهد بود!

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

و اکنون یک ترومبون بزرگ غمگین:

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

هری رابرتز نمونه ای کلاسیک از یک شماره جادویی را در مقاله خود نشان می دهد که کد کد در CSS است.

این می تواند برای منوی کشویی CSS باشد. این منو تا زمانی که مورد لیست والدین قرار بگیرد ، خارج از صفحه پنهان است ، سپس کشویی به سمت مشاهده می شود. باید در پایین مورد منوی والدین قرار گیرد. برای توسعه دهنده ای که این کد را نوشت ، در مرورگر فعلی خود ، آن مورد منو 37px قد داشت. من مطمئن هستم که می توانید تصور کنید که همیشه درست نیست. 37px یک شماره جادویی است. هری پیشنهاد می کند تا بالا: 100 ٪ در عوض به معنای "تمام راه از بالا" است که به مراتب کمتر مستعد شکستگی است.

در مقاله ای که با فضای بین عناصر بلوک درون خطی مبارزه می کند ، -4px تعدادی است که برای حاشیه نقل شده است که می تواند این شکاف ها را ببندد. این قطعاً یک شماره جادویی است. 4px فقط به عرض یک فضای در تعداد خوبی از قلم ها در اندازه فونت پیش فرض 16px رخ می دهد.

آن خانواده فونت را به چیزی مانند موناکو تغییر دهید؟شکسته شده. اندازه قلم را به هر چیز بزرگتر یا کوچکتر تغییر دهید؟شکسته شده.

آن مقاله را برای سایر اصلاحات مشاهده کنید.

از آنجا که ما سعی می کنیم بگوییم "از اینها استفاده نکنید" ، مهم است که ما این اصطلاح را به درستی تعریف می کنیم زیرا مربوط به CSS است. من در گذشته تعدادی از موضوعات را دیده ام که همه در همان صفحه نیستند.(1) (2) (3).

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

شماره جادویی؟نهفقط یک هک کوچک که قبلاً برای عملکرد استفاده می کردیم.

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

بیایید بگوییم این یک شماره جادویی است ، مانند مثال منوی کشویی در بالا. آیا می توان آن را با SASS حل کرد؟

این دیگر یک حق ثابت عددی "نامشخص" نیست ، زیرا ما آن را نامگذاری کردیم؟این هنوز یک شماره جادویی در CSS است. به همان اندازه که قبلاً شکننده است.

شماره جادویی؟نهاگر در پیکسل ها بود ، احتمالاً چنین می شود ، زیرا مقدار پیکسل ثابت باقی می ماند ، بنابراین تأثیر آن بسته به اندازه فونت فعلی تغییر می کند. اندازه بزرگ قلم ، به سختی هرگونه تغییر ، اندازه کوچک فونت ، تغییر بزرگ. این واقعیت که این در یک واحد نسبی است ، آن را شکننده تر می کند.

و در نتیجه

مرد من از این بخش از پست های وبلاگ متنفرم ، اما خوب است که برای چیزهای کوچک که خودشان در جای دیگر کار نمی کنند ، یک زمین زباله کوچک داشته باشید.< Span> بیایید بگوییم این یک شماره جادویی است ، مانند مثال منوی کشویی در بالا. آیا می توان آن را با SASS حل کرد؟