نگاهی به Reboot.Css جدید بوت استرپ 4

اگر نمی دانید، Bootstrap یک فریم وورک Front-end عالی است. مدت زیادی است که از آن استفاده می کنم، و فکر می کنم که به همه نوع توسعه دهندگان کمک می کند. اهمیتی ندارد که یک توسعه دهنده Front-end هستید یا Back-end، یک تازه کار هستید یا ربات کدنویسی پیشرفته ای از آینده. Bootstrap مجموعه ای از ابزار های قدرتمند و انعطاف پذیر است که به شما کمک می کند برای تمام حالات وبسایت های خوبی بنویسید

بیایید درباره ویژگی جدیدی در Bootstrap 4 به نام Reboot صحبت کنیم. در این پست، کمی درباره تاریخچه reset ها، Bootstrap، برخی ویژگی های جالب Reboot و نحوه شروع به استفاده از آن صحبت خواهم کرد.

جدول محتویات:

Reboot.css
کار با Reboot.css را شروع کنید
مقدار پیشفرضBorder-Box برای Box-Sizing
برای Sizing (اندازه گیری) و Spacing (فاصله گذاری) از REM ها استفاده کنید
خانواده فونت Native
Margin Top از بین رفته است
عناصر اساسی تمیز و ساده
کلیک سریع در موبایل
نتیجه گیری

Reboot.css

Reboot ساده ترین مقررات موجود در Reset جدید Bootstrap 4 است. البته کمی با Reset معمولی تفاوت دارد.

ریست، بیان شده توسط Eric Mayer

مطمئنم عبارت «Reset» اولین بار زمانی مطرح شد که Eric Mayer، فردی که به نوعی پدرخوانده CSS محسوب می شود، یک stylesheet را منتشر کرد، که تمام مرورگر ها را ریست می کرد تا به مانند هم شوند. مشکل اینجاست که واقعا همه چیز را ریست می کرد. به معنای واقعی همه چیز بدون توجه به عنصر، ظاهر مشابهی داشت. عناصری مانند h1 درست به مانند h2 بودند. این به این معنی بود که توسعه دهندگان Front-end باید استایل های خود را خودشان طراحی می کردند، که این هم خوب، و هم بد بود.

بسیاری از توسعه دهندگان Front-end در گذشته، از آنجایی که استایل هایشان مطلق بودند، این reset ها را بر این اساس می ساختند. متاسفانه برخی تازه کار ها از آنجایی که اهمیت داشتن یک base را نمی دانستند، در کار خود به مشکل بر خوردند. برای مثال، افرادی که چنین کاری می کردند:

/* Heading 2 Base Styles */
h2 {
    color: #13335f;
    font-weight: 700;
    margin: 10px 0 20px;
    font-size: 30px;

    FLOAT: LEFT;   /* Just kill me. why.......... */
}

این قضیه برای مدت طولانی ای ادامه داشت. اگر به اندازه ای سن و تجربه دارید که از این مراحل گذشته باشید، تبریک می گویم که نجات پیدا کردید. به نظر من، بسیاری از توسعه دهندگان Back-end به دلیل این موارد از CSS متنفر اند.

Normalize.css

پس از این دوران تاریک که مجبور بودیم با stylesheet های به هم ریخته دست و پنجه نرم کنیم، بسیاری از ریست های base شخصی مردم شروع به منتشر شدن و معروف شدن کردند، که قطعا معروف ترین آنها normalize.css بود.

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

Normalize.css به طور پیشفرض از border-box استفاده نمی کرد، و لازم بود که به طوری آن را خودتان اضافه کنید. نمی توانم هیچ توسعه دهی Front-end ای را بدون این ویژگی تصور کنم. Normalize.css امروزه نیز فعال است، و به طور پهناوری استفاده می شود. نمی دانم که چرا برای تمامی عناصر به طور پیشفرض قرار داده نشده است، اما از آنجایی که بسیاری پروژه ها از Normalize به عنوان reset خود استفاده می کنند، مطمئنم دلیل خوبی وجود دارد.

