|
| Rounded corners Fra : Rune Jensen |
Dato : 31-03-10 00:55 |
|
Ikke nogen hemmelighed, jeg gerne vil have CSS3 hurtigt, og nu er Opera
tilsyneladende endelig blevet enig med de andre om rounded corners i den
nye Opera 10.5.
Tjek denne side, som laver et Opera logo alene ved hjælp af CSS og en
lidt speciel udgave af rounded corners. Det er ret imponerende og ganske
flot, omend det er en del HTML-kode, der skal til. IE vil jeg ikke sige
noget om, andet end at det graderer, men er ufatteligt grimt.
http://desandro.com/articles/opera-logo-css/
Man lægger mærke til, at Opera bruger den korrekte ikke vendor-specifik
udgave, og det betyder jo så, at Opera tror på det. Det kan igen kun
betyde, at de andre følger efter snarest muligt, og fjerner det
vendor-specifikke... må man håbe.
Opera understøtter iøvrigt også box-shadow helt efter bogen, så den må
de også efterhånden være enige om.
Hvis man tjekker siden i en rigtig browser, vil man også se eksempler
på, at text-shadow understøttes, også direkte, men den har de været
enige om længe.
MVH
Rune Jensen
| |
Jens Peter Karlsen (31-03-2010)
| Kommentar Fra : Jens Peter Karlsen |
Dato : 31-03-10 10:40 |
|
Virker også fint i IE9 beta.
Regards Jens Peter Karlsen.
On Wed, 31 Mar 2010 01:54:40 +0200, Rune Jensen
<runeofdenmark@gmail.com> wrote:
>Tjek denne side, som laver et Opera logo alene ved hjælp af CSS og en
>lidt speciel udgave af rounded corners. Det er ret imponerende og ganske
>flot, omend det er en del HTML-kode, der skal til. IE vil jeg ikke sige
>noget om, andet end at det graderer, men er ufatteligt grimt.
| |
Rune Jensen (31-03-2010)
| Kommentar Fra : Rune Jensen |
Dato : 31-03-10 10:58 |
|
Den 31-03-2010 11:40, Jens Peter Karlsen skrev:
> Virker også fint i IE9 beta.
Er det med native rounded corners, altså som det står i standarden,
eller vendor-specific?
Hvis man vil rode med disse nye egenskaber, så er det en god politik at
sætte de vendor-specifikke som -webkit og -moz ovenover den CSS3-valide
egenskab, da vendor-specifikke egenskaber er eksperimentelle, og man
ønsker at bruge den korrekte, når de engang går over til den.
Jeg kan anbefale, at man kigger på denne CSS sandbox:
http://westciv.com/tools/index.html
her kan man lege sig frem og få CSSen, som den skal se ud pt. hvis det
skal understøttes af så mange browsere som muligt.
Jeg har kigget på transformering her i går aftes:
http://westciv.com/tools/transforms/index.html
den har virkelig muligheder, understøttes af Webkit, Opera 10.5 samt FF3.6.
MVH
Rune Jensen
| |
Stig Johansen (31-03-2010)
| Kommentar Fra : Stig Johansen |
Dato : 31-03-10 12:17 |
|
Rune Jensen wrote:
> Den 31-03-2010 11:40, Jens Peter Karlsen skrev:
>> Virker også fint i IE9 beta.
>
> Er det med native rounded corners, altså som det står i standarden,
> eller vendor-specific?
Så længe IE9 ikke tilbydes til XP brugere, skal man nok dæmpe optimismen.
XP er trods alt supporteret til 2014, så det er nok ikke i overmorgen man
kan sige f*ck IE8-
--
Med venlig hilsen
Stig Johansen
| |
Rune Jensen (31-03-2010)
| Kommentar Fra : Rune Jensen |
Dato : 31-03-10 12:41 |
|
Den 31-03-2010 13:16, Stig Johansen skrev:
> Rune Jensen wrote:
>
>> Den 31-03-2010 11:40, Jens Peter Karlsen skrev:
>>> Virker også fint i IE9 beta.
>>
>> Er det med native rounded corners, altså som det står i standarden,
>> eller vendor-specific?
>
> Så længe IE9 ikke tilbydes til XP brugere, skal man nok dæmpe optimismen.
> XP er trods alt supporteret til 2014, så det er nok ikke i overmorgen man
> kan sige f*ck IE8-
Optimisme og optimisme...
Jeg er for så vidt ligeglad med hvilken browser folk bruger, men klart
at jeg støtter dem, som støtter udviklingen, den udvikling jeg vil, og
jeg er imod dem, som forhaler den udvikling.
Jeg forsøger derfor ved at vise alle de nye muligheder, at få folk til
at overveje, om det ikke er en god idé at skifte browser, hvis man gerne
vil følge med tiden, og få glæde af disse muligheder.
Der er jo også sikkerhedshullerne i IE at tænke på, ikk. Den er slet
ikke så sikker som jeg (og andre) troede. De lapper huller i den
konstant, sidste gang var vidst i går? Og så faldt den jo også på
Pwn2own, hvor den blev nakket. Det er ikke så godt for IE, faktisk
rigtigt skidt.
MVH
Rune Jensen
| |
Rune Jensen (31-03-2010)
| Kommentar Fra : Rune Jensen |
Dato : 31-03-10 13:13 |
|
Den 31-03-2010 13:40, Rune Jensen skrev:
> Der er jo også sikkerhedshullerne i IE at tænke på, ikk. Den er slet
> ikke så sikker som jeg (og andre) troede. De lapper huller i den
> konstant, sidste gang var vidst i går?
Ikke et hvilketsomhelst sikkerhedshul, men et som havde effekt nå alle
versioner fra IE5 og op, og som blev brugt i zero-day exploits.
http://www.computerworld.com/s/article/9174336/Microsoft_to_patch_IE_zero_day_with_emergency_fix_Tuesday?taxonomyId=85
Opera har geniale sikkerhedsindstillinger, så man kan f.eks. forbyde
Flash, JS mm. på sideniveau, og da meget af det initieres med JS eller
Flash (gør ikke alle exploits det?), så kan man indstille den browser
til næsten 100% sikkerhed. Opera forstår ikke ActiveX, så der kan ikke
opstå sikkerhedshuller den vej.
Opera er også meget langt fremme med implemeteringen af CSS3, hvilket
man kan se bl.a. af, de allerede har adopteret den reelle CSS3 rounded
corners, så den kan anbefales. Faktisk har jeg oplevet fejl i Firefox og
Webkit på :after, som Opera viste perfekt. Det skal dog ikke ligge
Webkit og Mozilla til last, det skal nok komme.
MVH
Rune Jensen
| |
Philip Nunnegaard (31-03-2010)
| Kommentar Fra : Philip Nunnegaard |
Dato : 31-03-10 12:55 |
|
Stig Johansen skrev:
> Så længe IE9 ikke tilbydes til XP brugere, skal man nok dæmpe optimismen.
> XP er trods alt supporteret til 2014, så det er nok ikke i overmorgen man
> kan sige f*ck IE8-
På den anden side, så er det omkring 40% af mine brugere der bruger FF,
Safari, Opera eller Google Chrome.
Så hvis jeg kan give disse 40% noget ekstra, uden at der går noget fra
de 60% IE-brugere (alternativet er at jeg slet ikke laver det), gør jeg
det nu bare.
Så for mig er det nye her, at Opera understøtter det - og det i sin
native form, og at det måske kan give udsigt til at Gecko- og
Webkit-browserne vil gå væk fra den browserspecifikke css-kode.
| |
Rune Jensen (31-03-2010)
| Kommentar Fra : Rune Jensen |
Dato : 31-03-10 13:33 |
|
Den 31-03-2010 13:54, Philip Nunnegaard skrev:
> Stig Johansen skrev:
>
>> Så længe IE9 ikke tilbydes til XP brugere, skal man nok dæmpe optimismen.
>> XP er trods alt supporteret til 2014, så det er nok ikke i overmorgen man
>> kan sige f*ck IE8-
>
> På den anden side, så er det omkring 40% af mine brugere der bruger FF,
> Safari, Opera eller Google Chrome.
> Så hvis jeg kan give disse 40% noget ekstra, uden at der går noget fra
> de 60% IE-brugere (alternativet er at jeg slet ikke laver det), gør jeg
> det nu bare.
Jeg er selv lidt i tvivl om, hvor den grænse går. Men rounded corners
fylder næsten ikke noget at lægge ind, så der kan det sandsynligvis
betale sig, hvis det bare er 90 graders.. Samme med text-shadow, evt.
også box-shadow i simpel form. Det er bare hygge-effekter.
Det er straks værre med de mere kraftfulde effekter, hvor man skal lave
egentlige beregninger eller tests, så man bruger tid på det. Så skulle
det også gerne virke for flertallet (uden jeg ved hvor stort flertal).
MVH
Rune Jensen
| |
Philip Nunnegaard (31-03-2010)
| Kommentar Fra : Philip Nunnegaard |
Dato : 31-03-10 14:10 |
|
Rune Jensen skrev:
> Det er straks værre med de mere kraftfulde effekter, hvor man skal lave
> egentlige beregninger eller tests, så man bruger tid på det. Så skulle
> det også gerne virke for flertallet (uden jeg ved hvor stort flertal).
Men hvis browseren slet ikke forstår det, vil den vel heller ikke så
meget som begynde på at lave de beregninger.
| |
Rune Jensen (31-03-2010)
| Kommentar Fra : Rune Jensen |
Dato : 31-03-10 14:37 |
|
Den 31-03-2010 15:10, Philip Nunnegaard skrev:
> Rune Jensen skrev:
>
>> Det er straks værre med de mere kraftfulde effekter, hvor man skal
>> lave egentlige beregninger eller tests, så man bruger tid på det. Så
>> skulle det også gerne virke for flertallet (uden jeg ved hvor stort
>> flertal).
>
> Men hvis browseren slet ikke forstår det, vil den vel heller ikke så
> meget som begynde på at lave de beregninger.
Det kommer an på, hvor meget effekt, der mistes, for man kan med meget
lidt CSS ændre en hel sides udseende, og en fallback vil måske give et
helt andet indtryk.
Opera logoet vil i IE<9 ikke give mening uden man giver en forklaring
med, så det må ikke være betydningsbærende, hvad man risikerer at miste.
Men jeg vil så også sige, at %-delen, som forstår det har betydning
stadig, og jeg vil ikke lade IE standse udviklingen.
Om ikke andet, så kommer der vel en JS.kompatibilitetsscript, som der
var til IE7.
Jeg tror simpelthen ikke på, der er nogen vej tilbage nu fra CSS3 og
HTML5, så hver gang man støder på en forhindring som f.eks. IE8, vil man
forsøge at løse det med hacks, mere end at undgå de kommende standarder
for at hjælpe IE<9.
Det er jo fuldstændig samme udvikling som med IE6, der er ingen forskel.
Bortset fra, vi forhåbentlig har lært af dengang og ikke f.eks. stopper
<video> som vi stoppede PNG, fordi IE fattede hat.
MVH
Rune Jensen
| |
Philip Nunnegaard (31-03-2010)
| Kommentar Fra : Philip Nunnegaard |
Dato : 31-03-10 15:28 |
|
Rune Jensen skrev:
>> Men hvis browseren slet ikke forstår det, vil den vel heller ikke så
>> meget som begynde på at lave de beregninger.
>
> Det kommer an på, hvor meget effekt, der mistes, for man kan med meget
> lidt CSS ændre en hel sides udseende, og en fallback vil måske give et
> helt andet indtryk.
Jeg er ikke helt sikker på at vi taler om det samme, og tror at jeg må
have misforstået dig.
Min tanke var udelukkende unyttige beregninger (CPU-kraft) som blev startet.
Hvis browseren ikke forstår hvad den skal gøre, vil den jo normalt bare
springe videre til det næste den forstår. Jeg går ikke ud fra at den
overhovedet er klar over at den skal lave en beregning.
> Opera logoet vil i IE<9 ikke give mening uden man giver en forklaring
> med, så det må ikke være betydningsbærende, hvad man risikerer at miste.
Nu er det logo så også ret ekstremt.
Normalt taler vi jo bare om at en kasse får runde hjørner fremfor skarpe
hjørner. Ingen betydningsbærende ting her, kun "smukkesering".
> Men jeg vil så også sige, at %-delen, som forstår det har betydning
> stadig, og jeg vil ikke lade IE standse udviklingen.
Jeg har også planer om bare at køre på med CSS3, i det omfang de andre
browsere er med.
> Om ikke andet, så kommer der vel en JS.kompatibilitetsscript, som der
> var til IE7.
Også det vil jeg undlade i fremtiden, såfremt det ikke er absolut
nødvendigt.
Jeg går ud fra at du taler om dem man brugte til IE 6 for at få den til
at opføre sig som IE 7.
| |
Rune Jensen (31-03-2010)
| Kommentar Fra : Rune Jensen |
Dato : 31-03-10 15:49 |
|
Den 31-03-2010 16:28, Philip Nunnegaard skrev:
> Rune Jensen skrev:
> Min tanke var udelukkende unyttige beregninger (CPU-kraft) som blev
> startet.
> Hvis browseren ikke forstår hvad den skal gøre, vil den jo normalt bare
> springe videre til det næste den forstår. Jeg går ikke ud fra at den
> overhovedet er klar over at den skal lave en beregning.
Alle CSS3-egenskaber, som ikke er understøttet af browseren, skal denne
springe over. Det er vidst et krav til selve browseren (som der også er
standarder for).
Jeg ved så ikke om browserne så altid gør det - godt spørgsmål, egentlig.
<SNIP>
> Nu er det logo så også ret ekstremt.
> Normalt taler vi jo bare om at en kasse får runde hjørner fremfor skarpe
> hjørner. Ingen betydningsbærende ting her, kun "smukkesering".
Ja, men det er svært at svare på, når man ikke har rigtigt nogle live
eksempler, hvor det kan være nyttigt. Man er nødt til at prøve sig frem
i første omgang. Og så håber jeg virkelig på en CSSZengarden bare med CSS3.
>> Om ikke andet, så kommer der vel en JS.kompatibilitetsscript, som der
>> var til IE7.
>
> Også det vil jeg undlade i fremtiden, såfremt det ikke er absolut
> nødvendigt.
> Jeg går ud fra at du taler om dem man brugte til IE 6 for at få den til
> at opføre sig som IE 7.
Ja - og den eneste løsning, som var mulig for at kunne bruge PNG. Som af
samme grund ikke blev så populært. Så det er et dilemma.
Jeg kan godt se dit argument, og jeg er også af den mening, at JS ikke
bør bruges for at forbedre udseende, men funktionalitet. Men alligevel..
det er sgu nogle helt uanede muligheder man får, man kan virkelig
optimere sit design helt enormt (jeg er i gang med eksempler), og så er
det lidt frustrerende, at IE ikke vil lege med hele vejen.
....tag noget så simpelt som skygger og gennemsigtighed. Det kan laves
med box-shadow og RGBA - overhovedet ingen billeder indblandet, og bare
to små tilføjelser til egenskaberne. Det kan reducere DIVerne også.
MVH
Rune Jensen
| |
Rune Jensen (31-03-2010)
| Kommentar Fra : Rune Jensen |
Dato : 31-03-10 16:13 |
|
Den 31-03-2010 16:28, Philip Nunnegaard skrev:
> Rune Jensen skrev:
>
>>> Men hvis browseren slet ikke forstår det, vil den vel heller ikke så
>>> meget som begynde på at lave de beregninger.
>>
>> Det kommer an på, hvor meget effekt, der mistes, for man kan med meget
>> lidt CSS ændre en hel sides udseende, og en fallback vil måske give et
>> helt andet indtryk.
>
> Jeg er ikke helt sikker på at vi taler om det samme, og tror at jeg må
> have misforstået dig.
>
> Min tanke var udelukkende unyttige beregninger (CPU-kraft) som blev
> startet.
Som eksempel: Hver gang man sparer et billede, sparer man også et
round-trip til serveren. På min HOST f.eks., der er billeder ikke
GZIPped, så de fylder en del, som også skal hentes.
Hvis man kan kompensere for dette med CSS3, f.eks. box-shadow og RGBA,
kan det have en fordel i tid fordi der ikke behøves billeder og iøvrigt
færre DIVer, ligesom designet vil være langt lettere at vedligeholde
gennem CSS-filerne alene.
Men klart, at mere beregning kræver mere CPU-kraft. Så noget CSS3, kan
man sandsynligvis alligevel ikke bruge alle steder, og man skal nok
passe på med at plastre siden til med CSS3-effekter bare sådan "uden
videre".
MVH
Rune Jensen
| |
Stig Johansen (31-03-2010)
| Kommentar Fra : Stig Johansen |
Dato : 31-03-10 16:24 |
|
Rune Jensen wrote:
> På min HOST f.eks., der er billeder ikke
> GZIPped, så de fylder en del, som også skal hentes.
Billeder[1] er typisk komprimeret i forvejen, så en yderligere komprimering
giver ingen mening.
[1] .jpg, .gif, .png mfl.
--
Med venlig hilsen
Stig Johansen
| |
Rune Jensen (01-04-2010)
| Kommentar Fra : Rune Jensen |
Dato : 01-04-10 03:19 |
|
Den 31-03-2010 16:28, Philip Nunnegaard skrev:
> Jeg er ikke helt sikker på at vi taler om det samme, og tror at jeg må
> have misforstået dig.
>
> Min tanke var udelukkende unyttige beregninger (CPU-kraft) som blev
> startet.
Nåh, så fattede jeg det endelig ;)
Nej, jeg snakker om beregninger for webmasteren. Der findes værktøjer
(sandkasser), som kan automatisere udregninger af f.eks. gradienter, men
alligevel skal det jo testes også på det endelige layout.
Operalogoet er bl.a. lavet med hjælp fra dette værktøj:
http://westciv.com/tools/gradients/
....han har ikke siddet og lavet alt manuelt, og der er også et link til
det værktøj på hjemmesiden ;)
MVH
Rune Jensen
| |
Stig Johansen (01-04-2010)
| Kommentar Fra : Stig Johansen |
Dato : 01-04-10 12:27 |
|
Rune Jensen wrote:
> Nej, jeg snakker om beregninger for webmasteren. Der findes værktøjer
> (sandkasser), som kan automatisere udregninger af f.eks. gradienter, men
> alligevel skal det jo testes også på det endelige layout.
>
> Operalogoet er bl.a. lavet med hjælp fra dette værktøj:
> http://westciv.com/tools/gradients/
Hvis gradienter er et kardinalpunkt, skulle man hellere have forsøgt at
overtale MS til at implementere SVG for 10+ år siden.
Dette er en nyere beskrivelse, men jeg har brugt gradients før da.
< http://www.w3.org/TR/SVG11/pservers.html>
--
Med venlig hilsen
Stig Johansen
| |
Rune Jensen (02-04-2010)
| Kommentar Fra : Rune Jensen |
Dato : 02-04-10 22:58 |
|
Den 01-04-2010 13:26, Stig Johansen skrev:
> Rune Jensen wrote:
>
>> Nej, jeg snakker om beregninger for webmasteren. Der findes værktøjer
>> (sandkasser), som kan automatisere udregninger af f.eks. gradienter, men
>> alligevel skal det jo testes også på det endelige layout.
>>
>> Operalogoet er bl.a. lavet med hjælp fra dette værktøj:
>> http://westciv.com/tools/gradients/
>
> Hvis gradienter er et kardinalpunkt, skulle man hellere have forsøgt at
> overtale MS til at implementere SVG for 10+ år siden.
>
> Dette er en nyere beskrivelse, men jeg har brugt gradients før da.
> < http://www.w3.org/TR/SVG11/pservers.html>
Det er da rigtigt nok, men man kan jo ikke ændre deres beslutning.
Kan man via Conditional Comments teste for IE<9 og så evt. bede om,
brugeren downloader Adobes plug in? Sådan man ikke skal kode for meget
ekstra, mener jeg.
Ved godt det er noget hø, jeg har ikke den store tiltro til sikkerhed
hos Adobe, men jeg kan ikke lige se en anden løsning.
MVH
Rune Jensen
| |
Rune Jensen (31-03-2010)
| Kommentar Fra : Rune Jensen |
Dato : 31-03-10 15:26 |
|
Den 31-03-2010 15:10, Philip Nunnegaard skrev:
> Rune Jensen skrev:
>
>> Det er straks værre med de mere kraftfulde effekter, hvor man skal
>> lave egentlige beregninger eller tests, så man bruger tid på det. Så
>> skulle det også gerne virke for flertallet (uden jeg ved hvor stort
>> flertal).
>
> Men hvis browseren slet ikke forstår det, vil den vel heller ikke så
> meget som begynde på at lave de beregninger.
Prøv at se her:
http://www.webdesignerdepot.com/2009/08/5-css3-design-enhancements-that-you-can-use-today/
Det er en lille forklaring til, hvordan man får CSS3 til at gradere.
Men hovedpointen er, man skal bruge CSS (stadig) kun til pynt, ikke til
noget, som er betydningsbærende. Det har ikke noget med IE at gøre, men
er en fast best practise omkring styling, og altså noget man bør tage
højde for under alle omstændigheder.
Her er HTML5 nok et større problem end at få CSS3 indført, kunne jeg
forestille mig, for det er jo helt nye metoder at inddele selve
indholdet på.
PS: Måske der kommer sådan en side som CSSZengarden, som bare bruger
CSS3, så kan folk virkelig se, at der ER nogle fede muligheder her.
MVH
Rune Jensen
| |
Rune Jensen (31-03-2010)
| Kommentar Fra : Rune Jensen |
Dato : 31-03-10 17:22 |
|
Den 31-03-2010 11:58, Rune Jensen skrev:
> Den 31-03-2010 11:40, Jens Peter Karlsen skrev:
>> Virker også fint i IE9 beta.
>
> Er det med native rounded corners, altså som det står i standarden,
> eller vendor-specific?
Så vidt jeg forstår på deres testside, er det den reelle standard. I så
fald er der vidst ingen tvivl længere, om at den er fastsat?
Hvis så også box-shadox kommer ind i varmen, begynder der at ske noget.
MVH
Rune Jensen
| |
Jens Peter Karlsen (31-03-2010)
| Kommentar Fra : Jens Peter Karlsen |
Dato : 31-03-10 20:27 |
|
Det jeg ved støttes vendorspecifikke tags fra tredjepart ikke.
Regards Jens Peter Karlsen.
On Wed, 31 Mar 2010 11:58:05 +0200, Rune Jensen
<runeofdenmark@gmail.com> wrote:
>Den 31-03-2010 11:40, Jens Peter Karlsen skrev:
>> Virker også fint i IE9 beta.
>
>Er det med native rounded corners, altså som det står i standarden,
>eller vendor-specific?
| |
Rune Jensen (31-03-2010)
| Kommentar Fra : Rune Jensen |
Dato : 31-03-10 20:37 |
|
Den 31-03-2010 21:26, Jens Peter Karlsen skrev:
> Det jeg ved støttes vendorspecifikke tags fra tredjepart ikke.
Du mener vel, at IE9 understøtter rounded corners direkte, som det er
tiltænkt iflg. standarden, ligesom Opera 10.5.
Det er kun interessant fordi det fortæller, om en producent endelig har
godtaget standarden, og hvor enige de er om dette indbyrdes.
Selve egenskaben skal jo nok blive gennemført, men ovenstående kan måske
give et fingerpeg om hvornår det er forholdsvist sikkert at bruge den.
Hvis både IE og Opera er enige, så skal de andre nok følge trop, så
bliver der næppe ændret på den heller fra nu (men OK, man skal aldrig
sige aldrig - boksmodelling springs to mind).
MVH
Rune Jensen
| |
Rune Jensen (31-03-2010)
| Kommentar Fra : Rune Jensen |
Dato : 31-03-10 09:27 |
|
On 31 Mar., 17:24, Stig Johansen <wopr...@gmail.com> wrote:
> Rune Jensen wrote:
> > På min HOST f.eks., der er billeder ikke
> > GZIPped, så de fylder en del, som også skal hentes.
>
> Billeder[1] er typisk komprimeret i forvejen, så en yderligere komprimering
> giver ingen mening.
>
> [1] .jpg, .gif, .png mfl.
Æv, nej, du har helt ret...
Jeg må vidst læse op på noget af min viden, tror jeg ;)
MVH
Rune Jensen
| |
|
|