www.lipfert-malik.de>webdesign>tutorial>CSS für alle Browser>Browser CSS Weichen Impressum

CSS Filter und Browserweichen per CSS
Kristof Lipfert
Dipl.-Des.(FH)

Web-Design Beispiel zum Tutorial CSS für alle Browser, Browserweichen CSS

Browser: Filter und Cross-Over durch CSS

Der folgende Katalog zeigt CSS-Weichen und mögliche CSS-Filter. Wichtig für eine CSS-Weiche sind, abgesehen von der Weichenfunktion einen bestimmten Browser exklusiv anzusprechen oder auszulassen, folgende Bedingungen:

  1. Die CSS-Weiche sollte bei keinem Browser zu Absturz oder Fehlern führen.
  2. Die CSS-Weiche sollte hinsichtlich zukünftiger Browser, möglichst auch ungetesteter Browser, zuverlässig sein.
  3. Der CSS-Filter sollte W3C validierbar sein.

Idealerweise wird bei einer CSS Weiche ein fehlerhaftes und in zukünftigen Versionen nicht zu erwartendes Verhalten eines Browsers, möglichst ohne dabei Parsingfehler zu erzeugen, genutzt. Parsingfehler und ähnliche Effekte sind, soweit mit dem hier angewandten Verfahren feststellbar, bei der folgenden Tabelle in der Aufstellung der Eigenschaften der Browser rot markiert. Solche Fehler deuten darauf hin, dass der CSS-Code für eine Anwendung als CSS-Filter wahrscheinlich ungeeignet ist.

CSS: Filter und Browserweichen

