/ Forside / Teknologi / Udvikling / Java Scripts / Nyhedsindlæg
Login
Glemt dit kodeord?
Brugernavn

Kodeord


Reklame
Top 10 brugere
Java Scripts
#NavnPoint
molokyle 5410
Klaudi 2799
smorch 2439
kim 1360
Harlekin 1134
bentjuul 984
gibson 800
severino 695
Random 675
10  konsulent.. 626
Check CSS-egenskaber via javascript
Fra : Rune Jensen


Dato : 05-04-10 00:09

Rimeligt nemt spørgsmål, forhåbentlig.

Jeg overvejer en test omkring CSS3-egenskaber. Her ville jeg sætte disse
egenskaber - f.eks. border-radius - og så teste via JS, om der kastes en
fejl, hvis egenskaben ikke forstås.

Men kan man det?


MVH
Rune Jensen

 
 
Stig Johansen (05-04-2010)
Kommentar
Fra : Stig Johansen


Dato : 05-04-10 00:26

Rune Jensen wrote:

> Men kan man det?
Ja - eller måske, afhgængig af hvad du vil opnå.

Man kan bruge try/catch eller if (something==null)..

Men som alle siger: kom med et link, så vi kan se hvad du mener.

--
Med venlig hilsen
Stig Johansen

Rune Jensen (05-04-2010)
Kommentar
Fra : Rune Jensen


Dato : 05-04-10 00:40

Den 05-04-2010 01:25, Stig Johansen skrev:
> Rune Jensen wrote:
>
>> Men kan man det?
> Ja - eller måske, afhgængig af hvad du vil opnå.
>
> Man kan bruge try/catch eller if (something==null)..
>
> Men som alle siger: kom med et link, så vi kan se hvad du mener.

Åh, jeg har såmænd ikke noget link, men jeg forestillede mig noget
pseudokode a la:

try{
   document.getelementbyID("box").style='border-radius: #999 3px 3px'
   catch(e){
      alert("Egenskaben border-radius forstås ikke af din browser/version")
   }
}

HTML:

<div id="box">Rounded corners</div>


I sidste ende ville jeg gerne tjekke minimum 3 egenskaber samtidig,
border-radius, box-shadow og multiple backgrounds.

Hvis man kan hente browser samt versionen via JS, ville det være en
hjælp, men ikke livsnødvendigt.

Men er ovenstående så gangbart?


MVH
Rune Jensen

Stig Johansen (05-04-2010)
Kommentar
Fra : Stig Johansen


Dato : 05-04-10 01:05

Rune Jensen wrote:

> Åh, jeg har såmænd ikke noget link, men jeg forestillede mig noget
> pseudokode a la:
>
> try{
> document.getelementbyID("box").style='border-radius: #999 3px 3px'

Du skal nummeret længere ned i DOM'en.
Umiddebart ser dert ud som om den hedder MozBorderRadius i FF.

> I sidste ende ville jeg gerne tjekke minimum 3 egenskaber samtidig,
> border-radius, box-shadow og multiple backgrounds.

Her skal du nok lave en slags tæller, binært, hvor hver test tildeles
1,2,4,8... osv, og sammensætte meldingen efterfølgende.

> Hvis man kan hente browser samt versionen via JS, ville det være en
> hjælp, men ikke livsnødvendigt.

Det kan man godt, hedder vistnok noget med navigator.

> Men er ovenstående så gangbart?

Det finder vi ud af når du har lavet en (test)side.

--
Med venlig hilsen
Stig Johansen

Rune Jensen (05-04-2010)
Kommentar
Fra : Rune Jensen


Dato : 05-04-10 01:18

Den 05-04-2010 02:05, Stig Johansen skrev:
> Rune Jensen wrote:
>
>> Åh, jeg har såmænd ikke noget link, men jeg forestillede mig noget
>> pseudokode a la:
>>
>> try{
>> document.getelementbyID("box").style='border-radius: #999 3px 3px'
>
> Du skal nummeret længere ned i DOM'en.
> Umiddebart ser dert ud som om den hedder MozBorderRadius i FF.

Lyder godt, bortset fra, jeg netop vil teste på ikke-vendor-specific
egenskaber. Så -moz og -webkit og -o skal ikke med i første omgang.

Der er også lige det, at jeg vil afprøve selve CSSen, ikke
Javascriptudgaven, om muligt. Men det er det måske ikke udfra ovenstående.

I Javascript hedder det vel så BorderRadius. Kan man lave en
document-write i stedet, så man direkte skriver CSSen?

F.eks.:

document.write "<div style='border-radius: 3px 3px
#333'>Border-radius</div>"

>> Men er ovenstående så gangbart?
>
> Det finder vi ud af når du har lavet en (test)side.

OK, jeg sætter en side op, og vender tilbage.


MVH
Rune Jensen

Lasse Reichstein Nie~ (05-04-2010)
Kommentar
Fra : Lasse Reichstein Nie~


Dato : 05-04-10 01:18

Rune Jensen <runeofdenmark@gmail.com> writes:

> Rimeligt nemt spørgsmål, forhåbentlig.
>
> Jeg overvejer en test omkring CSS3-egenskaber. Her ville jeg sætte
> disse egenskaber - f.eks. border-radius - og så teste via JS, om der
> kastes en fejl, hvis egenskaben ikke forstås.
>
> Men kan man det?

Nej. Det giver ikke anledning til en exception at forsøge at sætte en
ukendt egenskab på et style-objekt, så der er ikke noget at fanger.
Der sker bare ikke noget.

Et bedre forsøg ville måske være at forsøge at sætte egenskaben,
og så teste om det slår igennem i computed style på elementet
(dog ikke noget jeg har prøvet i praksis),

/L
--
Lasse Reichstein Holst Nielsen
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'

Rune Jensen (05-04-2010)
Kommentar
Fra : Rune Jensen


Dato : 05-04-10 01:21

Den 05-04-2010 02:18, Lasse Reichstein Nielsen skrev:
>
> Et bedre forsøg ville måske være at forsøge at sætte egenskaben,
> og så teste om det slår igennem i computed style på elementet
> (dog ikke noget jeg har prøvet i praksis),

Du mener, man sætter border-radius, derefter tjekker man om egenskaben
har de værdier, man har sat?

Jeg må lige lave nogle forsøg med det. Det bør kunne laves med ren CSS
til selve egenskaberne uden om JS.


MVH
Rune Jensen

Lasse Reichstein Nie~ (05-04-2010)
Kommentar
Fra : Lasse Reichstein Nie~


Dato : 05-04-10 03:34

Rune Jensen <runeofdenmark@gmail.com> writes:

> Den 05-04-2010 02:18, Lasse Reichstein Nielsen skrev:
> >
>> Et bedre forsøg ville måske være at forsøge at sætte egenskaben,
>> og så teste om det slår igennem i computed style på elementet
>> (dog ikke noget jeg har prøvet i praksis),
>
> Du mener, man sætter border-radius, derefter tjekker man om egenskaben
> har de værdier, man har sat?

Noget i den stil.
E.g.:

var elem = document.getElementById("something");
elem.style.borderRadius = 5;
// Måske kan man nøjes med at tjekke at
// typeof elem.style.borderRadius == "string"
// hvilket fx er tilfældet i Opera, men ellers:

document.defaultView.getComputedStyle(elem,"").borderRadius == "5";

Men det ser ikke ud til at virke! I Opera (10.51) viser borderRadius
sig ikke i computed-style.

En anden test man kan prøve, er at se om egenskaben findes på
style-objektet og har den rigtige type, i.e.:
typeof elem.style.borderRadius == "string"
Hvis border-radius ikke er understøttet, så skulle typen være undefined,
hvis den er understøttet men ikke er sat, så er typen string (nærmere
bestemt den tomme streng).

Men det er noget der skal testes i flere browsere for at se om de gør
det på samme måde.

/L
--
Lasse Reichstein Holst Nielsen
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'

Rune Jensen (05-04-2010)
Kommentar
Fra : Rune Jensen


Dato : 05-04-10 04:23

Den 05-04-2010 04:34, Lasse Reichstein Nielsen skrev:
> Rune Jensen<runeofdenmark@gmail.com> writes:
>
>> Den 05-04-2010 02:18, Lasse Reichstein Nielsen skrev:
>> >
>>> Et bedre forsøg ville måske være at forsøge at sætte egenskaben,
>>> og så teste om det slår igennem i computed style på elementet
>>> (dog ikke noget jeg har prøvet i praksis),
>>
>> Du mener, man sætter border-radius, derefter tjekker man om egenskaben
>> har de værdier, man har sat?
>
> Noget i den stil.
> E.g.:
>
> var elem = document.getElementById("something");
> elem.style.borderRadius = 5;
> // Måske kan man nøjes med at tjekke at
> // typeof elem.style.borderRadius == "string"
> // hvilket fx er tilfældet i Opera, men ellers:
>
> document.defaultView.getComputedStyle(elem,"").borderRadius == "5";
>
> Men det ser ikke ud til at virke! I Opera (10.51) viser borderRadius
> sig ikke i computed-style.
>
> En anden test man kan prøve, er at se om egenskaben findes på
> style-objektet og har den rigtige type, i.e.:
> typeof elem.style.borderRadius == "string"
> Hvis border-radius ikke er understøttet, så skulle typen være undefined,
> hvis den er understøttet men ikke er sat, så er typen string (nærmere
> bestemt den tomme streng).
>
> Men det er noget der skal testes i flere browsere for at se om de gør
> det på samme måde.

OK, jeg må indrømme, jeg har snydt som bare...

Men her er en prototype, hvor man kan få info om understøttelse ved klik
på kasserne:

http://www.webdesigngruppen.dk/designteknik/eksempler/css3_test.asp

Jeg har brugt dette JS-library:

http://www.netzgesta.de/dev/building_blocks/supports.html


MVH
Rune Jensen

Jens Peter Karlsen (05-04-2010)
Kommentar
Fra : Jens Peter Karlsen


Dato : 05-04-10 18:14

De øverste giver forventet resultat i IE9 beta. Den sidste burde melde
fejl men det er ikke tilfældet.

Regards Jens Peter Karlsen.

On Mon, 05 Apr 2010 05:22:53 +0200, Rune Jensen
<runeofdenmark@gmail.com> wrote:

>Men her er en prototype, hvor man kan få info om understøttelse ved klik
>på kasserne:

Rune Jensen (05-04-2010)
Kommentar
Fra : Rune Jensen


Dato : 05-04-10 18:46

Den 05-04-2010 19:14, Jens Peter Karlsen skrev:
> De øverste giver forventet resultat i IE9 beta. Den sidste burde melde
> fejl men det er ikke tilfældet.
>
> Regards Jens Peter Karlsen.
>
> On Mon, 05 Apr 2010 05:22:53 +0200, Rune Jensen
> <runeofdenmark@gmail.com> wrote:
>
>> Men her er en prototype, hvor man kan få info om understøttelse ved klik
>> på kasserne:

IE giver ikke fejl, tror jeg, fordi den jo understøttet background og
background-image, men bare ikke i udvidet version.

Jeg må vel finde på noget andet så. Det er bare nærliggende at bruge JS
til det.


MVH
Rune Jensen

Jens Peter Karlsen (05-04-2010)
Kommentar
Fra : Jens Peter Karlsen


Dato : 05-04-10 18:51

Ok nærmere eftersyn viser at den checker om url er supporteret, så det
kan ikke bruges til at checke om mere end et baggrundsbillede støttes
da url i sig selv har været støttet længe.

Regards Jens Peter Karlsen.

On Mon, 05 Apr 2010 19:14:00 +0200, Jens Peter Karlsen
<jpkarlsen@mvps.org> wrote:

>De øverste giver forventet resultat i IE9 beta. Den sidste burde melde
>fejl men det er ikke tilfældet.
>
>Regards Jens Peter Karlsen.
>
>On Mon, 05 Apr 2010 05:22:53 +0200, Rune Jensen
><runeofdenmark@gmail.com> wrote:
>
>>Men her er en prototype, hvor man kan få info om understøttelse ved klik
>>på kasserne:

Peter Farsinsen (05-04-2010)
Kommentar
Fra : Peter Farsinsen


Dato : 05-04-10 21:59

Rune Jensen wrote:
> Rimeligt nemt spørgsmål, forhåbentlig.
>
> Jeg overvejer en test omkring CSS3-egenskaber. Her ville jeg sætte disse
> egenskaber - f.eks. border-radius - og så teste via JS, om der kastes en
> fejl, hvis egenskaben ikke forstås.
>
> Men kan man det?

Har du set modernizr.com?

--
Peter Farsinsen
peter@farsinsen.dk


Rune Jensen (05-04-2010)
Kommentar
Fra : Rune Jensen


Dato : 05-04-10 23:09

Den 05-04-2010 22:59, Peter Farsinsen skrev:

> Har du set modernizr.com?

Den ser bestemt interessant ud. Kræver dog nok lidt læsning, for
syntakserne.

Det lader til at være et (for) stort arbejde at kode JSen selv, og den
anden library jeg havde fundet, den var desværre ikke helt 100% nøjagtig.


MVH
Rune Jensen

Søg
Reklame
Statistik
Spørgsmål : 177558
Tips : 31968
Nyheder : 719565
Indlæg : 6408924
Brugere : 218888

Månedens bedste
Årets bedste
Sidste års bedste