این مقاله اولین مقاله از یک سری در مورد رام کردن CSS است. امروز به فناوری نگاه خواهیم کرد CSS Reset.

چرا این مورد نیاز است؟

هر مرورگر مقادیر سبک پیش فرض خود را برای عناصر مختلف HTML تنظیم می کند. از جانب با استفاده از CSSبرای اطمینان از سبک‌های مرورگر متقابل، می‌توانیم این تفاوت را بازنشانی کنیم.

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

اما اکنون ما اصلاً هیچ تورفتگی نداریم، از جمله بین پاراگراف های جداگانه! چه باید کرد؟ دروغ نگویید و نترسید: در زیر تنظیم مجدد خود، قانون مورد نیاز خود را شرح خواهیم داد. این میتونه انجام بشه، این شدنیه، این امکان پذیره روش های مختلف: تورفتگی زیر یا بالای پاراگراف را مشخص کنید، آن را به درصد، پیکسل یا em مشخص کنید.

مهمتر از همه، مرورگر اکنون بر اساس قوانین ما بازی می کند، نه ما بر اساس قوانین او. تصمیم گرفتم این کار را به این صورت انجام دهم:

* ( حاشیه: 0؛ بالشتک: 0؛ ) p ( حاشیه: 5 پیکسل 0 10 پیکسل 0؛ )

در نتیجه، آنچه را می توان در مثال سوم مشاهده کرد، به دست آوردیم.

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

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

1. کمتر است بیشتر - انتخاب من Reset CSS (Ed Elliot).

2. تنظیم مجدد CSS شما اولین چیزی است که مرورگر باید ببیند

بازنشانی سبک ها پس از تنظیم سبک های خود برای عناصر، رویکرد درستی نیست. در این صورت نباید انتظار خوبی از نمایشگر توسط مرورگر داشت. به یاد داشته باشید که همیشه باید ابتدا CSS Reset و سپس تمام سبک های دیگر را وارد کنید.

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

برخی ممکن است یک سوال منطقی بپرسند: چرا این اتفاق می افتد؟ پاسخ ساده است: قوانین نوشته شده در فایل CSS (و حتی به ترتیب آنها در سند) قوانین اعلام شده قبلی را بازنویسی می کنند.

خیلی از موضوع منحرف نشویم و ادامه دهیم. بیایید سبک های اریک مایر را در مثال خود اعمال کنیم، اما بعد ازشرح خواص ما، همانطور که در مثال 4 نشان داده شده است. ریاضیدانان می‌گویند: "این چیزی است که باید ثابت شود."

3. از یک سند CSS جداگانه برای CSS Reset استفاده کنید

من باید (نه، من به هیچ وجه مجبور نبودم) به این توصیه اشاره کنم. استفاده از یک فایل جداگانه برای CSS Reset یک روش معمول است که توسط آن پشتیبانی می شود عدد بزرگتوسعه دهندگان

در واقع من جایگاه آفرینش را می گیرم یک فایل CSS بزرگبه دلیل عملکرد بالاتر این رویکرد. اما در مورد این موضوع، من با اکثریت موافقم: CSS Reset باید به یک فایل جداگانه منتقل شود (معمولاً reset.css نامیده می شود). در این صورت می توانید بدون هیچ تلاشی برای جداسازی آن از سایر قوانین CSS از آن در پروژه های مختلف استفاده کنید.

4. سعی کنید از استفاده از انتخابگر جهانی خودداری کنید

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

این نکته به ویژه هنگامی که در حال توسعه راه حل هایی مانند تم های CMS هستید بسیار مهم است. شما نمی توانید از قبل پیش بینی کنید که چگونه از آن استفاده می شود و چگونه اصلاح می شود. بهتر است قوانین اساسی CSS را برای همه عناصر توصیف کنیم تا از مکانیسم غیرقابل پیش بینی (هر چند کوچکتر) انتخابگرهای جهانی برای این کار استفاده کنیم.

5. در هنگام استفاده از CSS Reset از توضیحات اضافی اموال خودداری کنید

یکی دیگر از دلایلی که من یک فایل CSS Reset جداگانه را دوست ندارم، افزونگی احتمالی اعلان‌های اموال CSS بعدی است. تکرار سبک های فردی شما در میان کل مجموعه فایل های CSS رفتار بدی است و باید از آن اجتناب کرد. البته گاهی اوقات ما خیلی تنبل هستیم که با زحمت مجموعه ای از سبک ها را مرور کنیم و برخی از آنها را ترکیب کنیم، اما حداقل باید تلاش کنیم!

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

