រចនា Responsive វិបសាយជាមួយ CSS3 Media Queries សម្រាប់ TYPO3

ខ្ញុំនឹងបង្ហាញពីវិធីសាស្ត្របង្កើត Responsive វិបសាយ

ដែល ត្រូវបានគេយកទៅប្រើប្រាស់ជាច្រើននាពេលបច្ចុប្បន្នក្នុងការ បង្កើតវិបសាយ។ ក្នុងមេរៀននេះ ខ្ញុំនឹងបង្ហាញតែរបៀបបង្កើត Responsive Template និងនៅមេរៀនក្រោយទៀត ខ្ញុំនឹងបង្ហាញពីរបៀបបញ្ចូល Template នេះទៅក្នុង TYPO3 CMS។
Responsive វិបសាយ គឺជាវិធីសាស្ត្របង្កើតវិបសាយដែលអាចបើកមើលបានគ្រប់ប្រភេទ កុំព្យូទ័រ ទូរស័ព្ទវៃឆ្លាត (Smart Phone) និង Tablet។ រាល់ការបើកមើលវិបសាយតាមប្រភេទឧបករណ៍និមួយៗ អ្នកនឹងឃើញទម្រង់នៃវិបសាយ (layout) មានរូបរាងខុសៗគ្នា ដូចរូបខាងលើ។ ការបង្កើត Responsive វិបសាយអ្នកអាចធ្វើបានតាមពីរវិធី៖
១. Grid-base layout បង្កើតវិបសាយដោយប្រើប្រាស់ CSS Grid System
២. Media Queries បង្កើតវិបសាយដោយប្រើប្រាស់ CSS3 Media Queries
នៅក្នុងមេរៀននេះ ខ្ញុំនឹងបង្ហាញវិធីទី២ ដើម្បីបង្កើត Responsive វិបសាយដល់មិត្តអ្នកអានដូចខាងក្រោម៖
១. CSS3 Media Queries
CSS3 Media Queriesគឺជាម៉ូឌុលដែលបានដាក់បញ្ចូលក្នុង media type របស់ CSS3 សម្រាប់ដាក់លក្ខខណ្ឌច្រើនឬគ្មានលក្ខខណ្ឌ ដើម្បីកំណត់ទំហំ screen របស់វិបសាយ។ ជាទូទៅគេច្រើនប្រើវាសម្រាប់កំណត់លើប្រភេទ “screen” និង “print” ជាពិសេស media queries ដែលត្រូវបានគេយកមកប្រើសម្រាប់កំណត់ទ្រង់ទ្រាយរបស់វិបសាយទៅ តាមទំហំរបស់អេក្រង់ (screen resolution) អ្នកអាចកំណត់បានច្រើនតម្លៃនៃលក្ខខណ្ឌ ក្នុងquery តែមួយដោយប្រើពាក្យគន្លឹះ (keyword) and ៖

<link rel="stylesheet" type="text/css"

 media="screen and (max-device-width: 480px) and (resolution: 163dpi)"

  href="shetland.css" />

    }

ជាទូទៅគេមិនប្រើ media query ក្នុង tag link ទេ យើងត្រូវបញ្ចូលវាទៅក្នុងឯកសារ (file) CSS ដោយប្រើក្បួន (Rule) @media

  /* សម្រាប់​ទូរស័ព្ទ​ដែល​មាន​ទំហំ​អេក្រង់ 480px ឬ​តូច​ជាង */

      @media (max-width: 480px) { ... }

      /* សម្រាប់​ Tablet */

      @media (max-width: 767px) { ... }

      /* សម្រាប់ tablet បញ្ឈរ​ទៅ​ផ្ដេក និង​កុំព្យូទ័រ(desktop) */

      @media (min-width: 768px) and (max-width: 979px) { ... }

      /* សម្រាប់ desktop ដែល​មាន​ទំហំ​អេក្រង់​ធំៗ */

      @media (min-width: 1200px) { ... }

២.ការបង្កើត Template
ខាងក្រោមនេះជា folders និង file ដែលបានបង្កើតក្នុង gallery មានឈ្មោះ project៖

