For example, if I want to set the corner radius in Webkit, Firefox and other than I can use the following CSS:
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
But are those styles hardcoded or is merely adding a prefix address that browser?
For example, if I want to change the margin only in Firefox could I simply add the prefix like so:
-moz-margin:-4px;
margin: 1px;
NICE TO KNOW:
And if that's possible is it possible to address a specific version or platform? For example, -moz-4.3-margin:-4px; not that I'd want to, just wondering.
And does the prefix approach work cross browser? I'm wondering because Internet Explorer.
Finally, will margin:10px ever knock out -moz-margin:10px? As in, "We, Mozilla, finally support margin so we are going to ignore all old -moz-margin tags and will just use the value in the margin tag".
It's very bad habit to apply css for specific browser. But there are solutions also:
Only Moz:
#-moz-document url-prefix(){
body {
color: #000;
}
div{
margin:-4px;
}
}
chome and safari:
#media screen and (-webkit-min-device-pixel-ratio:0) {
body {
color: #90f;
}
}
Below IE9:
<!--[if IE 9]>
body {
background:red;
}
<![endif]-->
I recommend don't use this moz, and safari prefix untill and unless necessary.
For example, if I want to set the corner radius in Webkit, Firefox and other than I can use the following CSS
No, that isn't how it works.
Vendor prefixed properties are used for experimental features. Either because the specification for the property hasn't been locked down or because the browser implementor knows their are problems with the implementation.
In general, you shouldn't use them in production code because they are experimental.
Support for the vendor prefixed versions is removed as support stabilises.
Is there a way to set any style for a specific browser in CSS?
There are several methods that have been used for that effect.
Parser bugs
By exploiting bugs or unsupported features in specific CSS engines (e.g. some versions of IE will ignore a * character on the front of a property name while other browsers will (correctly) discard the entire rule).
Conditional comments
Older versions of Internet Explorer supported an extended HTML comment syntax that could be used to add <link> or <style> elements specifically for certain versions of IE.
Support for this has been dropped.
JavaScript
Classes can be added to elements (typically the body element) using JavaScript after doing browser detection in JS.
As far as I know, prefixes were added to properties when CSS3 was being implemented by different browsers, and just property wouldn't work so we'd use -prefix-property for certain properties like gradient or border-radius. Most of them work without the prefix now for most browsers, and the prefix system has been kept only for backward compatibility.
For example, if I want to change the margin only in Firefox could I simply add the prefix like so:
-moz-margin:-4px;
margin: 1px;
This won't work. You can, however use different stylesheets for different browsers (say IE) in this manner:
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="iespecific.css" />
<![endif]-->
The browser-specific prefix version thing doesn't exist.
Hope this answers your question.
As a workaround you can detect browser version in JS, and add it to class of your root element. You can detect browser through user agent , and there are multiple libraries in npm.
Using this class as a base, you can target browsers
function detectBrowser() {
if (navigator.userAgent.includes("Chrome")) {
return "chrome"
}
if (navigator.userAgent.includes("Firefox")) {
return "firefox"
}
if (navigator.userAgent.includes("Safari")) {
return "safari"
}
}
document.body.className = detectBrowser()
p {
display: none;
}
.safari .safariSpecific, .firefox .firefoxSpecific, .chrome .chromeSpecific {
display: block
}
My Browser is
<p class="chromeSpecific">Chrome</p>
<p class="firefoxSpecific">Firefox</p>
<p class="safariSpecific">Safari</p>
Related
I have a huge issue specifically with the browser version of Outlook (webmail) when sending emails.
All the solutions that worked in the past are no longer viable in 2022:
[owa] .foo {
background-color: red !important;
}
[class="x_foo"] {
background-color: red !important;
}
I have also tried all kinds of conditional tags, but they just don't work in browser either:
<!--[if mso]>
<style>
.example-class {
/* Outlook-specific CSS goes here. */
}
</style>
<![endif]-->
Is there any known hack to target Outlook in the browsers in 2022 (Outlook.com)?
Outlook.com webmail can be targeted like so:
[class~="x_your-class-name"] {
/* Replace this comment with your styles */
}
According to "How to target email" https://howtotarget.email/
Outlook.com prefixes class names with x_ but doesn’t do this on
attribute selectors. So can be targeted
with [class="x_your-class-name"] and it’ll only apply to Outlook.
There are other issues specific to Outlook webmail, so be sure to check this common one out first: Outlook stripping styles from <head>
I want a div to have a specific width in IE and a different width to be applied in Chrome.
#welcome {
width: 200px; //1. style for IE
width: -webkit-300px; //2. style for chrome
}
The point '2' is showing an "invalid property value" when I inspect in chrome. Is webkit not supported for the property 'width'? What is the correct way to do this?
One alternative that fixed the issue was to use 'calc' function and supply a default value
#welcome {
width: 200px; //1. style for IE
width: -webkit-calc(300px); //2. style for chrome - WORKS
}
The interesting take-away was to learn that 'calc' method can work with single argument also.
There is no secure way of detecting this. Sure, -webkit-calc() works right now, but next version of Chrome might stop listening to it in favor of calc().
The best way is still 1. Make it work in both browsers with the same value. 2. Include a different IE CSS file with HTML if statements. Like this:
<!--[if IE ]>
<link href="iecss.css" rel="stylesheet" type="text/css">
<![endif]-->
In my site I need to give support for IE7. Now everybody knows that styling things in IE7 is not an easy task. People uses conditional statement in HTML to load specific stylesheet for specific version of IE. But in my case I cannot use such conditional statement, since I am in WebCenter Portal application. Here I need to use skin. It is also a CSS file.
So I want to know is there any formula exists by which I can specify a particular css attribute's value for IE7.
Say I have a class:
.filterbox{
padding:12px 0;
margin:12px 0
}
Now this margin is okay for every browser except IE7 (I didn't test it in IE<7). In IE7 if I use margin:0; then the style would be perfect, but it then breaks in other browser.
How can I specify this margin in a same css class for both in IE7 and non-IE7?
Regards.
Only use this hack if you really can't use conditional comments! They are the best solution for solving IE problems. Hacks like this will quickly mess up your CSS and also make it invalid.
So, here is a hack that targets IE7 (of course this comes after your normal definition):
html>body #filterbox {
*margin: 0;
}
from CSS hacks – Targetting IE7 on Thought-After
you can solve it if you seperate the style sheets for IE7 and other browser:
/* other browsers */
.filterbox{
padding:12px 0;
margin:12px 0
}
/* IE 7 */
*:first-child+html .filterbox
{
padding:12px 0;
margin:0;
}
Attention! You have to define the styles for Ie 7 at last, because the browser will overwrite the first definitions. The others will ignore the last ones.
for instance:
I have a min-height on an element:
#myElement
{
min-height: 800px;
min-height: 799px;
}
and in IE I want it to only interpret the min-height:799px;
The best way is to use Conditional Statements and create a stylesheet just for IE. A Google Search will bring back many results but I find this to be very useful:
http://css-tricks.com/132-how-to-create-an-ie-only-stylesheet/
If you look at the bottom of that article, it is possible to use hacks (although I don't recommend them) to target specific IE version within the SAME stylesheet.
With FireFox you can use the moz prefix like so:
#-moz-document url-prefix() {
#myElement {
min-height: 800px;
}
}
I'm sure there would be ones for Opera, Safari etc too - just search for browser specific conditional statements in Google :)
Firefox 3.5 now supports the nth-* pseudoclass, which was what I was using to target my css for Safari and Chrome. Now Firefox reads those too, causing minor layout issues. Does anyone know a way to specifically target FF 3.5+?
BODY:nth-of-type(1) #topsearch input[type=submit] /* Safari 3.1+ and Chrome */ {
height:19px
}
How about this, I tested it in Safari 4 and the height is 19px, in Firefox 3.5 the height displays as 39px.
<style>
BODY:nth-of-type(1) #topsearch input[type=submit] /* Safari 3.1+ and Chrome */ { height:19px }
BODY:nth-of-type(1) #topsearch input[type=submit], x:-moz-any-link, x:default { height: 39px; }
</style>
CSS Browser selector lets you write CSS that targets specific browsers, without worrying about hacks. I cannot recommend it highly enough.
On a "religious" note, we shouldn't be using CSS to target any browser. Unfortunately due to IE being waaaay behind on supporting CSS features (and all the bugs) hacks have been applied to target CSS for a given browser.
The Conditional Comments that IE uses... although ugly... do provide a handy mechanism for targeting a browser (and version)... I almost wish other browsers supported this.
I've seen a few sites do this... which is an interesting approach to handling targeting of various browsers.
<head>
<style>
body.safari form input{
/*special styles for Safari*/
}
body.firefox form input{
/*special styles for Firefox*/
}
body.firefox.v3-5 form input{
/*special styles for Firefox 3.5*/
}
</style>
</head>
<body>
<script>
//run code here, that sets the class and or id attribute on the body tag...
</script>
In the long run, they are all hacks... it just depends what kind of hacks you're willing to live with ;-)
Incidentally the "BODY:nth-of-type(1) ..." syntax breaks YUI compressor's ability to minify CSS. Instead I use "body:first-of-type ...".
My approach using a PHP class to detect os, browser and browser version. You can target any version of almost any browser on any operating system.
using http://rafael.adm.br/css_browser_selector/
just substitute this part:
is('firefox/2')?g+'
ff2':is('firefox/3')?g+' ff3'
for this part:
is('firefox/2')?g+'
ff2':is('firefox/3.5')?g+'
ff3_5':is('firefox/3')?g+' ff3'
that should do the trick
PS: if you want to also catch other 3.x versions you might want to add:
is('firefox/2')?g+'
ff2':is('firefox/3.5')?g+'
ff3_5':is('firefox/3.6')?g+'
ff3_5':is('firefox/3.8')?g+'
ff3_5':is('firefox/3')?g+' ff3'
This works:
#media screen and (-webkit-min-device-pixel-ratio:0){
#topsearch input[type=submit] { height:19px; }
}}
That targets newer WebKit browsers, and not Gecko or Trident.
A lot has changed in the last few years. For a Firefox 3.5+ hack, here is one I created for that purpose:
/* Firefox 3.5 and newer */
_:-moz-handler-blocked, :root .selector { property:value; }
To test it you can see these live along with many others for different versions of browser at my live CSS hacks test site here: http://browserstrangeness.bitbucket.org/css_hacks.html#firefox
Enjoy!