http://rafael.adm.br/css_browser_selector/

 

For when you cant be asked to link in another style sheet, and would rather do it one sheet instead of having lots

will come really helpful, save having different style sheets for each browser

this takes it all a bit further http://www.webdesignerforum.co.uk/topic/47047-understanding-css-selectors/page__p__297387#entry297387

http://rafael.adm.br...owser_selector/

 

For when you cant be asked to link in another style sheet, and would rather do it one sheet instead of having lots

 

Thanks fo that

Wow excellent work that is really useful for me keep shearing with us..

People STILL use these god awful CSS hacks?

 

You'll do yourself so many favors if you follow good cross browser practices when laying out your site.

 

I'd say the types of hacks the OP has linked to would be an absolute last resort, if you're at a total dead end - even then I wouldn't like using them as they are very messy.

 

 

Agreed.

 

I'm strongly against these hacks. There's no need for it - why should you be independently targeting Firefox from Chrome?

 

The only instance anyone should ever need to target CSS at a particular browser is Internet Explorer, in which case you have conditional statements that don't rely on Javascript.

 

Hacks like these encourage lazy coding, they encourage you to not need to code cleanly and semantically and error free.

 

 

Argh.

People STILL use these god awful CSS hacks?

 

You'll do yourself so many favors if you follow good cross browser practices when laying out your site.

 

I'd say the types of hacks the OP has linked to would be an absolute last resort, if you're at a total dead end - even then I wouldn't like using them as they are very messy.

 

Any links on cross browser practices bud? May be get a thread in the "Web Design Tuts" section

Agreed.

 

I'm strongly against these hacks. There's no need for it - why should you be independently targeting Firefox from Chrome?

 

The only instance anyone should ever need to target CSS at a particular browser is Internet Explorer, in which case you have conditional statements that don't rely on Javascript.

 

Hacks like these encourage lazy coding, they encourage you to not need to code cleanly and semantically and error free.

 

 

Argh.

 

My thoughts exactly. In fact I'd even say that it's only older versions of IE (like IE7) that warrant conditional comments. IE8 and 9 are pretty much level par with other browsers these days.

My thoughts exactly. In fact I'd even say that it's only older versions of IE (like IE7) that warrant conditional comments. IE8 and 9 are pretty much level par with other browsers these days.

Screw conditional comments:

*:first-child + html (selector) { (rules) }

I've never had to use that more than 3 times in a style sheet and I can usually remove it after a little work.

 

Reading some of these responses though, I'm a little concerned. Do people still feel the need to hack CSS for the sake of a website? A couple of tips that couple help you all:

• Pixel perfection is not the same as browser testing. The latter is part of your job, the former is a fool's errand.
  
• If you are considering hacks your style sheet is too complicated. Negative margins or numbers that don't end in 5 or 0 are a dead give-away - you should be able to work out where your numbers have come from.
  
• Remember that you can't assign margins, widths or heights to inline-displayed elements. Using "display:block;" has solved a lot of my problems.
  

 

Oh - and while we're on the subject, consider using other elements and stop using "!important". Thank you

 

Edit: guess I should point out that the hack I mentioned targets IE7

Edited December 4, 201114 yr by Skateside

Screw conditional comments:

*:first-child + html (selector) { (rules) }

I've never had to use that more than 3 times in a style sheet and I can usually remove it after a little work.

 

Reading some of these responses though, I'm a little concerned. Do people still feel the need to hack CSS for the sake of a website? A couple of tips that couple help you all:

• Pixel perfection is not the same as browser testing. The latter is part of your job, the former is a fool's errand.
  
• If you are considering hacks your style sheet is too complicated. Negative margins or numbers that don't end in 5 or 0 are a dead give-away - you should be able to work out where your numbers have come from.
  
• Remember that you can't assign margins, widths or heights to inline-displayed elements. Using "display:block;" has solved a lot of my problems.
  

 

Oh - and while we're on the subject, consider using other elements and stop using "!important". Thank you

 

Edit: guess I should point out that the hack I mentioned targets IE7

 

 

 

I don't agree with all of that, if I'm honest.

 

Conditional comments are not hacks, they are a legitimate method of adjusting the styling of a website differently in IE to other browsers.

 

It's not always about getting the websites to look the same across all browsers, however, it is simply not possible with every web design to code it in such a manner that there's no need for conditional comments. CCs are used by reputable designers and coders.

 

I'm not sure what you mean by numbers that don't end in a 5 or a 0? So you can't have a 12px margin? Or 8px padding?

 

I would agree that display:block fixes issues but that's not really a fix so much as people using the wrong layout styles in the first place. But you're right, using the correct layout styles in the first place can avoid a lot of cross-browser problems.

 

I'd also discourage the use of "!important", however, it isn't always possible. CSS guru Chris Coyier does use it. Here's an example of an occasion when you would use it:

 

http://jsfiddle.net/chriscoyier/bPXea/1/

 

Nobody should use !important out of laziness or frustration but sometimes it is necessary.

I'm not sure what you mean by numbers that don't end in a 5 or a 0? So you can't have a 12px margin? Or 8px padding?

I'd also discourage the use of "!important", however, it isn't always possible. CSS guru Chris Coyier does use it. Here's an example of an occasion when you would use it:

 

http://jsfiddle.net/chriscoyier/bPXea/1/

 

Nobody should use !important out of laziness or frustration but sometimes it is necessary.

Good point about the numbers. I tend to try to get my number to be multiples of 5 (so I'd use a padding of 10px rather than 8px) It means that if I have to add a margin of 2px then something might not be right somewhere. Re-reading what I wrote though, clearly that's not good advice for everyone.

 

I don't see why you would use "!important" in that example though. I try to discourage everyone from using it unless they have to overwrite an inline style. At all other times they should simply increase the selector strength

http://css-tricks.com/9462-when-using-important-is-the-right-choice/

 

For example, in Wordpress you may style your content links, as per the Fiddle.

 

What if you want buttons too, though? Simply creating a class for buttons does not mean you over-ride all the default styles. To 100% over-ride them, you have to use !important.

 

If you go back to the fiddle, no matter what you do, you cannot stop that dotted blue line appearing. There's only two ways to do it, you assign a class for default links, or use !important.

 

With a CMS for example, the former is not always possible. You can't always assign a default class to links. So you have to use !important.

You could always give your body or containing element an id increasing the selector strength like Skateside said

 

I'm not saying theres a right or wrong way just the !important does tend to get abused

 

Had a quick look at the fiddle my solution

 

<body id="wrapper">

 

#wrapper .button {
   background: #666;
   color: white;
   padding: 2px 6px 4px;
   margin: 0 2px;
   -webkit-border-radius: 8px;
   -moz-border-radius:    8px;
   border-rardius:        8px;
   text-decoration: none;
   border-bottom:none;
}

Edited December 5, 201114 yr by mteam

I guess when it's your own site it doesn't matter hugely because you know you'll be the one maintaining it. I have to maintain other websites though and coming across "!important" just makes my heart sink. I used to think that the IE6 min-height workaround was the only good use for it, then I discovered the descendant selector and "!important" slowly fell out of use for me.

 

That button demo that brightonmike posted is a good example of how to use "!important" properly, but I'd still prefer to increase the specificity. It just seems easier to maintain.