Tool for finding illegal CSS selectors [closed] - css

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking us to recommend or find a tool, library or favorite off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.
Closed 9 years ago.
Improve this question
Are there any tools that can be used to check and see if any malformed selectors are being used in a stylesheet, such as
div:fifth-child {
font-size: 1.2em;
}
We are looking for a tool that will find these in a file.
Thank you.

It sounds like you are looking for the W3C CSS Validation Service.
It flags your example with the error "Unknown pseudo-element or pseudo-class :fifth-child".

Years ago I used Dust Me. It will find unused CSS selectors.
Note: While a malformed or invalid CSS selectors will likely be unused, this tool may not match your requirements exactly. I, nonetheless, found it useful in combination with W3C CSS Validation Service.

there is no tool for that but u can check them through browser addons or validate ur site in http://jigsaw.w3.org/css-validator/
and if you use firefox there is firefox extension which tells css and html error its a great extension you can download it here for firefox
http://www.htmlvalidator.com/firefoxext.php

Related

What is the best way to make sure this css works in all browsers? [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
I am taking over an application that has buttons with this css:
background-image: -moz-linear-gradient(center top , #049CDB, #0064CD);
it looks beautiful in firefox but looks like a mess in IE, etc
what is the best way to take these clearly firefox specific css and determine the best way to make it look the same on all browsers (just need IE8+)
This tool might be a useful tool for you.
Since this CSS attribute is still a working draft of CSS and has some legacy it will require a lot of markup to be fully supported for your current situation. The -moz- prefix is one such isntance of providing support. All other browsers will required either the standard, -ms-, -webkit-, -webkit-type or -o- prefix as well.
You should look out for other spots in the application you've taken over for code that hasn't been fully tested on other browsers.
LINK
http://www.colorzilla.com/gradient-editor/
This is a matter of opinion but there are tools online that will help you generate css for gradients that works across browsers. http://www.colorzilla.com/gradient-editor/ is an example.

Font CSS being overridden [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
I am currently making a website and having trouble with font sizes. You can see a demo of what I've done at www.dweeman.com. It is happening with the phone number font size at the top right and the copyright information in the bottom left. The CSS for them both is as follows:
p.copyright {size: 0.2em;}
p.phone {size: 0.75em;}
However it seems like something else in my CSS is overriding their.
I am using third party code for my navigation. I can't see anything in the CSS that would be doing this and was looking for another eye.
You can see all this on my test website I mentioned above, but if needed I can post my stylesheet here (it is quite long).
Thanks
Quite a few issues with your site. And I really suggest reading up on how CSS selectors work. But in answer to your question.
You've set phone and copyright to have IDs. eg:
<p id="phone">
But in your CSS you've applied styles to the CLASS phone.
Change your respective P tags to:
<p class="phone"> Foo </p>

How to create css based breadcrumb which supports IE8 [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 9 years ago.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Questions asking us to recommend or find a tool, library or favorite off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.
Improve this question
Can some one provide me some good css example to create breadcrumbs for my asp.net application. Which should support IE 8.
I was trying this link http://www.red-team-design.com/css3-breadcrumbs but it is working in Crome not in IE8. Please someone help me.
Thanks
Gulrej
The code you're trying to use contains several features that are not supported by IE8.
border-radius
If you need rounded corners, this can be made to work using CSS3Pie
box-shadow
Also use CSS3Pie for this.
text-shadow
There is no good way to get this working in IE8. Sorry.
linear-gradient
Also use CSS3Pie for this.
rgba() colours
And again, CSS3Pie for this too, although there are some quirks to watch out for.
::before and ::after
Actually, :before and :after are supported in IE8, but need a single colon, not a double colon.
As you can see from my comments above, most of these features can be made to work with a bit of effort and a few hacks, but by default they are not supported by the browser.
In addition, some other browsers may need vendor prefixes for some of these features. In particular, the gradient styles should be provided with prefixes if you want to support all common browsers.
Your options:
Write your CSS in a way that allow sensible fall-backs -- eg a sensible plain colour background for IE8 that is overridden by the gradient for browsers that support it.
Use a library like CSS3Pie, which attempts to make IE8 more compatible with modern standards. But be aware that if you use it a lot, it has been known to slow IE8 down quite badly.

"Flatten" CSS to HTML [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking us to recommend or find a tool, library or favorite off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.
Closed 9 years ago.
Improve this question
What tools are available that will programatically merge an CSS stylesheet with an HTML document? With this I mean that style attributes are created on elements that match the CSS declarations.
Premailer will do this along with a couple of other tweaks for html email. There are other tools around formatting for html email which can help too, can't think of the others but Premailer works great.

CSS Browser Support Chart [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking us to recommend or find a tool, library or favorite off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.
Closed 9 years ago.
Improve this question
Is there any resource that provides a chart of CSS properties and their support through most browser/OS combinations? For example, if I want to know what browser supports overflow or min-height and any quirks to be aware of in the implementation of these properties and their values, what is the best place to get all this?
I have found a couple places but I haven't been impressed.
Any suggestions?
http://www.quirksmode.org/css/contents.html
Quriks mode is also a really good resource for this sort of information.
caniuse.com is very helpful in this manner as well. And you can also check other implementations like HTML5 or SVG support there.
http://caniuse.com/
The wikipedia article is fairly impressive and a good place to start:
http://en.wikipedia.org/wiki/CSS_support
Most of the CSS reference sites I used to use are out of date, but SitePoint recently (I'd say the past year) released a CSS Reference that is kept up to date and is easy to navigate.

Resources