Reboot.css آینده

حال نوبت به Reboot.css می رسد. به نظر من Reboot.css نسخه دوم Normalize.css است. این ابزار ویژگی های خوبی در زمینه reset دارد:

به طور پیشفرض بر روی تمام عناصر از box-size: border-box استفاده می کند.
استایل های مرورگر را برای توسعه دهی های میان مرورگری ریست می کند.
بر روی عناصر، یک استایل base و طبیعی نگه می دارد.
راهنمایی های درباره این که چگونه CSS خود را برای وب مدرن بنویسید دارد.
توسط افراد Bootstrap ساخته شده است. (قابل اطمینان است)

Bootstrap 4 تمام این ها را در یک صفحه قرار می دهد و استفاده از آن را بسیار ساده می کند.

آینده احتمالی فریم وورک ها

CSS هر روز ویژگی های بیشتری را شامل می شود و ابزاری مانند Flexbox یا Grid با مرورگر های بیشتری سازگاری پیدا می کنند.

به علاوه، برخی ابزار بسیار جالب مانند LESS، SALL / SCS و PostCSS را دارید که در حال تبدیل شدن به اولین انتخاب برای نوشتن استایل ها می شوند و اتوماتیک کردن مواردی مانند ساخت مجموعه ای از استایل دکمه ها را آسان تر می کنند.

با گذشت کمی زمان، فریم وورک ها 95 درصد کوچک تر شده، و فریم وورکی جدید و بسیار ساده ای تولید خواهد شد که محبوبیت زیادی نیز دریافت خواهد کرد. هنوز به آن روز نرسیده ایم، اما آن فریم وورک شاید Reboot باشد.

کار با Reboot.css را شروع کنید:

خب، حال می توانیم Reboor.css را آزمایش کنیم و ببینیم که دقیقا چیست.

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

مقدار پیشفرضBorder-Box برای Box-Sizing :

اگر پاراگراف های ابتدایی را خوانده باشید، می دانید که Reboot.css به طور پیشفرض از box-sizing: border-box استفاده می کند. به نظر من برجسته ترین تفاوت میان Reboot.css با Normalize.css همین است.

کد موجود در بالای فایل، چنین کدی است:

*,
*::before,
*::after {
    box-sizing: border-box;
}

برای Sizing (اندازه گیری) و Spacing (فاصله گذاری) از REM ها استفاده کنید:

REM ها فقط برای تعیین اندازه فونت نیستند، بلکه می توانند برای Spacing نیز استفاده شوند.

تفاوت میان واحد های اندازه گیری

CSS3 واحد اندازه گیری جدیدی به نام rem معرفی کرد. بحث هایی زیادی میان ما افراد کامپیوتر کار درباره بهترین گزینه برای اندازه گیری در وب وجود دارد. این rem ها یک راه حل خیلی خوب برای کل این بحث ها دارند. همه چیز مربوط به دسترسی کاربران (تغییر اندازه سایر فونت ها / سایز صفحه) و قابلیت نگهداری / ثبات توسعه دهندگان Front-end است.

به طور خلاصه، این واحد ها به این صورت هستند:

px: ثبات خوبی دارد، دسترسی بدی دارد.
em: دسترسی خوبی دارد، قابلیت نگهداری / ثبات قابل قبولی دارد.
rem: دسترسی خوبی دارد، قابلیت نگهداری / ثبات بسیار خوبی دارد.

این خلاصه بسیار خوبی از کل بحث است.

نحوه کار REM ها

بیایید فرض کنیم که شما فقط پیکسل ها را به عنوان واحد اندازه گیری طول می شناسید.

می دانید که 100 پیکسل همیشه 100 پیکسل است. حتی اگر سیستم عامل خود را مجبور کرده اید فونت ها را بزرگ نشان دهد، محتویات را بر روی یک مانتور 4K مشاهده می کنید، یا این 100 پیکسل را در مخزنی با ظرفیت 1000 یا 5000 پیکسل قرار داده اید. هیچ فرقی نمی کند. 100 پیکسل همیشه 100 پیکسل است. این یک ثبات خوب است، اما از آنجایی که با تنظیمات کاربر تطابق پیدا نمی کند، کارایی خوبی ندارد.

