یکی از دغدغه های این روزها در دنیای CSS نوشتن خطوط استایلی است که برای اینکه در مرورگرهای مختلف کار کنند نیاز به prefix یا پیشوند دارند.
کد زیر را در نظر بگیرید:
div {
transition: all 1s ease;
}
برای اینکه این خط بهترین پشتیبانی را در مرورگرهای مختلف داشته باشد باید به صورت زیر پیشوندگذاری شود:
div {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
چند سال قبل برای اینکه مجبور به نوشتن پیشوندها به صورت دستی نباشیم از ابزارهایی مثل پلاگین های Sublime استفاده می کردیم. به مرور با بوجود آمدن پیش پردازنده هایی (preprocessor) مثل Sass و Less یا Stylus می توانستیم از mixin ها برای اضافه کردن پیشوندها استفاده کنیم که البته هنوزم عده ای از این روش ها استفاده می کنند.
اما این روزها که بازار ابزارهایی مثل Grunt و Gulp داغ است می توان از بسته هایی که برای این ابزارها می نویسند برای کارهای مختلف استفاده کرد و مراحل کاری را به عهده این بسته ها و ابزارها سپرد. یکی از این بسته ها Autoprefixer نام دارد که معروف ترین ابزار این روزها برای نوشتن پیشوندها می باشد که گوگل استفاده از آن را توصیه می کند و توییتر در پروژه هایش استفاده می کند.
برتری که Autoprefixer نسبت به دیگر ابزارهای پیشوندگذاری دارد این است که بر اساس تنظیماتی که ما برایش در نظر می گیریم و بر اساس آماری که از سایت caniuse دارد عملیات پیشوندگذاری را انجام می دهد.
برای استفاده از این ابزار چندین راه وجود دارد. بهترین راه تعریف آن به عنوان یک Task در مراحل کاری و اجرای آن توسط Grunt و یا Gulp می باشد که ما در مطالب آینده این موضوع را مورد بررسی قرار خواهیم داد. ( همینطور در مورد sass و gulp و sublime نیز صحبت می کنیم.)
راه دیگر استفاده از پلاگین ساخته شده آن برای sublime است که می توانید آن را نصب کنید.
یک راه هم ابزارهای آنلاین هستند, که امروز ما قصد معرفی یکی از آنها را که توسط این سایت طراحی شده است را داریم:
استفاده از این ابزار خیلی ساده است کافیست کد CSS را در سمت چپ قرار دهید و خروجی پیشوندگذاری شده را از قسمت سمت راست کپی کنید.
تنها نکته ای که زمان استفاده از Autoprefixer باید در نظر بگیرید, تنظیم آن در مورد پیشتیبانی مرورگرهای مختلف است. یک قسمت در بالای صفحه برای انجام این تنظیمات وجود دارد. خطوط زیر نمونه هایی از انتخاب مرورگرهایی که هدف شما برای پشتیبانی هستند می باشند.
last 2 versions <!-- دو تا نسخه آخر همه مرورگرهای اصلی -->
last 2 Chrome versions <!-- دو تا نسخه آخر مرورگر کروم -->
> 5% <!-- مرورگر هایی که مورد استفاده آنها بیشتر از 5% کل مرورگر ها در جهان است -->
> 5% in IR <!-- مرورگر هایی که مورد استفاده آنها بیشتر از 2% همه مرورگرها در کشور ایران است -->
ie 6-8 <!-- انتخاب بازه ای از مرورگرها مثلا در اینجا نسخه های 6 تا 8 مرورگرهای مایکروسافت -->
Firefox > 20 <!-- نسخه های جدیدتر از 20 مرورگر فایرفاکس -->
Firefox >= 20 <!-- نسخه های جدیدتر از 20 مرورگر فایرفاکس و خود نسخه 20 -->
Opera < 40 <!-- نسخه های قبل از 40 مرورگر اپرا -->
iOS 7 <!-- انتخاب یک نسخه خاص یک مرورگر خاص -->
در ضمن می توانید موارد بالا را با هم ترکیب کنید و برای این کار باید از ویرگول استفاده کنید به عنوان مثال تنظیمات پیشفرض autoprefixer به صورت زیر است:
> 1%, last 2 versions, Firefox ESR, Opera 12.1
برای آشنایی بیشتر با این موضوع می توانید به این آدرس مراجعه کنید. همینطور برای اینکه از آمار استفاده از مرورگرها با خبر باشید می توان به این صفحه نگاهی داشته باشید.
من از ویژوال استودیو استفاده می کنم با نصب ریشارپر بر روی آن نیازهای Autoprefixer رو برای مرورگرای مختلف در قبل و بعد از کدنویسی رفع می کنه.
مطالب خیلی مفیدی ارائه دادید
بسیار سپسگذارم از شما
چقد کار خوبی کردین که اینو معرفی کردین. ممنون از شما.
میشه بیشتر توضیح بدین تا بقیه هم باهاش بیشتر آشنا بشن؟
مثلا اینکه داده ها شو از کجا میاره؟ و نحوه کارش چجوریه یعنی همونجا که css می نویسید بقیه پیشوندها رو تولید می کنه؟
تو نسخه جدید ویژوال استدیو بدون نصب ریشارپر اگر یه بار دکمه تب رو بزنیم این کار رو برامون انجام میده
همچنین اکستشن های زیادی برای اینکار هست برای ویژوال استدیو هست که میشه نصب کرد
خیلی ممنون
تفاوت لفظ autoprefix و fallback در چیه؟
ببخشید prefix من ذهنم درگیر بود یه چیزی نوشتم شما به دل نگیر :دی
prefix اون پیشوندهایی هستند که مرورگرها بوجود آوردن تا یک سری ویژگی ها رو پشتیبانی کنند. مثل -webkit- یا -moz- و … که بعدا فهمیدن کار اشتباهی بود و دیگه ادامه نداند ولی هنوز ما برای بعضی از ویژگی ها و بعضی از نسخه های مرورگرها نیاز داریم تا از این پیشوند ها استفاده کنیم.
fallback یه چیز دیگست. فرض کنید می خواین به یک باکس inline-flex بدید اما می دونید که این مقدار برای مرورگرهای قدیمی تعریف نشده و ساپورت نمیشه حالا برای اون مرورگرها از inline-block استفاده می کنیم چون اون رو ساپورت می کنند. باید به این ترتیب هم نوشته بشه:
display: inline-block
display: inline-flex
حالا وقتی یک مرورگر قدیمی به این خطوط نگاه میکنه display اون باکس رو برابر با inline-block قرار میده بعد میره خط بعد چون اون مقدارو نمیشناسه تمومه دیگه. اما وقتی مرورگر مدرن میره خط بعد inline-flex رو میشناسه پس اون مقدار رو برای باکس در نظر میگیره.
به این کار میگن Fallback نویسی. یعنی اگر مورد دوم ساپورت نشد ما یک پشتیبانی داشته باشیم.
موفق باشید.
مرسی
اگه سرعت پاسخگویی رو بالا ببرید ممنون میشیم.
پست برای من ایمیل نشد توی تلگرام متوجهش شدم. چرا آخه!
مشکلی که در حال حاضر بنده باهاش مواجه هستم اینکه زبان انگلیسیم خوب نیست و وقتی سوالی و یا مشکلی توی کدم دارم اجبارا باید به زور به stackoverflow مراجعه کنم که بنده خداها جواب میدن ولی اینکه یخورده ناجور میشه :D گفتم یه درد دلی کرده باشم!
چرا شما اینقدر میگید sublime
brackets که رایگان هست و توسعه داده شده برای فرانت اند رو جایگزین نمیکنید! اونم پلاگین داره برای این منظور.
من تجربه کاری ندارم فقط این دو رو میشناسم، دلیل استفاده شما از sublime چیه؟
انصافا براکتس فوق العاده هستش … فوق العاده
سلام
brackets هم یه پلاگین به نام autoprefixer داره که به محض اینکه فایل رو save کنید prefix های مورد نیاز رو به کدهای css اضافه میکنه
ممنون از بابت مطالب کاربردی که توی سایت منتشر میکنید
اگه براتون مقدوره لطفا برای اموزش sass هم مطلب بذارید
آقا دمت گرم، یه دونه ای
سلام , شما می تونید با استفاده از پلاگین css-auto-prefix در برنامه VScode امکان پیشوند نویسی رو به برنامه اضافه کنید . دستور کارشم اینطوریه که همون لحظه که شما صفتی رو از اینتلی سنس تب می کنید , تمام پیشوند های لازم رو برای مرورگر های مختلف درج می کنه و هر مقداری رو که برای اون صفت ( اولیه ) وارد کنیم تو مورد های بعدی هم درج میشه !
لینک پلاگین : https://marketplace.visualstudio.com/items?itemName=sporiley.css-auto-prefix
سلام. من یه موضوعی رو متوجه نمیشم. الان میتونیم بگیم جدیدترین های سی اس اس گرید ها هستن. خب مثلا کروم برای پشتیبایش (توی یه سایتی دیدم) باید حداقل نسخش 57 باشه. خب الان بنده رفتم کروم دانلود کنم. دیدم نسخه 92 هستش! خب واقعا چه نیازیه که برامون مهم باشه پیشوندها؟ خب حالا بخاطر یک در هزار که واقعا نمیشه اینهمه پیشوند اضافه کرد که. میتونین راهنمایی کنین؟
سلام، معمولا پیشوندها رو دیگه برای کروم های قدیمی کسی نمیزنه، بیشتر مربوط به مایکروسافت و یا سافاری هستن که اهمیت دارند یا مثلا ویژگی های خاصی مثل mask حتی برای کروم. در کل برای استفاده از این ابزار یک سری تنظیمات وجود داره که تحت عنوان browserlist مطرح میشه که اونجا میتونی بگی چه مرورگرهایی رو میخوای ساپورت کنی که بر همون اساس پیشوند میزنه، اینطوری نیست که همه رو بخواد بزنه و حجم رو خیلی زیاد کنه.
توی دوره خودکارسازی جریان کاری یک قسمت رو به همین موضوع اختصاص دادیم.
سلام و احترام خدمت شما ممنون از سایت خوب تون
یه سوال در مورد prefix دارم و اون اینکه آیا ما با نرم افزار کد های sass رو کامپایل کنیم Autoprefix انجام میشه یا نه باید داخل کد هامون به صورت دستی خودمون انجام بدیم و یا از این ابزار های انلاین استفاده کنیم؟
اگه این نرم افزار ها انجام میدن ممنون میشم چند تا شون را معرفی کنید.
سلام، بهترین روش استفاده از این، قرار دادنش توی جریان کاری شما هستش که مثلا میتونید از یک npm script استفاده کنید.
دوره زیر همین ها رو توضیح میده:
https://css-tricks.ir/?p=8011