• منتقل کردن

این مقاله اولین چرخه در موضوع Taming CSS است. امروز ما به تکنولوژی نگاه خواهیم کرد تنظیم مجدد CSS.

چرا شما به آن نیاز دارید؟

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

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

اما اکنون ما هیچ مدرکی نداریم، از جمله بین پاراگراف های فردی! چه باید بکنید؟ دروغ نگویید و نترسید: در زیر تخلیه ما ما قانون را که ما نیاز داریم را توصیف می کنیم. می توان آن را انجام داد روش های مختلف: تعیین یک ضخامت از زیر یا بالای پاراگراف، آن را در درصد، پیکسل یا در EM مشخص کنید.

مهمترین چیز، مرورگر در حال حاضر با توجه به قوانین ما بازی می کند، و نه ما بر طبق آن. تصمیم گرفتم به این ترتیب انجام دهم:

* (حاشیه: 0؛ padding: 0؛) P (حاشیه: 5px 0 10px 0؛)

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

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

برای کمک به شما یک انتخاب، من چند لینک دیگر را ارائه می دهم:

1. کمتر بیشتر است - انتخاب من از تنظیم مجدد CSS (اد الیوت).

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

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

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

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

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

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

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

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

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

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

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

5. هنگام استفاده از تنظیم مجدد CSS، خواص بیش از حد را اجتناب کنید

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

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

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

فرض کنید شما قبلا می دانید که چگونه عنصر به نظر می رسد بدن:

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

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

