Modern HTML Features

HTML5 ဆိုတဲ့အမည်ကို လူအများသုံးနေကြသေးပေမယ့် အခုခေတ် HTML ကတော့ HTML Living Standard အနေနဲ့ ဆက်လက် update ဖြစ်နေပါတယ်။ Web page တွေကို layout ချရာမှာ အရင်က float တွေကို အသုံးပြုခဲ့ကြပေမယ့် အခုနောက်ပိုင်းမှာတော့ Flexbox နဲ့ Grid ကို အသုံးပြုပြီး ပိုမို လွယ်ကူ လျင်မြန်စွာ တည်ဆောက်လာကြပါတယ်။ ဒါ့အပြင် browser မှာ data သိမ်းဆည်းဖို့အတွက် Web Storage, user ရဲ့ တည်နေရာကို ရယူဖို့ Geolocation API, responsive images, dialog စတဲ့ element/API တွေလည်း အသုံးများလာပါတယ်။

Flexbox Layout

Flexbox (Flexible Box Layout) ဟာ one-dimensional layout system ဖြစ်ပါတယ်။ Row (သို့မဟုတ်) Column တစ်ခုတည်းအတွက် layout ချချင်တဲ့အခါမှာ အလွန် အသုံးဝင်ပါတယ်။ Element တွေကို အလယ်မှာ ထားချင်တာ၊ အညီအမျှ နေရာ ခွဲပေးချင်တာတွေအတွက် အရမ်း လွယ်ကူပါတယ်။

display: flex; လို့ ကြေညာလိုက်တာနဲ့ အဲဒီ container ထဲက child elements တွေဟာ flex item တွေ ဖြစ်သွားပါမယ်။

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Flexbox Example</title>
  <style>
    .container {
      display: flex;
      justify-content: center; /* အလျားလိုက် အလယ်ပို့မယ် */
      align-items: center; /* ဒေါင်လိုက် အလယ်ပို့မယ် */
      height: 200px;
      border: 1px solid gray;
    }
    .box {
      background-color: orange;
      padding: 20px;
      margin: 10px;
      color: white;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
  </div>
</body>
</html>

အထက်ပါ code မှာ justify-content: center ကြောင့် box လေးတွေဟာ အလျားလိုက် အလယ်ကို ရောက်နေမှာ ဖြစ်ပြီး align-items: center ကြောင့် ဒေါင်လိုက် အလယ်ကို ရောက်နေမှာ ဖြစ်ပါတယ်။

Figure 13-1

Figure 13-1

CSS Grid Layout

Flexbox က one-dimensional ဖြစ်ပြီး CSS Grid ကတော့ two-dimensional layout system ဖြစ်ပါတယ်။ Row တွေရော Column တွေရော ပါဝင်တဲ့ ရှုပ်ထွေးတဲ့ layout တွေကို တည်ဆောက်ဖို့အတွက် အကောင်းဆုံးပါပဲ။

display: grid; နဲ့ layout စဆောက်နိုင်ပြီး grid-template-columns နဲ့ column ဘယ်နှစ်ခု ထားမလဲဆိုတာ သတ်မှတ်နိုင်ပါတယ်။

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Grid Example</title>
  <style>
    .grid-container {
      display: grid;
      grid-template-columns: auto auto auto; /* Column 3 ခု */
      gap: 10px; /* Box တွေ ကြားက အကွာအဝေး */
      padding: 10px;
    }
    .grid-item {
      background-color: #2196F3;
      border: 1px solid rgba(0, 0, 0, 0.8);
      padding: 20px;
      font-size: 30px;
      text-align: center;
      color: white;
    }
  </style>
</head>
<body>
  <div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
  </div>
</body>
</html>

grid-template-columns: auto auto auto; လို့ ပေးထားတဲ့အတွက် browser က အလိုအလျောက် ညီတူညီမျှ column ၃ ခု ခွဲပေးသွားမှာ ဖြစ်ပါတယ်။

Figure 13-2

Figure 13-2

Web Storage API

အရင်တုန်းက browser မှာ data သိမ်းဖို့ cookies တွေကို သုံးခဲ့ကြပါတယ်။ HTML5 မှာတော့ localStorage နဲ့ sessionStorage ဆိုပြီး ပိုမို ကောင်းမွန်တဲ့ နည်းလမ်းတွေ ပါဝင်လာပါတယ်။

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Web Storage</title>
</head>
<body>
  <input type="text" id="username" placeholder="Enter Name">
  <button onclick="saveName()">Save</button>
  <button onclick="showName()">Show</button>
  <p id="display"></p>

  <script>
    function saveName() {
      var name = document.getElementById('username').value;
      localStorage.setItem('myname', name); // Data သိမ်းမယ်
      alert("Saved!");
    }

    function showName() {
      var storedName = localStorage.getItem('myname'); // Data ပြန်ယူမယ်
      if (storedName) {
        document.getElementById('display').innerText = "Hello " + storedName;
      } else {
        alert("No name saved!");
      }
    }
  </script>
</body>
</html>

ဒီ example မှာ Save နှိပ်လိုက်ရင် localStorage.setItem နဲ့ နာမည်ကို သိမ်းလိုက်ပါမယ်။ Browser ကို ပိတ်ပြီး ပြန်ဖွင့်ရင်တောင် Show ကို နှိပ်လိုက်ရင် သိမ်းထားတဲ့ နာမည်ကို ပြန်ပြပေးနိုင်တာ တွေ့ရပါလိမ့်မယ်။

Figure 13-3

Figure 13-3

Geolocation API

User ရဲ့ တည်နေရာ (Latitude, Longitude) ကို ရယူချင်ရင် Geolocation API ကို သုံးနိုင်ပါတယ်။ ဒီ feature ကို သုံးမယ်ဆိုရင် user ဆီက permission အရင် တောင်းပါလိမ့်မယ်။

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Geolocation</title>
</head>
<body>
  <button onclick="getLocation()">Get Location</button>
  <p id="locationDisplay"></p>

  <script>
    var x = document.getElementById("locationDisplay");

    function getLocation() {
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
      } else {
        x.innerHTML = "Geolocation is not supported by this browser.";
      }
    }

    function showPosition(position) {
      x.innerHTML = "Latitude: " + position.coords.latitude +
      "<br>Longitude: " + position.coords.longitude;
    }
  </script>