واحد em اولین بار برای معرفی شد، تا به این مشکل تطابق، با محاسبه شده بودن پاسخ دهد. این یعنی اندازه گذاری همیشه به یک شیء مربوط است، که در این مورد آن شیء صفحه Parent است. پس در مثالی پایه، می توان گفت: «یک شیء به جای این که 100 پیکسل طول داشته باشد، 10 درصد از 1000 پیکسل محفظه طول داشته باشد.»، یا 0.1em. به این صورت، اگر شیء توسط کاربر، دستگاه، سیستم یا هر چیز دیگری تغییر اندازه داده شده بود، اندازه ثابت می ماند.

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

من rem را به عنوان یک em ساده در نظر می گیرم. همه چیز، همیشه به ریشه (یا همان تگ body یا html) مربوط است. پس اگر ریشه شما 1000 پیکسل بود، طول شما بدون توجه به محفظه، تنظیمات یا هر چیز دیگری 0.1rem است.

خانواده فونت Native

آیا تا به حال وبسایتی برای دیدن تفاوت اندک میان سیستم عامل های مختلف ساخته اید؟ به احتمال زیاد Mac از همه بهتر است، اما گاهی فونت ها به خوبی ویندوز نیستند.

علت آن، نحوه خوانده شدن فونت توسط سیستم است. Reboot.css از هر فونتی که به طور Native بر روی سیستم عامل وجود دارد، استفاده می کند.

این قضیه به 2 معنی است:

زمان بارگذاری برای فونت های پیشفرض نردیک صفر است.
از فونتی که کاربر می خواهد / از نظرش بهتر است استفاده می کند.

کد را در زیر مشاهده می کنید:

/* SCSS Variable */
$font-family-sans-serif:
    // Safari for OS X and iOS (San Francisco)
    -apple-system,
    // Chrome >= 56 for OS X (San Francisco), Windows, Linux and Android
    system-ui,
    // Chrome < 56 for OS X (San Francisco)
    BlinkMacSystemFont,
    // Windows
    "Segoe UI",
    // Android
    "Roboto",
    // Basic web fallback
    "Helvetica Neue", Arial, sans-serif !default;

/* CSS */
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

Margin Top (حاشیه فوقانی) از بین رفته است:

شاید از بین نرفته باشد، اما Reboot.css باعث می شود این عناصر دیگر حاشیه فوقانی نداشته باشند:

این کاملا با عقل جور در می آید. حتی می توانم این روش را تحسین کنم. من هیج وقت از margin-top در هیچ کدام از CSS هایی که ساخته ام استفاده نکرده ام. این باعث می شود همه چیز بهتر در جای خود قرار بگیرد.

عناصر اساسی تمیز و ساده

Reboot یک استایل تمیز و ساده برای تمام عناصر مشابه فراهم می کند. عناصری مانند blockquote، table ها، form ها و بسیاری عناصر دیگر.

بوت استرپ

کلیک سریع در موبایل

به طور پیشفرض، Reboot.css از touch-action: manipulation برای تسریع هر تاخیری که ممکن است برای کاربران دستگاه های لمسی پیش بیاید استفاده می کند.

کد کامل را در زیر مشاهده می کنید:

a,
area,
button,
[role="button"],
input:not([type=range]),
label,
select,
summary,
textarea {
  -ms-touch-action: manipulation;
      touch-action: manipulation;
}

می توانید ببینید که کلیک بر روی لینک ها، دکمه ها و فیلد های فرم ها در دستگاه های دارای صفحه لمسی بسیار سریع تر است.

نتیجه گیری

به طور کلی، می توانم بگویم که Reboot.css یک پروژه عالی و ادامه دهنده استاندارد سازی وب مدرن است.

منبع