frage zu {filter: @ tutorials.de: Tutorials, Forum & Hilfe

CSS Depp · 09.10.11 00:24

moin,

ich benutze hin und wieder den berühmten microsoftschen {filter: (d.h. also CSS 2, nicht den komplizierten DX kram), und da muss man dann natürlich darauf achten, dass man nur dinge verwendet, für die es auch analog etwas für mac und linux gibt.

hier mal ein beispiel:

HTML-Code:

<html>

<head>

<style type="text/css">

[COLOR="red"].klasse {
filter:alpha(opacity=40); [COLOR="gray"]<!--für IE-->[/COLOR]
-moz-opacity: 0.40; [COLOR="gray"]<!--für mozilla-->[/COLOR]
-khtml-opacity: 0.40; [COLOR="gray"]<!--für KDE-->[/COLOR]
opacity: 0.40; [COLOR="gray"]<!--für safari-->[/COLOR]
-webkit-transition: all 0.5s ease-out; [COLOR="gray"]<!--das funktioniert merkwürdiger weise auch in safari ganz prima-->[/COLOR]
}

.klasse:hover {
filter:alpha(opacity=100); 
-moz-opacity: 1; 
-khtml-opacity: 1;
 opacity: 1;
}[/COLOR]

</style>

<body>

<a href="http://www.beispielseite.de" [COLOR="#ff8c00"]class="klasse"[/COLOR]>
<img src="beispielbild.png" border="0" width="48" height="48" />
</a>

<a href="http://www.beispielseite.de" [COLOR="#ff8c00"]style="filter: alpha(opacity=40); -moz-opacity: 0.40; -khtml-opacity: 0.40; opacity: 0.1"[/COLOR]>
<img src="beispielbild.png" border="0" width="48" height="48"/>
</a>

</body>

</html>

dazu habe ich jetzt zwei fragen.

1.) wie bekomme ich das inline? das obere funktioniert zu 100% wenn ich es in des tag direkt schreibe, aber was mache ich mit dem .klasse:hover ?

2.)
die puristen unter euch werden jetzt laut aufstöhnen, aber gibt es irgendwo eine übersicht über solche IE-only oder sonstwas-only geschichten, wo man die KDE und mac versionen auf einen überblick hat?

ich meine (ich stell mich jetzt mal extra blöd) man schaut auf selfhtml unter filter und selfhtml sagt das ist nur für IE. es "stimmt" aber nicht, es geht auch für KDE und OSX ... nur halt nicht offiziell, so dass man nirgends nachschauen kann was es so gibt, wie das heissen muss, bzw. was geht und was nicht.

oder doch?

javaDeveloper2011 · 09.10.11 16:42

Hallo,

es geht um ANDERE BROWSER nicht um ANDRER BETRIEBSSYSTEME!
Den ganzen Filter-Kram sollte man nur verwenden um Internet Explorer zur Darstellung von Transperenz zu bringen!

zu 1): NICHT MÖGLICH!

Gruß javaDeveloper2011

threadi · 09.10.11 17:52

Zitat von CSS Depp

.klasse {
filter:alpha(opacity=40); 
-moz-opacity: 0.40; 
-khtml-opacity: 0.40; 
opacity: 0.40; 
-webkit-transition: all 0.5s ease-out; 
}

Für IE - stimmt.
Für Mozilla - stimmt.
Für KDE - stimmt nicht. Damit spricht man Browser auf KHTML-Basis an. Wenn Du nicht weißt was KHTML ist: http://en.wikipedia.org/wiki/KHTML - wird meist von Konqueror unter der Oberfläche KDE verwendet, aber auch von einzelnen anderen.
Für Safari - stimmt auch nicht. Diese Eigenschaft wird mittlerweile von allen Browser in den aktuellen Version interpretiert. Die o.g. Schreibweisen für Mozilla und KHTML braucht man folglich nur um ältere Varianten dieser Browser zu berücksichtigen (Firefox 1.0 z.B.). Einzig der IE unterstützt das auch im IE9 nicht.
webkit-transition spricht wie der Name schon sagt Browser auf WebKit-Basis an. Wenn Du nicht weiß was WebKit ist: http://en.wikipedia.org/wiki/WebKit - Safari basiert darauf, ebenso wie z.B. Google Chrome.

