Why does not the css rules work in Chrome?
css:
.selector { (;property: value;); }
or
.selector { [;property: value;]; }
First off, this isn't a hack. Equally, this doesn't only apply to Chrome v30. The same functionality applies in all other modern browsers.
As defined here in the CSS2.1 specification:
...parentheses (( )), brackets ([ ]), and braces ({ }) must always occur in matching pairs and may be nested.
When you add a (, for instance, Chrome will wait for the closing ) before attempting to apply any styles. However, no CSS property is wrapped in parenthesis like this, so thus no style is applied.
Take this example:
.selector {
(color:#f00;); /* Invalid, ignored. */
font-weight:Bold; /* Valid, not ignored. */
}
Here the color declaration is in parenthesis and the font-weight declaration isn't. Chrome will ignore the color property altogether as this is not a valid CSS declaration, but still process the font-weight as normal:
JSFiddle demo.
Parenthesis, brackets and braces like this are simply invalid CSS declarations and are ultimately ignored in the same way that the following would also achieve the same:
.selector {
color; /* Invalid, ignored. */
font-weight:Bold; /* Valid, not ignored. */
}
It's also worth noting that Chrome will treat anything between parenthesis and brackets as a single CSS declaration. In your case, (;property: value;); is treated as one declaration, regardless of the extra semicolons.
It's also worth noting that if you fail to match the closing pair prior to ending the selector (with a }), any selector given after will not be processed (example).
That particular set of CSS oddities is actually known, and what is called bracket hacks for Safari (yes they have a name). They also worked in Chrome until version 28. It works in versions 7.0 and older in Safari at this time (version 8 is the current version of Safari as I am writing this update).
Related
I'm trying to have some custom rules for firefox, and up until now I used
#-moz-document url-prefix()
But according to the docs #-moz-documentwill not be supported in future versions.
Instead #document will be supported.
So I changed from this:
#-moz-document url-prefix() {
...
}
To this
#-moz-document url-prefix(),
#document url-prefix() {
...
}
But for some reason now, the rules no longer apply
The reason this won't work is that chained CSS selectors/directives are evaluated as one.
If one of the parts fails evaluation the entire style is disregarded
Example:
// 😔
[type="range"]::-moz-range-thumb, [type="range"]::-ms-thumb { ... }
makes IE skip makes Firefox skip
// 😀
[type="range"]::-moz-range-thumb { ... } makes IE skip (Firefox will work)
[type="range"]::-ms-thumb { ... } makes Mozilla skip (IE will work)
In your case current Firefox will understand #-moz-document url-prefix() but not #document url-prefix() causing it to skip the style.
Therefore when dealing with vendor specific implementations always keep your styles separated.
I hope it made sense :-)
From the MDN page:
From version 61: this feature is behind the
layout.css.moz-document.content.enabled preference (needs to be set to
true). To change preferences in Firefox, visit about:config.
CSS at-rules (e.g., #import) have existed since CSS2. New rules are slowly being added to CSS3 such as #supports with varying levels of browser support. How do the major browsers handle unsupported rules they don't recognize? Are they just ignored? Or are they treated as syntax errors?
E.g., if I were to use the #supports at-rule which is not supported by any version of IE, would IE fail with a syntax error, or would it be silently ignored?
#supports (pointer-events: none) {
...
}
The CSS 2.1 spec says
4.2 Rules for handling parsing errors
At-rules with unknown at-keywords.
User agents must ignore an invalid at-keyword together with everything following it, up to the
end of the block that contains the invalid at-keyword, or up to and
including the next semicolon (;), or up to and including the next
block ({...}), whichever comes first.
For example, consider the following:
#three-dee {
#background-lighting {
azimuth: 30deg;
elevation: 190deg;
}
h1 { color: red }
}
h1 { color: blue }
The #three-dee at-rule is not part of CSS 2.1. Therefore, the whole
at-rule (up to, and including, the third right curly brace) is
ignored. A CSS 2.1 user agent ignores it, effectively reducing the
style sheet to:
h1 { color: blue }
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
This question is similar to the one I asked here. I am cleaning up some files and I came across this in this css:
.something
{
height: 33px;
-height: 34px; /* does this do anything?? /
}
and
.something
{
_width: 150px; / does this do anything?? */
}
EDIT: Okay, so the _ (underscore) is a css hack for IE, which is fine, I'll just leave it, but what about the minus sign, does it do anything at all?
Also, we are not supporting anything below IE 7 anymore, so if anything is a hack for IE6 I can take it out.
Straight from the W3C CSS 2.1 Spec -
4.1.2.1 Vendor-specific extensions
In CSS, identifiers may begin with '-' (dash) or '_' (underscore). Keywords
and property names beginning with '-' or '_' are reserved for vendor-specific extensions.
However that said, using an underscore to prefix a CSS property is a well known CSS hack to apply that rule for rendering in IE 6.
Since a CSS identifier can start with a '-' (dash) and be valid, this can be used to quickly comment out parts of CSS during development. For example in the CSS below, none of the properties will be set for h1 and only margin will be set for h2.
-h1 { color:blue; margin:2em; }
h2 { -color:pink; margin:2em; } /* property "-color" not valid */
I'm not sure about the minus sign, but the underscore is a hack to have a rule ignored in IE < 6.
http://wellstyled.com/css-underscore-hack.html
This is a CSS hack, to trick some browsers to use them (or not use them).
This one is the Underscore Hack
Versions 6 and below of Internet
Explorer recognize properties with
this prefix (after discarding the
prefix). All other browsers ignore
such properties as invalid. Therefore,
a property that is preceded by an
underscore or a hyphen is applied
exclusively in Internet Explorer 6 and
below.
#elem {
width: [W3C Model Width];
_width: [BorderBox Model];
}
This hack uses invalid CSS[3] and
there are valid CSS directives to
accomplish a similar result. Thus some
people do not recommend using it. On
the other hand this hack does not
change the specificity of a selector
making maintenance and extension of a
CSS file easier.
CSS Hacks is one (not so elegant) technique of achieving same look and feel and across browsers.
It means the CSS property will be applied in IE 6 and below. It is a CSS hack.
A cleaner method of applying styles to different IEs is using conditional comments.
I just ran into what seems like absurd behavior to me. If IE8 doesn't understand part of a rule it ignores the entire thing:
input[type=radio]:checked,
input.checked {
/* Some CSS */
}
I already have IE8 specific JS adding the .checked class, but because it doesn't understand :checked, it ignores the entire thing, so I'm forced to now have several rules:
input[type=radio]:checked{
/* Some CSS */
}
input.checked {
/* The exact same CSS */
}
So my question -- does anyone know of a way to get IE8 and below to ignore the :checked instead of throwing out the entire rule?
Very basic example: http://jsfiddle.net/8UT56/
You can use a library like http://selectivizr.com/ to give IE newer selectors.