I know that using css hacks are not a good thing, but I have used them to accomplish certain layout objectives. My question using @import how would I call them into the main stylesheet again. For example to target Opera, Safari and Chrome I used the following:
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
#id { css here;}
head!~body #cat_container {left:0;}
head~body #prod_cd {left:570px}
head~body #prod_layout_form {left: 0;}
head~body #bus_info {top:-405px;}
head~body #bus_info p {top:-10px;}
head~body #search {right:-140px;}
#searchbtn {top:-1px; padding-left:3px; height:25px;}
#searchimg {height:12px;}
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
#safari {css here;}
head~body #promolftcontent img {top:-33px;}
head~body #promorightcontent img {top: -33px;}
head~body #cat_container {left: -10px;}
}
now I would like to give these tidbits their own stylesheet. Is this possible or should I just leave them in the main stylesheet and worry about them some other time.
Thanks guys for letting me know that yes I can import these into a separate stylesheet.
@Stomme poes
Another option is to list the webkit sheets in <link>s like you are with the main.css. You can list media and I believe @media queries in that <link> statement.
This is what I am trying to find out how to do, but if @import webkit.css is quicker I will do that then.
For the most part I can throw together some CSS to make something work. However when it comes to truly understanding why something is or is not working I do not fully understand sometimes. I used the hacks because they provided me with immediate gratification that something could look a certain way albeit temporarily.
I figured I would use the hacks for now and then come back and rewrite the css so that the hacks would not be necessary. I figured if I could somehow import the offending css I would develop a better understanding what is causing the problem. Additionally I wanted to make sure that at least the main.css file validated on its own which would help in trouble shooting what could be causing the layout to break in Opera, Chrome, and Safari.
First, could you find no way to write the code so that you didn’t need to adjust things by -1px all over? I don’t know the situation, but it has a code smell.
Second, I should think you’d be able to import them. They don’t seem large enough to need separate sheets anyway, but importing is something you’d do if for example some pages needed to load that css and others didn’t.
The @import line has to come first in whichever main stylesheet is in the <link> tag.
So if you have
<link rel=“stylesheet” type=“text/css” href=“main.css” >
then in that main.css sheet
the first line should be your @import webkit1.css (or whatever)
inside the webkit1.css/whatever stylesheet, you have the @media lines like you do now.
Another option is to list the webkit sheets in <link>s like you are with the main.css. You can list media and I believe @media queries in that <link> statement.
Just put them in their own stylesheet and only browsers that read those inner rules will get them just like they would in the main strylesheet or am I missing what you meant. The effect is the same either way.
However I would question why you need all those extra (extremely complicated) styles and would guess that non hack fixes are available - even if perhaps with a slight change of design.
Apart from form elements and the occasional bug I seldom see a need to target any browsers apart from IE. It may be that you have managed to find all the bugs and do indeed need all those fixes but looking at the code it seems unlikely 
Well, the thing is, CSS does a bit of Tim Toady itself… more than one way to do it. And several of those ways will be completely valid… valid according to the validator, valid according to the specs. But between actual browser implementations, they may turn out differently. One reason I can think of for stuff being “off” vertically (and I’ve seen this myself with Safari and have grumbled about it) is pixel rounding. Browsers have to deal with parts of a pixel, when such a thing can’t exist. Some round up. Some round down. I’ve heard deathshadow say older Mozillas would round but on the basis of the total number of pixels appearing on the page instead of per element.
So when you get around to this “later” when you want to rewrite your css, it might be that you have to use some other method. Lots of developers do this regarding IE bugs… they see what else can look like the same effect but doesn’t trigger some known bug.
Anyway, good luck with your page. I have no idea which way is “faster”, if one even is.
I’m not sure the difference is even measurable. But try both ways to see. Who knows?