SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot capnhud's Avatar
    Join Date
    Nov 2005
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Removing Opera, Safari and Chrome css hacks from main stylesheet

    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:

    Code CSS:
    @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.
    I know I am in my own little world. But its OK "They Know Me HERE"

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,295
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by capnhud View Post

    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.
    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

  3. #3
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,272
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    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.

  4. #4
    SitePoint Zealot capnhud's Avatar
    Join Date
    Nov 2005
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    I know I am in my own little world. But its OK "They Know Me HERE"

  5. #5
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,272
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    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?


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •