CSS Pro
  • Initial page
  • Quick Start
    • Installing it
      • On Google Chrome
      • On Firefox
      • On Safari
  • Inspecting
    • Choosing what happens when you click on an element
    • Inspecting invisible, overlapping, and parent elements
    • Comparing multiple elements at the same time (Pinning)
    • Measuring distances and checking alignments
    • Inspecting animations
    • Identifying fonts
  • Editing
    • Code Editor (Code tab)
      • Forcing a state or pseudo
    • Visual Editor (Design tab)
      • Editing media queries and pseudo states
      • Editing backgrounds
      • Auto unit conversion
    • HTML Editor (HTML tab)
    • Handling CSS changes
    • Editing texts
    • Removing elements
  • Copying
    • Copying CSS and HTML
    • Exporting elements
    • Downloading page assets (images)
    • Copying colors
  • License
    • Managing your license activations
    • Retrieving your license key (forgot)
  • Subscription
    • Switching from the monthly to the annual plan
    • Canceling your subscription
Powered by GitBook
On this page

Was this helpful?

  1. Editing

Handling CSS changes

PreviousHTML Editor (HTML tab)NextEditing texts

Last updated 6 months ago

Was this helpful?

All CSS changes you make using the or Editor are trackable and shareable.

That means you'll never lose your changes anymore.

You can see all the improvements you've made and easily copy or export them all.

As soon as you make your first CSS change, you'll see a bubble with a counter show up in the toolbar.

To see all the changes, click on "CSS Changes" on the toolbar:

A popup will show up:

There are four options on the top:

  • Share changes via link

    • Generates a unique URL link that you can share with your team or clients so that they can see the website with all your CSS changes, along with a Before/After toggle.

  • Export changes

    • Export all changes as a .css file

  • Reset changes

    • Reset all changes (un-reversible). The CSS will go back to its original version.

  • Copy changes

    • Copy all changes to the clipboard

Then each modified element is shown separately with a git diff visualizer (see which lines you removed, edited, or added), and you have two options:

  • Copy changes only (copy only the changes to the clipboard)

  • Copy new code (copies all the CSS code for that element to the clipboard)

Here's an .

example output
Code
Visual