This question already has answers here:
Detecting IE version using CSS Capability/Feature Detection
(18 answers)
Closed 5 months ago.
In the son of suckerfish drop down menu:
http://www.htmldog.com/articles/suckerfish/dropdowns/example/
You see this rule
w\idth: 13.9em;
This can't be a typo as it appears various times in the css. What is it for?
This is called a CSS Hack.
Some browser will ignore the \ and treat that as a width property; other browsers will ignore the entire property.
You can see a complete list here.
It's called the Modified Box Model Hack.
From the linked site:
as explained above in the section on the SBMH is hidden from IE5.x/Win because of the character escape. IE5/Mac and IE6/Win which implement the CSS box model correctly, therefore, properly get a width of 100px.
It's a "box model hack" to workaround the incorrect box model for older IE versions.
Read more about this specific hack here: http://css-discuss.incutio.com/wiki/Box_Model_Hack
It likely has to do with the box model hack. Read here for more info: http://webdesign.about.com/od/css/a/aaboxmodelhack.htm
Related
This question already has answers here:
How to disable CSS in Browser for testing purposes
(19 answers)
Closed 7 months ago.
I am looking for an option based solution.
Of course there is an option to remove all style tags one by one from the elements panel, this will not remove inline injected styles.
For debugging purposes I would like this option to be at reach, I remember this being an option at one time.
For debugging you could try commenting out link tag in html body that has link to CSS stylesheet
You can do that on Firefox, found in the menu under View -> Website Style -> No Style (the wording might be slightly different, I don't have english version of FF installed but you should find it rather easily I guess.
This question already has answers here:
List of CSS vendor prefixes?
(3 answers)
Closed 7 years ago.
I have a stylesheet that I made 2 or 3 years ago, when CSS was full of these horrible vendor prefixes for flexbox. I used flexboxes as needed, with the -webkit- prefix for Chrome & Safari.
I just saw on caniuse that flexboxes are now working without prefix on every browsers. Do you know an up-to-date list of CSS properties that still need prefixes?
At that time, vendor prefixes were needed for things like gradients or animations. I wonder if I can remove everything safely, or if some of them are still used.
I was looking for the same a while ago, and ran into this useful website: Should I prefix?. It lists the CSS properties and whether a prefix is still necessary or not.
Next to that, you can always check Can I Use for more info and detail.
+1 to caniuse.com as the best place to see browser prefix info. But your flexbox use case is unique.
Flexbox's implementation has changed a lot of the years, far more than almost any other CSS standard I am aware of. The best way to check which version you are using is to check the display value in your stylesheet.
display: box is the oldest implementation, you probably didn't use this one.
display: flexbox was the transitional state between the old and new flexbox standard. If you are 2-3 years out, you might have used this and will have to change your code to match the new implementation.
display: flex is the modern implementation that has good cross browser support. If you used the prefix version of this, you should be able to safely drop prefixes and get the same results.
CSS Tricks has one of the best shorthands for the modern approach to flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
This question already has an answer here:
Closed 10 years ago.
Possible Duplicate:
Combine CSS Attribute and Pseudo-Element Selectors?
http://jsfiddle.net/BC3Td/
I have tested this in firefox and opera and there are no issues, however chrome, safari and mobile safari all ignore the second pseudo element css and default to the first, can anyone shed light on what is happening here?
and how can this be achieved without adding classes/id's?
ANSWER:
This is a webkit bug, the fix is relatively simple, if you add the following css (or any css rule that involves purely the (non-pseudo) element then it will fix itself.
#test-div a[href*="tel"],
#test-div a[href*="mail"] { display:block; }
How weird?
updted (working) fiddle is here: http://jsfiddle.net/BC3Td/3/
Sounds like a bug in Webkit selection. The psudeo selector does work if the element is also selected directly however (an effective no op used here):
http://jsfiddle.net/BC3Td/2/
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