CSS Compare

Try it online: csscompare.ct.ws - no installation required, works entirely in your browser.

A powerful diff tool for developers to compare two CSS stylesheets. It helps identify common and unique rules, making it easy to refactor, merge, or clean up your CSS code. Everything is processed locally in your browser; no files are ever uploaded to any server, guaranteeing complete privacy.

Features

• Dual Input Methods: Upload .css files, paste raw code into text areas, or simply drag and drop files onto the panels.
• Comprehensive Comparison: The tool splits the results into three clear categories:
  • Common Rules: Rules that are identical in both files.
  • Unique to File 1: Rules that only exist in the first file.
  • Unique to File 2: Rules that only exist in the second file.
• Advanced Intersection Mode: An optional mode to find common declarations, even in rules that have the same selector but different properties.
• Detailed Statistics: Get a quick overview with counters for total rules, common rules, and unique rules for each file.
• Privacy First: All files are processed locally in your browser. No files are uploaded to a server, ensuring your data remains private.
• Export Results: Download the resulting stylesheets (common.css, file1.unique.css, file2.unique.css) with a single click.
• Modern & Responsive Design: A clean, intuitive, and user-friendly interface that works perfectly on both mobile and desktop.

How to Use

1. Open the index.html file in your web browser.
2. Load your CSS code in both panels. You can upload a file, paste the code, or drag and drop it.
3. Click the Compare button to see the results.
4. Optionally, check the Intersection Mode box for an alternative comparison.
5. View the common and unique rules in their respective columns.
6. Use the Download buttons to save the generated CSS files.

Technologies Used

• HTML5: For the structure of the web application.
• CSS3: For styling, layout, and responsive design capabilities.
• Vanilla JavaScript: For all the application logic, including:
  • CSS parsing and comparison logic.
  • DOM manipulation.
  • Event handling for file uploads and drag & drop.

---

❤️ Donations

If you enjoy this project, any support is greatly appreciated!