I'm dealing with someone else's code here and have come across something like this:
.selector {
.background-position : 0px 2px;
}
Does the period on the line background-position do anything or was that their way of commenting the line out? It doesn't seem to have an effect that I know of (using chrome inspector and firefox inspector) but I want to make sure.
Thanks for any insight on this.
I usually use a z to quickly comment stuff out. But in the production CSS, I remove these lines.
It's a "comment". It makes the CSS invalid though and it looks very unprofessional, so it's a good idea to remove it altogether if you don't need it, or at least properly comment it with /* ... */.
A period there - ie in .background-position - is not valid CSS.
A period is valid in the selector, as you've shown it - ie .selector, in which case it selects elements with class='selector'.
But if I understand the question, you were asking about the dot in .background-position, which as I say is not valid. If you try to add .background-position as a style in Firebug, it won't accept it.
That isn't valid CSS; my guess is it's a comment or a mistake.
I have seen people use characters like _ and * to make sure some properties are only rendered in particular browsers (for example _background-position would be applied in only IE6), but never seen it done with a '.'
Period prefixes indicate styles exclusive to IE7
CSS Browser Hacks
Related
We are working on redesigning our web-based application’s Front-end. We started with a PoC based on Extjs 6 and we are facing few compatibility issues.
These compatibility issues are related to IE8 and CSS, while it is mentioned on your website that Extjs6 is fully compliant with IE8.
CSS classes work perfectly with all Major Web Browsers (Firefox, IE11, Chrome...) but some do not on IE8.
This is an example of CSS not working properly under IE8:
Ext.create('Ext.button.Button',{
text:'Button Test',
cls: 'btnColor',
renderTo: Ext.getBody(),
});
.btnColor {
background-color: green;
border-color:green;
}
Works on IE11 :
But not on IE8 :
We would like to know if this is a known issue and is there a specific processing which allows us to handle this kind of needs.
Thank you in advance.
The element in your comment above is the wrong element - that's the inner element for the button; you want the class with an id something like button-1009 (it's going to be an anchor or div tag a few elements up in the hierarchy).
And as to why it's not working - there are going to be multiple CSS selectors that define the background colour. The default one, from ExtJS, is going to be x-btn-default-large. The full CSS class for the attribute is going to be something like x-btn buttonCls x-unselectable x-btn-default-large x-border-box.
Done like that, both the buttonCls and x-btn-default-large are equally valid choices - the browser must pick one to use. IE8 is picking the last one; other browsers are picking the first one. Neither is wrong - the ambiguity is in your code.
To fix it, make your CSS selector more specific. Try:
.x-btn.buttonCls {
background-color: green;
border-color:green;
}
This applies to buttons (which will be the only things that have the x-btn componentCls attribute) that have the buttonCls cls attribute.
The problem is JavaScript syntax.
IE8 and earlier are strict about trailing commas on arrays and objects.
Your line renderTo: Ext.getBody(), ends in a comma, but is the last item in the object. In IE8, this will fail to compile.
The solution is simply to remove that comma.
You can keep an eye open for theses kinds of things by running your code through a linting tool like JSHint or ESLint, which will flag this kind if thing up.
The answer of Sencha support team:
https://www.sencha.com/forum/showthread.php?305980-CSS-compatibility-issues-on-IE-8.&p=1118734#post1118734
This clarified a lot for me, it might help you :)
What does the following CSS do and is it valid?
h4 {
width: 83%;
#width: 75%;
}
It is not valid. #width: 75%; is a syntax error, since # isn't used in CSS property names (although it is used in CSS selectors, to select elements with specific ids). Most browsers will ignore it (hopefully) and only the first rule will be applied.
It might have been someone's attempt to write a CSS comment. This is the valid way: /*This is a comment*/
Edit
I would suggest using a CSS reset file to account for browser differences.
Apparently there's a hash hack which looks exactly like the one you have, but I have no idea what specific browsers the author is trying to target or filter since there aren't any reliable results as to what browsers apply the rule and what don't (that looooooong list of user agent strings isn't what I'd call reliable; I'd call it inconsistent).
In any case, a hash is not a valid character for property names. I'm sure anyone that isn't IE will squarely discard it on sight.
using # before a property is applying different css style for ie 7. Is a css hack like *. To make it valid you can use conditional comments for ie.
From what I've read on http://developer.expressionz.in/blogs/2007/09/08/for-your-ies-only/ the hash-hack is intended to make a rule only visible to IE browsers. Since it is - as already mentioned by others - not a valid property, other browsers will ignore it.
BTW if the second width was not preceded by #, it would take width = 75% and not 83%. The last value always overrides all the preceding ones. As others pointed out, it could be a hack, which I don't know but most likely a syntax error.
To basically answer both your questions.
The # before the property targets IE7 & IE6 (and lower)
No, it's not valid.
I asked the same question, there's more info there that may be helpful to others:
Post: " CSS - "#" sign before property "
I have a search bar plugin (Wordpress) which I have modified by CSS to suit my design. The thing is that it gets displayed ok in my latest version of Chrome, but it doesn't in other versions of it or Internet Explorer.
Here is how it should be everywhere: http://i.imgur.com/eTpHgK2.png
Here is how it is displayed in iExplorer and some other cases: http://i.imgur.com/1WKwYWc.png
The URL is: impresionados.net
The CSS: http://pastebin.com/bjpLS3DM
After having a look it seems like the custom styles are being applied in the first situation, but not on the second one. I have looked for missing semi-colons or closing curly braces, but I haven't seen anyone missmatching.
Where could the problem be or which tools could help me identify the problem? Thanks!
You wrapped almost all your code in media-queries, that can only be interpreted by some browsers. You might want to think about implementing http://modernizr.com/ to create fallbacks for that scenario.
Have a look at http://caniuse.com/#search=media to check to what extend you can use certain CSS selectors.
What is the use of this CSS hack in Safari?
/* CSS Hack Safari */
#dummy {;# }
I found it in this page:
http://jscroller2.markusbordihn.de/example/endless/
After doing some Googling, I was able to find something pertaining to Safari and browser hacks..
Apparently, older versions of Safari would ignore CSS declarations that were preceded by a hashtags. For instance:
h1 {
font-size:24px;
font-size:30px;#
}
If Safari were to come across something similar to this, it would make h1 24px, and completely ignore the 30px.. However, say IE, or Chrome were to see this, they would read the declaration and make the fontsize 30px because of the fact that they don't take the hashtag into consideration. To my knowledge this little 'hack' no longer works on newer versions of Safari.. Here is my reference.
Now back to the question:
#dummy {;#}
This doesn't particularly do anything, so I don't really see why this was in their code.
However, I am assuming that something was originally placed in there, and later removed due to the fact that this hack no longer works..
This is a rather interesting source on browser hacks..
What does the following CSS do and is it valid?
h4 {
width: 83%;
#width: 75%;
}
It is not valid. #width: 75%; is a syntax error, since # isn't used in CSS property names (although it is used in CSS selectors, to select elements with specific ids). Most browsers will ignore it (hopefully) and only the first rule will be applied.
It might have been someone's attempt to write a CSS comment. This is the valid way: /*This is a comment*/
Edit
I would suggest using a CSS reset file to account for browser differences.
Apparently there's a hash hack which looks exactly like the one you have, but I have no idea what specific browsers the author is trying to target or filter since there aren't any reliable results as to what browsers apply the rule and what don't (that looooooong list of user agent strings isn't what I'd call reliable; I'd call it inconsistent).
In any case, a hash is not a valid character for property names. I'm sure anyone that isn't IE will squarely discard it on sight.
using # before a property is applying different css style for ie 7. Is a css hack like *. To make it valid you can use conditional comments for ie.
From what I've read on http://developer.expressionz.in/blogs/2007/09/08/for-your-ies-only/ the hash-hack is intended to make a rule only visible to IE browsers. Since it is - as already mentioned by others - not a valid property, other browsers will ignore it.
BTW if the second width was not preceded by #, it would take width = 75% and not 83%. The last value always overrides all the preceding ones. As others pointed out, it could be a hack, which I don't know but most likely a syntax error.
To basically answer both your questions.
The # before the property targets IE7 & IE6 (and lower)
No, it's not valid.
I asked the same question, there's more info there that may be helpful to others:
Post: " CSS - "#" sign before property "