What is Pixel Perfect?
Pixel Perfect is a Firefox extension designed to assist web developers in aligning their developed HTML with a web composition. It allows developers to overlay a design composition directly on top of the HTML, making it easy to visually compare the two and identify any pixel discrepancies.
By toggling the composition overlay on and off, developers can instantly see how their implementation aligns with the original design. Pixel Perfect also includes an opacity option, offering the ability to view the underlying HTML beneath the composition. This dual-view capability allows developers to simultaneously use debugging tools like Firebug while keeping the Pixel Perfect overlay active.
Features
- Overlay Composition: Place a design composition over the developed HTML.
- Toggle On/Off: Quickly switch the overlay on and off to compare design and implementation.
- Opacity Control: Adjust the overlay opacity to view underlying HTML.
- Firebug Compatibility: Use Firebug simultaneously with the Pixel Perfect overlay.
Use Cases
- Identifying pixel discrepancies between design and implementation.
- Aligning HTML elements with design composition.
- Visually comparing web design and developed code.
- Fine-tuning web page layouts during development.
FAQs
-
I upload the overlay and clicked the toggle box, but nothing appears. Why?
This could happen if the overlay has problems with width and height. Inspect the overlay div (id: 'pp_overlay') using Firebug. The most common reason is that the height and width properties are set to '0px'. You can change these values in Firebug to display the overlay. -
Why is Pixel Perfect panel is duplicated?
Currently, Pixel Perfect does not support multiple tabs. Using the extension in multiple tabs will cause panel duplication. -
What if I have an issue that is not listed here?
Please check the https://code.google.com/archive/p/pixelperfectplugin/ to see if your issue has already been filed. If not, create a new issue and comment.
