Can I code CSS specifically for Mac browsers?
Solution 1
I don't believe you can do this with pure css, but you can detect the OS with javascript, and then use that to load different css.
http://www.quirksmode.org/js/detect.html
Solution 2
You mentioned an inconsistency in text sizing/positions, have you tried using something like Eric Meyer's CSS Reset or Normalize.css? They tend to solve issues like that.
By the way, those issues with text differences are caused by Windows and Macs using different fonts as their defaults, so using your CSS to make it the same size and font family may be just what you need instead of using different stylesheets per OS.
Solution 3
Heres the proper code for what you were trying to achieve in one of your comments above
if (navigator.platform === 'MacIntel' || navigator.platform === 'MacPPC') {
$('head').append('<link rel="stylesheet" type="text/css" href="mac.css" />');
} else {
$('head').append('<link href="main.css" rel="stylesheet" type="text/css" />');
}
The reason your mac wasnt detecting it was that A. Your syntax was wrong and B. Looking at the source of your site if you leave <link href="main.css" rel="stylesheet" type="text/css" />
in the head section then the mac browsers are still gonna be reading that css file. Using my code above the browser will only be given the mac.css file if a mac is browsing the site or else it loads the default css
DevKev
Hello, I'm Kevin. Autodidact, Consultant, Entrepreneur, Polymath and Digital Nomad 🌎 Working on UpWork, living @ play on Discord Let's connect.
Updated on June 05, 2022Comments
-
DevKev almost 2 years
Site: http://clientfiles.priworks.com/lgmanagedportfolios/test/investment.html
I have been working at this web page for a while now trying to get the left side of the first submenu link to line up with the left of the 1st parent/main menu link.
I don't think there is a logical way of doing it but after much fudging I am close to getting it just right. The position is consistent for all win browsers and all Mac browsers (with some conditional CSS) but not for Win and Mac browsers together, for instance in Mac Firefox the text is too far right while in Win Firefox it's perfect.
Question: Is their a way to adjust the padding specificly for Mac browsers?
-
Sparky almost 12 yearsThat's for special webkit only properties. It will have no effect on Firefox, nor can it be applied to just any CSS property.
-
Quentin almost 12 yearsAnd it would target Chrome/Safari/Other webkit browsers on non-mac platforms including Windows and Android.
-
Stan almost 12 yearsI had same css with and it was displayed in chrome (windows) differently then in safari (mac).
-
Hammad Khan almost 12 yearsYes it will affect all webkit browsers. But presumely it will fix the same problem in all browsers not just safari. Since they essentially behave in same way.
-
DevKev almost 12 yearsThanks CrocHunter, I had webkit property in for Chrome but when I double checked it I had some improper syntax which fixed this for Mac Chrome.
-
DevKev almost 12 yearsSo now the only issue is Mac FF. I am not sure why the padding is different for FF mac vs windows
-
Sparky almost 12 yearsQuote: "Since they essentially behave in same way." Yes, they should but that's not what the OP was reporting.
-
Sparky almost 12 years@KevinW.me, I see you did not fix this error yet in your demo.
-
DevKev almost 12 yearsI did not, I just noticed the webkit affects windows. I need to target OS + browser so axiomix javascript method.
-
Hammad Khan almost 12 yearsTo target OS + browser. Use jQuery with your scripting language to apply CSS on fly.
-
DevKev almost 12 yearsThis seems to be my best bet but I am using this and Mac browsers are not detecting it and using the mac.css <script type="text/javascript"> if (navigator.userAgent.match(/Macintosh/)) // <link rel="stylesheet" type="text/css" href="mac.css" /> </script>
-
EnigmaMaster almost 12 yearsstructure wise you forgot the brackets {} for your if statement and the semi colon ; to end the code statement.
-
EnigmaMaster almost 12 yearsAlso you want to use navigator.platform , not userAgent