CSS3 ja kulmien pyöristys IE:llä - haasteita pukkaa

OPJ · Viesti Kirjoittaja **OPJ** » 9.12.2010 klo 10.02

Olen jumissa otsikossa mainitun ongelman kanssa.

CSS3-tukihan on erittäin puutteellinen vielä IE8:ssä, tiedän kyllä. Mutta kulmien pyöristäminen CSS:n avulla eräässä projektissani ratkaisisi monta ongelmaa. Ja säästäisi noin miljoona ylimääräistä työtuntia.

Olen onnistunut kyllä saamaan kulmien pyöristykset toimimaan myös IE:llä. Nyt ongelmana on vain se, että IE ei tottele yksittäisten kulmien "radius"-määrettä. Muut selaimet kyllä tottelevat mutkitta (Sekä Windows että Mac OS X testattu). Linkin takaa löytyy näkymä windowsin puolelta, jossa allekkain neljä eri selainta. IE ylimmäisenä.

http://www.muuntamo-creative.fi/html5/corners-scr.png

Sivun koodi näyttää tältä:

Koodi: Valitse kaikki

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title></title>
	<meta name="description" content=""  />
	<meta name="keywords" content=""  />
	<link href="border-radius.css" rel="stylesheet" type="text/css" media="screen" />

	
</head>

<body>

	<div id="nav">
	
		<a href="#">Esimerkki 1</a>
		<a href="#">Esimerkki 2</a>
		<a href="#">Esimerkki 3</a>
		<a href="#">Esimerkki 4</a>
		<a href="#">Esimerkki 5</a>
	
	
	</div>

</body>

Ja css tältä:

Koodi: Valitse kaikki

body {
	margin: 20px;
	background-color: #fcfcfc;
	}

/*
-moz is for mozilla browsers like FF,
-webkit is for webkit browsers like Safari and Chrome
-khtml Linux browsers
AND We are trying to hack also that damned IE with "behavior" tag and .htc file
 */

#nav a:link,
#nav a:visited {
    -moz-border-radius: 12px 0 0 0; 
    -webkit-border-radius: 12px 0 0 0;
    -khtml-border-radius: 12px 0 0 0;
    
    /* IE FIX START */
    /*border-radius: 12px 3px 0 0; does not work... Lets try to set values separately*/
    border-top-left-radius: 12px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
    behavior: url('border-radius.htc');
    /* THIS WAS IE HACK */
    
    margin: 0 0 0 1px;
    padding: 10px 20px 10px 20px;
    background: url('bg-red.jpg') #ffffff repeat-x;
    color: #FFFFFF;
    display: block;
    float: left;
    font-family: Verdana, Arial, Helvetica;
    font-weight: normal;
    font-size: 12px;
    line-height: 16px;
    text-decoration: none;
	}
	
#nav a:hover {
	background: url('bg-green.jpg') #ffffff repeat-x;
	}

.htc-tiedosto on siis javascript-fix IEtä varten. Kenelläkään enemmän ratkaisua?

TOINEN OSA kysymyksestäni on, että IE:ssä ei toimi myöskään tuo mouseover. Muissa selaimissa kyllä. Missing something here?

Testisivu löytyy:
http://www.muuntamo-creative.fi/html5/corners.html

CSS:
http://www.muuntamo-creative.fi/html5/border-radius.css

htc-tiedosto:
http://www.muuntamo-creative.fi/html5/border-radius.htc

Kiitän ja kumarran etukäteen!

Glen · Viesti Kirjoittaja **Glen** » 9.12.2010 klo 12.21

Lyhyt vastaus: Unohda kulmien pyöristys (css3) IE8:llä. On oikeasti tuettu ominaisuus vasta IE9:ssä. Nuo htc-hackit on oikeasti hackeja. Ei ne toimii vain joissakin tapauksissa ja niiden toimintaan ei voi luottaa koskaan. Been there, done that.

