Category: CSS HTML

เนื้อหาเกี่ยวกับ CSS และ HTML

  • วิธีการใช้งาน css clamp()

    เมื่อเราพูดถึงการทำเว็บแบบ Responsive การใช้งาน clamp() เป็นเครื่องมือที่น่าสนใจในการจัดการขนาดตามขนาดของอุปกรณ์ที่แสดงผล แล้ว clamp() คืออะไร เราสามารถใช้งานมันได้อย่างไร

    เริ่มต้นการใช้งาน css clamp()

    ในการพัฒนาเว็บไซต์แบบ Responsive ที่ตอบสนองตามขนาดของหน้าจอ ตัว clamp() มีความสามารถในการกำหนดค่าที่ปรับเปลี่ยนโดยอยู่ระหว่างค่าต่ำสุด และค่าสูงสุด

    รูปแบบของ clamp() คือ

    property: clamp(min, val, max);
    • min : ค่าต่ำสุดที่คุณต้องการ
    • val : ค่าที่ปรับเปลี่ยน
    • max : ค่าสูงสุดที่คุณต้องการ

    โดย property ที่ใช้งาน clamp() เรามักเจอกับ width, height, margin, padding, border-width, font-size และ text-shadow

    ตัวอย่างการใช้งาน clamp()

    ตัวอย่างง่าย ๆ ในการใช้งานคือ การกำหนดขนาดตัวอักษรโดยปรับตามขนาดหน้าจอ

    font-size: clamp(2rem, 1.0625rem + 3.125vw, 3rem);

    โดยผมใช้งานเว็บ https://clamp.font-size.app/ ในการคำนวนค่าที่นำมาใช้ใน clamp() ซึ่งในตัวอย่างคือ

    • ถ้าหน้าจอไม่ถึง 480px จะมีขนาดตัวอักษรที่ 32px
    • ถ้าหน้าจอมากกว่า 992px จะมีขนาดตัวอักษรที่ 48px
    • หน้าจอขนาดระหว่าง 480px กับ 992px จะมีขนาดตัวอักษรที่ปรับตามขนาดหน้าจอ ( 1.0625rem + 3.125vw )

    Browser ที่รองรับ clamp()

    ในปัจจุบัน Browser ที่คนใช้งานกัน สนับสนุนการใช้งาน clamp() แล้ว แต่ถ้าหากยังต้องสนับสนุน IE กันอยู่ คงต้องมีการใช้ fallback style ไว้

    การใช้งาน clamp() เป็นทางเลือกที่ดีในการปรับเปลี่ยนขนาดตามขนาดของหน้าจอเพื่อตอบสนองการทำเว็บไซต์แบบ Responsive หากยังไม่เคยใช้งาน ถึงเวลาต้องเรียนรู้การใช้งาน clamp() ได้แล้วละครับ

  • ทำความเข้าใจ CSS Flexbox – 1

    ทำความเข้าใจ CSS Flexbox – 1

    แต่ก่อนเวลาเราต้องการจัด Layout ของเว็บไซต์ เราใช้ <table> ในการทำ หลังจากนั้นมีการพัฒนามาใช้งาน float หรือ position และในปัจจุบันที่เขียนบทความนี้อยู่ เรามี flex และ grid ที่ใช้ในการจัด Layout ของเว็บไซต์

    สิ่งที่ flex และ grid ดีกว่า <table>, float และ position ตรงที่สามารถจัดการการจัดเรียงเนื้อหา จัดเรียง element ได้ด้วย attribute ที่ใช้ร่วมกับ flex และ grid

    โดย Flexbox เป็นสิ่งที่มาช่วยในการจัด Layout ในมิติเดียว ( แนวตั้ง หรือแนวนอน ) ยกตัวอย่างให้เห็นภาพ คือเวลาทำเว็บไซต์แล้วอยากให้กล่องเนื้อหาเราอยู่ด้านซ้าย และกล่อง sidebar อยู่ด้านขวา

    เราสามารถใช้ CSS Flexbox ทำอะไรได้บ้าง

    ในการจัด Layout ด้วย CSS Flex นั้น สามารถตัดสินใจเพื่อจะใช้งานด้วยสิ่งต่าง ๆ เหล่านี้ได้

    • จัดรูปแบบการแสดงผลมิติเดียวในแนวตั้ง หรือแนวนอน ( a column or a row )
    • สนับสนุนการทำงานกับ writing mode ( อ่านเพื่อทำความเข้าใจเกี่ยวกับ writing mode : https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode )
    • สามารถจัดลำดับการแสดงผลได้ เช่น ในหน้าจอ tablet อยากให้เรียง block-2, block-1, block-3 แต่บนหน้าจอ desktop อยากให้เรียง block-3, block-2, block-1 ได้
    • ระยะห่างสำหรับ element ที่อยู่ภายใน สามารถยืดหยุ่นตาม element ที่ครอบคลุมไว้อยู่ได้
    • สามารถจัดตำแหน่งการแสดงผล element ด้านในได้ง่าย เช่น จัดให้ทุก element ด้านในให้อยู่กลาง element ที่ครอบคลุมอยู่
    • สามารถจัดการตำแหน่งการแสดงผล เฉพาะ element ด้านในที่เลือกได้

    วิธีการใช้งาน CSS Flexbox เบื้องต้น

    สำหรับค่ามาตรฐานของในการประกาศ display: flex; ให้กับ element นั้น คือ

    • element ด้านในแสดงผลเรียงในแนวนอน flex-direction: row;
    • element ด้านในเรียงเป็นแถวเดียว flex-wrap: noswap;
    • element ด้านใน ไม่ขยายเพื่อให้เต็ม element ที่ครอบคลุมอยู่ flex-grow: 0;
    • element ด้านในเรียงกันโดยเริ่มจากที่จุดเริ่มต้น justify-content: normal; และ align-items: normal;

    การควบคุมทิศทางของ element ด้านในด้วย flex-direction

    ถ้าเราไม่ได้กำหนด flex-direction ไว้ อย่างที่บอกไว้ด้านบนค่ามาตรฐานจะเป็น row โดยค่าต่าง ๆ ที่ใช้กับ flex-direction นั้น มีดังนี้

    • row แสดงผล element ด้านในเป็นแนวนอน
    • row-reverse แสดงผล element ด้านในเป็นแนวนอน โดยเริ่มจากจุดสุดท้ายของ element นี้
    • column แสดงผล element ด้านในเป็นแนวตั้ง
    • column-reverse แสดงผล element ด้านในเป็นแนวตั้ง โดยเริ่มจากจุดสุดท้ายของ element นี้

    สามารถทำความเข้าใจเพิ่มเติม โดยทดลองเปลี่ยนค่าในกล่อง dropdown ด้านล่าง

    สำหรับบทความนี้ ขอจบไว้ตรงนี้ก่อน แล้วเราจะมาต่อกันในบทความหน้า ที่จะมาอธิบายเกี่ยวกับ CSS Flexbox เพิ่มเติม

  • วิธีสร้าง accordion โดยไม่ต้องใช้ javascript

    วิธีสร้าง accordion โดยไม่ต้องใช้ javascript

    ในความคิดของหลาย ๆ คนคิดว่า ถ้าจะสร้าง accordion สำหรับใช้ในเว็บไซต์ เราต้องใช้ javascript ประกอบ แต่ที่จริงแล้ว ตัว html มี tag ที่สามารถใช้งานในลักษณะคล้ายกับ accordion ไว้ให้อยู่แล้ว tag นั้นก็คือ <details>

    โดย <details> นั้น จะใช้งานร่วมกับ <summary> และมีสถานะที่จะแสดงผลข้อมูล คือ open

    รูปแบบมาตรฐานของ <details> จะแสดงผลนำหน้าด้วยสามเหลี่ยมขนาดเล็ก และหมุนเป็นสามเหลี่ยมคว่ำ เพื่อแสดงสถานะการเปิด ปิด

    ส่วนข้อความหลังสามเหลี่ยมนั้น เป็นข้อความใน <summary>

    ตัวอย่างรูปแบบมาตรฐานของ <details>

    <details>
        <summary>Details</summary>
        Something small enough to escape casual notice.
    </details>

    ผลลัพธ์

    Details Something small enough to escape casual notice.

    ซึ่งถ้าเราต้องการให้มีสถานะเปิดแสดงผลตั้งแต่แรก ให้ใส่ open ลงไปใน <details> เลย

    <details open>
        <summary>Details</summary>
        Something small enough to escape casual notice.
    </details>

    ผลลัพธ์

    Details Something small enough to escape casual notice.

    และเรายังสามารถเขียน css เพื่อมาตกแต่งหน้าตาของมันให้ดูสวยงามขึ้นได้อีกด้วย

    ตัวอย่าง accordion โดยไม่ต้องใช้ javascript

    เข้าใจได้ว่า สามารถใช้งานในระดับพื้นฐานได้ละ แต่ถ้าต้องการจะประยุกต์ใช้งานอะไรเพิ่มเติม คงต้องให้ javascript มาช่วยเหลืออยู่ดี

  • อะไรคือ Empty Element

    อะไรคือ Empty Element

    สำหรับคำถามว่า อะไรคือ Empty Element เราสามารถบอกได้คร่าว ๆ คือ element ที่จะไม่มีอะไรอยู่ด้านใน

    ตัวอย่าง element ที่มีอะไรอยู่ด้านใน เช่น

    <div>div มีอะไรอยู่ด้านใน</div>
    <p>p มีอะไรอยู่ด้านใน</p>
    <a href="#">a มีอะไรอยู่ด้านใน</a>

    แล้วอะไรเป็น empty element ยกตัวอย่างง่ายที่สุด ที่คิดว่าทุกคนเคยใช้งานมันอยู่แล้วคือ

    <img src="pic.jpg" alt="รูปภาพ">

    ใช่แล้ว <img> นั้นเป็น empty element และที่สำคัญ empty element นั้น เราจะไม่มี closing tag

    <img src="pic.jpg" alt="รูปภาพ"></img> // แบบนี้ผิด ห้ามใช้

    แล้วมี element ไหนที่เป็น empty element บ้างละ ตามรายการนี้เลยครับ

    • <area>
    • <base>
    • <br>
    • <col>
    • <embed>
    • <hr>
    • <img>
    • <input>
    • <link>
    • <meta>
    • <param>
    • <source>
    • <track>
    • <wbr>

    ส่วนแต่ละ element ใช้งานยังไง ลองค้น ๆ ดูในเว็บเราดูละกัน น่าจะมีเขียนถึงอยู่บ้างละ

  • ข้อแตกต่างของ target แต่ละแบบ

    ข้อแตกต่างของ target แต่ละแบบ

    ข้อแตกต่างของ target แต่ละแบบนั้น ถ้าเราอ่านเพียงแค่คำอธิบาย โดย

    • _self แสดงผลในหน้าปัจจุบัน ปรกติทุก element จะมี target="_self" เป็นมาตรฐาน
    • _parent แสดงผลในระดับบนถัดไปของหน้าปัจจุบัน
    • _top แสดงผลในระดับบนสุดของหน้าปัจจุบัน
    • _blank แสดงผลในหน้าใหม่

    ก็ยังไม่ค่อยเข้าใจแน่ชัดเท่าไหร่ ผมเลยลองทำมาเป็นตัวอย่างให้ดูว่า ข้อแตกต่างของ target แต่ละแบบนั้น มันมีอะไรที่ต่างกันบ้าง โดยที่ผมสร้างไฟล์ขึ้นมา 4 ไฟล์ ประกอบด้วย

    • index.html
    • iframe-1.html
    • iframe-2.html
    • iframe-3.html

    โดยที่ index.html นั้น จะมี <body> ดังนี้

    <ul>
      <li>
        <a href="https://rabbitinblack.com" target="_self">_self Click</a>
      </li>
      <li>
        <a href="https://rabbitinblack.com" target="_parent">_parent Click</a>
      </li>
      <li>
        <a href="https://rabbitinblack.com" target="_top">_top Click</a>
      </li>
      <li>
        <a href="https://rabbitinblack.com" target="_blank">_blank Click</a>
      </li>
    </ul>

    หลังจากนั้นใน iframe-1.html จะมี iframe ที่เรียกใช้ index.html อยู่ ส่วน iframe-2.html จะเรียก iframe ที่มี iframe-1.html อยู่

    และ iframe-3.html นั้นก็จะเรียก iframe ที่มี iframe-2.html อยู่ ซึ่งผลลัพธ์จะออกมาประมาณนี้

    ข้อแตกต่างของ target แต่ละแบบ
    โดยผมใส่กรอบสีไว้ ให้แยกดูง่ายขึ้น

    จากรูปนั้น ถ้าเราคลิกที่ _self Click ตัว iframe ใน Frame 1 จะเปลี่ยนเป็น URL ที่เรากำหนดไว้ในลิงก์

    ถ้าเราคลิกที่ _parent Click ตัว iframe ใน Frame 2 จะเปลี่ยนเป็น URL ที่เรากำหนดไว้ในลิงก์

    ถ้าเราคลิกที่ _top Click ตัวหน้าเพจนั้น จะเปลี่ยนเป็น URL ที่เรากำหนดไว้ในลิงก์

    และถ้าเราคลิกที่ _blank Click จะมีการเปิดหน้าใหม่ตาม URL ที่เรากำหนดไว้ในลิงก์

    หรือสามารถเปิดดูตัวอย่าง และลองคลิกลิงก์ได้เองที่

    ตัวอย่างข้อแตกต่างของ target แต่ละแบบ

    https://rabbitinblack.com/html/target/iframe-3.html

    หวังว่าทุกคนจะเข้าใจวิธีการใช้งาน target ได้มากขึ้นนะครับ

  • วิธีไล่สีตัวอักษรด้วย CSS

    วิธีไล่สีตัวอักษรด้วย CSS

    ในการสร้างคอนเท้นต์ในเว็บไซต์นั้น บางทีเราต้องการไล่สีให้ตัวอักษรเพื่อความสวยงาม โดยตัวเอกของเราในครั้งนี้จะเป็น

    background-clip: text;
    -webkit-background-clip: text;

    และสิ่งที่เราใช้ประกอบด้วยคือ การใช้พื้นหลังแบบไล่สี รวมถึงให้ตัวอักษรเราโปร่งใส

    background: linear-gradient(to right, #40e0d0, #ff8c00, #ff0080);
    color: transparent;

    ตัวอย่างการไล่สีตัวอักษรด้วย CSS