I recently decided to run the Resharper 6.0 "Analyze Errors In Solution" option on our web application. After several valid problems it picked up on, it has me stumped on some CSS 'errors':
(disclaimer: I am not a CSS person in the slightest, only understand the principles, so may use the wrong terminology - please bear with me!)
In our web application, we have some CSS selectors which follow this general pattern:
.someselector{
property:inherit
}
This 'inherit' value has been used against the properties of:
padding
border-width
overflow
I realise that the 'inherit' value is not necessarily cross browser compatible, but I'm not worried about that (for now). What I don't understand is why ReSharper is throwing its toys over its use as from what my research shows it is a valid CSS value (albeit not widely supported)?
http://reference.sitepoint.com/css/inheritvalue and http://www.w3.org/TR/CSS2/cascade.html#value-def-inherit
I'm assuming there's something I don't know about the inherit value and its use and would appreciate any enlightenment someone can provide. I am equally happy if an experienced CSS developer can tell me the CSS is valid and ReSharper is wrong. Just looking for clarity of which is right!
Thanks in advance!
JetBrains have already identified this as an issue (and linked to this question!), and have targetted version 6.1 for a fix.
This has been confirmed as a bug (outside of Stack Overflow) and I have lodged a bug report with JetBrains to fix it. The CSS listed above is indeed valid.
Related
In the past I used a Firefox extension called Dust Me Selectors, but it appears to have been abandoned and isn't compatible with Firefox Quantum.
I've been searching for a while and I've failed to come up with a current alternative, other than http://unused-css.com which is a paid-for service. I'd rather have a tool I could use myself.
This must be something that every developer wonders at some point, so hopefully someone reading this will be able to point me in the right direction!
Sorry for the late answer, I've found your question when searching for the same thing. Anyway you might be interested by :
https://purifycss.online/.
It removes unused css and you can add multiple urls.
Good luck
PS: I'm editing my answer because I found another website doing the unused CSS removal, maybe it will help someone reading this.
Honest Answer: Remove one by one and see if it breaks the style.
Smart Answer: Use your browser devtool to disable each css property and watch what will happen.
I don't know if there is any easy answer to this, but can anyone give me any idea why my site is totally crapping out in IE8? Is there something relatively easy that I can address to make it not become a complete mess?
Or at least any area to start investigating where similar problems tend to crop up in IE8?
Thanks!
http://firewalkcreative.com/2012/
Start by viewing and fixing validation errors. The most critical errors are often structural ones, like an unclosed tag. While it's good practice to fix non-structural errors (such as the one you mentioned in your other post), browsers are forgiving if you get the basic structure right.
The bigger culprit (but don't neglect fixing validation errors) is that you are using HTML 5 tags which IE8 knows nothing about like section and header. Thus, the CSS styles aren't applied to those tags. Modernizr will easily fix this.
I noticed it was using html5, then got a timeout upon refresh. Without being able to access the site I can't tell you exactly, but html5 and ie8 are going to cause problems (most of the time) unless you use a workaround like a .js plugin.
I frequently use Modernizr
I know that there are several very similarly-related questions on this website, however after reviewing the play, I believe this question is unique in its own right. If someone can find and provide evidence of an exact dupe of my question, I will withdraw it myself (so please just don't downvote this!).
I am a Java developer, not a web developer. But, as is the case in so many families where there is one person who becomes the designated family "computer guy", my Java development skills have been mistaken for web development skills, and I somehow got roped into building a website for my parents to help them sell their house.
So, like any web development newbie, I wrote the HTML/CSS myself (by hand, sans editor like DW or Expression, etc.) and tested it against FireFox 3.x. All looked great, and we deployed/launched.
Now we're getting negative feedback from everyone and their dog stating that the site isn't rendering properly in other browsers, browser versions, or on FireFox installations running on different operating systems. Similarly, the site is apparently a total mess when being viewed through a smart phone or tablet device.
Now I could dive in and write a whole bunch of messy, nasty, painstakingly-tedious edits to my CSS rules, that basically say: do X when browser is Y, etc. But I am hoping that out there is a tool that can put all my fears to rest.
What I'm looking for is a tool that could take my valid CSS files, and use them to generate CSS rules that will be compatible with a high percentage of all common browsers/versions.
Alternatively, if I have to re-write my CSS from scratch, it would be nice to have a tool that allows me to write/design once, deploy many, so that I only have to focus on the design of a single CSS file, but the code that gets generated is multi-browser compatible.
It sounds like DreamWeaver kind of does this, but you have to choose from one of 16 pre-existing templates.
My wife is a graphic designer, and made the website pretty sweet (not cookie cutter). It was a nightmare trying to figure out what CSS rules to use to implement her design. So any tool that forces you to choose between templates is not an option.
Is there any hope for me, or do I banish myself from my family in shame right now?
css is a mess, no way to automatically doing it right. saying that I would say there are tools that would walk with you the proper way.
1. use the meta tag:
http-equiv="X-UA-Compatible" content="IE=8" (encpsulate as a meta tag - SO won't display if I wrote it as a valid tag)
to force IE to render with it's most modern engine, that would solve some problems.
2.begin your css with normalize.css - that would eliminate some of the cross browser problems - because it resets your css (better and more modern the reset.css)
I'll second the GWT if you come from the java dev world. although It's a framework to learn with it's own quirks. another possible web framework is Grails - a nice java/groovy port of the mighty Ror.
Less or Scss won't automatically solve your basic problem - which is browser compatibily - but are a better and simpler way to write css
remember that most css3 properties aren't support equally in all browsers (and in IE almost not supported) - use them only with graceful downgrade option with supported js or css -when Modernizr js library can give you pretty good property support detection for various browsers
don't go dreamweaver - it produces terrible code
use csslint to check for valid css and common css pitfalls
If you must use cutting edge web rendering with html5+css3 elements you should look into chrome frame -that would enable older browser better support of your site - although I believe this may be an overkill for a simple sell-my-house kind of site.
use a css framework to prototype- it would give you better css, good basics and resets and good boilerplate - maybe bootstrap or something similiar (didn't try most of them but the internet is crowded with those.
good luck
Check out modernizr. http://www.modernizr.com/docs/
You want to get into the position of checking for features and not browsers.
Here's an excellent site to check your site with alternative browsers:
http://www.browserstack.com/
Less (http://lesscss.org/) will help you with a lot of CSS3 functions.
However, good CSS code simply works on all browsers. There are some CSS concepts that must always be avoided as much as possible (absolute positioning, excessive floats, using the wrong elements for a task, etc) and your code will work better.
In the many years I have programmed I only needed browser-specific code in the first two years. Then I grew up and learned which CSS code not to use and when it was possible to use them. It has been my experience that properly written CSS code works on all browsers, and if it doesn't it will at least get the basic concepts right (eg. a few pixels may be wrong or some effects, but the site still works well).
Several things come to mind that may help your case:
Forget about IE6, that one will give you trouble no matter how much effort you put into the site.
Make sure you have a good doctype (html5 or xhtml would be good).
Try out html5 reset, it tries to make sure all browsers behave the same.
The aforementioned reset also includes modernizr to bring older browsers up to speed
Finally: accept (some even say "embrace") that different browsers render things slightly different. Getting every pixel exactly the same in each browser will be near impossible.
I hate to put this into the world, but it sounds like you need Adobe Muse.
There is no equal to a good developer who will write clean cross browser code, but if you just want to get the site done check out the beta: http://labs.adobe.com/technologies/muse/
What I'm looking for is a tool that could take my valid CSS files, and
use them to generate CSS rules that will be compatible with a high
percentage of all common browsers/versions.
Unfortunately there's no such a tool and you have to debug and test your website for cross-browser compatibility manually. The best way i've found for cross-browser testing it to install and test different versions of browsers in several virtual machines.
You will also find the following helpful:
Modernizr
Google Web Toolkit
I have designed a site that shows nice via FF or Chrome while fails to render with IE. I am looking for some kind of software inorder to find the parts that causes the render issue.
For CSS validation you can use the following links
http://jigsaw.w3.org/css-validator/#validate_by_upload+with_options
http://tester.jonasjohn.de/
But mainly some of these CSS issues will be a bug in the browser and you cannot find them using CSS validators. For that you have to manually detect and replace them with alternatives.
Unfortunately this will be a trial and error effort. Microsoft does have a developer toolbar but if you are doing anything really complex its not going to be the best help.
IEDeveloper Toolbar
Many times when I read books related to CSS I see things like this "this will not work on some browser", "this hack will work for that browser".
Where I can all information that I need to know the hacks for working for all browsers?
thanks
I suggest Quirksmode. Very useful resource for web development.
Here is a link for the CSS page on Quirksmode:
http://www.quirksmode.org/css/contents.html
I've found the SitePoint CSS reference very helpful.
You could start with:
CSS contents and browser compatibility
And if you're interested in e-mail clients as well as browsers:
Guide to CSS support in email clients (2008)
I always found this particular comparison useful, as it shows whether or not a particular feature is supported, and how well they are supported. It may prove useful for you as well.
This document will summarize the level of support for web standards and maturing technologies in popular web browsers. It covers the Internet Explorer, Firefox, and Opera web browsers, with focus on the HTML, CSS, DOM, and ECMAScript technologies.
Other than that, Quirksmode is a great resource.
Position Is Everyting can be useful for finding solutions to problems (mostly related to IE6 and below). They don't have a browser comparison and they have names for bugs that may not always be intuitive, so it's not always easy to find specific incompatibilities.
The articles go into a lot of detail and usually have several possible fixes, so once you've found a rendering bug, it can be quite useful. I wouldn't recommend using all their fixes directly, since they often involve browser-specific CSS hacks. It's usually better to use conditional comments.