– css សម្រាប់រក្សាទុកឯកសារ ប្រភេទ CSS
– images សម្រាប់រក្សាទុកឯកសាររូបភាព
– js សម្រាប់រក្សាឯកសារប្រភេទ JavaScript
– index.html
២.១ index.html

ខាងក្រោមនេះជាកូដសង្ខេបរបស់ index.html ដែលបង្កើតបានទំព័រខាងលើ។ សូមមើលកូដពេញដែលបានភ្ជាប់មកជាមួយមេរៀននេះ

<!DOCTYPE html>

<html>

    <head>

        <title>Essentials Gallery</title>

        <link rel="stylesheet" href="css/reset.css" />

        <link rel="stylesheet" href="css/style.css" />

    </head>

    <body>

        <section class="container">

            <!-- header -->

            <header id="head">

                <a href="#" class="logo"><h2>Essential Gallery</h2></a>

                <nav class="top-menu">

                    ...

                </nav>

            </header>

            <!-- main section -->

            <section class="row">

                <aside class="col_1">

                    ....

                </aside>

                <section class="col_2">

                    .....

                </section>

            </section>

            <!-- footer -->

            <footer id="footer">...</footer>

        </section>     

    </body>

</html>

កូដខាងលើខ្ញុំបានបញ្ចូល reset.css និង style.css
– reset.css ជា stylesheet សម្រាប់រៀបចំ default style របស់កម្មវិធីរុករក(Browsers)នីមួយៗ អោយក្លាយជាគំរូ style តែមួយដូចគ្នាគ្រប់កម្មវិធីរុករកទាំងអស់។ ព័ត៌មានលម្អិតសូមចូល http://goo.gl/b4goi។
– style.css នេះជាឯកសារ stylesheet សម្រាប់រៀបចំ Template របស់វិបសាយទាំងមូល ខ្ញុំនឹងពន្យល់លម្អិតខាងក្រោម៖
២.២ style.css
នៅក្នុង style នេះខ្ញុំបានបង្កើត media query ចំនួន៤ លក្ខខណ្ឌដើម្បីអោយ Template អាចបើកមើលតាមប្រភេទ ឧបករណ៍នីមួយៗ ដោយងាយស្រួល។
ក. @media (min-width: 980px)
នេះជាលក្ខខណ្ឌសម្រាប់ កុំព្យូទ័រ និង ឧបករណ៍ដែលមានទំហំអេក្រង់ធំជាង 980px និងជាលក្ខខណ្ឌទូទៅ។

ដោយកូដមានចំនួនច្រើនបន្ទាត់ ដូច្នេះខ្ញុំមិនបានបញ្ចូលនៅទីនេះទេ លោកអ្នកអាចរកបាននូវឧទាហរណ៍ដែលបានភ្ជាប់មកជាមួយមេរៀននេះ នៅក្នុង style.css។
ខ. @media (min-width: 768px) and (max-width: 979px)
លក្ខខណ្ឌនេះប្រើសម្រាប់ ឧបករណ៍ ដែលមានទំហំអេក្រង់នៅចន្លោះ 768px និង 979px ជាប្រភេទឧបករណ៍ Tablet ដូច iPad, Samsung Galaxy Tab និង Tablets ផ្សេងៗទៀត។ អ្នកនឹងឃើញរូបដូចខាងក្រោម។
ទម្រង់ Template ខាងក្រោមខ្ញុំបានបង្រួមប្រវែងវាអោយមកនៅត្រឹមតែ 724px ហើយបង្ហាញរូបភាពជាពីរជួរ ដែលទំហំ(thumbnail)របស់វាធំជាងរូបខាងលើ ហើយរក្សាទុកលក្ខណៈជាពីរ column template។

ខាងក្រោមនេះជា code របស់ @media (min-width: 768px) and (max-width: 979px) នេះជាកូដដែលខ្ញុំស្រង់យកតែចំណុចសំខាន់មកបង្ហាញសូមមើលកូដ ទាំងមូលក្នុង style.css នៅចំណុចនេះ៖