</body>
</html>

navigator.geolocation.getCurrentPosition ကို ခေါ်လိုက်ရင် browser က "Allow location access?" ဆိုပြီး မေးပါလိမ့်မယ်။ Allow ပေးလိုက်မှသာ Latitude နဲ့ Longitude ကို ပြပေးမှာ ဖြစ်ပါတယ်။

Figure 13-4

Figure 13-4

Responsive Images

Mobile, tablet, desktop စတဲ့ screen size မတူတဲ့ device တွေမှာ ပုံတစ်ပုံတည်းကို အမြဲတမ်း တင်ပေးရင် file size မလိုအပ်ဘဲ ကြီးသွားနိုင်ပါတယ်။ Modern HTML မှာ srcset, sizes, <picture> တို့ကို အသုံးပြုပြီး browser ကို သင့်တော်တဲ့ image ကို ရွေးခိုင်းနိုင်ပါတယ်။

<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
  sizes="(max-width: 600px) 400px, 800px"
  alt="Mountain at sunrise">

Format fallback လိုချင်ရင် <picture> ကို အသုံးပြုနိုင်ပါတယ်။

<picture>
  <source srcset="photo.avif" type="image/avif">
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="Mountain at sunrise">
</picture>

Dialog Element

Modal dialog တွေ ဖန်တီးရာမှာ <dialog> element ကို အသုံးပြုနိုင်ပါတယ်။ JavaScript နဲ့ showModal() ခေါ်လိုက်ရင် browser က modal behavior ကို built-in အနေနဲ့ ထိန်းပေးပါတယ်။

<button id="openDialog">Open</button>

<dialog id="welcomeDialog">
  <p>Welcome to modern HTML.</p>
  <button id="closeDialog">Close</button>
</dialog>

<script>
  const dialog = document.getElementById("welcomeDialog");

  document.getElementById("openDialog").addEventListener("click", function () {
    dialog.showModal();
  });

  document.getElementById("closeDialog").addEventListener("click", function () {
    dialog.close();
  });
</script>

Details and Summary

အသုံးပြုသူ click နှိပ်မှ ဖွင့်ပြချင်တဲ့ information တွေအတွက် <details> နဲ့ <summary> ကို အသုံးပြုနိုင်ပါတယ်။ JavaScript မလိုဘဲ browser က open/close behavior ကို ထိန်းပေးပါတယ်။

<details>
  <summary>More information</summary>
  <p>This content is visible after the user opens the details element.</p>
</details>

ဒီ Chapter 13 မှာတော့ modern HTML ရဲ့ မရှိမဖြစ် features တွေကို မိတ်ဆက်ပေးခဲ့ပါတယ်။ Layout တွေအတွက် Flexbox နဲ့ Grid ကို ကျွမ်းကျင်အောင် လေ့လာထားရင် responsive website တွေ တည်ဆောက်ရာမှာ အရမ်း အဆင်ပြေပါလိမ့်မယ်။ Images အတွက် srcset/picture, interaction အတွက် dialog/details, data storage အတွက် Web Storage တို့ကိုပါ သိထားရင် modern website တွေကို ပိုပြီး စနစ်တကျ တည်ဆောက်နိုင်ပါတယ်။