I was thinking this morning, my mind was on CSS and creating different style sheets for IE7, IE8, FF, etc.. I started wondering if there was a tool that exists to make this easier. I was thinking something along the lines of this:
Build the "core" style sheet.
Any time a "broken" rule is entered
into the "core" style sheet, a fix
is added to the associated browser
specific style sheet.
If a fix is added it would also be
noted, so you know that a particular
style has extras in the browser
specific sheets.
This could work in two different ways, either automatic, IDE style, or as a tool which you input the core css and output all the different css you need.
Thoughts? Does something like this exist?
The problem with this is that the term "broken" is subjective. No machine is able to tell what you consider to be "broken". Granted there are some well-known bugs, but even then you're only really scratching the surface.
Your best bet is to just code using web standards and using a tool like SASS to make coding your CSS easier.
For instance, if you are using HTML5Boilerplate and want to add an IE6 specific rule, all you do is something like this:
#mydiv {
/* mydiv specific styles */
.ie6 & {
/* IE6 specific styles for #mydiv
}
}
Compass is doing some of what you were looking for.
I know it is has been 5 years since you asked but this might help someone in pain :)
Related
Alright, so I recently found this script called "Selectivizr" and I was really excited, but I plugged it into my project, set it up just as it said, and it didn't work.
So, what I am looking for is any sort of JavaScript library/script that will allow me to use CSS3 selectors (especially :checked) in IE8.
Selectivizr seems broken, and hasn't been updated in over a year. Has anybody else had luck with it?
Does anybody know of any other scripts that will allow for use of CSS3 selectors in IE8?
Not looking for CSS3 stylings like border radius, shadows, etc. Just looking for the selectors, like :before, :after, :checked, etc...
Dean Edward's IE9.js is pretty solid, though I have heard of some incompatibility problems when using other libraries as well. Never experienced them myself, but haven't used the library too often in the wild for a long time. Plug it and play, and if it doesn't break then you're all set.
Link: http://code.google.com/p/ie7-js/
Demos: http://ie7-js.googlecode.com/svn/test/index.html
With jQuery code, you can use these few lines to toggle a class on all your checkboxes (or on it's container) any time it's checked or unchecked. This then lets you use regular CSS code in all browsers.
$("input[type='checkbox']").click(function() {
$(this).parent().toggleClass("checked", this.checked);
});
Working example here: http://jsfiddle.net/jfriend00/7jA5r/.
If you dynamically create checkboxes, then you could use the dynamic form of .on() to make sure to catch them.
I would personally rather use a solution with a few lines of code like this than use a heavy library that tries to add CSS style file capabilities. If you were going to use that, make sure you understand what's really going on under the covers before you adopt it.
If you just wanted a selector libraryby itself, the Sizzle selector library works across a wide variety of browsers including all the way back to IE6. It will adapt to the capabilities of the host browser, using as many built-in capabilities as are present and using it's own code when the host browser does not support an explicit capability.
You can use just the selector library itself from here or it is also the selector library inside of jQuery.
It's extremely simple to use. You just do something like this:
var items = Sizzle(":checked");
and you will have an array of DOM elements that match the selector.
Is there any way to find unused CSS in a website?
I'm trying to clean up a project I just inherited.
Dust-me Selectors is a Firefox plugin that finds unused selectors.
I just ran into this and remembered your question: http://github.com/geuis/helium-css
Chrome 59 has built-in coverage display for CSS and JavaScript since 2017-04: https://developers.google.com/web/updates/2017/04/devtools-release-notes#coverage
You can enable it by opening the dev tools, then the command menu (Cmd+Shift+P on Mac or Ctrl+Shift+P on Windows and Linux), and then type "show coverage".
There is so much that can be said about best-practice methods for CSS. I'll try to stick to the main points.
Use a CSS reset.
Try to remove really general CSS statements like h1 {} and #container em {}. You're much better off using h1.section-title and #container em.important {}, because that way if you choose to use h1 or em a different way somewhere in your document, you don't have to worry about overriding any existing code.
Don't be too specific in your CSS selectors if you don't have to. You really only need to have high degrees of specificity if being in a specific section changes how the element is going to be displayed. Otherwise, to make your code for your block class reusable, #container .content .block ... could be reduced to .block ... in many cases.
Look for commonalities in your CSS and see if you can create reusable classes. If you have similar blocks class="favorites" and class="popular", turn it into class="block block-favorites" and class="block block-popular", and put the commonalities into .block.
Get in the habit of making areas in your CSS have an auto-width (can be done implicitly) so that they grow to the width of your containers. This makes it incredibly easier to move sections from a narrow portion of your website to a wide portion of your website without having to change any code.
Commenting your code and breaking it down into sections usually helps make code more readable.
You'd be surprised how much cleaner your code looks when you implement more powerful CSS selectors. Most of them are cross-browser compatible (Internet Explorer 7 and later).
Some valuable resources: When can I use... - Quirks Mode on CSS Selectors - w3 on CSS Selectors
Answer moved from:
Best Practices for Cleaning up Existing CSS/unused styles
To add to #cweiske suggestion, Google Chrome has a no nonsense way of uncovering where your "unused" and "never will be used" selectors are.
I have posted a screen capture of how to launch the CSS Coverage tool with step by step markers.
It is a reliable way to figure out where you really are not using stuff.
I'm not too sure if it is refered to as "Master Reset" but you'll know what I mean.
Ive been using
*{
padding: 0;
margin: 0;
}
With no real problems that I have noticed but ive heard people say that its bad practice to use something like that. So ive looked into reset stylesheets and found this which seems good. But im not sure if its worth using that if there are no problems with using *{foo:bar;}
I hear some people say that in some browsers it messes up with the styling of form inputs. I used to use this, until I stumbled across the meyer reset, which just seemed like a safer, proven approach.
There are arguments for and against CSS resets. The general idea is that by "zeroing-out" all properties you're given a consistently blank canvas across all browsers to which you can apply your custom styles.
The problem with using a reset is that everything will be reset - so, you need to specify custom styles for everything, or at least everything you're going to be utilising within your site.
Read Snook's view: http://snook.ca/archives/html_and_css/no_css_reset/
I often see sites with odd styles applied in commenting systems. For example, I might leave a comment with a <code> tag and because the site uses a css-reset the code tag has no special styling, making it visually pointless. This is only a problem with those full-on resets, like Meyers or Yahoos. Developers forget to apply styles to reset elements... Your flat-reset, while simple, has other ramifications.
In my opinion it's better to have no reset and just style each element on top of default styles offered by the browser.
I think this is just personal preference, the more complex your styles get the more it matters and a more specific reset style sheet may matter. All that matters is that your sites look like they should across all reasonable browsers (and by reasonable at this point I'm not including anything IE6 or prior).
I've switched to only a handful of resets to handle negative margins in extreme cases, otherwise most current browsers seem to be pretty consistent, a very different ecosystem than a few years ago.
I was wondering whether anyone knows of any tools available that perform the task of analyzing one or more CSS files, determining the similarity between the various rules within the files and presenting the user with options for the merging and reduction of rulesets.
I ask this because a project I am working on has reached the point where it has so much CSS that Internet Explorer (Still the bottom line I'm afraid) chokes on the CSS after page load, causing a 3-5 second lock-up in interactivity until the choke is processed.
In case you're wondering: Yes, I am sure it is the CSS causing this issue.
try any of these links, I much prefer css tidy and have used it successfully in the past.
css optimiser
cleancss
css tidy
There's the YUI CSS Compressor - you could give that a go, but I think it's more for file-size than actually combining rules.
I know this isn't exactly what you're asking for and it goes the opposite and makes your css files larger, but you might get some ideas to manually optimize your CSS organized by this
tool:
http://styleneat.com/index.php?PHPSESSID=j0thilea0b8sjao2vcs8g5ekh1
Again, not tools, but interesting reading:
http://code.google.com/speed/articles/optimizing-css.html
http://meiert.com/en/blog/20080515/css-organization-and-efficiency/
Not quite what you're after, but very useful for trimming down bloated CSS:
http://www.sitepoint.com/dustmeselectors/
Firefox plugin to tell you which CSS declarations are unused.
https://addons.mozilla.org/en-US/firefox/addon/60
Firefox Web Developer Toolbar: CSS > View style information > click on a page element - This'll show you all CSS that applies to an element, and the CSS file/s it's in.
I've just been assigned the task to refactor a huge 5000 line CSS file... but here's the worst part - I also need to make it IE6 compatible. Any CSS gurus have suggestions of tools, or possibly tips (common pitfalls) for use in my monolithic expedition? Cheers.
checkout sass... it includes the ability to convert css to sass.
http://haml.hamptoncatlin.com/docs/rdoc/classes/Sass.html
A sass file is a yaml file that can be parsed down into a css file. It allows you to use variables and alternate organization...
sass example:
!main_color = #00ff00
#main
:color = !main_color
:p
:background-color = !main_color
:color #000000
css output:
#main {
color: #00ff00; }
#main p {
background-color: #00ff00;
color: #000000; }
Some tips:
Use version control so you can roll back when needed.
Come up with a checklist of visual tests to run through after each change, in each browser. A spreadsheet of URL links and things to look for, building on them as you run across problems (think "unit tests" but not automated).
Use a CSS-specific beautifier first to get everything into the format you prefer for braces, etc.
Consider using something like SASS to "compile" your CSS as you go along.
Comment the heck out of things, especially where you're doing IE6-specific stuff.
Future-proof yourself by building a separate file with IE6-specific directives as you go along, or at least use Microsoft's way of filtering them out for other browsers.
Use the W3C Validation often.
Mechanically, I would attack it like this:
<link type="text/css" href="newhotness.css" />
<link type="text/css" href="newhotness-ie6.css" />
<link type="text/css" href="oldandbusted.css" />
Move code from the third (old) file into the other two, cleaning up as you go. That way you can validate your code without worrying about tons of errors in the old stuff, and you can track your progress, Ctrl-Tab between them more easily than between locations in a single file, etc.
(If you can't control the markup to add your CSS files, use an #import at the top of the old file.)
Start from scratch!
Assuming you can check all the major pages manually, I would be VERY tempted to wipe the entire file and start from scratch. Spot-checking for IE6 inconsistencies, you'll be doing nearly the same amount of work anyway, but it will be much, much more painful if you're modifying old, browser-specific CSS.
That 5000 lines may well be expressable in 2000 lines of modern, well-designed CSS. I think most experienced CSS developers would find it less work to write 2k lines of new CSS than modify 5k lines of horrible CSS.
http://www.codebeautifier.com/
which is based on this:
http://csstidy.sourceforge.net/
Not necessarily CSS, but here's worflow tip: use GIT.
start off by importing the files in git;
commit for every minor step, and record what you did;
whenever you find that you broke something, you can identify the exact same step broke using git bisect ( a good description );
For extra kicks, here's a talk about code coverage for CSS to help you quickly weed out unused rules.
As Triptych said, I would start from scratch. Also, consider the following:
use a CSS reset file to smooth out cross-browser inconsistencies: http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
get it working perfectly in Firefox, then tweak for other browsers as needed
study the underlying HTML. How is it organized? Is it laid out with tables? all DIVs? Semantic tagging?
is the CSS used for layout or simply styling (fonts, colors, etc.)?
Once you get a feel for that, study the content. Categorize the layout and elements as much as possible, so that you identify all the common elements and can maximize the efficiency of your CSS
remember the C in CSS, Make the most commonly used font the body font, so that other elements will inherit it by default.
use relative units (ems) for font size, to allow proper scaling of text
try not to use ANY inline styles
make use of Firebug - it will let you inspect an element and see exactly what CSS is in effect and where the rules came from
don't be afraid to re-use portions of the old CSS, especially for things like dropdown menus, which can need very specific incantations to work properly
have fun! starting from scratch lets you implement best practices and learn a ton along the way. When you are done you are probably going to look back on this as a good experience.
there is a presentation here that should get you in the right headspace for tackling this task: CSS Systems
I would be tempted into creating a test suite first: automating page visits (perhaps with Selenium?), taking screenshots, then using something like ImageMagick to compare those with reference images.
Also, I second all the suggestions to use source control. If you later discover that your refactorings broke something that wasn't checked by the test suite, you can add a new test and then bisect your history to find the change that broke it. Git is good for that.
Get a code editor with good syntax highlighting. Also, goodluck I dont envy you.
My initial thought was does some like NCover exist for CSS, as it would be handy to see if all of the CSS is referenced. A quick Google on CSS code coverage found a few things- you might want to look yourself though: http://development.lombardi.com/?p=436
Install sass, run css2sass on your 5000 lines of css, proceed. After you are done with your sass file refactoring, run sass2css to regenerate the css file. Best of luck!
I'd suggest Stylizer - it is a CSS editor with an embedded live preview browser. It makes life much easier when editing CSS files and can tell you which rules affect which element on the page and more.
All of you guys saying he should start from scratch are wrong. You shouldn't. Try to identify the different parts the site uses. Put them on a sheet of paper. Find the parts that match together. Build a structure. Find parts of the application that are the same but are still styled with different rules.
Take that one part and name it. Then match all app parts that use that "pattern" with the correct HTML/CSS.
Repeat until you're done. Break up the large task in small chunks.
Identify whether the original CSS writer used standard methods like using a CSS reset. If he didn't, and everything is defined by #id without reusable classes, well, then maybe the guys saying you should start from scratch are in fact right. But my point here is that you can't just recommend that without assessing the situation.
Using the Dust-Me Selectors Firefox Plugin can be handy. It's a bit like a code coverage tool for CSS.
Tool suggestion: ReSharper by JetBrains. It will autocomplete CSS and rename selectors site wide from the CSS file editing window.