Ihan mielenkiinnosta kysyn, että miksi tuon tulee näyttää samalta IE:ssä? Eikö voisi tehdä pyöristykset muilla ja näyttää kanttikulmat IE:llä? Mikä ongelma on niin suuri, että pyöristykset ovat tärkeitä joka selaimella?

Hyvin harva asiakas nillittää siitä, että joku kulma ei ole pyöristetty. Yleensä ongelmat ovat pikkasen eri kohdassa. Jos kulmapyöristykset ovat tärkeitä (siis IE:ssä), ja niiden pitää olla eri säteellä vielä niin olet todella hankalassa tilanteessa. Ainoa vaihtoehto on lisätä nipullinen divejä ja rakentaa oikealla kulmapyöristyksellä varustettu kuvatiedosto. MS-filtereiden ja htc-tiedostojen käyttö monessa tapauksessa hidastaa sivuston rendausta. Toki varmasti poikkeuksiakin on mutta nuo eivät oikeasti ole nykyaikana suositeltava vaihtoehto.

Eli ikävä kyllä IE8:lle tai sitä vanhemmille ei minun mielestäni ole tuotantokäyttöön sopivaa vaihtoehtoa kulmapyöristysten tekemiselle muuten kuin kuvina. Olen tämän oppinut vaikeimman kautta (lukemattomia tunteja persnettoa) ja tyytynyt siihen että sivu näyttää erilaiselta eri selaimissa. Yleensä asiakaskin ymmärtää tilanteen kun hänelle kertoo, että kulmapyöristysten rakentaminen IE:hen vaatii 30 tuntia lisää työtä, 95€/h (tai mikä ikinä sun tuntihintas on).

Juhani L · Viesti Kirjoittaja **Juhani L** » 9.12.2010 klo 13.09

Glenin vastaus on niin totta, niin totta. IE:n syntejä ja puutteita ei kannata yleensä lähteä parantamaan javaskript-häkkäilyillä. Siinä voi juuttua eri IE-versioiden kanssa condcomien (ehdollisten html-pakojen) tielle. Tulos on aina se, että koodi mutkistuu eikä häkkäyksillä IE:lle saada kuitenkaan täyttä järjellistä sielunelämää.

Jos asiakkaalle sopii, voit laittaa sivun loppuun pienellä vain IE:ssä näkyvän tekstin, jossa kerrotaan, että muilla selaimilla näky on somempi.

OPJ · Viesti Kirjoittaja **OPJ** » 9.12.2010 klo 13.41

Juhani L kirjoitti:Glenin vastaus on niin totta, niin totta. IE:n syntejä ja puutteita ei kannata yleensä lähteä parantamaan javaskript-häkkäilyillä. Siinä voi juuttua eri IE-versioiden kanssa condcomien (ehdollisten html-pakojen) tielle. Tulos on aina se, että koodi mutkistuu eikä häkkäyksillä IE:lle saada kuitenkaan täyttä järjellistä sielunelämää.

Jos asiakkaalle sopii, voit laittaa sivun loppuun pienellä vain IE:ssä näkyvän tekstin, jossa kerrotaan, että muilla selaimilla näky on somempi.

Toki tiedostan nämä kaikki IE:n puutteet. Asiakas on ...krhm... hieman .. krhhhrhrhmmm... periksiantamaton. Varsinkin, kun graafisen ilmeen tekee kolmas taho (jolla ei www-maailman lainalaisuuksista ole ilmeisesti kokemusta, vaan taittaa nettileiskaa kuin printtiä ... huoh...). Meille kuuluisi tässä tekninen taitto ja muu tekninen työ. Ulkoasuun ja käytettävyyteen liittyen saamme toki konsultointia tehdä, mutta tähän asti kaikuneet lähes kuuroille korville.

Koko hommassa pointtina nyt sattui olemaan vain se, että sivustoa jatkokehitettäessä ei tarvitisisi samoja hommia tehdä uudelleen ja uudelleen. Glenin mainitsemat persnetot tässä vaan kummittelevat takaraivossa ja rajusti

Noh, väännän css:t niin, että IE9:iä odotellessa...

Kiitos näistä.

