Transcending CSS - Siri 1
Assalamualaikum, maaf sebab lambat siapkan entri ni..heh..Ok! Jom kita mulakan! Artikel yang aku buat ini adalah berdasarkan buku Transcending CSS yang aku dah baca.
Apa itu Transcending CSS?
Adalah satu pendekatan ketika merekabentuk laman web dengan menggunakan CSS. Tapi pendekatan ini akan menggunakan sepenuhnya CSS2.1 dan mungkin juga CSS3 demi mewujudkan laman web yang bukan saja cantik, tetapi maju dari segi accessbility, dan dapat memberikan pengalaman yang menyeronokkan kepada pengguna.
Prinsip 1 - Tidak semua pelayar akan melihat design yang sama.
Prinsip 1 ini adalah berlawanan dengan pendekatan Progressive Enhancement. Biar aku terangkan serba sikit tentang Progressive Enhancement, iaitu ianya menggunakan browser yang less-capable sebagai benchmark, jadi mereka akan buat design dan layout yang sama untuk semua browser….
Jadi prinsip 1 ni pula, design dan layout akan di’render’ sepenuhnya oleh semua browser(Termasuk IE6), gunakan kesemua elemen dalam CSS2.1. TETAPI rupa design di dalam IE6 dan browser yang bagus(Firefox,Opera dan IE7) akan berbeza. Ianya macam motivasi, dan bunyinya seperti ini, “Kalau hang nak tengok laman web ni dalam rupa yang optimum, hang kena la guna FireFox, IE6 tu dah lama sangat..”, hehe..Prinsip ini menggunakan browser yang maju sebagai benchmark. Sila lihat contoh di bawah :
Nota : Gambar pertama (Hitam putih) akan dilihat oleh pengguna IE6, manakala gambar kedua(Berwarna) akan dilihat oleh pengguna yang menggunakan browser yang maju seperti IE7, FireFox atau Opera. Untuk melihat sendiri, sila ke StuffAndNonsense.Co.Uk.
Jadi, ketika ingin merekabentuk laman web, sekiranya ingin menggunakan pendekatan ini, semuanya bergantung kepada kita sendiri, berapa banyak design yang ingin dikurangkan kepada pengguna IE6..Dalam siri yang akan datang, kita akan lihat bagaimana pendekatan ini direalisasikan.. ^__^
Ada sebarang pertanyaan? =)
Aviator (#)
July 5th, 2007
First one to comment!
Memang menjadi amalan bagus kalau uji CSS di pelayar termaju dahulu (standards-compliant seperti FF atau Safari), kemudian mengikut tertib menurun (IE7, IE6, …). Market share untuk FF masih rendah, jadi jangan lupakan golongan pengguna IE, hehe.
chot (#)
July 5th, 2007
rajin membaca gak ko ye bat…
flisterz (#)
July 5th, 2007
aku sentiasa cuba buat sama antara firefox n ie6. biasanya margin n padding ade beza kt ie6.
bile lah org nk stop guna ie6 heh
-fuQaHa- (#)
July 5th, 2007
@aviator
market share FF masih rendah? last time i check stats kat blog aku,, FF is around 45%. It may varies a lot kot if compared ngan site line, since a lot of my visitors are joomla users / webmasters, and i bet most of em are using firefox.
as for me, if we keep on forever tweaking our codes simply to make it looks good IE, microsoft will never follow the standards. Ape kata semua webdesigner stop making hacks for IE, so visitors/users will start using FF and microsoft will then realize the dreadful mistakes of using proprietary codes.
abdfatah (#)
July 5th, 2007
adesh, kena faham betul2 nih baru bleh tanya. tapi faham la sikit2… lepas nih lebih teknikal lagi… hihi..
ikram_zidane (#)
July 5th, 2007
since when IE7 isn’t a modern browser - and since when IE is considered a old-timer browser ?
your visitor is mainly designer who follow trends and uses firefox like you do.. CSS are more towards coporate site (full advantages can be taken), not blog..
as far as i can see, that ain’t gonna happen. Nobody would participate to a campaign that would demand them sacrificing their bussiness just for the sake of sumthing that isn’t sure.. webdesigner ain’t judged by another webdesigner, they are judged by potential clients..
do you think the microsoft engineer make browsers not following standards on purpose ? Let give them credit for their browsers and having market advantage over other company.
as far as my concern goes, ms engineer did nothing wrong (when they put IE 7 to its very best of standards, people start complaining as well), we merely designer shouldn’t be saying they made ‘dreadful mistakes’ and this and that should be changed. If you’re unhappy, go develop a browser that work for you yourself and good luck trying to sell them to the world..
Bat (#)
July 5th, 2007
@aviator: Erm, memang betul..Aku rasa benda ni berkait rapat dengan OS. Cuba fikirkan, pengguna BIASA yang menggunakan windows cuma melihat IE sebagai browser. Dan jika sekarang, kebanyakan masih lagi menggunakan IE 6 sebab mereka masih guna windows XP. Mungkin lepas ni kita akan lihat penurunannya sebab pengguna Vista(IE7) semakin bertambah, tapi mungkin dalam 1-2 tahun lagi..
@flisterz: hehe..sabarlah, mungkin setahun dua lagi..Siapa tahu..
@fuqaha: Tentang hacks, ada satu prinsip dalam transcending CSS, nanti kita bincang kemudian..Sangat menarik.. =)
@abdfatah: hehe..Sori la kalau entri ni agak advance..Aku cuba menenengahkan isu teknikal pula sekarang..
@ikram_zidane: Terima kasih sebab ‘highlight’kan beberapa perkara Ikram. Berkenaan client, aku pun pernah jadi macam tu, mereka nak laman web mereka rupanya sama dalam setiap browser. Mau tak mau kena follow jugak kehendak klien.
Tapi webdesigner juga perlulah meyakinkan klien bahawa benda ni teknologi. Teknologi semakin canggih, jadi ianya akan berubah dari masa ke semasa.
Macam mp3 player, kalau dulu cuma boleh dengar lagu dan radio, tapi mp3 player sekarang dah ada macam2 fungsi macam built-in lyric, timer, recorder, dan boleh jugak tengok gambar(bukan video, itu mp4,haha)..Tapi mp3 lama tu masih boleh digunakan lagi kan kalau nak dengar lagu? Cuma takda fungsi2 baru tu, kalau pengguna nakkan fungsi tu, mereka kena beli yang baru/upgrade.
Sama juga macam browser, kalau nak tengok kelebihan CSS2.1 dan ke atas, pengguna kenalah beralih ke browser yang lebih maju..
Apa-apa pun, tu cuma pendapat aku.. =)
arynet (#)
July 5th, 2007
yap, perlu beralih ke browser terbaru, tapi dah bnyk syarikat skrg nih dah guna FF, cuba kita sedarkan mereka. kempen! hehe.
Kkroz (#)
July 5th, 2007
emm..tahniah dan syabasla kepada semua commentator yng semuanya mempunyai pengetahuan tinggi mengenai web design..
Sy ni xpandai sgt pun..hehe..just tgk2 design n bg komwn tu lehla..haha..nk buat tp xtahu n xberpeluang nk belajar.,
Bat (#)
July 5th, 2007
@chot: sori bro, komen hang masuk dalam spam, aha, takda la rajin sangat, aku membaca tu time nak belajar sesuatu ja..
@arynet: kempen? Erm..ntah la..kempen ni kena plan betul2 kalau nak menjadi..
@kkroz: aku pun takda la pandai sangat, baru belajar sebenarnya..Memang la takda peluang(termasuk aku), tapi kalau minat tu ada, InsyaAllah boleh.. =)
ikram_zidane (#)
July 6th, 2007
that’s nothing near of what i was trying to say..
what i was trying to say, in response to fuqaha idea of having designer ignoring IE is that nobody would jeopardize their own site (losing visitors / potential clients), just for the sake of microsoft engineer to change to follow webstandard (which from my point of view is not going to happen - if it is possible, they would have done that a long time ago).. other webdesigners (who usually use ff) would view the site as intended, while all the poeple that is most beneficial to the website got to see the site crash in IE (since coporates usually use IE)
and from what i’ve learnt through my experience is that if you apply good techniques, you probably don’t have to have hacks in the codes (just probably for the div width).. hacks are usually come because of flaws made by the coder himself (wrong technique use, etc2)..
Bat (#)
July 6th, 2007
@ikram_zidane: itu cuma pendapat aku, cuba baca balik.. =) Hacks tu bagi aku, memang kena guna kalau kita nak laman web yang kita buat tu betul2 sama dengan design yg kita dah buat dalam photoshop dan sebagainya..
Tapi kalau nakkan CSS valid, boleh guna conditional comments(Aku tak guna untuk blog ni, jadi blog ni memang tak valid)..Walaupun dulu dan sekarang lagi kadang2, aku masih lagi tak kisah sama ada laman web tu valid atau tak, TAPI rakan2 aku ada yang menegur, kalau boleh biarlah valid, sebab kalau tak valid, malu nanti kalau orang luar tengok hasil kerja kita..
Div width hack tu kalau guna ‘tantek celik’ punya teknik, memang valid, sebab memang takleh nak elak pasal width tu dalam IE6..
abdfatah (#)
July 6th, 2007
haha… teknikal pun teknikal daaa asalkan bleh mengikuti perkembangan sikit2…
dapat jugak sikit2 ilmu…
flisterz (#)
July 6th, 2007
yeah its not a good practice for any webdesigner utk menentukan user tu kne gune browser ape utk website yg diorang design/code.
tulis “best viewed with bla bla” pun adalah tidak digalakkan.
dari konteks business/commercial seperti yg ikram cakap tu betul la, sbb potential customer x tgk semua ni. lagi2 kalau business yg deal with customer yg x tau pasal kewujudan browser2 “modern” tuh. so semua kne la at least accessible by any browser.
dan kehadiran safari for windows bagus sbg additional test tool for web designer.
neutronics (#)
July 7th, 2007
urm.. kalau la IE tu macam Firefox, yang akan inform user kalau ade version baru bg browser tu kan bagus. Dan kalau nk pakai IE 7 tanpa beli windows ori dan tanpa perlu crack kan bagus.. ngee..
aku rasa aku lah antara org diatas tu. dan skarang tgh nk cr hack camane la nk bg semua dpt tgk benda yg sama.
benda ni satu cabaran best bg web designers/coders..
shutterspeaks (#)
July 7th, 2007
What matters to client usually only one, the delivered product output is according to what they want and work as they want. After all they are the paying parties.
as for personal blog/website, ikut suka hati dan pengetahuan masing-masing.
Oh ya, artikel yg menarik bat.
Bat (#)
July 7th, 2007
@flisterz: hehe..aku pun buat gak camtuh..tengok kat bahagian footer..Nanti versi baru InsyaAllah takda..
@neutronics: hack tu semestinya, tapi Xero selamba ja tak pakai hacks..Tabik la sama Xero..hehe
@ShutterSpeaks: Aha, tenkiu..Aku ada bagi komen kat blog hang, tapi rasanya akismet detect aku sebagai spammers..huhu
shutterspeaks (#)
July 7th, 2007
bat,
komen ko yg miri tuh mmg akismet block, aku dah unblock dah semalamnya… akismet ni kadanga bengong jugak. chot antara mangsa lain, dan aku sendiri pernah menjadi mangsa.
Bat (#)
July 7th, 2007
@shutterspeaks: ohh..tenkiu2..Tu la, kebanyakan blog yg aku bagi komen, byk tak keluar..jenuh la macam ni..Chot pun kadang2 kena filter gak kat blog ni..Sian dia..
-fuQaHa- (#)
July 7th, 2007
hoho.. bagus2.. brainstorm psl nih..
esok aku reply eh.. skrg nak packing barang2 balik KL, smlm balik kelate jap, ade tahlil.
=)
Apa itu blog « puisi (#)
July 11th, 2007
[...] abdfatah: haha… teknikal pun teknikal daaa asalkan bleh mengikuti pe… [...]