0 #test { color:lime } nc4ie4ie5i5mi55ie6ie7nn6nn7ff2op4op5op6op7op8op9ay9k32k34sa3
1* #test { color:lime } -+++++++++++++++++++
2html #test { color:lime } -+++++++++++++++++++
3html * #test { color:lime } -+++++++++++++++++++
4html body #test { color:lime } -+++++++++++++++++++
5* /*\*/ #test { color:lime } -++-++++++++++++++++
6 #/**/test { color:lime } ++-+------------++--
7* #/**/test { color:lime } -+-+------------++--
8 #test { color:lime! } --–-+++---––----+---
9 #test { !color:lime } -++-+++---––----+---
10 #test { color=lime } -+++++----––--------
11 #test { color=lime! } --–-++----––--------
12 #test { c\olor:lime } –--+-+++++––++++--++
13 #test { c\olor:lime; } –--+-+++++--++++--++
14* #test { c\olor:lime; } ---+-+++++--++++--++
15* html #test { c\olor:lime; } -----+--------------
16 #test[id] { color:lime } ------++++++++++-+++
17* html #test { color:lime } -+++++----------+---
18html.* #test { color:lime } ++--++--------------
19*.* #test { color:lime } ++--++--------------
20html * body #test { color:lime } -+--------+++---+---
21html * body #test[id] { color:lime } ----------+++-------
22html * body #test[id] { c\olor:lime } ----------–-+-------
23html * body #test[id] { c\olor:lime; } ------------+-------
24html * body #test, [xfilter] { color:lime } ------------+---+---
25@media screen{ html * body #test { color:lime; }} ----------+++---+---
26@media screen{ #o4dummy{c\olor:white} html * body #test { color:lime; }} -!?----------+-------
27*body #test[id] { c\olor:lime } ------++--–-------++
28*body #test[id] { c\olor:lime; } ------++----------++
29html + body #test { color:lime } -++-------------++--
30* html + body#test { color:lime } -+------------------
31* html > body #test { color:lime } -+++------------+---
32@media all{* html > body #test { color:lime }} --+-------------+---
33! #test { color:lime } -++-----------------
34\ #test { color:lime } –++-------------+---
35html.* \> body#test { color:lime } –+------------------
36*() #test { color:lime } -+++------------+---
37html + #test { color:lime } -++-------------+---
38html + * #test { color:lime } -++-------------+---
39html > body #test { color:lime } -+++--++++++++++++++
40html>body #test { color:lime } ---+--++++++++++++++
41html >body #test { color:lime } -+++--++++++++++++++
42html> body #test { color:lime } -+++--++++++++++++++
43html:root #test { color:lime } ---+---+++--------++
44*:not(hr) #test { color:lime } -------+++--------++
45html:* #test { color:lime } ----------++--------
46*:* #test { color:lime } ----------++--------
47html ~ * #test { color:lime } -++-------++----+---
48html ~ body #test { color:lime } -++-------++----+---
49html ~ #test { color:lime } -++-------++----+---
50/#test { color:lime } -----------------+--
51/*/*/ #test { color:lime } –+++++++++--++++++++
52body " " #test { color:lime } +++-----------------
53@media handheld { #dummy{left:0px} #test { color:lime } }-+------------------
54* html * body #test { color:lime } -+--------------+---
55html.dummy * body #test { color:lime } -+------------------
56* html body #test { color:lime } -++++?++---------+---
57* + html #test { color:lime } -++?---+-------------
58* + html #test[id] { color:lime } ------+-------------
59*:first-child+html #test[id] {color:lime } ------+-------------
60html * > body #test { color:lime } -++-------+++---+---
61\> html #test { color:lime } –++-------------+---
62+ html #test { color:lime } -++-------------+---
63+ #test { color:lime } -++-------------+---
64+ body #test { color:lime } -++-------------++--
65\> #test { color:lime } –++-------------++--
66##test { color:lime }-+++++-----------–--
67# #test { color:lime }-++-+------------–--
68b\ody #test { color:lime } –+-+-++++---+++++-++
69b\\ody #test { color:lime } –+--------------+---
70html * > b\ody #test { color:lime } -+----------+---+---
71html *> b\odY #test { color:lime } -+----------+---+---
72html *>b\ody #test, [ie4filter] { color:lime } ------------+---+---
73html:first-child>b\ody #test { color:lime } ---+---------+++----
74\/#test { color:lime } –-------------------
75*> #test { color:lime } -+++--++++++++++++++
76 *>#test { color:lime; } -+++--++++++++++++++
77>+ body #test { color:lime } -++-------------++--
78html >+ body #test { color:lime } -+++------------++--
79>html >+ body #test { color:lime } -++-------------+---
80head:first-child+body #test { color:lime } ---+--+++----+++-+++
81> head:first-child+body #test { color:lime } -----------------+--
82\> head:first-child+body #test { color:lime } --------------------
83html:first-child>+body #test { color:lime } ---+-------------+--
84html:first-child>\+body #test { color:lime } --------------------
85html:first-child> +body #test { color:lime } -+++-------------+--
86html:first-child>*+body #test { color:lime } ---+---------+++-+--
87html:first-child>*:first-child+body #test { color:lime } ---+---------+++-+--
88html:first-child>*:first-child+b\ody #test { color:lime } ---+---------+++----
89*:first-child>*:first-child+body #test { color:lime } ---+---------+++-+--
90**:first-child+body #test { color:lime } ---+--++?---------++
91* *:first-child+body #test { color:lime } ---+--++++---+++-+++
92*>*:first-child+* #test { color:lime } ---+--++++---+++----
93h/**/tml:first-child>*:first-child+body #test { color:lime } -----------------+--
94html:first-child > > #test { color:lime } -++?-----------------
95*>head: +* #test { color:lime } -++-----!?----+------
96@media screen and (min-width: 0px){ #test { color:lime }}--------------++---+
97 * html i{ content:"\";} * html #test { color:lime; } * html i{ content:"\";}-++-+--–--–------–--
98@media all{ * html b\ody #test { color:lime;} }-----++---------+---
99#test {/**/*/ color:lime; /* */}-++-+++---++----+---
100#test[id] {/**/*/ color:lime; /* */}----------++--------
101#test {/**/*/ c\olor:lime; /* */}-----++-------------
102/*/*//*/&{"//*"};#test { color:lime }&{"*/"};/* */----–––––-++–––--–--
103/*/*//*/&{"//*"};#test { color:lime }&{"*/"};/* */ i{}----------++-----–--
104/*/*//*/&{"//*"};#test { color:lime; }&{"*/"};/* */ i{}------–---++-----–--
105/*/*//*/&{"//*"};#test { color:lime }/* */–-----–---++--------
106/*/*//*/&{"//*"};#test { color:lime; }/* */–---------++--------
107/*/*/{/*//* */#test { color:lime }/*/*/}/*//* (c) */+--–--------–––-----
108/*/*//*/\{! i{"}#test { color:lime }i{"}*}{}/* */+-------------------
109/*/*//*/\{! i{}#test { color:lime }*}{}/* */+---------------+---
110/*/*//*/\{! i{"}#test { color:lime }i{"}*}{}/* */+-------------------
111/*/*//*/\{! i{}* #test { color:lime }*}{}/* */+---------------+---
112@media video {b{content:"\";/*" "*/}!} #test { color:lime }/*"}}/* */+++++--––---?––--–--
113 @media not tty { #test { color:lime }}------------–++----+
114 @media not tty { #test { color:lime; }}@media not all{} ------------–++----+
115 @media all and (color){ i{}} #test { color:lime } ++++++++++++-+++++++
116 @media not all { #dummy {color:red; } #test { color:lime }}-+--------++–---+---
117* html div {content:"\";}* html #test { color:lime }-++-+––––-––-----–--
118html.dummy body #test { color:lime } ------–-------------
119html * body #test { c\olor:lime } ------–---–-+-------
120html * body #test { c\olor:lime; } ------–-----+-------
121/*/*/html * body #test { color:lime } –+?----–-----+---+---
122*:not(*) #test { color:lime } ------–-------------
123 #test {voice-family: "\"}\""; voice-family:inherit; color:lime } –-–+-+++++++++++++++
124 #test {voice-family: "\"}\""; voice-family:inherit; color:lime; } –-–+-+++++++++++++++
125 #test { /*/*/ voice-family: "\"}\""; voice-family: inherit;color:lime;/* */ } --–+-+++++++++++++++
126* #test {voice-family: "\"}\""; voice-family:inherit; color:lime; } --–+-+++++++++++++++
127* #test {voice-family: "\"}\""; voice-family:inherit; color:lime; }i{/**/} ---+-+++++++++++++++
128#test {voice-family: "\"}\""; voice-family:inherit; color:lime; } i{=} –--+-+++++––++++++++
Trotz sorgfältiger Tests gilt grundsätzlich keine Gewähr.

Browser

Copyright © K.Lipfert Düsseldorf 2002-2007