I just find out some htc files in my solution with some script inside what does those file do ? Is it possible to remove them. the using inside like behavior link inside of CSS
HTC reference from MSDN:
For Microsoft Internet Explorer 5 and later, HTML Components (HTCs)
provide a mechanism to implement components in script as Dynamic HTML
(DHTML) behaviors. An HTC is an HTML file that contains script and a
set of HTC-specific elements that define the component. The component
is saved with an .htc extension. This section lists these HTC-specific
elements and the members they support.
And maybe this comment can be of value.
It's likely there to support CSS features unavailable in older versions of IE.
http://www.fileinfo.com/extension/htc
http://www.filefacts.net/htc-file-extension
Files that use the file extension .htc are HTML Component Files which are HTML pages that are wrapped in descriptors that define properties etc that are used by the component, an apt description can be found on the w3.org website which states "HTC is literally a normal HTML file with a few defined XML elements inserted in the document"
I have only used an htc file to allow IE (< 9) to draw rounded corners, along with the border-radius property. This is not a recommended practice though. It depends on your priorities: if you prefer efficiency over design, I wouldn't use those files.
Related
In previous projects, I got used to have IntelliJ autocomplete CSS class names from the HTML editor.
For example, typing :
<table class="tab...">
Then ctrl+space would suggest classes from libraries (Bootstrap, Font-Awesome,...) or my own stylesheets, such as in this case table, table-bordered, etc.
But for it to work, the CSS file containing the classes must be linked using a <stylesheet> tag in the head section of the HTML file.
However, with more modern workflows, using preprocessors and build tools (In my case, I use bootstrap-sass and Webpack), it is not so explicit which CSS file will be included. I suppose that is is not realistic to expect the IDE to understand every possible way a CSS file can be processed and included in a HTML file.
Is there a way to explicitly specify CSS (SCSS, LESS,...) files, at the IDE level, to be included for autocompletion ?
No. In HTML files with root <html> element (i.e. not partials) only those selectors that are defined in stylesheets explicitly linked to the page using <link> tag are available in completion.
We have feature requests for adding intellisense for selectors that aren't explicitly linked - WEB-17009, WEB-24264. Please feel free to vote for them
So to give you an idea of what it is I am trying to do, OOCSS Framework uses a ton of classes, I'm about to package up a mobile site that is about ~2.5 megs and would like to remove all unused classes from the files. Sure, I could do it by hand but it would be much easier if something like this existed for the future.
There is a Firefox extension called Dust Me Selectors
It extracts all the selectors from all the stylesheets on the page you’re viewing, then analyzes that page to see which of those selectors are not used. The data is then stored in your user preferences, so that as you continue to navigate around a site, selectors will be crossed off the list as they’re encountered.
You’ll end up with a profile of which selectors are not used anywhere on the site.
or give Unused Css a try
http://unused-css.com/
from Unused Css site:
Latish Sehgal has written a windows application to find and remove unused CSS classes. I haven't tested it but from the description, you have to provide the path of your html files and one CSS file. The program will then list the unused CSS selectors. From the screenshot, it looks like there is no way to export this list or download a new clean CSS file. It also looks like the service is limited to one CSS file. If you have multiple files you want to clean, you have to clean them one by one.
Dust-Me Selectors is a Firefox extension (for v1.5 or later) that finds unused CSS selectors. It extracts all the selectors from all the stylesheets on the page you're viewing, then analyzes that page to see which of those selectors are not used. The data is then stored so that when testing subsequent pages, selectors can be crossed off the list as they're encountered. This tool is supposed to be able to spider a whole website but I unfortunately could make it work. Also, I don't believe you can configure and download the CSS file with the styles removed.
Topstyle is a windows application including a bunch of tools to edit CSS. I haven't tested it much but it looks like it has the ability to removed unused CSS selectors. This software costs 80 USD.
Liquidcity CSS cleaner is a php script that uses regular expressions to check the styles of one page. It will tell you the classes that aren't available in the HTML code. I haven't tested this solution.
Deadweight is a CSS coverage tool. Given a set of stylesheets and a set of URLs, it determines which selectors are actually used and lists which can be "safely" deleted. This tool is a ruby module and will only work with rails website. The unused selectors have to be manually removed from the CSS file.
Helium CSS is a javascript tool for discovering unused CSS across many pages on a web site. You first have to install the javascript file to the page you want to test. Then, you have to call a helium function to start the cleaning.
UnusedCSS.com is web application with an easy to use interface. Type the url of a site and you will get a list of CSS selectors. For each selector, a number indicates how many times a selector is used. This service has a few limitations. The #import statement is not supported. You can't configure and download the new clean CSS file.
CSSESS is a bookmarklet that helps you find unused CSS selectors on any site. This tool is pretty easy to use but it won't let you configure and download clean CSS files. It will only list unused CSS files.
I am trying to use LESS CSS to write my CSS. I have imported the style.less and less.js file in that order.
Now i wanna extract the CSS that LESS generates.. is there any way i can do that ? i dont want to use the script to generate it dynamically in production. just for development.
You can extract the CSS using the Firebug extension in Firefox. The compiled CSS appears under the menu choice "inline" in the CSS tab.
http://incident57.com/less/ if you're fortunate enough to use OS X, and there's a ruby gem too http://rubygems.org/gems/less although this has been superseded by the node.js implementation installed through npm. Check http://lesscss.org/ for more information.
There's also http://www.dotlesscss.org/ for windows, but not sure how useful it is.
And in 2013 we have:
http://less2css.org/
Seems to work just fine for me. Just copy/paste.
Chances are you'll want to minify your CSS after this, so:
http://cssminifier.com/
For others who'd stumble here, in modern browser you can see it in the LocalStorage. I use Chrome and it's in the dev toolbar under Resources.
In my case we also want to save the css file automatically (we have a tool that generates a template), we can do it easily with javascript.
This returns the generated CSS, just replace it with the right path, as you see it under the Resources tab:
localStorage.getItem('http://domain.com/css/main.less');
Then we send that through Ajax to save it in a css file. When switching to production we remove the less and replace it by the generated css file.
I have a DotNetNuke skin that has a single CSS file over 3,500 lines long. It contains styles for YUI, Telerik, Cluetip as well as the actual customisation of the site. The old developers just kept adding styles and never cleaned up the old unused ones.
I want to cleanup the file and get it to a more managable size. I first thought about scanning through the code base but this is 5,500 files with a mixture of CSS applied in the .aspx, .ascx and .cs files as well as jQuery aplying styles sometimes from generated code and sometimes from js files. Some styles are applied with class selectors and others with id selectors.
Is there a way I can easily check just which styles the website actually needs across all of its pages? Is there some crawler that could do this?
For firefox there is an add-in called dust-me-selectors. If you provide a sitemap, it will find all unused css styles.
If you run dust-me-selectors, remember to run it in every page of your website so you don't delete any styles that are actually used.
Locked. This question and its answers are locked because the question is off-topic but has historical significance. It is not currently accepting new answers or interactions.
A bunch of CSS files were pulled in and now I'm trying to clean things up a bit.
How can I efficiently identify unused CSS definitions in a whole project?
Chrome Developer Tools has an Audits tab which can show unused CSS selectors.
Run an audit, then, under Web Page Performance see Remove unused CSS rules
I have just found this site – http://unused-css.com/
Looks good but I would need to thoroughly check its outputted 'clean' css before uploading it to any of my sites.
Also as with all these tools I would need to check it didn't strip id's and classes with no style but are used as JavaScript selectors.
The below content is taken from http://unused-css.com/ so credit to them for recommending other solutions:
Latish Sehgal has written a windows application to find and remove unused CSS classes. I haven't tested it but from the description, you have to provide the path of your html files and one CSS file. The program will then list the unused CSS selectors. From the screenshot, it looks like there is no way to export this list or download a new clean CSS file. It also looks like the service is limited to one CSS file. If you have multiple files you want to clean, you have to clean them one by one.
Dust-Me Selectors is a Firefox extension (for v1.5 or later) that finds unused CSS selectors. It extracts all the selectors from all the stylesheets on the page you're viewing, then analyzes that page to see which of those selectors are not used. The data is then stored so that when testing subsequent pages, selectors can be crossed off the list as they're encountered. This tool is supposed to be able to spider a whole website but I unfortunately could make it work. Also, I don't believe you can configure and download the CSS file with the styles removed.
Topstyle is a windows application including a bunch of tools to edit CSS. I haven't tested it much but it looks like it has the ability to removed unused CSS selectors. This software costs 80 USD.
Liquidcity CSS cleaner is a php script that uses regular expressions to check the styles of one page. It will tell you the classes that aren't available in the HTML code. I haven't tested this solution.
Deadweight is a CSS coverage tool. Given a set of stylesheets and a set of URLs, it determines which selectors are actually used and lists which can be "safely" deleted. This tool is a ruby module and will only work with rails website. The unused selectors have to be manually removed from the CSS file.
Helium CSS is a javascript tool for discovering unused CSS across many pages on a web site. You first have to install the javascript file to the page you want to test. Then, you have to call a helium function to start the cleaning.
UnusedCSS.com is web application with an easy to use interface. Type the url of a site and you will get a list of CSS selectors. For each selector, a number indicates how many times a selector is used. This service has a few limitations. The #import statement is not supported. You can't configure and download the new clean CSS file.
CSSESS is a bookmarklet that helps you find unused CSS selectors on any site. This tool is pretty easy to use but it won't let you configure and download clean CSS files. It will only list unused CSS files.
Google Chrome Developer Tools has (a currently experimental) feature called CSS Overview which will allow you to find unused CSS rules.
To enable it follow these steps:
Open up DevTools (Command+Option+I on Mac; Control+Shift+I on Windows)
Head over to DevTool Settings (Function+F1 on Mac; F1 on Windows)
Click open the Experiments section
Enable the CSS Overview option