[js]Correcte manier om te checken voor CSS-features?

[Verwijderd]

Kan iemand mij vertellen wat de 'correcte' manier is om via javascript te checken voor ondersteuning van bepaalde CSS-features?

Ik weet dat je eenvoudig kan controleren of een object bepaalde properties/functies heeft. Maar in dit geval gaat het natuurlijk om een specifieke waarde van het style attribuut.

Een tijdje terug heb ik het volgende geschreven. Het werkt, maar het is natuurlijk verschrikkelijk:

HTML:

<div id="opacity_test" style="opacity: 0.5;"></div>

en:

JavaScript:

function supportOpacity()
{
    return (document.getElementById('opacity_test').style.opacity==0.5)
}

Weet iemand hier een nettere manier voor? Ik zoek me gek op google, maar ik kan niets vinden.

[ Voor 6% gewijzigd door Verwijderd op 28-07-2005 00:26 ]

[crisp]

Nee, daar zijn geen echte methoden voor.
Jouw geval werkt, maar enkel omdat je a) een inline style gebruikt, en b) browsers not-supported style attributen (horen te) negeren.
Wellicht dat je nog iets met styleSheets[].cssRules kan doen, maar browsersupport daarvoor is ook behoorlijk mager - IE heeft bijvoorbeeld al een afwijkende implementatie en Opera heeft het nog niet geimplementeerd. Zelfs dan is het ook nogal 'hackish'.

vwb het detecteren van opacity-support (wat dus CSS3 is) doe ik eigenlijk maar 1 enkele afvraging: namelijk of element.filters bestaat (IE) of niet. In het laatste geval gebruik ik gewoon het opacity style attribuut en browsers die dat nog niet supporten (zoals Opera) hebben dan gewoon pech. vendor-specific attributen (zoals -ktml-opacity of -moz-opacity) gebruik ik liever niet, en meestal is het ook geen halszaak of iets al dan niet semi-transparant is.

[Verwijderd]

Alleen is het in mijn geval iets meer dan 'pech'.

Ik wil bij bepaalde events namelijk een fade-out doen. Als dat dan niet wordt ondersteund, zit de gebruiker op niets te wachten. En dat wil ik dus voorkomen.

Het is bijvoorbeeld erg lullig als je als gebruiker op een link klikt, en er gebeurt eerst een seconde niets, voordat de nieuwe pagina gaat laden.

Ik gebruik trouwens alleen voor dat element een inline style, omdat het anders dus niet werkt

[ Voor 14% gewijzigd door Verwijderd op 28-07-2005 01:12 ]

[disjfa]

Een fade out kan ook door iets anders dan alleen het opacity element in css. Aangezien opacity niet door elke browser ondersteund word

Verder zodra je iets in javascript hebt geset kan je kijken wat erin staat. Een hadige manier is een algemene variabele voor als deze geset is in de css of javascript tegen een versie die je erbij wilt hebben. Als hij normaal of niet geset is de fade gebruiken en anders terug zetten naar de normale waarde.

[Verwijderd]

Hoe zou je dan een fade-out willen maken? Voorzover ik weet is de enige geldige manier via de CSS opacity rule.

En ik ben bekend met js en variabelen overigens. Een soort van gevorderde noob dus

[disjfa]

Niet de opacity Je kan daarintegen wel met de kleuren spelen. Een achtergrondkleur is meestal verschillend met een voorgrondkleur en als je deze mbv rgb of hex waardes laat overlopen kan je een fade faken.

De keuze is geheel aan jouw wat je wilt doen

[Verwijderd]

Klinkt ranzig. Ik wil het juist minder ranzig maken.

Als een browser het niet ondersteunt is dat dus prima, maar ik wil daar in mijn script dus wel goed mee omgaan.

Daarnaast moeten er bijvoorbeeld ook plaatjes gemorphed worden, en dat lijkt me vrij onmogelijk door met achtergrondkleurtjes te spelen.

[crisp]

Dit lijkt te werken:

JavaScript:

function supportsOpacity()
{
    var foo = document.createElement('div');
    foo.setAttribute('style', 'opacity:0.2');
    var type = typeof foo.style.opacity;
    foo = null;
    return type != 'undefined';
}

het blijft ranzig though...

[Verwijderd]

crisp schreef op donderdag 28 juli 2005 @ 01:38:
Dit lijkt te werken:

JavaScript:

function supportsOpacity()
{
    var foo = document.createElement('div');
    foo.setAttribute('style', 'opacity:0.2');
    var type = typeof foo.style.opacity;
    foo = null;
    return type != 'undefined';
}

het blijft ranzig though...

Het is in ieder geval netter dan wat ik zelf had bedacht. Hiermee hoef ik in ieder geval geen rotzooi in mijn schone xhtml document te stoppen.

Het enige waar ik dan natuurlijk nog mee zit is het directe benaderen van het style object. Dat hoort natuurlijk eigenlijk via getAttribute. Maar goed, ik denk dat wat ik wil gewoon niet zo rechtstreeks bestaat.

i.i.g. bedankt. Dit is al een hele verbetering.