kari.patila · Viesti Kirjoittaja **kari.patila** » 12.12.2010 klo 11.22

OPJ kirjoitti:Noh, väännän css:t niin, että IE9:iä odotellessa...

IE9:kin käyttäytyy vähän valikoivasti pyöristysten kanssa. Huomasin itse että Microsoftin oman gradient-filtterin kanssa reunat eivät pyöristy.

Glen · Viesti Kirjoittaja **Glen** » 12.12.2010 klo 23.02

kari.patila kirjoitti: IE9:kin käyttäytyy vähän valikoivasti pyöristysten kanssa. Huomasin itse että Microsoftin oman gradient-filtterin kanssa reunat eivät pyöristy.

Nuo MS:n filtterit ovat mielestäni harmaalla alueella kun pelataan css:n kanssa. Noita ei ole speksattu css-standardeihin ja ne on tainneet olla olemassa jo 90-luvun puolivälistä. Ja jostakin blogista (tai Twitteristä) luin, että MS:n omat kehittäjätkään eivät suosittele noiden käyttöä.

Toki joissakin tapauksissa noita voidaan käyttää. Itse käytin muutamilla saiteilla, joihin piti saada alpha transparency pelaamaan IE6:n kanssa. Mutta noin pääsääntöisesti en kyllä suosittele kenellekään käytettäväksi.

OPJ · Viesti Kirjoittaja **OPJ** » 13.12.2010 klo 13.23

kari.patila kirjoitti:
OPJ kirjoitti:Noh, väännän css:t niin, että IE9:iä odotellessa...
IE9:kin käyttäytyy vähän valikoivasti pyöristysten kanssa. Huomasin itse että Microsoftin oman gradient-filtterin kanssa reunat eivät pyöristy.

Jatkokysymys siis edelliseen viestiini: Voisiko tämän kuvan tapaus selittyä tällä valikoivuudella? Kuvakaappaus on Adoben BrowserLab-palvelusta - Olen alkanut vasta tuota käyttämään säännöllisemmin, onko luotettavaa dataa?

http://www.muuntamo-creative.fi/html5/m ... winie9.png

Kuten kuvasta näkyy, IE9 ei pyöristä kulmia, vaikka MS itse väittää, että jo BETAssa tuki kulmien pyöristykselle (border-radius) on....

Elementtiin liittyvä CSS:

Koodi: Valitse kaikki

#topmenu ul.nav li {
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	-khtml-border-radius: 8px;
	border-radius: 8px;
	border: 1px solid #904200;
	background: none;
	font-family: Trebuchet MS, Arial, Helvetica;
	font-size: 12px;
	line-height: 20px;
	padding: 0 10px 0 10px;
	margin: 4px 10px 0 0;
	}

kari.patila · Viesti Kirjoittaja **kari.patila** » 13.12.2010 klo 13.56

OPJ kirjoitti:Jatkokysymys siis edelliseen viestiini: Voisiko tämän kuvan tapaus selittyä tällä valikoivuudella? Kuvakaappaus on Adoben BrowserLab-palvelusta - Olen alkanut vasta tuota käyttämään säännöllisemmin, onko luotettavaa dataa?

Testasin juuri IE9 beta seiskalla, Windows 7:aan asennettuna ja omalla sivulla reunat kyllä pyöristyvät — BrowserLabissa ei. Vähän raivostuttavaahan se on, mutta ainoa varma tapa näyttää olevan tuon IE9 betan asennus jollekin omalle laitteelle tai kaverin koneelle.

OPJ · Viesti Kirjoittaja **OPJ** » 13.12.2010 klo 21.49

kari.patila kirjoitti:
OPJ kirjoitti:Jatkokysymys siis edelliseen viestiini: Voisiko tämän kuvan tapaus selittyä tällä valikoivuudella? Kuvakaappaus on Adoben BrowserLab-palvelusta - Olen alkanut vasta tuota käyttämään säännöllisemmin, onko luotettavaa dataa?
Testasin juuri IE9 beta seiskalla, Windows 7:aan asennettuna ja omalla sivulla reunat kyllä pyöristyvät — BrowserLabissa ei. Vähän raivostuttavaahan se on, mutta ainoa varma tapa näyttää olevan tuon IE9 betan asennus jollekin omalle laitteelle tai kaverin koneelle.