@media (min-width: 768px) and (max-width: 979px) {

  .container {

    width: 724px;

  }

  aside.col-1 {

    width: 180px;

    background: #ffffff;

    padding: 10px;

  }

  section.col-2 {

    width: 484px;

    margin-left: 20px;

    background: #ffffff;

    padding: 10px;

  }

 ...

}

}

គ. @media (max-width: 767px) and (min-width: 481px)
ចំណែកលក្ខខណ្ឌមួយនេះស្របជាមួយនឹងប្រភេទ ទូរស័ព្ទទំនើបៗដូចជា Samsung Galaxy SII-SIII, iPhone 4S-4GS និង ប្រភេទទូរស័ព្ទផ្សេងទៀត ដែលមានទំហំអេក្រង់ផ្តេកនៅចន្លោះ 767px និង 481px ។
ដោយសារតែទំហំអេក្រង់របស់ឧបករណ៍តូច ខ្ញុំបានបង្រួមទម្រង់មកត្រឹមតែមួយជួរ(one column layout) ដោយចែកជាបីផ្នែកសំខាន់ៗ
– Header
– Galleries
– Thumbnail
ទម្រង់ Template នេះគិតប្រវែងជាភាគរយ ដោយរក្សាចន្លោះទាំងសងខាង 20px ហើយរូបភាពបង្ហាញជាបីជួរ ហើយប្រវែងរបស់វារីករួមអាស្រ័យទៅនឹងអេក្រង់របស់ឧបករណ៍។ សូមមើលរូបខាងក្រោម

ខាងក្រោមនេះជាកូដសង្ខេបត្រង់ចំណុចលក្ខខណ្ឌ @media (max-width: 767px) and (min-width: 481px)៖

@media (max-width: 767px) and (min-width: 481px) {

  body {

    padding-right: 20px;

    padding-left: 20px;

  }

  .container {

    width: auto;

  }

  .row {

    width: auto;

  }

  aside.col-1 {

    width: auto;

    float: none;

    min-height: 0;

    padding: 10px;

  }

  section.col-2 {

    width: auto;

    float: none;

    margin-left: 0;

    margin-top: 20px;

    padding: 10px;

  }

     ...

}

ឃ. @media (max-width: 480px)
នេះជាលក្ខខណ្ឌសម្រាប់ប្រភេទទូរស័ព្ទដៃដែលមានទំហំអេក្រង់ ធំបំផុត 480px ដូច iPhone 3G និង ទូរស័ព្ទស៊េរីមុនៗ វារក្សាទម្រង់ប្រហែលនឹងចំណុច គ ដែរតែមានការផ្លាស់ប្ដូរមួយចំនួនដូចខាងក្រោម៖
– Logo Essentials Gallery នៅតែមួយជួរខាងលើបំផុត
– Top Menu បានបម្លែងរូបរាង និង នៅតែមួយជួរ
– Thumbnail បង្ហាញជាពីរជួរហើយប្រវែងរបស់វានឹងអាចរីករួមបាន

@media (max-width: 480px) {

  body {

    padding-right: 20px;

    padding-left: 20px;

  }

  .container {

    width: auto;

  }

  .row {

    width: auto;

  }

  header {

    background: none;

    padding: 0;

  }

  header .logo {

    font-size: 1.4em;

    position: relative;

    display: block;

    width: auto;

    margin-bottom: 10px;

  }

  header .top-menu {

    position: relative ;

  }

  header .top-menu ul {

    overflow: hidden;

    padding: 0;

    margin: 0;

    background: #CCC;

  }

  aside.col-1 {

    width: auto;

    float: none;

    min-height: 0;

    padding: 10px;

  }

  section.col-2 {

    width: auto;

    float: none;

    margin-left: 0;

    margin-top: 20px;

    padding: 10px;

  }

 ...

}

សូមថ្លែងអំណរគុណដល់មិត្តអ្នកអានទាំងអស់ ដែលបានតាមដានអានអត្ថបទ Responsive វិបសាយ និងសូមតាមដានរបៀបបញ្ចូល Templateក្នុង TYP03 នៅលេខក្រោយទៀត៕

អាយធីខ្មែរស៊ែរ