ចែក​រំលែក​គំនិត​ និង​ចំណេះដឹង​ជាមួយគ្នា

reset.css សម្រាប់អ្នក​បង្កើត និងរចនាវែបសាយ

Posted in css, web standards by ប្រាក់ សុភី on ខែកក្កដា 28, 2010

តើ​អ្នក​ធ្លាប់​ជួប​បញ្ហា​ទេ​ក្នុង​ការ​ប្រើ tag របស់ HTML ដូច​ជា​ <h1>, <p> ជាដើម​ នៅ​ពេល​បើក​មើលជាមួយ​​ IE Firefox ឬក៏​កម្មវិធី​រុករក(Browser)ផ្សេទៀត​ វា​តែង​ចេញ​ទំហំ​អក្សរ​មិន​ដូច​គ្នា​​ខ្លះ​ធំខ្លះតូច ហើយចន្លោះ​(space)នៃ​អត្ថបទ​មិន​ដូចគ្នា​? នេះ​ជា​បញ្ហា​មួយ​ ជារឿយៗ​តែង​តែ​ធ្វើ​អោយ​អ្នក​បង្កើត​ និង​រចនា​វែបសាយ​ឈឺក្បាល។

សូម​មើល​ឧទាហរណ៍​ខាង​ក្រោម​បង្ហាញ​ពី​ភាព​ខុស​គ្នា​រវាង​ Firefox និង IE នៅ​ពេល​ដែល​យើង​មិន​ទាន់​ប្រើ​ Style Sheet ដាក់បញ្ចូល​ ដើម្បី​បង្ហាញ​ភាព​ដើម​នៃ​កម្មវិធីរុករក​(default browser)​​ និមួយៗ។ ក្នុង​ឧទាហរណ៍​​គេ​ប្រើ tag <p> និង <div> ដែល<p> ត្រូវ​បាន​ដាក់​បញ្ចូល​ទៅ​ក្នុង <div> ហើយ​ <div> មានផ្ទៃ​ខាង​​ក្រោយ​( Background )ពណ៌​ខៀវ និង​ស៊ុម(Border) ពណ៌​លឿង។

រូបភាព៖ sixrevisions.com

យើង​ពិនិត្យ​ឃើញ​ថា​ចន្លោះ​ខាង​លើ​របស់​អត្ថបទ​នោះ មាន​គំលាត​ខុសគ្នា​រវាង​កម្មវិធី​ទាំង​​​ពីរ​នេះ  Firefox មាន​គំលាត​ខាង​លើ​អត្ថបទ តែ IE មិន​មាន​គំលាត​នោះ​ទេ។ សួរ​ថា​មួយ​ណា​ខុស​មួយ​ណា​ត្រូវ? អត់ទេ​! នោះ​មិន​មែន​ជា​បញ្ហា​​ឡើយ បញ្ហា​គឺ​ត្រង់​ចន្លោះ​ខាងលើ​របស់​អត្ថបទ​វា​មិន​ដូច​គ្នា។ កា​ពិត​ទៅ​នេះ​ដោយ​សា​យើង​មិន​ទាន់​ដាក់​បញ្ចូល​ Style ទៅ​អោយ​វា​។

Reset.css

ចុះបើ​វា​មាន​​បញ្ហា​អញ្ចឹង​គ្រប់​ Tag របស់​ HTML នោះ​វា​នឹង​រឹត​តែ​ពិបាក​ហើយ​មែន​ទេ? ពិត​ណាស់ ​តែ​ដំណោះ​ស្រាយ​នេះ​ត្រូវ​បាន​លើកឡើង​​ដំបូង​នៅ​ឆ្នាំ ២០០៤ ដោយ​លោក​​​ Andrew Krespanis ដែល​បាន​ធ្វើការ​ពិភាក្សា​នៅ​ក្នុង អត្ថបទ​របស់​គាត់

