Understanding the fragmentary information in the previous post, I decided to dig as much as I can for the information on the hacks I presented.
Additions are welcome, because some things had to be guessed almost without reliance on at least some explanation.
I apologize in advance for the abundance of links - I honestly brought all the links, I have nothing to do with these sites.
Under the
selector, please understand a separate tag, a separate class or identifier.
"Source" - where did you get the info
"Status" - how much can you trust the explanation
"Principle of operation" - on the basis of which, different browsers understand this hack differently.
html * selector {...}
Presumably the Safari version 3.2 feature - it treats this construction as a
selector *
selector.For example, take a piece of html-code
<p>
<span> <b> text </ b> </ span>
</ p>
So the CSS rule
p*b {...}
works only in Safari 3.2, it works the same way as
p * b {...}
source: experiment
status: hypothesis
work principle: bug
')
@ -moz-document url-prefix () {
selector {...}
}
The
@-moz-document
rule allows you to specify styles depending on the address of the current document;
url-prefix()
- sets the line in brackets with which the address can begin, empty string = any address,
('/')
- does not work, which is logical. Then the {...} block opens and inside it you can write any CSS construction that will be processed if the described condition works.
For reference: you can also set the address completely - url (), domain - domain ().
Source:
developer.mozilla.orgStatus: info 100%
working principle: feature
x: -moz-any-link, selector {...}
There is no explanation, obviously a feature of the FF engine. I wonder what works even
y: -moz-any-link,
selector {...}
and even so
-moz-any-link,
selector {...}
source: - status: working and that's it
working principle: feature
x: -moz-any-link, x: default, selector {...}
Also without explanation, there is no pseudo-class default in the specification - it is purely FF, so the rule can be attributed to the features of FF> 3.0.
source: - status: working and that's it
working principle: feature
noindex: -o-prefocus, selector {...}
Rules starting with -o are features of the Opera. Instead of noindex can be any tag - it does not matter.
source: - status: working and that's it
working principle: feature
html: root selector {...}
Pseudo-class: root selects the element that is the root of the entire document. In HTML4 (expressly stated in the standard) this is always the html tag. Therefore, this rule will work in all browsers that support this pseudo-class.
You can also write
*: root
selector {...}
source:
http://www.w3.org/status: accurate information
working principle: incomplete support for CSS3
body: first-of-type selector {...}
The pseudo-class: first-of-type selects the first element of this type among all children of the same type of the given parent.
In addition to this pseudo-class there is still a bunch, I will give them for reference:
: nth-child (n) is the nth child of this type.
: nth-last-child (n) - the nth child of this type from the end
: nth-of-type (n) - the nth element of this type in the document
: nth-last-of-type (n) - the nth element of this type in the document
: first-child - the first descendant
: last-child - the last descendant
: first-of-type - the first element of this type
: last-of-type - the last element of this type
: only-child is the only descendant of its parents of this type.
: only-of-type - an element that is the only descendant of its parents, of the same type
Visually explained for example here
http://goldblog.com.ua/2009/09/selektor-css/source:
http://www.w3.org/status: accurate information
working principle: incomplete support for CSS3
media all and (min-width: 0) {
selector {...}
}
As you know (
http://www.w3.org/TR/CSS2/media.html#x0 ) the
media rule restricts CSS styles depending on the device on which the document is played. The rule can be set at connection of the .css file and inside the style description itself.
According to the specification there are the following media types:
all - all devices are meant
braille - devices that reproduce content in braille.
embossed - for braille printers
handheld - mobile devices with a small screen size and channel bandwidth
print - everything that prints, draws etc.
projection - clogged for projectors and similar equipment
screen - for color monitors in graphic mode
speech - for devices that output content by speech synthesis
tty - for monitors in text mode
tv - scored for systems reproducing content on a television: low resolution, the presence of a sound path, the absence or poor support for scrolling.
Media type names must be case sensitive.
The first part of the rule is clear. What is “and” I did not find in Google or in standards.
Given that the construction of the form “div and (...)” does not work, we can conclude that this is a specific operator of the media type.
From what he is considered, because I don’t understand who should have min-width = 0, but you can’t leave empty brackets - the layout is “leaving”, i.e. () Is an invalid construct. In addition, min-height works, but simply wight and height do not plow. If someone explains - I will be grateful.
In short, this rule works if the browser understands what media = all is and supports the logical structure present there. Most likely, without the “and (...)”, this style will be understood by all browsers younger than likely from the 95th year.
source:
http://www.w3.org/source: experiment
status: information is incomplete
working principle: feature
html: not ([lang * = '']): not (: only-child) selector {...}
The pseudo-class: not (), allows you to exclude elements that match the argument of the selector, and
in not there should be a simple selector, "related" to the main selector.
Attribute lang - returns the language of the document. A language can be set to any tag by assigning a value to an attribute, for example:
<HTML lang = "en">
The comparison operator * = selects elements by attribute, which contains the specified value.
Consequently,
html:not([lang*=''])
selects only those document elements whose language is not an empty value.
not(:only-child)
selects elements that are not the only descendants of html - because minimum valid page is
<html>
<head> ... </ head>
<body>
<tag> text </ tag>
</ body>
</ html>
then
<>
we will filter in any case, even if it is only one in the document.
How it all works. The browser, if it can, selects all elements that have a language (the browser has a default display language, if the language is not specified in the document body or in the HTTP Content-Language header), then, again, if it can, all elements as I wrote above. If something is not supported - the file, the style will not apply.
source:
http://www.w3.org/Source:
http://www.w3.org/TR/xhtml1/#C_7status: information is reliable enough
working principle: incomplete support for CSS3
not all and (-webkit-min-device-pixel-ratio: 0) {
selector {...}
}
The design does not work.
What is wrong here? First, only the opera supports the construction of the form "... not all and ..." and in the form of "
media not all and ...". Secondly, the property "-webkit-min-device-pixel-ratio" is a feature of the WebKit engine, the support of which was hooked for some reason in Opera 9.5.
Therefore, the correct design is
media not all and (-webkit-min-device-pixel-ratio: 0)
selector {...}
source:
http://www.internet-technologies.ru/articles/article_1410.htmlstatus: information is reliable enough
* | html [xmlns * = "'] selector {...}
Selector * | works with the namespace. * | html means an element named html in any namespace. This element is also filtered by the xmlns attribute, which defines the namespace of the document, in this case, obviously, any, since xmlns * = ''.
There is a similar hack in the review
html [xmlns * = ""] body: last-child
selector {...}
FF understands it, but the html [xmlns * = ''] type constructor {...}
selector does not.
source:
http://www.w3.org/status: information is reliable enough
working principle: incomplete support for CSS3
body: last-child: not (: root: root) selector {...}
:root:root
must select the html element. The inside reference to not () of the parent element relative to the current one is not according to the standard.
In addition, not all browsers can handle the rule
:root:root
, i.e. choose the root element for the root, especially since, generally speaking, this is also not correct.
Violation of the standard, obviously, gives the difference in support for different browsers.
source:
http://www.w3.org/status: hypothesis
operation principle: conscious error in the rule, incomplete support for CSS3
html: not ([lang * = ""]) selector {...} and html: not ([lang]) selector {...}
They work the same way - obviously the expression
[lang]
without conditions is equivalent to “any non-empty”
source: - status: hypothesis
working principle: incomplete support for CSS3
html: not (: nth-child (1)) selector {...}
Due to the fact that not all browsers understand this, you can assume that not all versions support the selection of descendants by their number (index).
source: - status: hypothesis
working principle: incomplete support for CSS3
html: not [lang * = ''] selector {...}
This hack does not work due to a syntax error. The pseudo-class condition not must be in ().
source:
http://www.w3.org/status: reliable