41
تشکر

خلاصی از دردسر Prefixها در CSS

CSS3

CSS3

در زبان CSS همیشه باید بررسی کنیم که کدی که در حال نوشتن هستیم، در تمام مرورگرها به درستی کار کند، بعضی مواقع واقعاً موجب دردسر هستند!

اما راهکار بسیار ساده‌ایی برای رهایی از نوشتن Prefixها در CSS وجود دارد، به این صورت که ما کد استاندارد را مینویسیم، و کد مخصوص مرورگرهای مختلف را بوسیله برنامه Autoprefixer تولید میکنیم.

پکیج Autoprefixer

Autoprefixer یک پکیج در زبان Nodejs است که میتوان به صورت‌های مختلفی از آن استفاده کرد. این پکیج به همراه پکیج PostCSS کار میکند.

با استفاده از این پکیج کد زیر:

به صورت زیر کامپایل میشود:

خوبی این پکیج این است که از اطلاعات صحیح سایت caniuse استفاده میکند. همچنین میتواند کدهای اضافی که نوشتیم را نیز حذف کند. برای مثال در کد زیر پیشوند webkit لازم نیست.

بنابراین، پکیج Autoprefixer آن را حذف خواهد کرد.

استفاده در خط فرمان

راه‌های استفاده از این پکیج زیاد هستند. برای استفاده از این پکیج در خط فرمان ابتدا باید زبان Nodejs نصب شده باشد. سپس با استفاده از کد زیر برنامه Autoprefixer نصب خواهد شد.

حالا به راحتی میتوان از این پکیج استفاده کرد. در دستور زیر تمام فایل‌های CSS کامپایل و در پوشه build ذخیره میشود.

استفاده با Gulp (بهترین راه‌حل)

Gulp یک پکیج خودکار کننده کارها است، مانند Grunt اما با Syntaxیی ساده‌تر. برای استفاده از Gulp بعد از نصب آن باید پکیج‌های gulp-postcss و gulp-sourcemaps و autoprefixer-core را نصب کنید. سپس میتوانید از آن استفاده کنید. کد زیر نمونه‌ایی است که خود پکیج Autoprefixer مثال زده است.

استفاده در ادیتورها

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

نکته: راه‌‌های مختلف دیگری نیز مانند استفاده همزمان با LESS وجود دارد که بهتر است به مستندات آن رجوع کنید.

  • آروین می‌گه:

    با سلام. آقا من خودم خیلی کم پیش اومده که بخوام از این پیشوندا استفاده کنم. همیشه بدون اونا کد میزنم(به موارد خیلی خاص) و از هر دستوری هم که بخوام استفاده میکنم و کدامم توی اکثر مرورگر های آدمیزادی(یعنی هرچی غیر از IE) کار میکنن!!!

  • عباس امرایی می‌گه:

    خیلی ابزار عالی هستش، ممنون از این راهکار جالب من خودم خیلی با این موضوع سر جنگ داشتم و اعصابم داغون میشد.


  • نظرات این مطلب بسته است.