បន្ទាប់​មក​ទៀត​ លោក Eric Meyer បាន​ចេញ​ reset.css កំណែ​ទីមួយ​ក្នុងឆ្នាំ​ ២០០៨ ហើយ​រហូត​មក​ពេល​នេះ វា​ត្រូវ​បាន​គេ​ប្រើ​យ៉ាង​ទូលំទូលាយ​សម្រាប់​​បង្កើត​វែបសាយ។ យើង​ត្រូវ​វា​​​​ដាក់​មុន​ Style Sheet ផ្សេងទៀត​នៅ​ក្នុង​កូដ​របស់​យើង ដើម្បី​អោយ​វា​រៀបចំ​​ជា​ស្តង់ដារ​មួយ​គ្រប់​កម្មវិធី​រុករក​ទាំងអស់។ អញ្ចឹង​យើង​មាន​ស្ដង់ដារ​ Style  មួយ​​ផ្ទាល់​ខ្លួន​​សម្រាប់​គ្រប់​កម្មវិធី​រុក​រក​​ ហើយ​យើង​អាច​ដាក់ Style Sheet បន្ត​បន្ទាប់​ផ្សេងទៀត​​ដោយ​មិន​បារម្ភ​ពី​ភាព​ដើម​របស់​កម្មវិធី​រុក​​រក​និមួយៗ​ វា​មាន Style ដើម​យ៉ាង​មិច​នោះទេ​ ក៏​អត្ថបទ​របស់​នៅ​តែ​លេច​ចេញ​ភាព​ដើម​ដដែល។

នេះ​ជា​កូដ​ ​reset.css របស់លោក Eric Meyer


/* v1.0 | 20080212 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
 margin: 0;
 padding: 0;
 border: 0;
 outline: 0;
 font-size: 100%;
 vertical-align: baseline;
 background: transparent;
}
body {
 line-height: 1;
}
ol, ul {
 list-style: none;
}
blockquote, q {
 quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
 content: '';
 content: none;
}

/* remember to define focus styles! */
:focus {
 outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
 text-decoration: none;
}
del {
 text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
 border-collapse: collapse;
 border-spacing: 0;
}

ក្រៅពី reset.css របស់​លោក Eric Meyer គឺ​នៅ​មាន​ reset.css របស់ CSS Framework ផ្សេងទៀត​ដូចជា Yahoo Reset ដែល​បង្កើតឡើងដោយ Yahoo Developer, Blueprintcss ជា css framework មួយ​មាន​ការ​ពេញ​យម​ផង​ដែរ ដែល​មាន​ការ​ចូល​រួមពីលោក  Eric Meyer, 960 grid sytem ក៏ជា css framework ដែល​ពេញ​និយម​បំផុត​ហើយ​ត្រូ​បាន​គេ​ប្រើ​វាសម្រាប់ រចនា theme របស់ WordPress វាត្រូវបាន​បង្កើតឡើងដោយ Nathan Smith ។  លោក​អ្នក​អាច​បង្កើត reset.css បាន​ដោយ​ខ្លួន​ឯង​ផង​ដែរ​សម្រាប់​ប្រើប្រាស់​ផ្ទាល់​ខ្លួន​បើ​យើង​គិត​ថា reset.css ទាំងនោះ​មិន​គ្រប់គ្រាន់​សម្រាប់​លោក​អ្នក​ ចំណែក​ខ្ញុំ​​ ប្រើ reset.css របស់លោក Meyer, 960 grid និង Yahoo Reset។

សូមអាន​បន្ថែន

5 Popular CSS  Frameworks ដែល​លោក​អ្នក​គួតែ​ចាប់​ផ្តើម​ជាមួយ​វា
CSS Tip #1: Resetting Your Styles with CSS Reset
Weekend Quick Tip: Create Your Own Simple Reset.css File
A Killer Collection of Global CSS Reset Styles
Less is more - my choice of Reset CSS
Advertisements
Tagged with: ,

12 ចំលើយ

