This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Is a CSS property starting with a hash (#) valid?
I tried looking around here on Stackoverflow.com but couldn't find anything related to my question. The open web wasn't any better either, although there was an answer on Yahoo! Answers the 'answer' didn't really say anything other than "[# is for IDs]" (no need to post the link of course).
This is a bit more advanced.
When reviewing the CSS code from a co-worker I found he used the # sign before several CSS properties.
What does the # sign before property do? That's gotta be some IE targeting hack I'm assuming.
For example:
.selector { #property:value; }
or well:
.headings { #margin-top:10px; }
I thought I knew a lot about CSS but this one caught me by surprise, especially that there's isn't any documentation of this case out there on the open web other than that answer in Yahoo! Answers.
Any info about this is greatly appreciated.
Thanks.
Update
It turns out that #property is for IE7 or less, quoting from Paul Irish:
Update 2009.11.10 – Added #prop: value IE<=7 hack. I prefer it much
less to *prop.
Putting # before properties must be a hack for some browser. Other similar hacks include _ (for IE6 and below), * (for IE8 and below), etc.
For more info, see:
Browser-Specific CSS Hacks
Related
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 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:
Closed 12 years ago.
Possible Duplicate:
Why do /**/ comments work in stylesheets but // comments don't?
In CSS there is only one way to create comments: /* I'm a comment */
The problem is that it isn't nestable.
Why don't we have an alternative comment syntax like //?
I think the real answer is that CSS treats newlines like any other whitespace, so it wouldn't make sense to have comments that are terminated by a newline. This is from the CSS1 spec: http://www.w3.org/TR/REC-CSS1
A CSS style sheet, for any version of CSS, consists of a list of statements. There are two kinds of statements: at-rules and rulesets. There may be whitespace (spaces, tabs, newlines) around the statements.
Of course, this also makes a lot of sense in the context of minification, as mentioned here: Why do /**/ comments work in stylesheets but // comments don't?.
It's not in the specification, and because CSS is widely used and supported, adding it in is virtually impossible. You can't just publish a new specification and expect all browsers to magically support it.
Internet Explorer 6, a browser more than 10 years old, is still widely used, so you can safely assume that even if this addition to the specification were made, it'd take another 10 years to be supported enough to bother. The problem with //-style comments is that they don't scale - unlike new HTML tags, which can be safely ignored as long as the rest of the document makes sense, adding a //-comment will break unaware user agents.
So the short answer is, we don't have it because we don't.
If it really means that much to you, write a script or macro that converts //-comments into /* */-comments, and apply it before running your web application.
There is a way to have // comments in CSS. If you use Sass/Compass.
I really like using Compass, because it gives me everything I miss about CSS, like functions, variables and so on...
Here is the Compass home page and the underlying Sass-language.
Compass is very nice, because you just have a program running in the background that compiles your Sass-code into real CSS, so your workflow is exactly as normal, but in other files (SCSS or Sass) and with very extended functionality!
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
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking us to recommend or find a tool, library or favorite off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.
Closed 8 years ago.
Improve this question
I'm not talking about tools that let one view a page in combinations of operating systems and browsers like crossbrowsertesting.com but in creating or figuring out the actual CSS.
Use a css reset to level the field across browsers. YUI and Eric Meyer have good ones.
If you guys are still coding for IE6, you're making a mistake.
I use IE7.js to get IE6 to render pages like IE7. IE7 is not perfect, but at least it has some semblance of standards. Since I only have to code for IE7 and FF it makes me 33% more efficient in terms of testing against browsers, something I think makes good business sense.
Link: IE7.js
I write to the standards and both Firefox and IE7 follow a pretty good set in common.
IE6 is dead as far as I am concerned but if I get back into professional web dev I'll probably have to revise that ;)
I try to make a standards-compliant page and do all my testing in Firefox (since it has some excellent development extensions such as Web Developer and Firebug). Then when I'm finished I test the site in IE, then make whatever small changes are necessary. I find that I need to make very few changes, since I don't do anything extraordinarily complex with CSS.
I used to have more problems with Javascript differences, but after I started using Javascript libraries (such as jQuery) I stopped having any serious problems with that.
Padding.
IE6 can get a little hinky when using margin to place elements horizontally on a page. If you size your elements and space the content within using padding, you can make many layouts work great in IE6/7, FF, Safari, and Opera without any hacks. IE5.5 makes things a little stickier because of the broken box model, but I think we can pretty much count it out in most circumstances now.
I try to make a standards-compliant page and do all my testing in Firefox (since it has some excellent development extensions such as Web Developer and Firebug). Then when I'm finished I test the site in IE, then make whatever small changes are necessary. I find that I need to make very few changes, since I don't do anything extraordinarily complex with CSS.
The same here, except I don't tend to need to use Firebug and such. I've only had problems with IE6 recently however - which are solved by simple CSS bypasses:
/* All browsers read: */
html body {
margin: 10px;
}
/* FF, IE7, Op etc. read: */
html > body {
margin: 0;
}
I'm with Eli. Writing against firefox (with firebug installed) makes you have to write "more compatible" code to begin with and then its less of a job later down the line when you come to make it compatible with IE.
Use the site QuirksMode to help you find answers to compatbility information
If it's a brand new project I make it a point to test all html+css changes on all browsers I'm targeting as I make the changes. In the past I tended to focus on my favorite browser and then test with the others after I was done to find that one or more small quirks were present and it was very tedious to pin-point the actual cause. Now I have all browsers open and just go through refreshing each one after each html/css change to make sure the display meets my expectation. When something goes wrong, I know exactly what caused it.
It might seem time-consuming to test on all browsers at once, but in the long-run it actually saves time as you catch the problems at once.