Böngészők vs. CSS3

Egy régebbi weboldal megújításakor úgy gondoltam, hogy újabb eszközökhöz nyúlok, amit csak lehet HTML5/CSS3 párosítással oldok meg. Ez egyrész biztosítja, hogy egy ideig nem évül el (mivel még nem is teljesen végleges a két említett szabvány), illetve csomó kényelmi funkciója is van.

Ilyen lenne például a CSS3 box-shadow eleme.

Első próbálkozásra Opera viszi, de FF, Chrome meg se mukkan. Elő a gúúgli, a megoldás hamar megvan:

-moz-box-shadow
-wekbkit-box-shadow

Enyhe dörmögés a csúnya workaround miatt, de túltettem magamat rajta. Jött azonban a background...

Úgy gondoltam, hogy ha már van lehetőség kép nélkül megoldani, akkor tegyük úgy, kisebb sávszélhasználat, egyszerűbb javítás, stb céljából.
CSS3 spec-ban hamar meg is találtam a linear-gradient elemet. Ööm é bódottá... lenne... ha működne bármelyik böngészőben. Gúúgli ismét elő, nézzük böngészőnként hogy lehet megoldani:

-WebKit alapú böngészők:

background: -webkit-gradient(linear, honnan, hova, from(szín1), to(szín2));

-Firefox (Gecko):

background: -moz-linear-gradient(-90deg, szín1, szín2);

-Opera: na ez nehéz eset, ugyanis sehogy sem támogatja egyenlőre a színátmenetet CSS-ből, cserébe SVG fájlból működik. Gondoltam, egye fene, akkor kap azt.

background: url('szinatmenet.svg');

Hab a tortán a border-radius, amit a FF csak "-moz-" prefixel óhajt feldolgozni.

Eljön majd az idő, amikor nem kell kb. böngészőnként különböző workaroundokat használni? Gy.k. mindegyik tudja az adott funkciót, csak nem hajlandó -moz vagy -webkit előtag nélkül felfogni. Van értelme ennek a különcködésnek?

Hozzászólások

El, ha egy igényes és funkció helyes, weblapon kiirod, hogy csak webkit alapu bongeszűvel látogathatjátok.
Már réges régen trendé tettem volna, ennyi lenne lenyomni a szar böngészőket.

chrome-ot felrakni kb 2 perc.

No igen, de ha az Operát nem is nézzük, azért minimum elvárható, hogy WebKit+Gecko-n menjen, de már ahhoz is hack kell.

Ezért nem veszem elő pl az IE-t. A végén megnézem, ha megy akkor örülök, ha nem, akkor szerver oldalon letiltatom az oldal megjelenítését.

Ha valaki megkövetel egy olyan böngészőt, ami nincs megnyitva, már akkor odébbállok az oldalról.
Az egyik létező legnagyobb hiba ez egy fejlesztő részéről.
Mondom ezt úgy, hogy ugyanezeket kénytelen vagyok nap-mint-nap átélni ie6 alatt is. Azért fizetnek, hogy oldd meg, nem azért, hogy ne.

die(DIE_HARD);

azenoldalamponthu

Amikor fizetnek, akkor ezt meg is oldom, viszont sok hobbi (és open source) project van, amiért nem fizetnek, ellenben nagyon sok időt elvisz. Ilyenkor azért annyira nem egyszerű döntés, hogy szívjon-e az ember akár több napon át, hogy IE (vagy egyéb) alatt is szépen menjen.

Ennek nagyon egyszerű oka van, a specifikáció még nem végleges, ezért előfordulhat, hogy az egyik böngèsző így, a másik másik meg máshogy implementálja a dolgot. Ezek a funkciók még változhatnak. Lásd border-radius.
--
HUP Firefox extension

A CSS 3 elemei még bármikor változhatnak, egyik sem végleges, ezért nem implementálják a böngészők a szabványos módon, csak a saját prefixumukkal (-o, -moz, -webkit stb.).

A hátteret, a határolóvonalakat és a bokszok árnyékolását említetted, róluk itt a tervezet: http://www.w3.org/TR/css3-background/

Amint a fenti dokumentumról lekerül a "Candidate Recommendation" és átveszi a helyét a "Recommendation", onnantól kell majd csak a böngészőknek implementálniuk az előtag mentes kulcsszavakat.

Szerk.: egy hete jött ki pont ebből az Editor's Draft, amiben megint volt pár változtatás: http://dev.w3.org/csswg/css3-background/

--
Elder Scrolls

arról nem is beszélve, hogy ettől ugyan invalid lesz a css (érdekel?), viszont a szabványos értelmezéssel tökéletes eredményt produkál: a specifikáció alapján a parsernek az értelmezhetetlen propertyket figyelmen kívül kell hagynia. Így minden böngésző a rá vonatkozót értelmezi. Mindig is utáltam, hogy nincsenek CSS-ben conditional commentek, de ez majdnem olyan.

—-—-—
int getRandomNumber() {
	return 4;//szabályos kockadobással választva.
}		//garantáltan véletlenszerű. xkcd

"Eljön majd az idő, amikor nem kell kb. böngészőnként különböző workaroundokat használni?"

Igen, majd ha olyan dolgokat akarsz hasznalni, amik szabvanyosak, es azok normalisan implementalva is lesznek. A HTML5 meg ettol messze jar.