تمام عناصر 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، کوچک، ضربه، قوی، زیر، 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 را بازنشانی کنید

استفاده از سبک CSS YUI 3 سبک عالی عناصر HTML را در مرورگرها و همچنین هر اسکریپت تخلیه CSS دیگری را بهبود می بخشد تا پایه ای قابل اعتماد برای ایجاد وب سایت ها و وب سایت ها ایجاد کند.

/* YUI 3.18.1 حق چاپ 2014 Yahoo! شرکت تمامی حقوق محفوظ است. مجوز تحت مجوز BSD. http://yuilibrary.com/license/ */ /* TODO برای حذف تنظیمات در HTML مورد نیاز است، زیرا ما نمی توانیم آن را به عنوان فضای نامگذاری کنیم:#000 نمی توان آن را فضای نامگذاری کرد */ /* تست TODO روی FF */ body، dt، ul، li، h1، h2، h6. , pre, کد, فرم, مجموعه فیلدها, افسانه, ورودی, textarea, p, blockquote, th, td ( margin:0; padding:0; ) جدول ( border-collapse:collapse; border-spacing:0; ) fieldset , img ( border:0; ) /* TODO در مورد مدیریت وراثت متفاوت فکر کنید، شاید اجازه دهید IE6 کمی از کار بیفتد ... */ آدرس، عنوان، نقل قول، کد، dfn، em، قوی، th، var ( سبک فونت: عادی; font-weight: normal; ol, ul (list-style:none; ) caption, th ( text-align:left; ) h1, h2, h3, h4, h5, h6 ( font-size:100%; font- وزن: عادی; align:text-top; ) input, textarea , انتخاب کنید ( font-family:inherit; font-size:inherit; font-weight:inherit; *font-size:100%; /*برای فعال کردن تغییر اندازه برای IE*/ ) /*زیرا افسانه اینطور نیست " ارث بری در IE * / legend ( color:#000; ) /* YUI CSS Detection 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 */ a ( پس زمینه-رنگ: شفاف؛ /* 1 */ -webkit-text-decoration. -پرش: اشیاء /* 2 */ ) /** * 1. حاشیه پایین را در Chrome 57- و Firefox 39- حذف کنید. * 2. متن دکوراسیون صحیح را در کروم، اج، اینترنت اکسپلورر، اپرا و سافاری اضافه کنید. */ abbr ( حاشیه-پایین: هیچکدام؛ /* 1 */ تزیین متن: زیر خط؛ /* 2 */ تزیین متن: زیرخط نقطه‌دار؛ /* 2 */) /** * جلوگیری از کاربرد تکراری «پررنگ‌تر» طبق قانون بعدی در Safari 6. */ b، قوی ( font-weight: inherit; ) /** * وزن قلم صحیح را در Chrome، Edge و Safari اضافه کنید. */ b، قوی ( فونت-وزن: جسورتر؛ ) /** * 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، Firefox، IE. * 1. حذف وراثت تبدیل متن در فایرفاکس. دکمه */ را انتخاب کنید ( /* 1 */ text-transform: none; ) /** * 1. از اشکال WebKit که در آن (2) کنترل‌های بومی «صوتی» و «ویدئو» * را در اندروید 4 از بین می‌برد جلوگیری کنید. * 2. Vickory سبک انواع مهم در iOS و Safari. */ button, html , /* 1 */ , ( -webkit-appearance: button; /* 2 */ ) /** * حاشیه داخلی و padding را در فایرفاکس حذف کنید. */ دکمه::-moz-focus-inner, ::-moz-focus-inner, ::-moz-focus-inner, ::-moz-focus-inner /** * سبک های فوکوس تنظیم نشده توسط قانون قبلی را ذخیره می کند . */ دکمه:-moz-focusring, :-moz-focusring, :-moz-focusring, :-moz-focusring ( طرح کلی: 1px نقطه نقطه ButtonText; ) /** * 1. Vickory متنی که در Edge و IE درج می شود . * 2. قابل مشاهده بودن عناصر "فیلدست" در اینترنت اکسپلورر. * 3. padding را حذف کنید تا توسعه دهندگان هیچ ارتباطی با آن نداشته باشند، که به معنای حذف عناصر * "fieldset" در همه مرورگرها است. */ افسانه ( اندازه جعبه: جعبه حاشیه؛ /* 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. padding را در 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 */ ) /** * پین را بردارید و دکمه فعال را در Chrome و Safari در macOS بردارید. */ ::-webkit-search-cancel-button, ::-webkit-search-decoration ( -webkit-appearance: none; ) /** * 1. سبک را به انواع قابل کلیک در iOS و Safari Vikorize کنید. * 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 تم های وردپرس خود کپی کنید (بعد از ردیف های مربوط به نویسندگی، به آن هایی می گویند که پس از متن قاب شده با کسری و ستاره /* ... */) .