No tätä vähän arvelinkin, kiitos kun testasit puolestani.

Menee siis sittenkin virtuaali-windowsin asentamiseksi. Ja win7:n lissun ostamiseksi. Ja asentamiseksi. Ja selainten asentamiseksi. Ja.... huoh. Toi browser lab on kyllä ajatuksena hyvä, mutta jos ei asiaansa aja, niin eipä voi midn. Säästäisi vain hitosti aikaa, kun ei tarttisi pomppia käyttiksestä toiseen.

Huomasin muuten toisenkin ihmeellisyyden Browser Labissa: siellä demottu IE9 Beta käsittelee divin, jonka position: relative ja paikka määrätty koordinaatein, käsittelevän ko. elementtiä kuin IE7. Siis päin pers... mäntyä. IE8 puolestaan näyttää position oikein / samoin kuin muut selaimet. Täytyy testata, onko tämäkin vain BL:n puutteita, vaiko BETAn puutteita.

Touho · Viesti Kirjoittaja **Touho** » 23.12.2010 klo 11.20

OPJ kirjoitti: Toki tiedostan nämä kaikki IE:n puutteet. Asiakas on ...krhm... hieman .. krhhhrhrhmmm... periksiantamaton. Varsinkin, kun graafisen ilmeen tekee kolmas taho (jolla ei www-maailman lainalaisuuksista ole ilmeisesti kokemusta, vaan taittaa nettileiskaa kuin printtiä ... huoh...). Meille kuuluisi tässä tekninen taitto ja muu tekninen työ. Ulkoasuun ja käytettävyyteen liittyen saamme toki konsultointia tehdä, mutta tähän asti kaikuneet lähes kuuroille korville.

Urgh, tulipa inhat vibat hetkeksi, semmoinen unpleasant blast from the past. Eli kuulostaa kovin tutulta, ja suosittelisinkin hommasta (tai työpaikasta) eroon hankkiutumista niin kauan kuin oma järki ja hermot on vielä tallella.

Tuossa on tosiaan yksi hyvä syy sille, miksi tuolla netissä on edelleen niinkin paljon paashaa. sekä määrällisesti että laadullisesti.

Koko hommassa pointtina nyt sattui olemaan vain se, että sivustoa jatkokehitettäessä ei tarvitisisi samoja hommia tehdä uudelleen ja uudelleen. Glenin mainitsemat persnetot tässä vaan kummittelevat takaraivossa ja rajusti

Noh, väännän css:t niin, että IE9:iä odotellessa...

Kiitos näistä.

Juu, ajattele omaa terveyttäsi vaan, ja tee järkevät ja standardinmukaiset ratkaisut, jotka toimivat kyllä sitten jatkossakin. Kyllähän useimmat muutkin rakennelmat toteutetaan yleensä yleisien standardien mukaan, eikä esim. mikkisoftan omien oikkujen mukaan.

CSS3 ja kulmien pyöristys IE:llä - haasteita pukkaa

CSS3 ja kulmien pyöristys IE:llä - haasteita pukkaa

Re: CSS3 ja kulmien pyöristys IE:llä - haasteita pukkaa

Re: CSS3 ja kulmien pyöristys IE:llä - haasteita pukkaa

Re: CSS3 ja kulmien pyöristys IE:llä - haasteita pukkaa

Re: CSS3 ja kulmien pyöristys IE:llä - haasteita pukkaa

Re: CSS3 ja kulmien pyöristys IE:llä - haasteita pukkaa

Re: CSS3 ja kulmien pyöristys IE:llä - haasteita pukkaa

Re: CSS3 ja kulmien pyöristys IE:llä - haasteita pukkaa

Re: CSS3 ja kulmien pyöristys IE:llä - haasteita pukkaa

Re: CSS3 ja kulmien pyöristys IE:llä - haasteita pukkaa