Subscribe to comments with RSS.

  1. Samady KS said, on ខែកក្កដា 28, 2010 at 1:23 ល្ងាច

    តើ​វា​អាច​ចេញ Auto Generat កូដ​ក្នុង Firfox និង IE ដែរ​ទេ? ព្រោះ​ថា​សម្រាប់​ខ្ញុំ​តែង​តែ​ធ្វើ​កូដ​សម្រាប់ Firfox ច្រើន​ជាង ហើយ​ក៏​មិន​ដែល​ចាប់​អារម្មណ៍​ជាមួយ IE ដែរ មិន​ដឹង​ថា​មាន​បញ្ហា​បែប​ណា​ឡើយ

  2. kooms said, on ខែកក្កដា 28, 2010 at 2:38 ល្ងាច

    វា​គ្រាន់តែ​ជាកូដ css ធម្មតា​​តែ​ប៉ុណ្ណោះ​ វា​មិន​អាច​ Auto Generat កូដ​បាន​ទេ។

  3. moch said, on ខែកក្កដា 28, 2010 at 3:46 ល្ងាច

    អគុណ!

  4. rony said, on ខែកក្កដា 28, 2010 at 4:25 ល្ងាច

    សូមអគុណសម្រាប់បង្ហាញរបគំហើញថ្មីៗ

  5. rony said, on ខែកក្កដា 28, 2010 at 4:40 ល្ងាច

    i 1 2 change diplay pic in ur web how can i do?

  6. vathanak said, on ខែកក្កដា 28, 2010 at 9:24 ល្ងាច

    help to tell about cakephp pong!

  7. វីរៈ said, on ខែកក្កដា 28, 2010 at 9:53 ល្ងាច

    ខ្ញុំ​ទើប​តែ​ដឹង​សោះ។ ខ្ញុំ​សរសេរ​រាល់​ដង​ដាក់​​ផ្ដើម​ត្រឹម​តែ * {margin:0; padding:0} ​ព្រោះ​ងាយ​សរសេរឱយ Reset ទាំង​អស់។

  8. kooms said, on ខែកក្កដា 29, 2010 at 9:09 ព្រឹក

    @rony ខ្ញុំមិនដឹងថា rony ចង់​ផ្លាស់​ប្តូរ​រូបភាពមួយ​ណានោះទេ។ តែបើចង់ផ្លាស់​ប្តូរ​ Avatar របស់ Rony នោះជាការងាយទេ ដំបូង​ត្រូវ​ចុះឈ្មោះនៅ Gravatar នឹង​ upload រូបភាព​របស់​អ្នក​ជាមុន​សិន ព្រោះ WordPress.com វា​យក​រូប​មក​ពី​ទី​នោះ(http://en.gravatar.com/) ចំនុច​សំខាន់​មួយ​ទៀត​នោះ​ ពេល​ដែល​អ្នក​ចូល​មក​បញ្ចេញ​មតិ​នៅក្នុង​ប្លក់ខ្ញុំ ឬរបស់អ្នក​ផ្សេងទៀត​ដែល​ប្រើ WordPress ត្រង់​កន្លែង​ប្រអប់ email អ្នក​ត្រូវ​តែដាក់ email ដែល​បាន​ Register ជាមួយ Gravatar។
    @vathanak មាន​ពេល​ខ្ញុំ​នឹង​បង្ហាញ អគុណ​ចំពោះ​ការ​មក​លេងប្លក់​ខ្ញុំ
    @វីរៈ ពីមុន​ខ្ញុំ​ក៏​មិន​ដែល​ដឹង​ដែរ ក្រោយ​ពីជូប​បញ្ហារឿយ​មក​ខ្ញុំ​តែង​ស្វែង​រក​ដំណោះស្រាយ​ ហើយ​ក៏បាន​ឃើញ​បែប​នេះ​ទៅ។ ឃើញ​ថា​វា​មាន​ប្រយោជន៍​ក៏​នាំ​មក​ចែក​ជួន​អ្នក​រាល់​គ្នាទៅ

  9. If some one wishes expert view about running a blog then i propose him/her
    to visit this blog, Keep up the nice job.


ឆ្លើយ​តប

Fill in your details below or click an icon to log in:

ឡូហ្កូ WordPress.com

អ្នក​កំពុង​បញ្ចេញ​មតិ​ដោយ​ប្រើ​គណនី WordPress.com របស់​អ្នក​។ Log Out / ផ្លាស់ប្តូរ )

រូប Twitter

អ្នក​កំពុង​បញ្ចេញ​មតិ​ដោយ​ប្រើ​គណនី Twitter របស់​អ្នក​។ Log Out / ផ្លាស់ប្តូរ )

រូបថត Facebook

អ្នក​កំពុង​បញ្ចេញ​មតិ​ដោយ​ប្រើ​គណនី Facebook របស់​អ្នក​។ Log Out / ផ្លាស់ប្តូរ )

Google+ photo

អ្នក​កំពុង​បញ្ចេញ​មតិ​ដោយ​ប្រើ​គណនី Google+ របស់​អ្នក​។ Log Out / ផ្លាស់ប្តូរ )

កំពុង​ភ្ជាប់​ទៅ​កាន់ %s

%d bloggers like this: