Runde hjørner i CSS fungerer kun i Firefox, hvordan løse dette?

[Keiseren av Grønland]

Jeg setter opp et forum nå, hvor jeg bruker følgende kode til å lage hjørner på bokser runde:

-moz-border-radius-bottomleft:6px;
-moz-border-radius-bottomright:6px;
-moz-border-radius-topleft:6px;
-moz-border-radius-topright:6px;

 

Dette fungerer nesten ekslusivt i Firefox, som leser disse kodene til alle bokser med denne koden.

 

Internet Explorer leser den ikke i det hele tatt, noe jeg synes er rart.

 

Safari, på Macbooken min, leser koden kun ett sted, og det er på "Svar"-boksen i forumet, men ingen andre steder, til tross for at koden er helt lik overalt.

 

Er det noen måte jeg kan få de andre nettleserne til å gjenkjenne denne koden, slik at forumet mitt ser kult ut i dem også?

[Hole]

Dette er CSS3, og det er ikke ferdig enda. Derfor støtter ikke alle nettlesere det like bra.

[PHPdude]

Du ser det på "-moz-"-prefixen. Det er den Mozilla bruker når de skal prøve støtte standarder som ikke er stabile/ferdig ennå. Mozilla har en rekke elementer de støtter med "-moz-"-prefix. Det samme gjelder for WebKit (Safari) med "-webkit-" og IE med "-ms-" og Opera med "-o-.

 

Det kommer altså aldri til å bli noen andre nettlesere enn Firefox som støtter -moz-border-radius. Det "ekte" elementet som kommer til å bli støttet av de fleste nettleserne etterhvert er border-radius.

 

WebKit har en tilsvarende eksperimentell støtte som Mozilla, så for Safari og andre WebKit-baserte nettlesere kan du bruke -webkit-border-radius.

 

-moz-border-radius:6px; /* For Mozilla */
-webkit-border-radius:6px; /* For WebKit */
border-radius:6px; /* For nettlesere som kommer til å støtte den ferdige standarden */

[Keiseren av Grønland]

Oi, interessant. Visste ikke noe om dette i det hele tatt jeg.

Når kan jeg ta i bruk CSS3 da? Når er det ferdig?

 

Kan jeg bare erstatte kodene med "border-radius" da?

 

Blir litt kjipt å måtte huske på dette. Er det noe script eller program som kan gjøre om alle slike testkoder til CSS3 når det er ferdig?

-

Nå kom jeg på noe - kan jeg sette inn begge kodene?

Mozilla-koden og "border-radius" ? Uten at det blir konflikt. Så er jeg sikret? Det er vel bare et spørsmål om tid før alle nettleserne støtter disse.

Endret 13. august 2009 av Ramius

[PHPdude]

Du kan absolutt sette inn alle ja. Det siste kode-utdraget mitt fra forrige post er fullt fungerende.

 

Angående CSS3 så er ikke det en standard, men en rekke forskjellige moduler, som hver utvikles for seg, og som tilsammen går under "kallenavnet" CSS3.

De forskjellige modulene er i varierende grad ferdig. Noen moduler er "Candidate Recommendation" (så godt som ferdig), mens andre moduler kun er "Working Draft" (skisse).

Flere av CSS3-modulene er allerede fullt støttet av både Firefox, Safari og Opera.

 

Full oversikt over hvilke moduler som utgjør "CSS3" og deres status finnes her: http://www.w3.org/Style/CSS/current-work

 

Alt det som går inn under "CSS3" kommer til å ta lang tid før er ferdig, men plukker man ut enkeltdeler så er svaret på når en kan ta det i bruk ganske enkelt: Når du synes at nok nettlesere har støtten. For noen vil det bety å vente 10 år på at IE får støtten, mens for noen andre vil det bety å vente 1 år på at en av de moderne nettleserne får støtten.

[Keiseren av Grønland]

Huff, er IE virkelig så langt etter altså.

Fungerer Border-radius helt likt? Altså, må jeg spesifisere hvert enkelt hjørne i fire linjer? Eller holder en linje for alle hjørnene?

[PHPdude]

Huff, er IE virkelig så langt etter altså.

"10 år" var ikke noe stort forsøk på å være presis akkurat, men ser man på CSS2 så tok det 10 år fra funksjonaliteten var standardisert til den var på plass nå med IE8. Alle de andre nettlesere støtter allerede flere av CSS3-modulene, så IE er allerede noen år i bakleksa med CSS3...

Fungerer Border-radius helt likt? Altså, må jeg spesifisere hvert enkelt hjørne i fire linjer? Eller holder en linje for alle hjørnene?

Syntaksen for de tre er hovedsaklig helt lik tror jeg.

 

border-radius:6px; /* Alle hjørnene 6px */
border-radius:3px 6px 9px 12px; /* Forskjellig avrunding av alle hjørnene */

 

border-radius er jo da ikke ferdig, så syntaksen kan endre seg, men vertfall -moz-border-radius og -webkit-border-radius fungerer slik.

[Left Blank]

Hvis jeg var deg ville jeg ikke brydd meg om IE brukere uansett.

Lag designet ditt for FF/Safari/Opera siden IE er helt ubrukelig uansett.

Hvis dette ikke funker kan du legge inn et alternativt CSS ark for IE og bruke denne guiden til å lage runde hjørner..

[program]

Selvfølgelig må man bry seg om IE siden det er så mange som bruker det! Jeg synes det er en forferdelig nettleser som ikke burde hatt noe av markedet, men slik er det.

 

Er bra at du legger ved et alternativt stilark, men mener det er en veldig merkelig uttalelse å si at man ikke skal bry seg om IE!

[PHPdude]

Må og må fru Blom...

I hvilken grad man støtter IE er en sånn ting som hver enkelt må bestemme selv, utifra sine behov.

Men du har helt klart rett i at man kan ikke la være å bry seg om IE i det hele tatt, i de aller fleste tilfeller.

 

Når det gjelder IE-støtte er det altså viktig å merke seg at det ikke trenger å være enten eller, men heller en mellomting hvor IE også fungerer helt greit - bare at mer kapable nettlesere fungerer enda bedre.

 

I denne saken vil det ikke bety annet enn at IE ikke får fine avrundede hjørner.

[Keiseren av Grønland]

Min oppfattning er at hvis det funker i IE, så funker det i alle andre nettlesere. Det er liksom den dumme eleven i klassen, og når du har forklart ting så nøye at den forstår det, har de andre fortstått det for lengst.

 

Jeg bruker IE selv, og er klar over at den er dårlig, men det er vane. Jeg gidder rett og slett ikke å laste ned ny nettleser. Så viktig er det ikke.

[Left Blank]

Til min blogg er topp 10 besøkende alle firefox eller chrome.

Det er litt morsomt syntes jeg.. IE begynner å tabbe av blandt folk som er litt mer bevisste på internett..