Basically, I have finished the CSS for a site at work, but I've never used a prefixer before.
Can I just stick the whole lot (about 900 lines) through an online prefixer E.G. https://autoprefixer.github.io/ ?
Or will this cause issues?
Would I be better using something built into VS Code or using some sort of processor?
Thanks.
P.S. I did look for another question/answer similar to this, but couldn't find a definitive answer.
If you are working on chrome and have compleated your project that is totally fine. You can use the auto prefixer without any hesitation. You just need to copy and paste the code then you need to copy the auto prefixed code and paste in your code editor. In rare cases, some of your properties may not work in the other browsers (as I said very rare properties) but that will not affect your existing code I can guarantee that.
Just go through this to know about the existing and deprecated CSS properties.
Can I Use
Related
On developing frontend-stuff in scss and html5 I have some routines that I rely on like display:inline-block, rgba, css-gradients and so on.
Now dependent on which project I have, browser demands change. I sometimes need to deliver something workable for IE7 and sometimes IE10 is alright too.
Of course I can (and do) real browser checks to check issues, but I thought having a routine upfrontal check wouldn't hurt. So I could run a search within my scss-files to check for the pattern "rgba" and replace it with something appropriate. But that doesn't sound neither very reliable nor modern to me.
Isn't there a way to generate a special set of pattern-fixes for each browser > run it > highlight it to me (or even better already fix it)
Would grunt/gulp be the topic I need to investigate therefore further?
Thanks
As deolectrix said you could look into compass, there is also bourbon, and less. Using grunt/gulp would be highly recommended. For many reasons like concating/minifying your code, or if you write JS you can use something like babel to write ES6 JavaScript.
For cross-browser css autoprefixer would probably help you out. For errors/warnings about troublesome css look into csslint. Hope that helps! It's just a starting point, enjoy diving in.
I often have a problem where I'm working on a dynamic web app with tons of front-end or back-end code and there is a CSS problem that just eludes me despite an hour of scratching my head. I know that StackOverflow could solve it in a second, and I'd like to post it, but I either have to
Make the app public along with steps to reproduce the state, or
Tediously copy out the DOM and assets (CSS) along with the current state.
Neither is very straightforward. Note that the DOM is dynamically generated so "View Source" won't cut it. Similarly, the CSS could be spread out across multiple files and I'd like to just grab it all at once.
Is there an easy way to copy out the DOM and all CSS as a single file so that I can insert it into something like JSFiddle and be on my way?
The quickest way to get all HTML on the page as-is is to paste this in the address bar:
javascript:alert(document.body.outerHTML)
You can also use the console, of course, but the above works even in old IE versions and is easier to copy/paste.
I don't think there's a good way to get the CSS at all, but you could try using a jQuery selector or similar to get the URLs:
$('link[type="text/css"]')
.each(function(x, link){
console.log(link.attributes.href.value)});
And downloading and concatenating the CSS.
I have a massive CSS file that is applied to several pages. I'm hoping to break it down to a common CSS file and several page-level CSS files, since it is becoming difficult to work with. Unfortunately, it's not easy to tell what exactly is common. I was hoping there was a way to quickly see what lines/selectors were being used on a given page. Does anyone know of a tool that can do this? I don't want to use developer tools and go through the DOM elements one by one. I'd like to look at the CSS file and see unused selectors grayed out or something. Thanks!
You can use, at least in Chrome, the Audits tab in the developer tools. Once you run it, it says you which styles aren't used in the current page.
Testing it on this site:
And for Firefox there an add-on called CSS Usage – might be worth a look too.
I know there are several questions concerning unused CSS already, e.g.
How can I find unused images and CSS styles in a website?
or
how can i find unused css in ajax app?
As I understand from these questions and the answers given there it is currently not possible to automatically check for unused CSS for a complete webapp. The problem seems to be that it is nearly impossible to get all HTML that could ever be generated, even if you have access to the source code.
Also note that in my case I want to verify that some CSS is not used rather than finding it in the first place.
Still I guess removing unused CSS is a common task. So how is it done in real-life? I actually have to do this for a larger project. My current plan is to remove some CSS, test it manually and then wait for bug reports. I really hope there is a better way.
Edit: I just realized that this question is not really CSS specific. So when I broadened my search I found What is the best way to remove dead code from your application?. The answer given there mainly says it "is only possible with a really extensive set of tests" (which is not an option for me).
There is no exact solution, but a good workaround I found on css wizardry:
Add something like this to your css:
#suspicious_selector {
background-image: url('/assets/img/dead/suspicious_selector.gif');
}
After some time check for requests to that file. If there were no requests, it is mostly safe to remove the selector.
It's not really a coding question, but I don't know where to ask it elsewhere.
I'm looking for a tool to clean up unused css selectors.
I know this tool Dust-Me selectors, but I want it to clean it automaticly.
Can anyone help me with this?
Depending on the complexity of your site, I don't think it's a good idea to clean up CSS automatically. I've used those tools myself (DustMe-Selectors mostly) but as soon as it comes to dynamic pages (and sites), all of the tools lack the ability to really find out what is used and what not.
Consider a site using selectors like "item-selected", "item-soldout", "item-bargain", etc. If the site will apply selectors dynamically to e.g. items in a shop, tools may not find those selectors in your markup because they are not used at the moment but maybe used as soon as the shop-configuration changes.
So I'd suggest to go with one (or more) of the tools suggested here and carefully evaluate the suggestions for unused selectors, but rather not use something to clean my code automatically.
There's a windows based utility called CSS Cleaner available here. Obviously the issue is that it has to run through every pages in your project to determine which selectors aren't used. And it can't see into any CSS generated by your code.
Be careful with auto-clean up. If you are not 100% familiar with the site -- don't do it. There may be classes or IDs in your code that are there for JS and not CSS.