بدن (ارتفاع خط: 1؛ رنگ: # 996633؛ سابقه و هدف: #CCC URL (tiled-image.gif) تکرار X بالا سمت چپ؛)

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

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

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

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

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

بر اساس موارد فوق، یکی از ویژگی های تسکین CSS این است که پس از استفاده از آن، بسیاری از عناصر HTML ظاهر معمول خود را از دست می دهند. و اگر از دست دادن زمینه های پاراگراف برای مبتدیان باشد، چیزی انتظار می رود برای مبتدیان، سپس به عنوان مثال، این واقعیت که دکمه های ایجاد شده از برچسب ها و یا به طور ناگهانی تبدیل به خارج از متن معمول تبدیل شده است - یک شگفتی کامل است. اما این نباید خجالت بکشد، زیرا برای این سبک ها و تنظیم مجدد، به طوری که Pedigreer پس از آن فراموش نکنید که آنها را در یک جدید مشخص کنید.

راه های زیادی برای بازنشانی سبک ها وجود دارد، و چه چیزی را انتخاب می کنید - این بستگی به شما دارد، اما من می توانم به شما بگویم - بهترین بازنشانی یکی است که شما خود را بر اساس تجربه و عادات خود ایجاد کرده اید. اگر هنوز چنین تجربه ای ندارید، می توانید از یکی از گزینه های زیر استفاده کنید.

همیشه سبک ها را برای بازنشانی CSS در ابتدای کد مشخص کنید، در غیر این صورت برخی از پارامترها ممکن است کار نمی کنند زیرا اولویت های سبککه هنگام پردازش صفحه HTML و کد CSS، مرورگرهای نصب شده اند.

تنظیم مجدد CSS با یک انتخاب جهانی

* (Font-family: به ارث؛ / * تمام عناصر از هدست فونت پدر و مادر خود را به ارث برده * / فونت سبک: به ارث برده؛ / * به ارث بردن طراحی * / فونت وزن: به ارث برده؛ / * به ارث بردن چربی * / عمودی-align: پایه؛ / * تراز عمودی عمودی * / فونت اندازه: 100٪؛ / * اندازه فونت 100٪ * / پس زمینه: شفاف؛ / * پس زمینه تمام عناصر شفاف * / مرز: 0؛ / * حذف قاب * / طرح: 0؛ / * خطوط را حذف کنید * / حاشیه: 0؛ / * حذف زمینه ها * / padding: 0؛ / * حذف EDENTS * /)

شرح مثال

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

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

بازنشانی CSS از یاهو

بدن، DIV، DL، DT، DD، UL، OL، LI، H1، H2، H3، H4، H5، H2، H4، H5، H6، پیش، فرم، فیلد، ورودی، textarea، p، blockquote، th، td (حاشیه: 0؛ Padding: 0؛) Fieldset، IMG، ABBR، Acronym (Border: 0؛) آدرس، عنوان، CITE، CODE، DFN، EM، Strong، TH، VAR (فونت سبک: طبیعی؛ وزن فونت: عادی؛) جدول (Border-Collapse: Collapse؛ / * مرزهای مشترک برای جداول جداول * / فاصله مرزی: 0؛ / * فاصله صفر بین سلول ها * /) caption، th (text-align: left؛ / * تراز متن به لبه سمت چپ * /) OL، UL (لیست سبک: هیچ؛ / * حذف نشانگرهای لیست * /) H1، H2، H3، H4، H5، H6 (فونت اندازه: 100٪؛ فونت وزن: عادی؛) پرسش: قبل از، Q: بعد از (محتوا: "؛ / * ما نقل قول ها را از برچسب q * /) لغو می کنیم

شرح مثال

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

تنظیم مجدد CSS از اریک مایر

HTML، Body، Div، Span، Applet، Object، Iframe، H1، H2، H3، H4، H5، H6، P، Blockquote، Pre، A، Abbr، Acronym، Address، Big، Cite، Code، Del، DFN، EM، IMG، INS، KBD، Q، S، SAMP، کوچک، اعتصاب، قوی، زیر، Sup، TT، VAR، B، U، I، CENTER، DL، DT، DD، OL، UL، LI، Fieldset، فرم، برچسب، افسانه، جدول، عنوان، tbody، tfoot، thead، th، th، td، مقاله، کنار، بوم، جزئیات، قراردادن، شکل، figcaption، footer، header، hgroup، منو، ناوبری، خروجی، روبی، بخش، خلاصه، زمان، علامت گذاری، صوتی، ویدئو (حاشیه: 0؛ Padding: 0؛ مرز: 0؛ فونت اندازه: 100٪؛ فونت: به ارث برده؛ عمودی، جزئیات، جزئیات، جزئیات، شکل، پاورقی، هدر، Hgroup، منو، ناوبری، بخش (نمایش: / * ما آیتم های بلوک (برای مرورگرهای قدیمی) * /) بدن (خط ارتفاع: 1؛ / * فاصله خطوط متن در صفحه * /) OL، UL (لیست سبک: هیچکدام؛) BLOCKQUOTE: قبل، BLOCKQUOTE: پس از، Q: قبل، Q: پس از (محتوا: "؛ / * حذف نقل قول ها در Q و مسدود کردن * / محتوا: هیچ؛ / * اضافه کردن برای وفاداری * /) Blockquote، Q (نقل قول: هیچ؛ / * راه دیگری برای حذف نقل قول * /) جدول (فروپاشی مرزی: Collapse؛ فاصله مرزی: 0؛)

شرح مثال

راه بعدی برای بازنشانی CSS پیشنهاد Eric Meyer (Eric Meyer) - یک توسعه دهنده وب شناخته شده در محافل خاصی است. در اینجا او قبلا یک تنظیم مجدد از سبک ها را برای برچسب ها از HTML 5 اضافه کرده است، که به هر حال در زمان نوشتن این مقاله، و خودشان هنوز هم بسیار ضعیف پشتیبانی می شوند مرورگرهای مدرن. اما شما همیشه باید به چشم انداز نگاه کنید، درست است؟

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

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

من خیلی متفاوت دیده ام تنظیم مجدد CSSهمه آنها در مورد یکسان هستند. شما می توانید از این استفاده کنید:

HTML، Body، Div، Span، Applet، Object، iFrame،
H1، H2، H3، H4، H5، H6، P، Blockquote، Pre،
A، Abbr، مخفف، آدرس، بزرگ، ذکر، کد،
دل، DFN، EM، فونت، IMG، INS، KBD، Q، S، SAMP،
کوچک، اعتصاب، قوی، زیر، Sup، Tt، Var،
ب، تو، من، مرکز،
DL، DT، DD، OL، UL، Li،
Fieldset، فرم، برچسب، افسانه،
جدول، عنوان، بدن، بدن، tfoot، thead، tr، th، td (
سابقه و هدف: شفاف؛
مرز: 0؛
فونت اندازه: 100٪؛
حاشیه: 0؛
طرح کلی: 0؛
Padding: 0؛
عمودی-align: baseline؛
}
بدن (
خط ارتفاع: 1؛
}
OL، UL (
لیست سبک: هیچکدام؛
}
Blockquote، Q (
نقل قول: هیچکدام؛
}
BlockQuote: قبل، blockquote: پس از،
س: قبل، س: بعد از (
محتوا: ""؛
محتوا: هیچکدام؛
}
: تمرکز (
طرح کلی: 0؛
}
جدول (
مرز فروپاشی: فروپاشی؛
فاصله مرزی: 0؛
}

من فکر می کنم که استفاده از آن به علت و خیلی قابل فهم است، اما چرا، به عنوان مثال، من از آن استفاده نمی کنم، مانند بسیاری از درختان دیگر، ارزش آن را در مورد آن ارزش دارد. اول، این است یک فایل اضافی، دوم، درك كردن برای پردازش، اما مهمتر از همه - من خواص پیش فرض را دوست دارم. به عنوان مثال، زمینه های مشابه در جدول. پس از همه، تمام خواص پیش فرض نه تنها آن را، بلکه به عنوان بیشتر گزینه بهینه نمایش عناصر مختلف من به شما اطمینان می دهم، تنظیم مجدد لایه گذاری سلول های جدول، به احتمال زیاد، شما آن را در فایل اصلی بازگردانید. و دور از این واقعیت است که ارزش از پیش فرض چه چیزی متفاوت است. بنابراین معلوم می شود که ما آن را برای اولین بار تمیز می کنیم، و سپس همان بازگشت. و همراه با اولین کاستی (یک فایل اضافی و کد اضافی)، بسیاری از vertellers به \u200b\u200bطور کلی استفاده نمی شود. تنظیم مجدد CSS.

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

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

اگر به پیش نمایش تصویر از پست نگاه کنید، خواهید دید که خط معمولی در Safari، Chrome و Firefox کاملا نمایش داده می شود. به روش های مختلف. بله، گاهی اوقات قوانین در آنها هماهنگ هستند، به عنوان مثال، هر کس تگ سر را از طریق صفحه نمایش پنهان می کند: هیچ گزینه ای، با این حال، در بسیاری از موارد، تفاوت های جدی در هنگام رندر اشیاء در صفحه وجود دارد. من فکر می کنم که برخی از مشتریان شما ممکن است دوست ندارند زمانی که نسخه نهایی طرح به نظر نمی رسد در طرح نیست.

بنابراین، اگر شما یک توسعه دهنده وب تازه کار هستید، این نشریه به طور کلی برای توسعه عمومی مفید خواهد بود. این ترجمه این یادداشت با یک مرور کلی از شرایط بازنشانی CSS در سال 2018 است. من مطمئن هستم که در سال 2019 و بعد از آن این همه هنوز هم مربوط می شود، زیرا این موضوع قبلا بیش از 10 سال بوده است (از لحظه انتشار اولین راه حل مشابه).

چرا به تنظیمات CSS تنظیم مجدد نیاز دارید؟

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

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

اما اکنون وضعیت بر خلاف طرح کمتر است؟

بله، در واقع، در زمان ما، بسیاری از پارامترهای عامل کاربر مشابه تر شده اند. تقریبا در همه جا header h1 اندازه فونت 2EM را تنظیم می کند و 0.67EM افقی افقی. با این حال، این ها همه تغییرات نسبتا جدید هستند، و حداقل، شما باید به حمایت از نسخه های قدیمی برنامه ها، که در آن چنین سازگاری وجود دارد.

علاوه بر این، در برخی موارد، بسته به نوع CSS صفر (در مورد این زیر)، این تراشه هنوز هم برای ما مفید است حتی اگر تنها مرورگرهای وب مدرن در نظر گرفته شود.

اما آیا سبک های ما را اعمال می کنیم، پایه اصلی را مطرح می کنیم؟

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

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

انواع تنظیم مجدد CSS (شما می توانید لینک ها را در مقاله دانلود کنید)

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

1. رفع خطا در سبک عامل کاربر.
2. لغو طراحی اصلی غیر استاندارد در مرورگرهای اینترنتی.
3. ایجاد یک پایه سبک سازگار جهانی.

گزینه هایی وجود دارد که تمام سه وظیفه را تعیین می کند و کسانی که تنها تحت یک مشکل خاص تیز شده اند.

اصلاح / اصلاح خطا

اولین اهداف را در نظر بگیرید. همانطور که قبلا درک کرده اید، حذف کاستی های مختلف و شات های مرورگرها برای حمایت از نسخه های منسوخ مناسب تر است. یکی از نمونه های خوب چنین وضعیتی - زمانی که پس از ظاهر HTML5 همان اینترنت اکسپلورر 9 نوع صحیح صفحه نمایش را به اشیاء جدید اعمال نمی کرد.

بنابراین، در راه حل های نوع normalize.css، تمام خطاها به حساب می آیند و پردازش می شوند:

/ ** * نمایش صحیح را در IE اضافه کنید. * / اصلی (نمایش: بلوک؛)

/ ** * نمایش صحیح را در IE اضافه کنید. * / اصلی (نمایش: بلوک؛)

از آنجایی که این اقدامات فقط برای نرم افزار قدیمی مورد نیاز است، از Postcss PostCSS استفاده می کند، مانند postcss، با استفاده از postcss، با استفاده از مرورگر، به منظور اضافه کردن آنها تنها زمانی که شما نیاز به اجرای پشتیبانی از مرورگرهای خاصی دارید، استفاده کنید.

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

[پنهان] (نمایش: هیچ! مهم؛ // یکی از موارد استفاده خوب از مهم! }

(نمایش: هیچ! مهم؛ / / یکی از موارد استفاده خوب از مهم!

سبک های عجیب و غریب مرورگرها را حذف کنید

این دلیل دوم تنظیم مجدد تنظیمات CSS است. در اصل، هر یک از نظرات خود را در مورد چه اعدام در شیوه کاربری کاربر عامل "عجیب و غریب" در نظر گرفته شده است. تعریف نویسنده از یادداشت اصلی کاملا منطقی است: این یک سبک است که یک نسخه "برهنه" نمایش عنصر نیست.. به عنوان مثال، اضافه کردن عناوین برای سرفصل ها در 2EM (چند نفر آن را انجام می دهند)، ایده بد نیست، اما چرا 2EM، و نه 3EM یا 4EM نیست. در این مورد، گزینه اصلی، عدم وجود بروز هر گونه بروز، یعنی حاشیه صفر است.

ساده ترین رویکرد جهانیحذف endits / field برچسب ها:

* (حاشیه: 0؛ padding: 0؛)

* (حاشیه: 0؛ padding: 0؛)

این روش خیلی رادیکال است، زیرا به تمام اشیاء اعمال می شود، حتی جایی که انتظار ندارید (در همان ورودی). به طور متناوب، Eric Meyer Reset CSS اغلب استفاده می شود، که پارامترهای حاشیه / پودر، مرزها و اندازه فونت را حذف می کند (در 0 یا 0 یا هیچ کدام) جایی که منطقی توجیه می شود:

HTML، Body، Div، Span، Applet، Object، Iframe، H1، H2، H3، H4، H5، H6، P، Blockquote، Pre، A، Abbr، Acronym، Address، Big، Cite، Code، Del، DFN، EM، IMG، INS، KBD، Q، S، SAMP، کوچک، اعتصاب، قوی، زیر، Sup، TT، VAR، B، U، I، CENTER، DL، DT، DD، OL، UL، LI، Fieldset، فرم، برچسب، افسانه، جدول، عنوان، tbody، tfoot، thead، th، th، td، مقاله، کنار، بوم، جزئیات، قراردادن، شکل، figcaption، footer، header، hgroup، منو، ناوبری، خروجی، روبی، بخش، خلاصه، زمان، علامت گذاری، صوتی، ویدئو (حاشیه: 0؛ Padding: 0؛ مرز: 0؛ فونت اندازه: 100٪؛ فونت: به ارث بردن؛ عمودی- align: baseline؛)

hTML، Body، Div، Span، Applet، Object، Iframe، H1، H2، H3، H4، H5، H6، P، Blockquote، Pre، A، Abbr، Acronym، Address، Big، Cite، Code، Del، DFN، EM، IMG، INS، KBD، Q، S، SAMP، کوچک، اعتصاب، قوی، زیر، Sup، TT، VAR، B، U، I، CENTER، DL، DT، DD، OL، UL، LI، Fieldset، فرم، برچسب، افسانه، جدول، عنوان، tbody، tfoot، thead، th، th، td، مقاله، کنار، بوم، جزئیات، قراردادن، شکل، figcaption، footer، header، hgroup، منو، ناوبری، خروجی، روبی، بخش، خلاصه، زمان، علامت گذاری، صدا، صدا، ویدئو (حاشیه: 0؛ Padding: 0؛ مرز: 0؛ فونت اندازه: 100٪؛ فونت: به ارث بردن؛ عمودی-align: baseline؛)

سبک های لغو

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

به عنوان مثال، به جای تنظیم تمام اندازه 1 و حاشیه \u003d 0 در sanitize.css، مقادیر دیگر تنظیم شده است:

/ ** * اندازه فونت و حاشیه را بر روی عناصر H1 در "بخش" و * "مقاله" در کروم، فایرفاکس و سافاری درست کنید. * / H1 (فونت اندازه: 2م؛ حاشیه: 0. 67EM 0؛)

/ ** * اندازه فونت و حاشیه را بر روی عناصر H1 در "بخش" و * "مقاله" در کروم، فایرفاکس و سافاری درست کنید. * / H1 (فونت اندازه: 2م؛ حاشیه: 0.67EM 0؛)

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

// بدن // // 1. حاشیه را در تمام مرورگرها حذف کنید. // 2. به عنوان بهترین عمل، به طور پیش فرض `پس زمینه رنگ را اعمال کنید // 3. مقدار اولیه متن اولیه صریح را تنظیم کنید تا بتوانیم بعدا از آن استفاده کنیم // ارزش ارثی در مورد چیزهایی مانند`	عناصر. بدن (حاشیه: 0؛ // 1 فونت - خانواده: $ فونت - پایه خانواده؛ فونت اندازه: $ فونت - اندازه پایه؛ فونت - وزن: $ فونت - وزن پایه؛ ارتفاع: $ خط - ارتفاع - پایه؛ رنگ: $ body - color؛ متن- align: left؛ // 3 پس زمینه- رنگ: $ body - bg؛ // 2)

// بدن // // 1. حاشیه را در تمام مرورگرها حذف کنید. // 2. به عنوان بهترین عمل، به طور پیش فرض `پس زمینه رنگ را اعمال کنید // 3. مجموعه ای از مقادیر متن اولیه صریح را تنظیم کنید تا بعدا بتوانیم از ارزش // «ارثی» در مورد چیزهایی مانند " عناصر. بدن (حاشیه: 0؛ // 1 Font-family: $ font-face-base؛ فونت اندازه: $ font-base-base؛ فونت وزن: $ font-base-base؛ خط ارتفاع: $ line-height -Base؛ رنگ: $ رنگ بدن؛ متن align: left؛ // 3 پس زمینه رنگ: $ body-bg؛ // 2)

جمع. چه چیزی را انتخاب کنید

در یادداشت اصلی نتیجه بررسی مربوطه از آن وجود دارد

در این مقاله ما در مورد تنظیم مجدد سبک ها صحبت خواهیم کرد و نمونه ای از ایجاد چنین فایل reset.css را در نظر می گیریم.

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

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

از آنجا که این ایده ها برای مدت طولانی آتش گرفت، تعجب آور نیست که قبلا وجود دارد فایل های آماده RESET، معمولا RESST.CSS نامیده می شود و به تمام پروژه ها متصل می شود.

چرا در فایل جداگانه؟ بله، فقط به این دلیل که راحت تر از پروژه پروژه به پروژه راحت تر است.

در اینجا یک مثال reset.css از سال 2007 است:

/ * 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، ACRONYM، آدرس، بزرگ، CITE، CODE، DEL، DFN، EM، IMG، INS، KBD، Q، S، SAMP، کوچک، اعتصاب، قوی، زیر، SUP، TT، VAR، B، U، I، TT، VAR، B، U، I، CENTER، DL، DT، DD، OL، UL، LI، Fieldset، فرم، برچسب، افسانه، جدول، عنوان، TBODY، TFOOF، THEAD، TR، TH، TD، مقاله، کنار، بوم، جزئیات، جزئیات، قراردادن، شکل، Figcaption، Footer، Header، Hgroup، Menu، NAV، خروجی، روبی، بخش، خلاصه، زمان، علامت گذاری، صدا، ویدئو (حاشیه: 0؛ Padding: 0؛ مرز: 0؛ فونت اندازه: 100٪ ؛ فونت: به ارث برده شده؛ align-align: baseline؛) / * HTML5 نمایشگر صفحه نمایش بازنشانی برای مرورگرهای قدیمی تر * / مقاله، کنار، جزئیات، Figcaption، شکل، پاورقی، هدر، Hgroup، منو، NAV، بخش (نمایش: بلوک؛ ) بدن (ارتفاع خط: 1؛) OL، UL (List-style: هیچ؛) blockquote، q (نقل قول: هیچ؛) blockquote: قبل، blockquote: afterter، پرسش: قبل، Q: پس از (محتوا: "؛ محتوا: هیچکدام؛) جدول (Border-Collapse: C. hlapse؛ فاصله مرزی: 0؛ )

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

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

ورودی، textarea، a، دکمه، انتخاب (طرح کلی: هیچکدام) img (مرز: هیچ؛) hr (پاک کردن: هر دو؛ مرز: هیچ؛ سابقه: هیچ؛ پس زمینه - تکرار: بدون تکرار؛) / * HTML5 نمایش بازنشانی نقش برای مرورگرهای قدیمی تر * / مقاله، کنار، جزئیات، Figcaption، شکل، پاورقی، هدر، Hgroup، منو، NAV، بخش (نمایش: بلوک؛) بدن (خط ارتفاع: 1؛) OL، UL (فهرست -Style: هیچ؛ حاشیه: 0؛ Padding: 0؛) Blockquote، Q (نقل قول: هیچ؛) BlockQuote: قبل، BlockQuote: Afterter، Q: قبل، Q: پس از (محتوا: "؛"؛ محتوا: هیچ؛ جدول (فروپاشی مرزی: COLLAPSE؛ فاصله مرزی: 0؛)

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