Remove all css rules

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

An extension allowing users to remove all CSS styling then reapply rules one at a time.

kabnigam/CSS-Deconstructed

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

CSS Deconstructed is a chrome extension written in JavaScript and jQuery that allows users to deconstruct and reconstruct (piece by piece) the CSS of specific elements on a webpage based on selector, class and/or ID.

• Remove all CSS styling from an element with the click of a button
• Select element by selector, class and/or ID
• Choose the time-frame for which you want each CSS rule to be reapplied
• Rebuild the website/element piece by piece, right in front of your eyes!
• COMING SOON: See exactly which CSS rule is being applied at every step in the process

CSS Deconstructed was built using a combination of HTML, CSS, JavaScript and jQuery.

• Uses jQuery and JavaScript DOM methods to process user input and change state of extension in response user behavior

document.getElementById('pageSubmit').removeEventListener("click", function()  getInput(this); >, false); $('#pageSubmit').attr('value', 'Build!'); let form = document.getElementById('form'); let el = parseInput(form.childNodes[3].value, form.childNodes[7].value, form.childNodes[11].value, form.childNodes[15].value); $('#pageSubmit').on('click', build.bind(null, el));

• Relies on manipulation of the current tab’s DOM, which requires the injection of content script into the active tab

chrome.tabs.executeScript(code: 'var element = ' + JSON.stringify(element)>, function()  chrome.tabs.executeScript(code: 'var deconstruct = true'>, function ()  chrome.tabs.executeScript(code: 'var time = ' + JSON.stringify(time)>, function ()  chrome.tabs.executeScript(file: 'jquery.min.js'>, function()  chrome.tabs.executeScript(file: 'content_script.js'>); >); >); >); >);

styles = window.getComputedStyle((document.querySelectorAll(element)[0])); for (var i = 0; i  Object.keys(styles).slice(0,258).length; i++)  let key = Object.keys(styles)[i]; original[element][styles[key]] = styles[styles[key]]; for (var j = 0; j  $children.length; j++)  original[j][styles[key]] = $children.eq(j).css(styles[key]); > 

Object.keys(styles).slice(0,258).forEach(key =>  $(element).css(styles[key], 'initial'); for (var j = 0; j  $children.length; j++)  $children.eq(j).css(styles[key], 'initial'); > >);

Object.keys(original[key]).forEach(prop =>  if (original[key][prop] !== styles[prop] && !prop.includes('webkit'))  difference[key][prop] = original[key][prop]; > >);

var innerInterval = window.setInterval( function ()  if (j  Object.keys(difference[key]).length)  $target.css(Object.keys(difference[key])[j], difference[key][Object.keys(difference[key])[j]]); j++; if (Object.keys(difference[key])[j])  chrome.runtime.sendMessage(type: "change_value", value: `$Object.keys(difference[key])[j]>: $difference[key][Object.keys(difference[key])[j]]>`>); > > else  window.clearInterval(innerInterval); running = false; i++; if (i > Object.keys(difference).length-1)  window.clearInterval(outerInterval); > > >, time);

CSS Deconstructed itself is open source with a public repository.

Источник

UnusedCSS — Remove Unused CSS

On average, about 35% of CSS code is completely unnecessary. We meticulously find and remove this unnecessary CSS code.

A faster website can lead to more sales. Less CSS code means less time to download your web page, and less time for a web browser to parse and display it.

Whether your engagement metrics include products bought or number of ads viewed, a faster website can help you achieve your goals.

We work out which rules you are actually using by looking at your HTML and Javascript. Less clutter in your code means better maintainability.

What we can do for you

• Automatically find unused CSS rules
• Provide clean CSS files to download
• Log into your website
• Scan Javascript files for CSS rules
• Explore responsive design rules and media queries
• Regularly check your website for changes
• Show a visual diff of the clean CSS file
• Set a custom user agent for crawling your website
• Compatible with all websites (WordPress, Bootstrap. )

What people say about us

Our company manages a complex platform that is constantly being updated. We use Unused CSS to improve our system by removing erroneous and unneeded CSS code. This has reduced load times and enabled us to deliver a better product to our users. Thank you!

Источник