حروفچین های زیادی هستند که برای چنین رتبه هایی با هم رقابت می کنند CSS Reset، سرویس برای درک ویژگی های مرورگرهای مختلف. در حقیقت، این فایل سبک تمام قدرت CSS را به توسعه دهندگان واگذار می کند. در این مقاله، کد این فایل را نشان می دهم و به ما اطلاع می دهم، varto vikorystuvati CSS Reset Chi ni.

من خیلی متفاوت دارم CSS Reset، همه بوی بد تقریباً یکسان است. می توانید این را ویکی بنویسید:

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 (
پس زمینه: شفاف
حاشیه: 0;
اندازه فونت: 100%;
حاشیه: 0;
طرح کلی: 0;
بالشتک: 0;
vertical-align: baseline;
}
بدن (
ارتفاع خط: 1;
}
اول، اول (
list-style: هیچکدام;
}
بلوک نقل قول، q(
نقل قول: هیچکدام;
}
blockquote:before، blockquote:after،
q:قبل،ق:بعد (
محتوا: ""؛
محتوا: هیچ
}
: تمرکز (
طرح کلی: 0;
}
جدول (
border-collapse: فرو ریختن;
فاصله مرزی: 0;
}

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

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

تقصیر خانواده IE و Opera Mini است.

برخی از سیستم‌های پشتیبانی اینترنت اکسپلورر ممکن است مشکلی ایجاد کنند، در اینجا راه‌هایی برای حذف برخی از کنترل‌های CSS در مقادیر اولیه آنها وجود دارد:

Reset-this (انیمیشن: هیچ، انیمیشن-تاخیر: 0، انیمیشن-جهت: عادی، انیمیشن-مدت: 0، انیمیشن-پر-حالت: هیچ، انیمیشن-تکرار-تعداد: 1، انیمیشن-نام: هیچ، انیمیشن- حالت پخش: عملکرد-زمان بندی: سهولت، پس زمینه-کلیپ: پس زمینه-تصویر: هیچکدام; -y: 0. border-size: border-width: 0 border-bottom-width: border-collapse: border-left: 0 border-left-width: border-radius: 0; حاشیه-راست-سبک: هیچکدام; حاشیه-راست-عرض: متوسط; فاصله مرزی: 0; حاشیه بالا: 0; border-top-color: inherit; شعاع حاشیه-بالا-چپ: 0; حاشیه-بالا-راست-شعاع: 0; border-top-style: هیچکدام; حاشیه-بالا-عرض: متوسط; پایین: خودکار؛ box-shadow: هیچکدام; box-sizing: content-box; سمت عنوان: بالا; واضح: هیچ کلیپ:خودکار; رنگ: ارث ستون ها: خودکار؛ ستون-شمار: خودکار; ستون-پر: تعادل; شکاف ستون: عادی. ستون-قاعده: متوسط ​​هیچ فعلیColor; column-rule-color: currentColor; ستون-قاعده-سبک: هیچکدام; column-rule-width: هیچکدام; دهانه ستون: 1; عرض ستون: خودکار. محتوا: عادی; ضد افزایش: هیچ تنظیم مجدد: هیچ مکان نما: خودکار؛ جهت: ltr; صفحه نمایش: درون خطی; سلول های خالی: نشان می دهد. شناور: هیچ فونت: معمولی; font-family: inherit; اندازه فونت: متوسط; سبک فونت: عادی. font-variant: normal; فونت-وزن: عادی; ارتفاع: خودکار؛ خط تیره: هیچ سمت چپ: خودکار؛ فاصله حروف: عادی. ارتفاع خط: معمولی list-style: هیچکدام; list-style-image: هیچکدام; list-style-position: خارج; list-style-type: دیسک; حاشیه: 0; حاشیه-پایین: 0; حاشیه-چپ: 0; حاشیه سمت راست: 0; حاشیه بالا: 0; حداکثر ارتفاع: هیچ حداکثر عرض: هیچ حداقل ارتفاع: 0; حداقل عرض: 0; کدورت: 1; یتیم: 0; طرح کلی: 0; outline-color: invert; طرح کلی: هیچکدام; طرح کلی: متوسط; سرریز: قابل مشاهده; سرریز-x: قابل مشاهده; سرریز-y: قابل مشاهده; بالشتک: 0; padding-bottom: 0; padding-left: 0; padding-right: 0; padding-top: 0; page-break-after: auto; page-break-before: auto; page-break-inside: auto; دیدگاه: هیچ چشم انداز-منشا: 50%; 50 درصد؛ موقعیت: استاتیک /* ممکن است به نقل‌قول‌های مختلف برای مناطق مختلف نیاز داشته باشد (مثلاً fr) */ quotes: "\201C" "\201D" "\2018" "\2019"; سمت راست: خودکار؛ اندازه برگه: 8; جدول بندی: خودکار; text-align: inherit; text-align-last: auto; text-decoration: هیچ; متن-تزیین-رنگ: ارث بردن; text-decoration-line: هیچکدام; متن-دکوراسیون-سبک: جامد; text-indent: 0; text-shadow: هیچ; تبدیل متن: هیچ بالا:خودکار; تبدیل: هیچ transform-style: مسطح; انتقال: هیچ انتقال-تاخیر: 0 ثانیه; مدت زمان انتقال: 0 ثانیه; transition-property: none; انتقال-زمان-عملکرد: سهولت. یونیکد-بیدی: عادی; vertical-align: baseline; دید: قابل مشاهده فضای سفید: عادی؛ زنان بیوه: 0; عرض: خودکار؛ فاصله بین کلمات: عادی; z-index: خودکار; /* پچ مدرن پایه */ همه: اولیه; همه: تنظیم نشده؛ ) /* پچ مدرن پایه */ #reset-this-root ( همه: اولیه؛ * ( همه: تنظیم نشده؛ ) )

  • مخزن github مربوطه از سال 2017.

این در نظرات Koristuvach @user566245 بیان شد:

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

پریدبانی به منظور تبدیل شدن به هنجار فعلی، کوریستوواچ جوست

#reset-this-parent ( همه: اولیه؛ * (همه: تنظیم نشده؛ ))

STOCK Z W3

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

آیا کسی به چیز دیگری مانند css برای حذف css فکر کرده است؟ بنابراین؟

در اینجا یک ابزار ساده وجود دارد:

getElementsByTagName ("*") همه عناصر را از DOM برمی گرداند. سپس می توانید استایل هایی را برای عنصر پوست در مجموعه تنظیم کنید:

Var allElements = document.getElementsByTagName("*"); برای (var i = 0، len = allElements.length؛ i< len; i++) { var element = allElements[i]; // element.style.border = ... }

همه اینها گفته می شود؛ من فکر نمی کنم که حذف css واقعاً امکان پذیر باشد زیرا ما فقط با یک مرورگر وب کار نمی کنیم. اگر در انتهای "مرورگر" "پشت صحنه" نصب شود.

برای وضوح، در اینجا لیستی از مقادیر فایرفاکس 40.0 برای آن آورده شده است

de font-style: راه اندازی مورب عملیات DOM.

Align-content: unset; align-item: unset; align-self: unset; انیمیشن: unset; ظاهر: تنظیم نشده backface-visibility: unset; پس زمینه ترکیب حالت: تنظیم نشده. پس زمینه: تنظیم نشده binding: unset; اندازه بلوک: تنظیم نشده. border-block-end: unset; border-block-start: unset; border-collapse: unset; border-inline-end: unset; border-inline-start: unset; border-radius: unset; فاصله مرزی: تنظیم نشده؛ مرز: تنظیم نشده؛ پایین: تنظیم نشده؛ box-align: unset; box-decoration-break: unset; box-direction: unset; box-flex: unset; box-ordinal-group: unset; box-orient: unset; جعبه بسته: تنظیم نشده; box-shadow: unset; جعبه اندازه: تنظیم نشده; سمت عنوان: تنظیم نشده; روشن: تنظیم نشده clip-path: unset; clip-rule: unset; کلیپ: تنظیم نشده; color-adjust: unset; color-interpolation-filters: unset; color-interpolation: unset; رنگ: تنظیم نشده ستون-پر: تنظیم نشده؛ ستون-شکاف: تنظیم نشده; ستون-قاعده: تنظیم نشده; ستون ها: تنظیم نشده؛ محتوا: تنظیم نشده control-character-visibility: unset; ضد افزایش: تنظیم نشده. counter-reset: unset; مکان نما: تنظیم نشده؛ نمایشگر: تنظیم نشده؛ غالب-پایه: تنظیم نشده; سلول های خالی: تنظیم نشده. پر کردن کدورت: تنظیم نشده. پر کردن قانون: تنظیم نشده. fill: unset; فیلتر: تنظیم نشده؛ فلکس جریان: تنظیم نشده. flex: تنظیم نشده. float-eddge: unset; شناور: تنظیم نشده؛ سیل رنگ: تنظیم نشده; flood-opacity: تنظیم نشده; font-family: unset; font-feature-settings: unset; font-kerning: unset; font-language-override: unset; font-size-adjust: unset; اندازه قلم: unset; font-stretch: unset; font-style:oblique; font-synthesis: unset; font-variant: unset; font-weight: unset; فونت: ; force-broken-image-icon: unset; ارتفاع: تنظیم نشده؛ خط تیره: تنظیم نشده جهت تصویر: تنظیم نشده. image-region: unset; تصویر رندر: تنظیم نشده; ime-mode: unset; inline-size: unset; جداسازی: تنظیم نشده؛ justify-content: unset; justify-items: unset; justify-self: unset; چپ: تنظیم نشده؛ فاصله حروف: تنظیم نشده. روشنایی-رنگ: تنظیم نشده; خط-ارتفاع: تنظیم نشده. list-style: unset; margin-block-end: unset; margin-block-start: unset; margin-inline-end: unset; margin-inline-start: unset; حاشیه: تنظیم نشده؛ نشانگر-offset: تنظیم نشده; نشانگر: تنظیم نشده؛ نوع mask: تنظیم نشده ماسک: تنظیم نشده؛ max-block-size: unset; حداکثر ارتفاع: تنظیم نشده؛ max-inline-size: unset; حداکثر عرض: تنظیم نشده؛ min-block-size: unset; حداقل ارتفاع: تنظیم نشده؛ min-inline-size: unset; min-width: تنظیم نشده. mix-blend-mode: unset; شیء مناسب: تنظیم نشده; موقعیت شی: تنظیم نشده. offset-block-end: unset; offset-block-start: unset; offset-inline-end: unset; offset-inline-start: unset; کدورت: تنظیم نشده سفارش: تنظیم نشده؛ orient: unset; outline-offset: تنظیم نشده; outline-radius: unset; طرح کلی: تنظیم نشده؛ سرریز: تنظیم نشده padding-block-end: unset; padding-block-start: unset; padding-inline-end: unset; padding-inline-start: unset; padding: unset; page-break-after: unset; page-break-before: unset; page-break-inside: unset; paint-order: unset; view-origin: unset; چشم انداز: تنظیم نشده اشاره گر رویدادها: تنظیم نشده; موقعیت: تنظیم نشده؛ نقل قول: unset; تغییر اندازه: تنظیم نشده راست: تنظیم نشده؛ ruby-align: unset; ruby-position: unset; scroll-behavior: unset; scroll-snap-coordinate: unset; scroll-snap-destination: unset; scroll-snap-points-x: unset; scroll-snap-points-y: unset; scroll-snap-type: unset; شکل رندر: تنظیم نشده; stack-sizing: unset; stop-color: تنظیم نشده. stop-opacity: تنظیم نشده; stroke-dasharray: unset; stroke-dashoffset: unset; stroke-linecap: unset; stroke-linejoin: unset; stroke-miterlimit: تنظیم نشده; stroke-opacity: تنظیم نشده. stroke-width: تنظیم نشده. سکته مغزی: تنظیم نشده tab-size: unset; جدول بندی: تنظیم نشده; text-align-last: unset; text-align: unset; text-anchor: unset; text-combine-upright: unset; text-decoration: unset; text-fasis-position: unset; text-Emphasis: unset; text-indent: unset; جهت متن: تنظیم نشده; text-overflow: unset; رندر متن: unset; text-shadow: unset; text-size-adjust: unset; text-transform: unset; بالا: تنظیم نشده؛ transform-origin: unset; transform-style: unset; تبدیل: تنظیم نشده انتقال: تنظیم نشده؛ تمرکز کاربر: تنظیم نشده. ورودی کاربر: تنظیم نشده. user-modify: unset; user-select: unset; vector-effect: unset; vertical-align: unset; دید: تنظیم نشده فضای سفید: تنظیم نشده؛ عرض: تنظیم نشده؛ will-change: unset; کشیدن پنجره: تنظیم نشده; شکستن کلمه: unset; فاصله بین کلمات: تنظیم نشده; word-wrap: unset; حالت نوشتن: تنظیم نشده. z-index: unset;

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

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

آخر هفته SKID NALASHTUVAN CSS

برای دستیابی به پایداری کم، به عنوان یک توسعه دهنده، همه فیلدها را حذف می کنم و از انتخابگر جهانی اضافی استفاده می کنم:

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

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

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

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

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،

کوچک، ضربه، قوی، زیر، 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;

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

مشکلات SKIDANNYA NALASHTUVAN CSS

حذف CSS ایده خوبی بود، اما در عین حال، به‌ویژه برای ذهن فریم‌ها، اغلب به‌عنوان «مانند آن» استفاده می‌شود. برای مثال، اریک فرض کرد که سایر خرده‌فروشان شروع به استفاده از سایت‌ها بر اساس سبک‌های تخفیف زیر می‌کنند، بنابراین بر آن‌ها تأثیر می‌گذارد، و اولین نسخه Meyer Reset بلافاصله شامل قانون زیر می‌شود:

/* به یاد داشته باشید که باید سبک های تمرکز را تنظیم کنید! */ :focus (طرح کلی: 0; )

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

از zastosovuyuchi بگذرید، احساس می کنید کمی نان دارید. دور انداختن سبک‌های مرورگر برای پردازش، اندازه‌گیری آن‌هایی را که مسئول ظاهر عنصر پوست هستند، دشوار می‌کند، که به جابجایی نیز کمک می‌کند، به طوری که عناصر در پشت معنایی گیر کرده و نه برای تزئین. اما برای عناصر نوع 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 "مشکلات" دارد:

عنصر "حذف ها" از یک لیست نامرتب

مایر تنظیم مجدد

Zastosovamo Normalize.css نسخه 1

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

به نظر می رسد تفاوتی در فلسفه وجود دارد، اگر برنامه Meyer Reset به صورت چند ردیف متن ساده بدون حاشیه یا نشانگر ظاهر شود، برنامه Normalize.css شبیه به سبک های پشت بسته بندی ها است. تفاوت در سبک هایی که تا این سطح ادغام شده اند را می توان به راحتی تشخیص داد.

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

Skidannya CSS(حذف سبک ها) - این به معنای صفر کردن CSS اضافی و سایر پارامترهای عناصر HTML است که مرورگرها برای ارتقا تعیین می کنند. به عنوان مثال، قبل از چنین عناصری می توانید پاراگراف ها (برچسب ها) را اضافه کنید که معمولاً دارای فیلدهای عمودی غیر صفر هستند (CSS)، لیست های گلوله ای (برچسب ها)، که نه تنها دارای فیلدها هستند، بلکه نشانگرهایی از همان نوع (CSS) و غیره دارند. .

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

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

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

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

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

برای کمک از یک انتخابگر جهانی، CSS را لغزش دهید

* (Font-family: inherit; /* همه عناصر با توجه به نوع فونت خود کاهش می یابند */ font-style: inherit؛ /* image کاهش می یابد */ font-weight: inherit; /* وزن کاهش می یابد */ vertical-align: خط پایه /* تراز عمودی در امتداد خط پایه */ اندازه قلم: 100% */ پس زمینه: شفافیت همه عناصر تصویر */ حاشیه: 0; حاشیه: 0 /* انتخاب فیلدها */ padding: 0 /* انتخاب ورودی ها */ )

شرح باسن

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

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

CSS را از Yahoo!

بدنه,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre, form,مجموعه فیلدها,ورودی,textarea,p,blockquote,th,td ( حاشیه: 0; padding: 0; ( border-collapse: collapse; /* فاصله بین جدول وسط */ فاصله بین: 0؛ /* پاک کردن فاصله بین وسط */ ) عنوان، th (تراز کردن متن: چپ؛ /* تراز کردن متن با سمت چپ */ ol,ul (لیست سبک: هیچکدام؛ /* انتخاب نشانگرهای لیست */ ) h1,h2,h3,h4,h5,h6 (اندازه قلم: 100%؛ وزن قلم: عادی؛ ) q: before,q :after ( محتوا: ""؛ /* پنجه های تگ Q را کج می کند */ )

شرح باسن

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

حذف CSS توسط اریک مایر

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,small,strike,قوی,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,فیلدست فرم، برچسب، افسانه، جدول، عنوان، tbody، tfoot، thead، tr، th، td، مقاله، کنار، بوم، جزئیات، جاسازی، شکل، عنوان شکل، پاورقی، سرصفحه، hgroup، منو، ناوبری، خروجی، روبی، بخش، خلاصه، زمان، علامت، صدا، ویدئو ( حاشیه: 0؛ بالشتک: 0؛ حاشیه: 0؛ اندازه قلم: 100%؛ فونت: ارث بری؛ تراز عمودی: خط پایه؛ ) مقاله، به کنار، جزئیات، شرح تصویر، شکل، پاورقی، سرصفحه، hgroup، منو، ناوبری، بخش (نمایش: بلوک؛ /* عناصر بلوک مورد نیاز است (برای مرورگرهای قدیمی) */) بدنه (ارتفاع خط: 1؛ /* فاصله ردیف برای متن در صفحه * / ) ol ,ul (لیست سبک: هیچکدام؛ ) blockquote:before,blockquote:after, q:before,q:after ( محتوا: ""؛ /* گرفتن پنجه از Q و BLOCKQUOTE */ محتوا: هیچ؛ / * برای دقت اضافه شد */ ) blockquote,q ( نقل قول: هیچ؛ /* راه دیگری برای مرتب کردن */ ) جدول ( border-collapse: collapse; فاصله مرزی: 0; )

شرح باسن

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

در واقع، این مقاله می تواند به طور نامحدود ادامه یابد، زیرا، برای آخرین بار تکرار می کنم، در لحظه مناسب طراح چیدمان با تکیه بر احترام خود به نسخه تخفیف خود می رسد یا نه vikorystvoy yogo zagali.