Web content is dynamic, so our design should be flexible and we should test for various types and lengths of content. For example, entering a very long word might break a design. To check that, we can edit our design right in the browser with document.designMode.
This can help us test our design without editing the content manually in the source code.
Sometimes we need to hide elements in our design to check how it will look without them. Chrome DevTools give us the ability to inspect an element and type h from the keyboard to hide it by toggling CSS visibility property.
This is very useful in case you want to hide some elements to take a screenshot and then discuss it with your team/designer/manager. Sometimes I use this feature to hide elements and then take a screenshot to mock a quick idea in Photoshop.
Screenshotting design elements
There is a useful feature in Firefox DevTools to take a screenshot of a specific element in the DOM. By doing that, we can compare our variations side by side to see which one is the best of our case.
Follow the below steps:
Open Firefox DevTools
Right-click on an element and pick Screenshot Node
The screenshots are saved in the default downloads folder
If you want to use Chrome for screenshotting, you can. There is a plugin called “Element Screenshot” that does almost the same job.
Changing Design Colors
In the early stages of every design projects, you might be exploring different color palettes. CSS’ hue-rotate function is a powerful filter that provides us with the ability to change design colors right in the browser. It causes hue rotation for each pixel in an image or element. The value can be specified in deg or rad.
In the below video, I added filter: hue-rotate(value) to the component, notice how all the colors change.
Notice that every design element got affected from applying hue-rotate. For example, the user avatar colors looks wrong. We can revert the normal look by applying the negative value of hue-rotate.
Even if the support is still not perfectly cross-browser friendly (it’s currently in development in Microsoft Edge), we can get the benefit of CSS variables today. Using them to define the spacing and color units will make it easy to make huge changes by changing tiny values on the fly.
These variables will be used throughout the website elements like links, nav items, borders and background colors. When changing a single variable from the dev tools, all the associated elements will be affected!
Invert elements with CSS filter: invert()
This is useful when you have a white text on black background or vice versa. For instance, in the header, we have the page title in white on a black background, and by adding filter: invert to the element, all the colors will be inverted.
CSS Visual Editor
This feature is becoming better every day. Safari has really nice UI tools for editing values. Chrome is adding similar things slowly to DevTools.
Chrome has some cool stuff for things like box-shadow, background-color, text-shadow and color.
I think this will be very useful for designers who doesn’t know much about CSS. Editing things visually like that will give them more control over some design details, they can tweak things in the browser and show the result to the developer to be implemented.