HTML & CSS Design Analysis

Documentation

Supported document types

Document type	Supported
main document	Yes
iframe elements	Yes
shadow dom	Yes

Nested shadow elements and nested iframe elements are not fully supported by this tool.

This tool also does not support shadow root opened with the closed mode.

Checking broken tags inside iframe elements is supported but rule of parent document is applied while checking errors to child frame instead of applying rule for the hostname of the child frame.

Complete list of features and their use is given below:

Hide images

Using this tool a user can hide images displayed on a page.

By hiding images, developers can see what is behind images to fix image background or other issues that can’t be fixed otherwise.

Hide all images

Hides all images present on the page. Hides images inside shadow dom and iframe elements as well.

By hiding all images, a developer can mimic the design of a particular page that may have no images.

Hide background images

Hides all background images set using background-image CSS property.

By hiding all background images a developer can know what images are added on the page via the img tag and what images are added on the page by making use of CSS.

Make background images invisible

Makes all background images set using background-image CSS property invisible by replacing existing background image with an invisible image.

If background images are made invisible, then various image background related issues can be fixed by the developer.

Image utilities

This tool provides various utilities for analyzing images used on a particular web page.

Image utilities are helpful for debugging image related issues.

Display image alt attribute

Displays image alt attributes by replacing existing image with it’s alt attribute value.

By replacing all images by their alt attribute it gets easy to mimic the behavior of a particular page when no network connection is available to image CDN or images fail to load for some reason.

Display image dimension

Displays image dimensions by adding a new element on the page. By displaying image dimension, a developer can actually know what dimension a particular image.

Display image path

Displays image path by adding a new element on the page. By displaying image path we can actually know from what path the image is loaded in real time.

Image paths for all images will be displayed using this feature.

Make all images full size or natural size

Makes images full size or natural size by changing their width and height to their natural size.

Checking the checkbox will make the image full size, Un-checking the checkbox will make the image natural size.

Make all images invisible

Makes all images invisible by replacing existing images with an invisible image.

This feature is useful to know how the user interface might appear if existing images are replaced by invisible images.

Replace image with alt attribute

Replaces all the existing images with their alt attribute values. By using this feature, it gets easy to know how the image might appear if the images are replaced by their equivalent alt attributes.

Helping the developer mimic the behavior of other reading tools.

Outline elements

This tool can be used to outline various elements displayed on a page.

By outlining all elements, all HTML elemntes and their outlined can be know by the developer.

Helping the developer to do the necessary things to fix image width and height.

Outline block level elements

Thil tool will outline block level elements that are currently visible on the page.

By outlining block level elements, an end-user can know what elements are block level.

Outline deprecated elements

This tool will outline deprecated elements that are currently visible on the page.

There are various elements in HTML language that are deprecated by the standards team. Using such elements might cause all kinds of issues for the developer.

Such elemntes must either be replaced or not used by the developer.

Outline external links

This tool will outline external links that are currently visible on the page.

By outlining all external links, a developer can actually know what links on the page are external.

Such links must be treated carefully because they are hosted on an external domain.

Outline floating elements

This tool will outline floating elements that are currently visible on the page.

By using this feature a developer can know what elemntes on the page are floating elemntes.

Outline frames

This tool will outline frame elements that are currently visible on the page.

By outlining all frames displayed on a page, an end-user can know where some of these frames might be located.

Helping the developer to fix frame related issues.

Outline non-secure elements

This tool will outline non-secure elments that are currently visible on the page.

By using this tool, all non-secure elements on a specific page can be highlighted by the developer.

Helping the developer to get rid of non-secure elements.

Outline tables

This tool will outline table elements that are currently visible on the page.

By using this feature, a developer can outline all table elements on a page. Some developers still have the habit of using tables for layout.

Outline table captions

This tool will outline that are currently visible on the page.

By outlining all table captions developer can know where table captions are located.

Tables must have appropriate captions for them to be human readable.

Outline table cells

This tool will outline table cells that are currently visible on the page.

Outline headings

This tool will outline heading elements such as h1, h2, h3 etc. that are currently visible on the page.

Outline absolute positioned elements

