ما هي أداة استخدام أوراق نمط CSS وتقليلها

Question

لدي صفحة (page1.html) التي تشير إلى ملف CSS (style1.css)

كل شيئ بخير.

أحتاج إلى page1.html إلى النمط المرجعية بالإضافة إلى ذلك ، ولكن عندما أضيف المرجع ، بعض الأشياء على page1.html مسامير لأعلى.

كيف يمكنني تحديد ما هو حول Style2.css الذي يسبب هذه المشكلة؟ بعض الأدوات الفاعلة؟ عملية ما؟

Answer 1

Firebug يوضح لك القواعد التي يتم تجاوزها ، والتي تأتي منها ورقة الأنماط.

ما عليك سوى تحديد عناصر المشكلات وسيظهر لك القواعد المطبقة عليها. يمكنك بعد ذلك تبديلها على/إيقاف التأثير.

Answer 2

قارن مباشرة اثنين من أوراق الأنماط CSS لرؤية الاختلافات بينهما على الفور: http://www.alanhart.co.uk/archives/2010/12/15/compare-css-stylesheet-tool/

مفيد للغاية عندما تقوم بإجراء تغييرات على CSS للموقع ولا يمكنك تذكر ما تغيرت (طالما أنك تحتفظ بنسخة احتياطية من الأصل لمقارنتها)

Answer 3

Yes, I would use a diff tool (DiffMerge is free) and see what is similar between the two css files.

Answer 4

DiffMerge (or any diffing tool for that matter) is good if your files have a similar layout but if they are very different (like I expect your CSS might be) the might easily show the entire file as being one big difference and so prove to be no use at all.

What I would do in this situation is install the dom inspector in FireFox, and the inspect this add on.

Then, include your 2nd style sheet and view the page.

Right click on the bocked element and "Inspect this". Then change the view mode of the dom inspector to CSS. It will show you the current cascade of styles applied to the current element and also give reference to which file and which line.

This way you can figure out where you have conflicting styles.

This is admittedly no automatic process but unless your styles are 99% identical then diffing isn't going to work.

Answer 5

I've used this php class before - works well.

http://www.phpclasses.org/package/4638-PHP-Compare-two-CSS-style-definitions.html

Answer 6

All good answers.... I am loathed to pick a correct one this time.

Just to add to the mix... A colleague recommended the Web Developer Toolbar for FF.

I used CSS\View Style Info and then clicked the stuff that was strange... I quickly found a rule from the new stylesheet which was radically altering the height of it.

Answer 7

For developers using Visual Studio 2008 who may be reading this:

When you select an HTML element in the WYSIWYG designer, you can use the CSS Properties window to see all CSS rules and their corresponding settings, including the cascading settings inherited from the various CSS rules.

By clicking on a rule in the property pane, you can identify the source of each CSS setting. This makes it easier to figure out why a page or element looks a particular way.

Answer 8

diffchecker(online) tool. Quite useful and fast. http://www.diffchecker.com/