css-dev-in-browser.md

css-dev-in-browser.md

# CSS DEV IN BROWSER

## FIREFOX

source: https://dev.to/colewalker/customizing-firefox-with-css-h4m

• open the dev tools cmd+alt+i

• open the preferences F1

• on the right, there is a category called Advanced parameters

  • check the following options
    • Enable browser chrome and add-on debugging toolboxes
    • Enable remote debugging

• open about:config

• set toolkit.legacyUserProfileCustomizations.stylesheets to true

• open about:support

• search for Profile Folder (Dossier de profil)

• create a chrome folder inside the profile folder PROFILE_FOLDER="$HOME/Library/Application Support/Firefox/Profiles/y8wm3bjn.dev-edition-default-1726121876931" CHROME_FOLDER=$PROFILE_FOLDER/chrome mkdir -p $CHROME_FOLDER touch $CHROME_FOLDER/userChrome.css code $CHROME_FOLDER

  touch $CHROME_FOLDER/userContent.css

@-moz-document domain(example.com) {
    img {
        opacity: 0.05 !important;
    }
}

@-moz-document domain(example.com) {
    img {
        opacity: 0.05 !important;
    }
}

Enable browser chrome and add-on debugging toolboxes" and "Enable remote debugging" options in the Developer