This tool will outline absolute positioned elements that are currently visible on the page.

Outline fixed positioned elements

This tool will outline fixed positioned elements that are currently visible on the page.

Outline relative positioned elements

This tool will outline relative positioned elements that are currently visible on the page.

Outline images

This tool can be used to outline various images displayed on a page.

By using this feature, developers can insgi get

Information about various features provided in this tool

Given below is the information about various outlining tools and how to use them.

We hope that this information will actually help you to use the software product to its fullest extent.

Outline all images

This tool will outline all images displayed on a page.

By using this feature, all images displayed on a page will be outlined. Helping web developers to see such images are located or not located.

Outline background images

This tool will outline all background images displayed on a page.

By using this feature all background images displayed on a page will be outlined and developer will be able to know what images are background images.

Outline images with adjusted dimensions

This tool will outline all images with adjusted dimensions displayed on a page.

By using this feature, any image that has oversized dimension will be outlined by the extension, allowing developer to highlight such images.

Outline images with empty alt attributes

This tool will outline all images with empty alt attributes displayed on a page.

By using this feature, any image that has no alt attribute or an empty alt attribute will be outlined and helping the developer to fix such issues by fixing the issue

By using this feature, any image that has no alt attribute or an empty alt attribute will be outlined and helping the developer to fix such issues by adding an alt attribute.

Outline images with oversized dimensions

This tool will outline all images with oversized dimensions displayed on a page.

By using this feature, any image that has oversized dimension will be highlighted, and the developer will be able to take steps required to fix appropriate issues.

Outline images without alt attributes

This tool will outline all images without alt attributes displayed on a page.

By using this feature, images that have no alt attributes will be outlined by the extension.

Outline images without dimensions

This tool will outline all images without dimension displayed on a page.

By outlining images that have no dimension, a software developer can gain additional information regarding developing the page.

Reload external CSS

This tool can be used to automatically reload all external CSS files that are added on the current page by using a <link/> tag.

This feature works by reloading external CSS files by adding a random query string at the end of the external CSS files allowing end user to reload external CSS files.

Reload images

This feature can be used to reload all images added on a page.

This feature works by adding a random query string ad the end of the image URL causing the image to be reloaded.

Miscellaneous tools

Linearize page

• Checking this checkbox will linearize page layout.
• Un-checking this checkbox will revert the changes and make the page appear as it originally was.

Display hidden elements

Using this tool will display all hidden elements available on the page.

There are various elements that can be hidden on a specific page.

By using this feature all the hidden elements on a specific page can be displayed by the extension.

Mark all links as visited

Using this tool will mark all links available on the page as visited by adding them to a user’s browsing history.

A link can be marked as visited by adding it to the history of the web browser. This feature works by adding link into history of the web browser marking the link as visited.

Mark all links as un-visited

Using this tool will mark all links provided on the page as not-visited by removing them from a user’s browsing history.

A link can be marked as un-visited by removing it from history of the web browser.

This feature works by removing specific link from history of the web browser and that marks the link as un-visited.

View source

Using this a user can view source code of current document. This feature helps developers debug various issues by taking a glance at the actual source code of the page.

"Design Analysis" is free for non-commercial use however a license must be purchased for commercial use. This software will ask you to purchase a license if commercial use is detected.

Privacy notice: This software neither collects nor transmits any personally identifiable information. This software does not track your browsing behaviour. Information necessary for functioning of this software is stored on the devices of the end user, our servers do not have access to this information. For more information please read our privacy policy and terms of service.

How to uninstall "HTML & CSS Design Analysis"

Once you have installed our browser extension, please follow steps given below to remove it from your device:

Un-Installing on Opera, Brave, Google Chrome, Canary and other Chromium based web browsers

1. Open your web browser where you have installed our browser extension.
2. Go to "chrome://extensions/" page by typing it in address bar.
3. Click on the "Remove" button to remove the extension from your device.
4. Restart web browser.

After following above steps, extension will be un-installed from your chromium based web browser.

Tags:

• Documentation
• Browser Extension

We hope that you find this product useful and satisfies your use case. Thank you for reading this documentation!