I 've searched on google some online unused css removers that you have to pay. I also checked here on stackoverflow for programs that might do that. I only found an easy way via google chrome.
Customize and control google chrome
Tools
Developper options
Audits
Check Audit Present State , Web Page Performance only and then push RUN
Then i can see on the files the unused css of the current page
The thing is that this one does it for one page (current) only.
I have a website with three pages here : PAGE 1 , PAGE 2 , PAGE 3. I want to find the unused css parts of all the three pages at the same time. Is there a tool or a website that does it for free ?
Try "Dust-Me Selectors" add-on for Firefox. It has the ability to crawl, even thru a given sitemap.
I also wish Google Audit had that feature.
Opera has an open project Ucss. It's searching dublicated or no-used properities.
More here
Related
I have a number of embedded devices with a web-based front end, each on a different randomly assigned ip address.
I often want to check between these devices but, when they're open in different tabs, it is hard to tell which is which.
I have attempted to embed these pages in iframes with a header labelling each one, but CORS prevented the pages from showing.
Is there a way I could get the opening page to label a tab or window to help me distinguish between similar looking pages? Failing that, and possibly in SuperUser territory, is there any way I could manually label the tabs in my browser once they're open?
Here's a partial answer. There are a number of third-party plugins for Chrome which allow the user to manually rename tabs. I have installed one called Simple Tab Renamer and it seems to be doing the job.
An automated system would be nicer, but I suspect security policies would prevent that.
https://chrome.google.com/webstore/detail/simple-tab-renamer/ailhpmlejogfdcpoflidmobgkgdemaog
We are trying to use https://pagespeed.web.dev/ to evaluate the speed of our site.
The tool has worked on our site URLs for months, but for the past few days we have been getting below error when trying to use it:
Lighthouse returned an error: NOT_HTML. The specified page is not HTML (displayed as MIME type text / plain).
Our site is a fairly standard Shopify page, see e.g. this URL for replication of the issue.
mfcss i am also facing this issue from last night and this issue is related to google page speed insights new update ( all of my client shopify stores are getting this error while checking on google page speed insights new updated tool .
Try checking from you shopify dashboard click on view report under theme and then click on view report for all pages homepage, product page and collection pages this might work.
We have now learned from the github page of Lighthouse that this is related to a lack of support for Early Hints (used by Shopify) in the Lighthouse 9.0.0 release.
As suggested, there are short-term workarounds, e.g. using Lighthouse via the Chrome Developer Tools works for now. Shopify technical support has also been notified of this problem.
here is an update as it looks like a shopify issue with new tool but found a solution if you make a copy of theme and check by preview link in google page speed insights it shows the mobile and desktop score
I want to code an extension that modifies your bookmarks in Google Chrome. For example, it should expand different sub-sites (e.g. reddit subreddits) when hovering over a bookmark.
Where do I find the bookmark function, though? Like the part that says for example "when hovering over an icon, background goes grey". I'd have to modify exactly those parts.
For what you are referring to, a simple CSS style modification will achieve. To implement an extension into chrome, you will want to start here:
Google Chrome Extension Development
Some resources for you:
Developer Guide - this contains all the extensible chrome APIs
chrome.bookmarks API - this is the API that will interact with and manipulate bookmarks
There are also some resources out there that are helpful for learning how to create a chrome extension. A good starting point may be this:
How to create and publish a chrome extension in 20 minutes
I'm working on an upgrade for our current application (asp.net mvc). Here my problem is, I have a existing css file name "styles.css". Now this file has lots of css classes and they are used in different pages.
Now as a part of the upgrade process, this css file will not be used anymore. But I still want certain css classes from this file, so that I can copy them to a new file and include it in my pages.
Any ideas on how to extract these styles which are used in my new pages. And yes the styles which I want to pick are already set to the controls in the page. Please help.
Finding ones that are used in single page should be easy with multiple tools. One good tool is called UnCSS.
The trick is checking an entire site where CSS file is shared accross pages.
This approach was popular in social networks recently with some high profile guys sharing it like Google's Addy Osmani and some Google Chrome guys:
http://addyosmani.com/blog/removing-unused-css/
Use Chrometools Audits
In Chrome Press: F12 -> Audits -> Run
It will let you know what is and is not used.
There are a lot of ways, for example:
Firefox plugin, this will extract the used css
https://addons.mozilla.org/en-US/firefox/addon/dust-me-selectors/
for chrome
https://chrome.google.com/webstore/detail/css-remove-and-combine/cdfmaaeapjmacolkojefhfollmphonoh?hl=en-GB
Manually: another way in the chrome (or other browsers), right click and select inspect element, this will show you the hierarchis which is working on specific element, by that you can take your used css
You can find the unsed css from the following tool, so that you can clean your css to have pure one
http://unused-css.com/
or
http://www.pontikis.net/blog/remove-unused-css
Use a Browser Debugger, click on the elements on site and see on the right corner which classes are machtes and copy them.
I have made a page in html5 with css3. It works fine on local (I dont use any server, just doubleclick in the index to open it).
I want to put it in google drive. I have load all the documents needed, but when I try to open the html, I can only see the text (I mean, it is not being executing, I can see just the source code).
Any suggestion?
Not available any more, https://support.google.com/drive/answer/2881970?hl=en
Host web pages with Google Drive
Note: This feature will not be available after August 31, 2016.
I highly recommend https://www.heroku.com/ and https://www.netlify.com/
EDIT: As of August 2016 Google Drive can no longer be used to host static web pages, so this solution no longer works.
Create a new folder in Drive and share it as "Public on the web."
Upload your content files to this folder.
Right click on your folder and click on Details.
Copy Hosting URL and paste it on your browser.(e.g. https://googledrive.com/host/0B716ywBKT84AcHZfMWgtNk5aeXM)
It will launch index.html if it exist in your folder other wise list all files in your folder.
I don't think it is necessary to "host" the content using the way from the accepted answer. It is too complicated for a normal user with limited developing skills.
Google actually has provided hosting feature without using Drive SDK/API, what you need is just few clicks. Check this out:
http://support.google.com/drive/bin/answer.py?hl=en&answer=2881970
It is the same to the answer of user1557669. However, in step 4, the URL is not correct, it is like:
https://drive.google.com/#folders/...
To get the correct host URL. Right click on the html file (you have to finish 1-3 steps first and put the html in the public shared folder), and select "Details" from the context menu. You will find the hosting URL right close to the bottom of the details panel. It should look like:
https://googledrive.com/host/.../abc.html
Then you can share the link to anyone. Happy sharing.
Now you can use
https://sites.google.com
Build internal project hubs, team sites, public-facing websites, and more—all without designer, programmer, or IT help. With the new Google Sites, building websites is easy. Just drag content where you need it.
While drive allows you to edit plain text and HTML files I don't believe they allow the HTML to actually be displayed. I don't think they want people hosting websites from their drive space.
A lot of the solutions offered here do not seem to work anymore. I'm currently on a chromebook and wanted to view an HTML5 banner. This seems impossible now through Google Drive or other apps (as mentioned in previous comments).
The method I ended up using to view the HTML5 was the following:
Open Google Adwords (create a free account if you dont have one)
Click on Ads in the top panel
Click on "+AD" and choose image ad
Choose "upload an ad"
Drag and drop your zip file into the area
Click on Preview
Voila, you will see your HTML5 banners in their full beauty
There may well an easier way, but this way is pretty good too. Hope it helps and worked well for me.
Create a new folder in Drive and share it as "Public on the web."
Upload your HTML, JS & CSS files to this folder.
Open the HTML file & you will see "Preview" button in the toolbar.
Share the URL that looks like www.googledrive.com/host/... from the preview window and anyone can view your web page.
Found method to see your own html file (from here (scroll down to answer from prac): https://productforums.google.com/forum/#!topic/drive/YY_fou2vo0A)
-- use Get Link to get URL with id=... substring
-- put uc instead of open in URL