This question already has answers here:
Do CSS variables work differently in Microsoft Edge?
(3 answers)
Closed 4 years ago.
I am designing a new blogger Template. I want to make it easy to change the whole template color at the same time by changing the value of the variable , so I used these lines:
:root {
--bg-color: #fff;
--url-color : #000;
--main-color : #2daeeb;
--main-hover-color : #2ca1de;
--alt-color : #ff6347;
}
but unfortunately it doesn't work in Edge browser, even though I used the prefix:
-webkit-
CSS variables are not supported by IE nor will they ever be.
Update:
CSS variables are supported in Edge since EdgeHTML 15 (packaged with Windows 10 version 15063, available since March 2017.
See here under Browser Compatibility.
Also, the W3C spec.
As an alternative you can use a CSS pre-processor to compile your CSS using variables in the way you describe.
Docs on Sass
Docs on Less
Related
This question already has answers here:
Purpose of asterisk before a CSS property
(6 answers)
Closed 9 years ago.
I found these lines
width : 74.358974359%;
*width: 74.30578286963829%;
in style sheet but i can't understand what is the meaning of *width ???
i searched in Google but no result found.
thanks in advance
That's a CSS hack that targets Microsoft IE 7 only.IE7 will honor that CSS rule even though it is invalid due to the asterisk. All other browsers will ignore it. So by using the asterisk you can effectively target IE7 only. This is usually done to compensate for IE7 behaving badly and rendering content incorrectly and needing a special rule to correct it.
It is a syntax error. It's one of the IE hacks. Internet Explorer parses CSS in a slightly different way, allowing for certain hacks that will be ignored in other browsers. You can target different versions of IE with different hacks.
So in CSS, it makes the property name invalid and stops it being parsed.
Thanks to bugs in browsers, it is sometimes ignored. This effectively causes the property to apply only to browsers featuring that particular bug — IE7.
In general, it should be avoided in favour of conditional comments.
Unrecommended hacks
This question already has answers here:
Purpose of asterisk before a CSS property
(6 answers)
What does an asterisk do in a CSS property name? [duplicate]
(4 answers)
Closed 9 years ago.
I found this properties in a CSS file from a know blog. I severely questioned its use and if it is allowed to use them, so here is the code.
*margin
*padding
Real example:
.offset1 {
margin-left: 11.325966850829%;
*margin-left: 11.219583872105%
}
It's a hack to deal with Internet Explorer compatibility
See here
It is a hack for Internet Explorer.
http://en.wikipedia.org/wiki/CSS_filter
http://www.paulirish.com/2009/browser-specific-css-hacks/
It's a hack, used to apply different styles to older IE browsers.
http://www.javascriptkit.com/dhtmltutors/csshacks3.shtml#unrecommended-asterisk_prefix
Tha means that selector is targeting ie7 and below only
This question already has answers here:
Hash sign in front of property name - CSS browser hack?
(2 answers)
Closed 9 years ago.
I have a sample CSS that I downloaded that has the entry
#text-align: right;
in it. The comment next to the entry says that this expression justifies it for IE, whereas
text-align: right;
works for Safari and Chrome. My question: what is the significance of the hash in this context?
Thanks!
This is something called a "CSS hack" which alters the behavior of IE because it is so terrible and doesn't support the latest CSS definitions. Other browsers will ignore the statement entirely (as if it were a comment) but IE will treat it as text-align:right;
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
What does a star-preceded property mean in CSS?
I downloaded CSS file for one of jQuery scripts and it look like this
.usual div {
*margin-top:-15px;
clear:left;
background:snow;
font:10pt Georgia;
}
what is the use of star sign?
This is a hack for IE7 and under. Only those browsers will respond to the CSS rule, as it's considered invalid to all other browsers.
It's a hack to, in this case, change positioning in certain versions of IE.
The CSS standard says to ignore properties whose names are preceded with some character, but some versions of Internet Explorer ignore this. Some you might see are:
*someproperty: somevalue - IE7 and earlier affected
_someproperty: somevalue - IE6 and earlier affected
#someproperty: somevalue - I forget. Probably the same effect as *.
You should probably use conditional comments instead, however.
This question already has answers here:
Detecting IE version using CSS Capability/Feature Detection
(18 answers)
Closed 5 months ago.
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}
input,textarea,select{*font-size:100%;}
This is from the YUI reset css. What does the * before font-size:100% do?
This is an IE hack. The second line is only correctly parsed and executed by IE 7 and below. See http://www.webdevout.net/css-hacks#unrecommended-asterisk_prefix for more information.
Edit: One remark on using such (invalid!) CSS: please don't. There are plenty of ways of keeping your CSS clean of such mess. You'll never know what behavior IE9 might bring. Better to put these kind of hacks in a separate CSS file which can then be included through conditional comments.
To be more precise: IE6/7 doesn't support font-size: inherit. This hack is supposed to achieve the goal anyway.
I think it's a hack to make that definition only apply to IE 7 or less while being ignored by other browser as an asterisk is not a legal character before an attribute name.
As already told, those are hack to target specific browsers. Marc's suggestion is quiet right, and here's a link to give you an kick start:
http://www.webdevout.net/css-hacks