I just found the following snippet in a CSS file:
position: fixed;
_position: absolute;
What does this underline mean in front of the second position statement?
It's one of a number of CSS "hacks" used to target specific versions of Internet Explorer.
selector {
property: value; /* all browsers */
property: value\9; /* < IE9 */
*property: value; /* < IE8 */
_property: value; /* < IE7 */
}
Generally speaking you should avoid CSS hacks in favor of conditional classes on HTML.
This is an old CSS-Hack for IE5, 5.5 & 6.
All browser will display the position:fixed while IE5 - 6 use the _position, so it display it absolute.
But note: This CSS won't validate! And it won't work for IE5/MAC
This is a way to give alternative directives to WinIE browsers, since they don't support certain features of the latest CSS definitions. Other browsers will ignore the whole definition (e.g. _position: relative), while WinIE will treat it as position: relative.
Related
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>
I have the following div:
<div id="views" style="margin-top:34px; margin-left:35px;">
// code...
</div>
this works perfect for me in all explorers but in safari in order to work perfect I need to set margin-top: -40 px; Any idea which is the easiest way to do this? I mean to make is select browser and if safari to apply margin-top: -40 px;
You could try to set specific vendor prefixes (although chrome and safari are both webkit)
this way you could set different styles for different browsers.
Vender Specific Prefix
Or the much more difficult way... detecting the browser and assigning CSS
Browser Detection
You should post some code though, I feel this problem your having could be avoided in a much more graceful manner.
Take out your inline styles.
Detect the browser by JavaScript,
add a class of .safari to the body tag if Safari is detected, then have your general
and Safari specific styles like this:
CSS:
#views {
margin-top:34px;
margin-left:35px;
}
.safari #views {
margin-top:-40px;
margin-left:35px;
}
Safari styles will be applied to Safari due to higher CSS specificity.
.pageWidth
{
margin: 0 30px;
min-width: 940px;
_width: 976px;
_margin: 0 auto;
}
I saw this from a website css file. My question is: what is the difference between width/margin and _width/_margin? why use _width/_margin here?
It is a hack for IE6. The CSS rules _margin and _width will only apply for that browser. There are more curious hacks for the IE browser like:
width: 940px\9; /* IE8 and below */
*width : 960px; /* IE7 and below */
If you make a fast search in google for "IE CSS hacks" you can find more information and tricks for CSS rules in the evil IE like: Quick Tip: How to Target IE6, IE7, and IE8 Uniquely with 4 Characters
the _ and - before the properties is for compliance to Internet Explorer 6 and below. Here is the article for your reference:
http://www.javascriptkit.com/dhtmltutors/csshacks3.shtml
*Prefixing a regular property name with _ or - will cause the property
to be applied to Internet Explorer 6 and below but generally not in other browsers.*
It's an old CSS hack used to target Internet Explorer.
IE tries to be smart and does some additional parsing over the CSS properties one of which is stripping the underscores.
So in you case IE will override the width to 976px and for the rest of the browsers the width will stay 940px. This was used in the past to fix a problem with the IE broken box model, which didn't follow the W3C conventions.
What does the star do? What is it called? For me it is some kind of wild card. What is it called so I can read about it?
#div {
*zoom: 1; /*this ... *
zoom : 1;
display: inline;
*display: inline; /*... and this, whats the difference? *
}
I know what this means (all elements):
* {
..css code
}
In simple words, its the key to target css on different IE browser versions. It can also be called as an CSS Hack.
#div {
*zoom: 1; /*Only works on IE7 and below*/
zoom : 1;
display: inline;
*display: inline; /*Only works on IE7 and below*/
}
Means this CSS works only on IE7 and below. It's kind of a hack we can use to apply CSS on IE7 and below.
Here is how to target IE6, IE7, and IE8 Uniquely
#div{
color: red; /* all browsers, of course */
color : green\9; /* IE8 and below */
*color : yellow; /* IE7 and below */
_color : orange; /* IE6 */
}
CLICK HERE if you want learn more about browser specific CSS.
star-property hack The IE family ignore the *, however, and apply the property without it.This hack is used in order to deliver style rules only to Internet Explorer 7 (and lower). It relies on a wrong DOM implementation that affects Explorer since 1997. According to the specifications, the actual root element of any well-formed (X)HTML document is the html element. Instead, Explorer 7 (and lower) considers the html element as wrapped in another unknown element.
*property: value
Although Internet Explorer 7 corrected its behavior when a property
name is prefixed with an underscore or a hyphen, other
non-alphanumeric character prefixes are treated as they were in IE6.
Therefore, if you add a non-alphanumeric character such as an asterisk
(*) immediately before a property name, the property will be applied
in IE and not in other browsers. Unlike with the hyphen and underscore
method, the CSS specification makes no reservations for the asterisk
as a prefix, so use of this hack could result in unexpected behavior
as the CSS specifications evolve.
http://www.javascriptkit.com/dhtmltutors/csshacks3.shtml
In your context it seems to be the star hack. It does that property only applies in some versions of IE, depends of its use.
You could retrieve more info here.
What does the * in css? -> Selects all the elements after specified elements for eg. div.red *{color: red;} will result all color red after its class red even if you define the other color inside div.red hence you know * means ALL
See This Fiddle
* zoom: 1; -> here you have placed * at first, so this would hack IE only that is this type of style works only in IE and other browsers neglect this.
* it is called asterisk in simple language and in coding language this is called Universal Selector
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.