بدنه (ارتفاع خط: 1؛ رنگ: مشکی؛ پس زمینه: سفید؛ )

بیایید بگوییم شما از قبل می دانید که عنصر چگونه خواهد بود. بدن:

1. پس زمینه رنگ: #cccccc;
2. رنگ: #996633;
3. شما می خواهید یک تصویر پس زمینه خاص را به صورت افقی تکرار کنید.

در این مورد، نیازی به ایجاد یک انتخابگر جدید برای توصیف ویژگی های خود نیست - می توانید آنها را به سادگی در CSS Reset قرار دهید. بیایید آن را انجام دهیم:

بدنه (ارتفاع خط: 1؛ رنگ: #996633؛ پس‌زمینه: آدرس URL#ccc (tiled-image.gif) تکرار-x بالا سمت چپ؛ )

از تغییر خود CSS Reset نترسید.آن را برای شما سفارشی کنید، کاری کنید که برای شما کار کند. در صورت نیاز در مورد خاص خود را تغییر دهید، بازسازی کنید، حذف کنید و اضافه کنید.

اریک مایر در این باره گفت: "این موردی نیست که همه باید از CSS Reset بدون تغییر استفاده کنند."

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

نمونه های اسکریپت بازنشانی CSS

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

Eric Meyer CSS Reset

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

/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | مجوز 20110126: هیچ (دامنه عمومی) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, مخفف, آدرس, بزرگ، نقل قول، کد، del، dfn، em، img، ins، kbd، q، s، samp، کوچک، ضربه، قوی، sub، sup، tt، var، b، u، i، مرکز، dl، dt، dd، ol، ul، li، مجموعه فیلدها، فرم، برچسب، افسانه، جدول، عنوان، tbody، tfoot، thead، tr، th، td، مقاله، کنار، بوم، جزئیات، جاسازی، شکل، عنوان شکل، پاورقی، سرصفحه، hgroup، منو، ناوبری، خروجی، یاقوت، بخش، خلاصه، زمان، علامت، صدا، ویدئو ( حاشیه: 0؛ بالشتک: 0؛ حاشیه: 0؛ اندازه قلم: 100%؛ فونت: ارث بری؛ تراز عمودی: خط پایه . ol، ul (لیست-سبک: هیچکدام؛ ) بلوک نقل قول، q ( نقل قول: هیچ، ) بلوک نقل قول:قبل، بلوک نقل قول:بعد، q:قبل، q:پس از ( محتوا: ""؛ محتوا: هیچکدام؛ ) جدول (حاشیه- فروپاشی: ج فرو ریختن فاصله مرزی: 0; )

یاهو (YUI 3) CSS را بازنشانی کنید

YUI 3 CSS Style Reset سبک متضاد عناصر HTML توسط مرورگرها را مانند هر اسکریپت تنظیم مجدد CSS دیگری کاهش می دهد تا یک پایه محکم برای ساخت وب سایت ها و برنامه های کاربردی وب ایجاد کند.

/* YUI 3.18.1 حق چاپ 2014 Yahoo! شرکت تمامی حقوق محفوظ است. تحت مجوز BSD مجوز دارد. http://yuilibrary.com/license/ */ /* TODO باید تنظیمات را در HTML حذف کند زیرا ما نمی‌توانیم فضای نام آن را تغییر دهیم. TODO با پیشوند، آیا باید برای کاهش وزن بر اساس انتخابگر یا ویژگی گروه بندی کنم؟ */ html( color:#000; background:#FFF; ) /* TODO تنظیمات BODY را حذف کنید زیرا نمی‌توانیم فضای نام آن را تغییر دهیم. */ /* تست TODO قرار دادن یک کلاس در HEAD. - در FF خراب می شود. */ بدنه، div، dl، dt، dd، ul، ol، li، h1، h2، h3، h4، h5، h6، پیش، کد، فرم، مجموعه فیلدها، افسانه، ورودی، textarea، p، بلوک نقل قول، th، td ( margin:0; padding:0; ) table ( border-collapse:collapse; border-spacing:0; ) fieldset, img ( border:0; ) /* TODO در مورد مدیریت وراثت متفاوت فکر کنید، شاید اجازه دهید IE6 کمی خراب شود ... */ آدرس، عنوان، نقل قول، کد، dfn، em، قوی، th، var ( font-style: normal; font-weight: normal; ) ol، ul (list-style:none; ) caption، th ( text-align:left; ) h1، h2، h3، h4، h5، h6 (اندازه قلم:100%؛ وزن قلم:عادی؛ ) q:قبل، q:after ( محتوا:""; ) abbr, مخفف (حاشیه: 0؛ نوع قلم: معمولی؛ ) /* برای حفظ ارتفاع خط و ظاهر انتخابگر */ sup ( تراز عمودی: متن-بالا؛ ) زیر ( تراز عمودی: متن-پایین؛ ) ورودی، ناحیه متنی را انتخاب کنید ( font-family:inherit; font-size:inherit; font-weight:inherit; *font-size:100%; /*برای فعال کردن تغییر اندازه برای IE*/ ) /*زیرا افسانه در IE به ارث نمی رسد * / legend ( color:#000; ) /* YUI CSS Detect ion Stamp */ #yui3-css-stamp.cssreset ( نمایشگر: هیچ; )

بازنشانی سبک های normalize.css

Normalize.css یک فایل CSS سفارشی است که به مرورگرها این امکان را می دهد تا همه عناصر را به طور مداوم و مطابق با استانداردهای مدرن ارائه دهند. نویسندگان آن تفاوت های بین سبک ها را بررسی کردند مرورگرهای مختلفبه طور پیش‌فرض فقط آن سبک‌هایی را تنظیم می‌کند که نیاز به نرمال‌سازی دارند.

/*! normalize.css نسخه 6.0.0 | مجوز MIT | github.com/necolas/normalize.css */ /* سند =================================== =================================== */ /** * 1. ارتفاع خط را در همه تصحیح کنید مرورگرها * 2. از تنظیم اندازه فونت پس از تغییر جهت در * IE روشن جلوگیری کنید تلفن ویندوزو در iOS */ html ( ارتفاع خط: 1.15؛ /* 1 */ -ms-text-size-adjust: 100%؛ /* 2 */ -webkit-text-size-adjust: 100%؛ /* 2 */ ) /* بخش ها =============================================== ======================== */ /** * نمایش صحیح را در IE 9- اضافه کنید. */ مقاله، کنار، پاورقی، سرصفحه، ناوبری، بخش (نمایش: بلوک؛ ) /** * اندازه قلم و حاشیه عناصر «h1» را در زمینه های «بخش» و * «مقاله» در کروم، فایرفاکس، و سافاری */ h1 ( اندازه قلم: 2em؛ حاشیه: 0.67em 0; ) /* گروه بندی محتوا ============================ =========================================*/ /** * اضافه کردن نمایش صحیح در IE 9-. * 1. نمایش صحیح را در IE اضافه کنید. */ figcaption, figure, main ( /* 1 */ display: block; ) /** * حاشیه صحیح را در IE 8 اضافه کنید. */ figure ( margin: 1em 40px; ) /** * 1. کادر صحیح را اضافه کنید اندازه در فایرفاکس * 2. سرریز را در Edge و IE نشان دهید. */ ساعت ( اندازه جعبه: محتوای جعبه؛ /* 1 */ ارتفاع: 0؛ /* 1 */ سرریز: قابل مشاهده؛ /* 2 */ ) /** * 1. وراثت و مقیاس بندی اندازه فونت را تصحیح کنید در تمام مرورگرها * 2. اندازه فونت عجیب و غریب «em» را در همه مرورگرها تصحیح کنید. */ pre ( font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ ) /* معناشناسی سطح متن =============== ================================================== ======== */ /** * 1. پس‌زمینه خاکستری پیوندهای فعال در IE 10 را حذف کنید. * 2. شکاف‌های زیرخط پیوندها را در iOS 8+ و Safari 8+ حذف کنید. */ a ( پس زمینه-رنگ: شفاف؛ /* 1 */ -webkit-text-decoration-skip: objects; /* 2 */ ) /** * 1. حاشیه پایین را در Chrome 57- و Firefox 39- بردارید . * 2. صحیح را اضافه کنید تزیین متن در Chrome، Edge، IE، Opera و Safari. */ abbr ( حاشیه-پایین: هیچ؛ /* 1 */ تزیین متن: زیر خط؛ /* 2 */ تزیین متن: زیرخط نقطه‌دار؛ /* 2 */) /** * جلوگیری از کاربرد تکراری «پررنگ‌تر» طبق قانون بعدی در Safari 6. */ b، قوی ( font-weight: inherit; ) /** * وزن قلم صحیح را در Chrome، Edge و Safari اضافه کنید. */ b، قوی ( وزن قلم: bolder; ) /** * 1. وراثت و مقیاس بندی اندازه فونت را در همه مرورگرها تصحیح کنید. * 2. اندازه فونت عجیب و غریب «em» را در همه مرورگرها تصحیح کنید. */ کد، kbd، samp ( font-family: monospace، monospace; /* 1 */ اندازه قلم: 1em; /* 2 */ ) /** * سبک فونت صحیح را در Android 4.3- اضافه کنید. */ dfn ( سبک فونت: مورب؛ ) /** * پس زمینه و رنگ صحیح را در IE 9- اضافه کنید. */ علامت گذاری (رنگ پس زمینه: #ff0; رنگ: #000; ) /** * اندازه قلم صحیح را در همه مرورگرها اضافه کنید. */ کوچک (اندازه قلم: 80%؛ ) /** * از تأثیر عناصر «sub» و «sup» بر ارتفاع خط در * همه مرورگرها جلوگیری کنید. */ sub, sup ( اندازه قلم: 75%؛ ارتفاع خط: 0؛ موقعیت: نسبی؛ تراز عمودی: خط پایه؛ ) ساب ( پایین: -0.25em؛ ) sup ( بالا: -0.5em؛ ) /* محتوای جاسازی شده ================================================= ======================= */ /** * نمایش صحیح را در IE 9- اضافه کنید. */ صوتی، تصویری (نمایشگر: inline-block; ) /** * نمایش صحیح را در iOS 4-7 اضافه کنید. */ audio:not() (نمایش: هیچ، ارتفاع: 0؛ ) /** * حاشیه تصاویر داخل پیوندها را در IE 10- حذف کنید. */ img ( border-style: none; ) /** * سرریز را در IE پنهان کنید. */ svg:not(:root) ( سرریز: پنهان؛ ) /* فرم ها ============================== ======================================== */ /** * حذف حاشیه در فایرفاکس و سافاری */ دکمه، ورودی، optgroup، select، textarea ( حاشیه: 0; ) /** * نمایش سرریز در IE. * 1. سرریز را در Edge نشان دهید. دکمه */، ورودی ( /* 1 */ سرریز: قابل مشاهده؛ ) /** * ارث تبدیل متن در Edge، فایرفاکس و IE را حذف کنید. * 1. وراثت تبدیل متن در فایرفاکس را حذف کنید. دکمه */ را انتخاب کنید ( /* 1 */ text-transform: none; ) /** * 1. از یک اشکال WebKit که در آن (2) کنترل‌های بومی «صوتی» و «ویدئو» * را در اندروید 4 نابود می‌کند، جلوگیری کنید. * 2. عدم امکان استایل دادن به انواع قابل کلیک در iOS و Safari را اصلاح کنید. */ button, html , /* 1 */ , ( -webkit-appearance: button; /* 2 */ ) /** * حاشیه داخلی و padding را در فایرفاکس بردارید. */ دکمه::-moz-focus-inner, ::-moz-focus-inner, ::-moz-focus-inner, ::-moz-focus-inner ( به سبک حاشیه: هیچکدام؛ padding: 0; ) /** * سبک های فوکوس تنظیم نشده توسط قانون قبلی را بازیابی کنید. */ دکمه:-moz-focusring، :-moz-focusring، :-moz-focusring، :-moz-focusring ( طرح کلی: 1px نقطه‌دار ButtonText؛ ) /** * 1. بسته بندی متن را در Edge و IE اصلاح کنید. * 2. وراثت رنگ از عناصر "fieldset" در IE را تصحیح کنید. * 3. بالشتک را بردارید تا وقتی توسعه دهندگان عناصر "فیلدست" را در همه مرورگرها به صفر برسانند، غافلگیر نشوند. */ افسانه ( اندازه جعبه: جعبه حاشیه؛ /* 1 */ رنگ: ارث بری؛ /* 2 */ نمایش: جدول؛ /* 1 */ حداکثر عرض: 100%؛ /* 1 */ بالشتک: 0 ؛ /* 3 */ فضای سفید: عادی؛ /* 1 */ ) /** * 1. نمایش صحیح را در IE 9- اضافه کنید. * 2. تراز عمودی صحیح را در کروم، فایرفاکس و اپرا اضافه کنید. */ پیشرفت ( نمایش: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ ) /** * نوار اسکرول عمودی پیش فرض را در IE حذف کنید. */ textarea ( سرریز: خودکار؛ ) /** * 1. اندازه کادر صحیح را در IE 10- اضافه کنید. * 2. بالشتک را در IE 10- بردارید. */، ( اندازه جعبه: border-box; /* 1 */ padding: 0; /* 2 */ ) /** * سبک مکان نما دکمه های افزایش و کاهش را در Chrome تصحیح کنید. */ ::-webkit-inner-spin-button, ::-webkit-outer-spin-button ( height: auto; ) /** * 1. ظاهر عجیب و غریب را در Chrome و Safari تصحیح کنید. * 2. سبک طرح کلی در سافاری را اصلاح کنید. */ ( -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ ) /** * دکمه های padding داخلی و لغو را در Chrome و Safari در macOS بردارید. */ ::-webkit-search-cancel-button, ::-webkit-search-decoration ( -webkit-appearance: none; ) /** * 1. اصلاح ناتوانی در استایل دادن به انواع قابل کلیک در iOS و Safari. * 2. ویژگی های فونت را در سافاری به «ارث بری» تغییر دهید. */ ::-webkit-file-upload-button ( -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ ) /* تعاملی ============ ================================================== =========== */ /* * نمایش صحیح را در IE 9- اضافه کنید. * 1. صفحه نمایش صحیح را در Edge، IE و Firefox اضافه کنید. */ جزئیات، /* 1 */ منو (نمایش: مسدود؛ ) /* * نمایش صحیح را در همه مرورگرها اضافه کنید. */ خلاصه (نمایش: مورد فهرست؛ ) /* اسکریپت =================================== =================================== */ /** * نمایش صحیح را در IE 9 اضافه کنید- . */ canvas ( display: inline-block; ) /** * نمایش صحیح را در IE اضافه کنید. */ الگو ( نمایش: هیچکدام؛ ) /* پنهان ======================================= ================================= */ /** * نمایش صحیح را در IE 10- اضافه کنید. */ (نمایش: هیچ؛ )

بازنشانی از طریق انتخابگر جهانی * (ستاره)

در نگاه اول، ممکن است این ساده ترین و موفق ترین راه حل به نظر برسد، چرا باید تمام عناصر HTML را توصیف کرد و مقادیری را به آنها اختصاص داد، در حالی که می توانید از انتخابگر * استفاده کنید، زیرا برای همه HTML اعمال می شود.

* (حاشیه: 0؛ بالشتک: 0؛ )

اما متأسفانه این عمل خوبی نیست. اعمال قوانین برای هر عنصر در یک سند، به ویژه در صفحات وب بزرگ، برای مرورگر بسیار سخت است (و در مقایسه با سایر تنظیمات CSS زمان بر است)، و همچنین می تواند بسیاری از سبک های پیش فرض خوب را شکست دهد.

بازنشانی سبک ها و وردپرس

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

اولین مورد این است که شما باید کد بازنشانی را در بالای فایل style.css قالب وردپرس خود کپی کنید (بعد از خط نویسندگی و عنوان موضوع، یعنی بعد از متن قاب شده با کسری و ستاره /* ... * /.

@import "reset.css"؛

اگر دستور import @ در CSS وجود دارد، باید در همان ابتدای جدول (قبل از همه قوانین) باشد. در غیر این صورت، مرورگر ممکن است آن را نادیده بگیرد.

از سوی دیگر، به منظور بهبود عملکرد، جداول CSSسبک ها، به عنوان یک قاعده، برعکس، در یک فایل ترکیب می شوند. بنابراین، استفاده از @import بدون نیاز واقعی ارزش آن را ندارد.

همانطور که می بینید، تنظیم مجدد سبک ها در وردپرس چیز خاصی نیست.

با تشکر

در نگارش این مقاله از منابع زیر استفاده شده است.

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

CSS Reset یا Reset Defaults

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

/* http://meyerweb.com/eric/tools/css/reset/
نسخه 2.0 | 20110126
مجوز: هیچ (دامنه عمومی)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a، abbr، مخفف، آدرس، بزرگ، نقل قول، کد،
del، dfn، em، img، ins، kbd، q، s، samp،
کوچک، ضربه، قوی، زیر، sup، tt، var،
b، u، i، مرکز،
dl، dt، dd، ol، ul، li،
مجموعه فیلد، فرم، برچسب، افسانه،
جدول، عنوان، tbody، tfoot، thead، tr، th، td،
مقاله، کنار، بوم، جزئیات، جاسازی،
شکل، تصویر، پاورقی، سرصفحه، hgroup،
منو، ناوبری، خروجی، یاقوت، بخش، خلاصه،
زمان، علامت، صدا، ویدئو (
حاشیه: 0;
بالشتک: 0;
حاشیه: 0;
اندازه فونت: 100%
فونت: ارث بردن;
vertical-align: baseline;
}
/* بازنشانی نقش نمایشگر HTML5 برای مرورگرهای قدیمی */
مقاله، به کنار، جزئیات، عنوان شکل، شکل،
پاورقی، سرصفحه، hgroup، منو، ناوبری، بخش (
display:block;
}
بدن (
ارتفاع خط: 1;
}
اول، اول (
list-style: هیچکدام;
}
نقل قول بلوک، q (
نقل قول: هیچکدام;
}
blockquote:before, blockquote:after,
q:قبل،ق:بعد (
محتوا: ""؛
محتوا: هیچ
}
جدول (
border-collapse: فرو ریختن;
فاصله مرزی: 0;
}

من کد را کمی کامنت خواهم کرد. در مرحله اول، حاشیه های داخلی و خارجی را برای تمام عناصر ضروری بازنشانی می کند. در مرحله دوم، پشتیبانی از عناصر HTML5 وجود دارد. آنها قانونی دارند که به آنها اجازه می دهد در برخی از نسخه های مرورگرها به درستی نمایش داده شوند. سوم، تنظیمات معمولی برای عملیات راحتبا جداول (حذف تورفتگی بین سلول ها و دو حاشیه). همچنین، نشانگرهای استاندارد برای لیست ها و نقل قول ها برای نقل قول حذف شده اند. اگر می‌خواهید از استایل پیش‌فرض استفاده کنید، این بخش‌های کد باید حذف شوند.

چگونه تنظیمات css را خودتان بازنشانی کنید

با داشتن کم و بیش عادی css، می توانید سعی کنید خودتان چند قانون بنویسید. مثلا:

*{
حاشیه: 0;
بالشتک: 0;
}

این شاید بیشتر باشد دستور ساده. ستاره در این مورد همه انتخابگرها را نشان می دهد، بنابراین استایل ها بر روی تمام عناصر صفحه وب اعمال می شود و حاشیه ها و padding آنها را بازنشانی می کند. تعجب خواهید کرد، اما این خطوط کد ساده ممکن است برای ارائه سازگاری بین مرورگرها در بسیاری از مرورگرهای وب کافی باشد. تمام قوانین دیگر را می توان به دلخواه اضافه کرد. من همچنین اضافه کردن display: block را به همه تگ‌های HTML5 توصیه می‌کنم.

قوانین بازنشانی css را کجا قرار دهیم

اینجا در بالا کد را به شما پیشنهاد کردم، اما کجا آن را وارد کنید؟ در اینجا دو گزینه وجود دارد:

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

برای اطلاعات بیشتر در مورد اتصال css stylesheet به html مراجعه کنید

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

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

از نویسنده:ساخت وب سایت در وب می تواند مانند ساختن روی شن روان باشد. مرورگرها همین کار را انجام می دهند، اما هر از چند گاهی با تفاوت های غیرقابل پیش بینی آزاردهنده ای مواجه می شوند. به عنوان مثال، همه مرورگرها دارای "سبک شیت هستند عامل کاربر' مجموعه‌ای از سبک‌های پیش‌فرض CSS است که حتی قبل از اینکه استایل‌ها را به page1 اختصاص دهید، عنوان را مانند یک عنوان و غیره نشان می‌دهد. البته، هر موتور مرورگر از مجموعه های پیش فرض کمی متفاوت استفاده می کند.

یکی از نمونه‌ها سبک‌های فهرست پیش‌فرض بود، که در آن، استایل‌برگ‌های پیش‌فرض مرورگر اینترنت اکسپلورر و اپرا در ابتدا دارای تورفتگی در حاشیه سمت چپ: 30pt؛ بودند، در حالی که فایرفاکس و KHTML با padding-left: 40px ارائه شدند. اگر می‌خواهید با تعریف ul (padding-left: 0;) padding پیش‌فرض را تغییر دهید، این امر منجر به نتایج بسیار متفاوتی در مرورگرها می‌شود.

بازنشانی تنظیمات CSS

برای دستیابی به کمی ثبات، برخی از توسعه دهندگان تمام حاشیه ها و padding را با یک انتخابگر جهانی بازنشانی می کنند:

* (حاشیه: 0؛ بالشتک: 0؛)

* ( حاشیه : 0 ؛ بالشتک : 0 ؛ )

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

هدف از تنظیم مجدد این است که هر چیزی را که می توانید بازنشانی کنید... [و] به عنوان نقطه شروعی برای سبک های اولیه خود شما باشد.- اریک مایر

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, مخفف, آدرس, big, cite, code, del, dfn, em، img، ins، kbd، q، s، samp، کوچک، ضربه، قوی، زیر، sup، tt، var، b، u، i، مرکز، dl، dt، dd، ol، ul، li، مجموعه فیلدها، فرم، برچسب، افسانه، جدول، عنوان، tbody، tfoot، thead، tr، th، td، مقاله، کنار، بوم، جزئیات، جاسازی، شکل، عنوان شکل، پاورقی، سرصفحه، hgroup، منو، ناوبری، خروجی، یاقوت، بخش، خلاصه، زمان، علامت، صدا، ویدئو (حاشیه: 0؛ بالشتک: 0؛ حاشیه: 0؛ اندازه قلم: 100%؛ فونت: ارث بری؛ تراز عمودی: خط پایه؛ )

html , body , div , span , applet , object , iframe , h1 , h2 , h3 , h4 , h5 , h6 , p , blockquote , pre , a , abbr , مخفف , آدرس , بزرگ , نقل , کد , del , dfn , em , img , ins , kbd , q , s , samp , کوچک , ضربه , قوی , فرعی , سوپ , tt , var , b , u , i , مرکز , dl , dt , dd , ol , ul , li , مجموعه فیلد، فرم، برچسب، افسانه، جدول , عنوان , tbody , tfoot , thead , tr , th , td , مقاله، کنار، بوم، جزئیات، جاسازی، شکل، figcaption، پاورقی، سرصفحه، hgroup، منو، ناوبری، خروجی، یاقوت، بخش، خلاصه، زمان، علامت، صدا، ویدئو ( حاشیه: 0 بالشتک: 0 حاشیه: 0 اندازه فونت: 100%; فونت : inherit ; عمودی - تراز : خط پایه ;

برخی از ویژگی های بسیاری از عناصر (و نه همه) را به معادل متن ساده آنها بازنشانی می کند. از آنجایی که فقط عناصر منطبق بازنشانی می شوند، این امر برخی از مشکلات را دور می زند * (حاشیه: 0؛ padding: 0;). سپس می‌توانیم ویژگی‌های «بدون استایل» حذف‌شده را سبک‌دهی کنیم، با آگاهی از اینکه در حال ساختن یک پایه بین مرورگر پایدار هستیم. این تخصیص سبک همچنین به عنوان یک سیگنال برای نیاز به تنظیم آگاهانه سبک های مناسب برای این عناصر عمل می کند.

مسائل مربوط به بازنشانی CSS

بازنشانی های CSS یک نجات دهنده واقعی بوده اند، اما اکنون، به خصوص با ظهور وایرفریم ها، اغلب از آنها به عنوان "همانطور که هستند" استفاده می شود. به عنوان مثال، اریک فرض می‌کرد که توسعه‌دهندگان دیگر شروع به ساخت سایت‌ها بر اساس سبک‌های بازنشانی پیشنهادی می‌کنند و بر این اساس آنها را نادیده می‌گیرند، و نسخه اول Meyer Reset به طور موقت شامل این قانون می‌شود:

/* به یاد داشته باشید که سبک های فوکوس را تعریف کنید! */ :focus (طرح کلی: 0; )

متأسفانه، همه واقعاً سبک های فوکوس را تعریف نکردند و اریک آن را از نسخه دوم حذف کرد.

با اعمال ریست، کمی احساس انحراف می کنید. بازنشانی سبک‌های پیش‌فرض مرورگر شما را مجبور می‌کند در مورد نحوه نمایش هر عنصر فکر کنید، و کمک می‌کند تا اطمینان حاصل شود که عناصر به‌جای سبک‌های پیش‌فرض از لحاظ معنایی اعمال می‌شوند. اما عناصری مانند i و em تقریبا همیشه یک سبک مرورگر پیش فرض دارند. سایر سبک‌های پیش‌فرض مرورگر، مانند اندازه متن عنوان که زمانی بسیار بزرگ بود، تغییر کرده و به طور پیش‌فرض نسبتاً قابل تحمل شده‌اند. مشکلات زمانی شروع می‌شوند که می‌خواهید یک عنصر HTML بازنشانی را پس از ارسال با تنها سبک‌های بازنشانی «بدون استایل» اعمال کنید.

برای من، بزرگترین مشکل با تنظیم مجدد، ارث است، که منجر به اسپم در ابزارهای مرورگر می شود. وقتی می‌خواهید مشکل CSS یک عنصر تودرتو در کد شخص دیگری را ردیابی کنید، این کمکی نمی‌کند:

قوانین بازنشانی CSS به دلیل وراثت تکرار می شوند

NORMALIZE.CSS

نیکلاس گالاگر و جاناتان نیل رویکرد متفاوتی را با Normalize.css در پیش گرفتند، "یک فایل CSS کوچک که سازگاری بهتر بین مرورگرها را در سبک های پیش فرض عناصر HTML تضمین می کند." همانطور که با بازنشانی CSS، یک نقطه شروع متقابل مرورگر قوی به ما می دهد - دلیل اصلی بازنشانی در وهله اول - اما این دو رویکرد از نظر فلسفی متفاوت هستند.

بازنشانی‌های CSS سبک‌های عامل کاربر را نادیده می‌گیرند و بسیاری از عناصر را به حالت "بدون استایل" خود بازمی‌گردانند، که برخی از سطوح سطحی است که می‌توان با خیال راحت بر روی آنها ایجاد کرد. با این حال، قبل از اینکه بتوانیم با آنها بسازیم، باید بیشتر عناصر را سبک کنیم. در عوض، Normalize.css تنها با انتخاب مناسب‌ترین تنظیمات پیش‌فرض، ناسازگاری‌های سبک عامل کاربر را برطرف می‌کند. در اینجا ما همچنین یک پایه متقابل مرورگر ایمن دریافت می کنیم، اما شامل سبک های عامل کاربر عادی به عنوان مصالح ساختمانی آماده برای استفاده است. این اساسا چیزی شبیه یک نسخه ایده‌آل بین مرورگر از شیوه نامه پیش‌فرض CSS 2.1 است. در هر دو مورد، ما باید سبک‌های اصلی خود را برای ایجاد تصویر اضافه کنیم، اما از آنجا که تنظیمات پیش‌فرض مرورگر در Normalize.css باقی می‌مانند، به طور کلی استایل کمتری برای اضافه کردن وجود دارد.

از آنجایی که تغییرات در Normalize.css بیشتر هدفمند هستند، هیچ آبشاری از وراثت قوانین بازنویسی شده در ابزارهای نویسندگی مبتنی بر مرورگر شما وجود ندارد. این یک ul ساده است: بدون استایل با Meyer Reset و Normalize.css نسخه های 1 و 2:

عنصر "بدون استایل" یک لیست نامرتب

تنظیم مجدد Meyer را اعمال کنید

Normalize.css v1 را اعمال کنید

استفاده از Normalize.css v2

تفاوت آشکاری در فلسفه وجود دارد که در آن مثال Meyer Reset به صورت چند خط متن ساده بدون حاشیه، بالشتک یا گلوله ظاهر می‌شود، در حالی که نمونه‌های Normalize.css شبیه به سبک‌های پیش‌فرض هستند. تفاوت در استایل اعمال شده در این ul نیز به راحتی قابل مشاهده است.

با این حال، اینها همه سبک های اعمال شده برای ul نیستند. برای مقایسه، در اینجا همان اسکرین شات "بدون استایل"، اما با سبک های عامل کاربر قابل مشاهده، در فایرفاکس 21 و اپرا نکست 15 است.