2.)
die puristen unter euch werden jetzt laut aufstöhnen, aber gibt es irgendwo eine übersicht über solche IE-only oder sonstwas-only geschichten, wo man die KDE und mac versionen auf einen überblick hat?

Ja, es gibt Übersichten darüber was beim IE alles anders läuft als in anderen Browsern. Suche einfach mal nach "css IE hacks". Und vergiss diese Einteilung in Betriebssysteme und grafische Oberflächen (KDE etc.). Das spielt für Browser in Bezug auf die Darstellung von Webseiten keinerlei Rolle.

CSS Depp · 09.10.11 23:22

Zitat von threadi

Für Safari - stimmt auch nicht. Diese Eigenschaft wird mittlerweile von allen Browser in den aktuellen Version interpretiert.

aha, gut. mein fehler ist wohl, dass ich einfach nur über macs verfüge zum testen.

dass das webkit ding nur mit webkit geht ist klar - das faden ist ja auch nur ein gimmick,
darauf kann man notfalls verzichten.

insofern finde ich es aber recht kompliziert, dass man schon alleine "für OSX" (ich nenne
es hier noch einmal so trotz deines hinweises dass ich das vergessen soll) sowohl auf safari
als auch auf webkit achten muss.
ich würde mir wünschen dass das mit d en developer tool irgendwie schon gecheckt werden
könnte (und nicht erst mit dreamweaver oder irgendwelchen blöden websites)

was die übersichten angeht: ich meinte eine, auf der man alle browser sieht, und
abweichende synthax die aber das gleich macht nebeneinander stehen.

javaDeveloper2011 · 10.10.11 17:08

Hi nochmal,

sowas direkt hab ich noch nicht gefunden,
zum einen gäbe es da eine Sammlung von anpassungen für IE (inklusive 6) in meiner Signatur,
außerdem: einen Überblick zur Browser-Unterstützung bei allen Selektoren und Eigenschaften und PIE, eine HTC-Datei die IE6 weitgehend zur Unterstützung von CSS3 bringt!

Gruß

CSS Depp · 31.10.11 02:49

Zitat von threadi

Ja, es gibt Übersichten darüber was beim IE alles anders läuft als in anderen Browsern.

nagut, erst mal dankeschön an alle.

aber ich versuch diese eine frage, die mit den verschiedenen filter geschichten zu tun hat, nochmal rückwärts:

warum finde ich z.b. bei selfhtml.org "opacity: " überhaupt nicht? sondern NUR die microsoft-only filter?

dass man "-webkit-transition:" nicht in einer gegerischen übersicht findet, leuchtet mir ein, aber warum "opacity:", wenn das doch heutzutage fast überall geht?

Dr Dau · 31.10.11 07:25

Hallo!

Zitat von CSS Depp

warum finde ich z.b. bei selfhtml.org "opacity: " überhaupt nicht? sondern NUR die microsoft-only filter?

Falsche Suchbegriffe?
http://aktuell.de.selfhtml.org/artik...blendungen.htm
http://aktuell.de.selfhtml.org/artik...iltransparenz/

Zitat von CSS Depp

dass man "-webkit-transition:" nicht in einer gegerischen übersicht findet, leuchtet mir ein, aber warum "opacity:", wenn das doch heutzutage fast überall geht?

Möglicherweise liegt es schlicht und einfach daran dass opacity: erst Bestandteil von CSS3 sein soll?
Aktuell ist derzeit allerdings nur CSS2 (bzw. als Empfehlung CSS2.1).
Somit wäre es theoretisch auch möglich dass opacity: sich noch ändert oder schlimmstenfalls aus CSS3 wieder rausfliegt.

Gruss Dr Dau

PS: und bringe mal bitte Deine Shift-Taste zur Reparatur (siehe Netiquette Punkt 15).

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

Newbie SQL Frage: Filter wenn ...

Filter Frage

Frage zum Opacity Filter

Probleme mit Filter>>Rendering-Filter>>Beleuchtungseffekte

frage;filter in Photoshop6

E-Mail:

Abonnieren Abbestellen