-1

I'm looking for CSS hacks that target OS. So far basically everything I've found is to target browsers (mainly IE) and browser engines, but ALL of the massive style changes I'm trying to get rid of seem to pop up in PC, regardless of the browser/browser engine. If you have any suggestions as to why this would happen and any ideas about what I should target instead and how to do it please help out.

Here is my code on jfiddle click here

Here is my external stylesheet

@media (min-width: 1260px) {


header { font-family: 'sofia_pro_lightregular'; color: white; border-bottom: solid white 4px; opacity:0.6; }
body {
    background-color: #CECDB3;
    padding: 5px;
    margin: 2px;
}

.wrapper {
    font-family:Verdana, Geneva, sans-serif; }
.mainnav { border: solid black 4px; width: 200px;; height: 250px; float: left; background-color: #FF0; margin-right: 5px; margin-bottom: 5px; position:fixed; align: left;
 }
 .navtext { padding-left: 10px; padding-top:15px; }
article { background-size:countain; }

.livecoaching { position: relative; right: -20%; }
.seminars { border: solid white 5px; border-top: none; padding: 5px; background-color: #C6C670; }
.aboutus { border: solid white 5px; border-top: none; padding: 5px; background-color: #C6C670;}
.contact { border: solid white 5px; border-top: none; padding: 5px; background-color: #C6C670; }
.blog { border: solid white 5px; border-top: none; padding: 5px; background-color: #C6C670; }

.rightcontent {
    float: right;
    width: 40%;
    position: relative;
    right: -150px;
    background-color: #6A6A00;
    -moz-border-radius-topright: 20px;
    -webkit-border-radius-topright: 20px;
    border-top-right-radius: 20px;
}
.leftcontent { float:left; width: 60%; position: relative; bottom: -1em; }


.clubphoto {opacity:0.4; -moz-border-radius: 30px; -webkit-border-radius: 30px; border-radius: 30px;}

.coachingintro { position: relative; right: 0.2em; font-family: 'CaviarDreamsRegular'; font-size:1.5em; text-align:center; font-weight: 400; }
form {
    background: url(images/nightclub.png) no-repeat;
    background-size: cover;
    font-size: 0.8em;
    font-family: Verdana, Geneva, sans-serif;
    -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;
    overflow: auto;
    position: relative;
}



h3:first-letter { font-family: 'KaushanScriptRegular'; font-size: 50px; }
h3 { font-family: 'sofia_pro_lightregular'; }



 article { width: 800px; position: relative; right: -220px; padding-top: 3px; font-family:Helvetica; }

 a:link { text-decoration: none; color: black; font-family: 'DJGrossNormal'; margin-bottom: 100px; font-size: 1.5em;  }

.homepage {text-align: center; }

}

@media (min-width: 320px) and (max-width: 479px) {
    header { font-family: 'sofia_pro_lightregular'; color: black; font-size: 0.3em; }
html, body {
    background-color: #CECDB3;
    height: 95%;
    width: 100%;
}

.wrapper {
    background-color: #CBB82C; -moz-border-radius-topright: 10px; -webkit-border-radius-topright: 10px; border-top-right-radius: 10px; font-family:Verdana, Geneva, sans-serif; width:92%; height:95%; overflow:auto; padding: 2px; margin: 2px; border: solid white 2px; }
.mainnav { border: solid black 4px; width: 30%;  float: left; background-color: #FF0; margin-right: 5px; margin-bottom: 5px; position:relative;
 }
a:link { text-decoration: none; color: black; font-family: 'DJGrossNormal'; font-size: 0.7em;  }
article { font-size:0.5em; background-size: contain; position: relative; }


}

@media (min-width: 480px) and (max-width: 599px) {
    header { font-family: 'sofia_pro_lightregular'; color: black; font-size: 0.5em; }

html, body {
    background-color: #CECDB3;
    width: 100%;
    height:100%;
    overflow: hidden;
}

.wrapper {
    background-color: #CBB82C; -moz-border-radius-topright: 10px; -webkit-border-radius-topright: 10px; border-top-right-radius: 10px; font-family:Verdana, Geneva, sans-serif; width:92%; height: 90%; overflow:auto; padding: 2px; margin: 2px; border: solid white 2px; }
.mainnav { border: solid black 4px; width: 30%;  float: left; background-color: #FF0; margin-right: 5px; margin-bottom: 5px; position:relative;
 }
 a:link { text-decoration: none; color: black; font-family: 'DJGrossNormal'; font-size: 0.7em;  }
article { font-size:0.6em;  position: relative; }

}

@media (min-width: 768px) and (max-width: 1258px) {

html, body { width:100%; height:1500px;}
header { font-family: 'sofia_pro_lightregular'; color: black; font-size: 0.5em; }
body {
    background-color: #CECDB3;

}

.wrapper {
    background-color: #CBB82C; -moz-border-radius-topright: 10px; -webkit-border-radius-topright: 10px; border-top-right-radius: 10px; font-family:Verdana, Geneva, sans-serif; width:95%; height: 95%; overflow:auto; padding: 2px; margin: 2px; border: solid white 2px; }
.mainnav { border: solid black 4px; width: 13%; height: 20%;  float: left; background-color: #FF0; margin-right: 5px; margin-bottom: 5px; position:relative;
 }

 .navtext { padding-bottom: 15px; }
 a:link { text-decoration: none; color: black; font-family: 'DJGrossNormal'; font-size: 0.9em;  }
article { font-size:0.8em;  position: relative; }


}
@font-face {
    font-family: 'sofia_pro_lightregular';
    src: url('SofiaProLight-webfont.eot');
    src: url('SofiaProLight-webfont.eot?#iefix') format('embedded-opentype'),
         url('SofiaProLight-webfont.woff') format('woff'),
         url('SofiaProLight-webfont.ttf') format('truetype'),
         url('SofiaProLight-webfont.svg#sofia_pro_lightregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'museo_slab500';
    src: url('Museo_Slab_500_2-webfont.eot');
    src: url('Museo_Slab_500_2-webfont.eot?#iefix') format('embedded-opentype'),
         url('Museo_Slab_500_2-webfont.woff') format('woff'),
         url('Museo_Slab_500_2-webfont.ttf') format('truetype'),
         url('Museo_Slab_500_2-webfont.svg#museo_slab500') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'KaushanScriptRegular';
    src: url('KaushanScript-Regular-webfont.eot');
    src: url('KaushanScript-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('KaushanScript-Regular-webfont.woff') format('woff'),
         url('KaushanScript-Regular-webfont.ttf') format('truetype'),
         url('KaushanScript-Regular-webfont.svg#KaushanScriptRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'CaviarDreamsRegular';
    src: url('CaviarDreams-webfont.eot');
    src: url('CaviarDreams-webfont.eot?#iefix') format('embedded-opentype'),
         url('CaviarDreams-webfont.woff') format('woff'),
         url('CaviarDreams-webfont.ttf') format('truetype'),
         url('CaviarDreams-webfont.svg#CaviarDreamsRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'CaviarDreamsBold';
    src: url('Caviar_Dreams_Bold-webfont.eot');
    src: url('Caviar_Dreams_Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('Caviar_Dreams_Bold-webfont.woff') format('woff'),
         url('Caviar_Dreams_Bold-webfont.ttf') format('truetype'),
         url('Caviar_Dreams_Bold-webfont.svg#CaviarDreamsBold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'CaviarDreamsItalic';
    src: url('CaviarDreams_Italic-webfont.eot');
    src: url('CaviarDreams_Italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('CaviarDreams_Italic-webfont.woff') format('woff'),
         url('CaviarDreams_Italic-webfont.ttf') format('truetype'),
         url('CaviarDreams_Italic-webfont.svg#CaviarDreamsItalic') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'CaviarDreamsBoldItalic';
    src: url('CaviarDreams_BoldItalic-webfont.eot');
    src: url('CaviarDreams_BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('CaviarDreams_BoldItalic-webfont.woff') format('woff'),
         url('CaviarDreams_BoldItalic-webfont.ttf') format('truetype'),
         url('CaviarDreams_BoldItalic-webfont.svg#CaviarDreamsBoldItalic') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'DJGrossNormal';
    src: url('DJGROSS-webfont.eot');
    src: url('DJGROSS-webfont.eot?#iefix') format('embedded-opentype'),
         url('DJGROSS-webfont.woff') format('woff'),
         url('DJGROSS-webfont.ttf') format('truetype'),
         url('DJGROSS-webfont.svg#DJGrossNormal') format('svg');
    font-weight: normal;
    font-style: normal;

}

Here is an example of one of my pages

<!DOCTYPE HTML>
<html lang="en">

<head>
<meta charset="UTF-8">
<title> SocialAdventuring.com </title>
<link href="CSS/socialpolarities.css" rel="stylesheet" type="text/css" />
</head>

<body>

<header>
        <h1> Lifestyle Design, Personal Exploration & Dating </h1>
    </header>

<div class="wrapper">

    <nav class="mainnav">
        <div class="navtext">
        <a href="index.html"> HOME </a> <br/>
        <a href="aboutUs.html"> ABOUT US </a> <br/>
        <a href="contact.html"> CONTACT US </a> <br/>
        <a href="coaching.html"> COACHING </a> <br/>
        <a href="seminars.html"> SEMINARS </a> <br/>
        <a href="blog.html">  BLOG </a> <br/>
        </div>
    </nav>

<article class="contact">
    <p> If you have any questions about Social Adventuring, our products, our servives or are interested in collaborating with us please contact us at <a href="mailto:info@socialadventuring.com" style="font-size: inherit;"> info@socialadventuring.com </a>.
    </p>

 </article>

 </div>

 </body>

 </html>

I tried this out but couldn't get it to work, maybe it's outdated? If I could get it to work it would basically be all I need.

Kara
  • 6,115
  • 16
  • 50
  • 57
user2552562
  • 3
  • 1
  • 7
  • What exactly are you trying to do? – David Jashi Jul 12 '13 at 05:41
  • My colours, fonts, pictures and parts of my formatting render really differently in PC than in Mac. I'm trying to make them not render differently lol – user2552562 Jul 12 '13 at 05:43
  • http://stackoverflow.com/questions/3910859/operating-sytem-detection-for-css-hacks-aka-need-a-pc-only-css-hack I would have marked it as a dupe, but looks like the selected answer is outdated. – epascarello Jul 12 '13 at 05:45
  • Also, I've tested this across Chrome on Mac and Chrome on PC (which should render similar to Safari anyways b/c they use the same layout engine). The gamma display isn't the issue too because I adjusted it on my Mac and still got the differences, no clue what it is in PC's that's doing this. – user2552562 Jul 12 '13 at 05:45
  • @epascarello, thanks buddy but that CSS browser selector is exactly the one I tried :(. I think it is outdated, if anyone can get it to work or knows that it does I'd be massively relieved – user2552562 Jul 12 '13 at 05:48
  • you can try using navigator.userAgent in your javascript and load css conditionally based on what you learn from it (it most likely contains OS information). – Daniel S. Jul 12 '13 at 05:55
  • To your other question as to why this would happen: browsers are not self-contained and actually delegate a lot of work to the operating system when rendering and even laying out the webpage. Text rendering, for example, is handled entirely by the operating system, hence the large differences between mac and PC (not to mention font availability). – Daniel S. Jul 12 '13 at 06:03
  • Last comment: the "CSS browser selector" that you mentioned in your question actually uses the UA string technique I suggested above. Make sure you include the .js file in your folder before trying it out (http://github.com/rafaelp/css_browser_selector/raw/master/css_browser_selector.js). – Daniel S. Jul 12 '13 at 06:10
  • PC? My PC runs Ubuntu, CentOS and Windows 8. My work box runs Windows 7 and CentOS. What exactly do you mean by PC. You should really test on other devices as you go along. Assuming OSX is the only OS out there until testing will lead to quite a bit of trouble – Bojangles Jul 12 '13 at 06:25

2 Answers2

1

There is actually no way to detect OS with a CSS trick,

However the below might be helpful for you.

The basic idea behind it is to detect the os and browser and add them as classes to the body tag, and then write specific css around those classes.

http://www.stevensacks.net/2013/02/17/detecting-operating-system-and-browser-with-css/

defau1t
  • 10,593
  • 2
  • 35
  • 47
  • This sounds like exactly what I need, thanks dude. Where exactly do I paste that block of js code? Do I save it in my directory as a .js file? – user2552562 Jul 13 '13 at 00:23
0

My colours, fonts, pictures and parts of my formatting render really differently in PC than in Mac. I'm trying to make them not render differently

(taken from the comments of your question)

It's not a good practise to target a specific browser or operating system. It's more wise to test to see if the browser supports X and Y and if not, provide an alternative.

There aren't many ways to diagnose the support for fonts in browsers, but one way (as an example) is applying a font to an element then testing its width to see if it matches what you expect.

Colours and images you can't really do much about. It comes down to user preferences, monitor quality, that kind of thing. I recommend you just do your best to provide high quality images and if the user has a poor setup, then they need to upgrade it.

Jared
  • 2,978
  • 4
  • 26
  • 45